<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Material Request - {{ $igRequest->request_number }}</title>
    <style>
        @media print {
            body { margin: 0; }
            .no-print { display: none !important; }
            @page { margin: 15mm; }
        }

        body {
            font-family: Arial, sans-serif;
            font-size: 12px;
            line-height: 1.4;
            color: #000;
            margin: 20px;
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
        }

        .logo-container {
            flex-shrink: 0;
        }

        .logo-container img {
            height: 80px;
            width: auto;
        }

        .company-info {
            flex: 1;
            text-align: center;
        }

        .company-name {
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 2px;
            text-transform: uppercase;
        }

        .company-address {
            font-size: 10px;
            margin-bottom: 1px;
        }

        .document-title {
            font-size: 14px;
            font-weight: bold;
            margin: 20px 0;
            text-transform: uppercase;
            text-align: center;
            background-color: #000;
            color: #fff;
            padding: 10px;
        }

        .info-section {
            margin-bottom: 20px;
        }

        .info-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }

        .info-table td {
            padding: 5px 10px;
            font-size: 12px;
            vertical-align: top;
        }

        .info-table .label {
            font-weight: bold;
            width: 140px;
            white-space: nowrap;
        }

        .items-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
            font-size: 11px;
        }

        .items-table th,
        .items-table td {
            border: 1px solid #000;
            padding: 5px 8px;
            text-align: left;
        }

        .items-table th {
            font-weight: bold;
            background-color: #f0f0f0;
        }

        .items-table td.text-center {
            text-align: center;
        }

        .items-table td.text-right {
            text-align: right;
        }

        .signature-section {
            margin-top: 50px;
            page-break-inside: avoid;
        }

        .signature-table {
            width: 100%;
            border-collapse: collapse;
        }

        .signature-table td {
            width: 25%;
            text-align: center;
            padding: 10px;
            vertical-align: top;
        }

        .signature-line {
            border-top: 1px solid #000;
            margin-top: 50px;
            padding-top: 5px;
            font-weight: bold;
            font-size: 11px;
        }

        .signature-name {
            font-size: 10px;
            color: #555;
            margin-top: 3px;
        }

        .signature-date {
            font-size: 10px;
            color: #555;
            margin-top: 2px;
        }

        .status-badge {
            display: inline-block;
            padding: 3px 10px;
            font-size: 11px;
            font-weight: bold;
            border: 1px solid #000;
            text-transform: uppercase;
        }

        .footer {
            margin-top: 30px;
            text-align: center;
            font-size: 10px;
            color: #666;
        }

        .print-btn {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            border-radius: 4px;
            margin-bottom: 20px;
            font-size: 14px;
        }

        .print-btn:hover {
            background-color: #0056b3;
        }

        .close-btn {
            background-color: #6c757d;
            color: white;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            border-radius: 4px;
            margin-bottom: 20px;
            margin-left: 10px;
            font-size: 14px;
        }

        .close-btn:hover {
            background-color: #545b69;
        }

        .notes-section {
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 20px;
            font-size: 11px;
        }

        .notes-section .label {
            font-weight: bold;
            margin-bottom: 5px;
        }
    </style>
</head>
<body>
    <!-- Print Controls -->
    <div class="no-print" style="margin-bottom: 20px;">
        <button onclick="window.print()" class="print-btn">Print</button>
        <button onclick="window.close()" class="close-btn">Close</button>
        <a href="{{ route('warehouse.indirect-goods.requests.show', $igRequest->id) }}" class="close-btn" style="text-decoration: none; display: inline-block; text-align: center;">Back to Details</a>
    </div>

    <!-- Header -->
    <div class="header">
        <div class="logo-container">
            <img src="{{ asset('images/site_logo.png') }}" alt="Company Logo">
        </div>
        <div class="company-info">
            <div class="company-name">ISAM KABBANI & PARTNERS FOR CONSTRUCTION & MAINT. CO. ( L.L.C )</div>
            <div class="company-address">Dubai: Dubai Industrial City, Jebel Ali Tel# 04 818 1900; Fax# 04 429 7031</div>
            <div class="company-address">E-mail : dubai@kcgemirates.ae; abudhabi@kcgemirates.ae   Website : www.ikkgroup.com</div>
        </div>
    </div>

    <!-- Document Title -->
    <div class="document-title">INDIRECT GOODS - MATERIAL REQUEST</div>

    <!-- Request Information -->
    <div class="info-section">
        <table class="info-table">
            <tr>
                <td class="label">Request Number:</td>
                <td>{{ $igRequest->request_number }}</td>
                <td class="label">Status:</td>
                <td>
                    <span class="status-badge">{{ strtoupper(str_replace('_', ' ', $igRequest->status)) }}</span>
                </td>
            </tr>
            <tr>
                <td class="label">Request Date:</td>
                <td>{{ $igRequest->request_date ? $igRequest->request_date->format('d/m/Y') : '-' }}</td>
                <td class="label">Receiver:</td>
                <td>{{ $igRequest->receiver_name ?: '-' }}</td>
            </tr>
            <tr>
                <td class="label">Project:</td>
                <td>
                    @if($igRequest->project)
                        {{ $igRequest->project->project_number }} - {{ $igRequest->project->project_name }}
                    @else
                        -
                    @endif
                </td>
                <td class="label">Division:</td>
                <td>{{ $igRequest->division ? $igRequest->division->division_name : '-' }}</td>
            </tr>
            <tr>
                <td class="label">Requested By:</td>
                <td>{{ $igRequest->requester ? $igRequest->requester->name : '-' }}</td>
                <td class="label">Created:</td>
                <td>{{ $igRequest->created_at->format('d/m/Y H:i') }}</td>
            </tr>
        </table>
    </div>

    @if($igRequest->notes)
    <div class="notes-section">
        <div class="label">Notes:</div>
        <div>{{ $igRequest->notes }}</div>
    </div>
    @endif

    <!-- Items Table -->
    <table class="items-table">
        <thead>
            <tr>
                <th style="width: 5%;">Sr.</th>
                <th style="width: 12%;">IG Code</th>
                <th style="width: 28%;">Description</th>
                <th style="width: 8%;">Unit</th>
                <th style="width: 10%;">Qty Requested</th>
                <th style="width: 10%;">Qty Released</th>
                <th style="width: 10%;">Balance</th>
                <th style="width: 8%;">Unit Price</th>
                <th style="width: 9%;">Total</th>
            </tr>
        </thead>
        <tbody>
            @forelse($igRequest->items as $index => $item)
            <tr>
                <td class="text-center">{{ $index + 1 }}</td>
                <td>{{ $item->indirectGood ? $item->indirectGood->ig_code : 'N/A' }}</td>
                <td>{{ $item->indirectGood ? $item->indirectGood->ig_description : 'Unknown' }}</td>
                <td class="text-center">{{ $item->indirectGood ? strtoupper($item->indirectGood->unit_of_measure ?? 'PCS') : '-' }}</td>
                <td class="text-center">{{ number_format($item->quantity_requested, 2) }}</td>
                <td class="text-center">{{ number_format($item->quantity_released, 2) }}</td>
                <td class="text-center">{{ number_format($item->quantity_balance, 2) }}</td>
                <td class="text-right">{{ $item->unit_price > 0 ? number_format($item->unit_price, 2) : '-' }}</td>
                <td class="text-right">{{ $item->total_price > 0 ? number_format($item->total_price, 2) : '-' }}</td>
            </tr>
            @empty
            <tr>
                <td colspan="9" class="text-center">No items found</td>
            </tr>
            @endforelse
        </tbody>
        @if($igRequest->items->count() > 0)
        <tfoot>
            <tr style="font-weight: bold;">
                <td colspan="4" class="text-right">TOTALS:</td>
                <td class="text-center">{{ number_format($igRequest->items->sum('quantity_requested'), 2) }}</td>
                <td class="text-center">{{ number_format($igRequest->items->sum('quantity_released'), 2) }}</td>
                <td class="text-center">{{ number_format($igRequest->items->sum('quantity_balance'), 2) }}</td>
                <td></td>
                <td class="text-right">{{ $igRequest->items->sum('total_price') > 0 ? 'AED ' . number_format($igRequest->items->sum('total_price'), 2) : '-' }}</td>
            </tr>
        </tfoot>
        @endif
    </table>

    @if($igRequest->status === 'rejected' && $igRequest->rejection_reason)
    <div class="notes-section" style="border-color: #dc3545;">
        <div class="label" style="color: #dc3545;">Rejection Reason:</div>
        <div>{{ $igRequest->rejection_reason }}</div>
    </div>
    @endif

    <!-- Signature Section -->
    <div class="signature-section">
        <table class="signature-table">
            <tr>
                <td>
                    <div class="signature-line">Requested By</div>
                    @if($igRequest->requester)
                        <div class="signature-name">{{ $igRequest->requester->name }}</div>
                        <div class="signature-date">{{ $igRequest->created_at->format('d/m/Y') }}</div>
                    @endif
                </td>
                <td>
                    <div class="signature-line">Approved By</div>
                    @if($igRequest->approvedBy)
                        <div class="signature-name">{{ $igRequest->approvedBy->name }}</div>
                        <div class="signature-date">{{ $igRequest->approved_at ? $igRequest->approved_at->format('d/m/Y') : '' }}</div>
                    @endif
                </td>
                <td>
                    <div class="signature-line">Issued By</div>
                    @if($igRequest->issuedBy)
                        <div class="signature-name">{{ $igRequest->issuedBy->name }}</div>
                        <div class="signature-date">{{ $igRequest->issued_at ? $igRequest->issued_at->format('d/m/Y') : '' }}</div>
                    @endif
                </td>
                <td>
                    <div class="signature-line">Received By</div>
                    @if($igRequest->receiver_name)
                        <div class="signature-name">{{ $igRequest->receiver_name }}</div>
                    @endif
                </td>
            </tr>
        </table>
    </div>

    <!-- Footer -->
    <div class="footer">
        <p>Generated on {{ now()->format('d/m/Y H:i') }} | {{ $igRequest->request_number }}</p>
    </div>

    <script>
        window.addEventListener('load', function() {
            setTimeout(function() {
                if (window.opener) {
                    window.print();
                }
            }, 500);
        });

        window.addEventListener('afterprint', function() {
            if (window.opener) {
                setTimeout(function() {
                    window.close();
                }, 500);
            }
        });
    </script>
</body>
</html>
