<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Outward Gate Pass - {{ $outwardGatePass->gate_pass_number }}</title>
    <style>
        body {
            font-family: 'DejaVu Sans', 'Arial', sans-serif;
            font-size: 12px;
            line-height: 1.4;
            color: #333;
            margin: 0;
            padding: 20mm;
        }

        .gate-pass-container {
            max-width: 180mm;
            margin: 0 auto;
        }

        .header-section {
            text-align: center;
            border-bottom: 2px solid #333;
            padding-bottom: 15px;
            margin-bottom: 20px;
        }

        .header-section h2 {
            margin: 0;
            color: #333;
            font-size: 20px;
            font-weight: bold;
        }

        .gate-pass-info {
            display: table;
            width: 100%;
            margin-bottom: 20px;
        }

        .info-section {
            display: table-cell;
            vertical-align: top;
            padding-right: 20px;
        }

        .section-title {
            font-weight: bold;
            margin-bottom: 8px;
            border-bottom: 1px solid #ddd;
            padding-bottom: 3px;
        }

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

        .info-table td {
            padding: 3px 0;
            font-size: 11px;
        }

        .info-table .label {
            font-weight: bold;
            width: 120px;
        }

        .status-badge {
            display: inline-block;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 10px;
            font-weight: bold;
            color: white;
        }

        .status-draft { background-color: #6c757d; }
        .status-issued { background-color: #0dcaf0; }
        .status-completed { background-color: #198754; }

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

        .items-table {
            width: 100%;
            border-collapse: collapse;
            border: 1px solid #ddd;
            font-size: 10px;
        }

        .items-table th {
            background-color: #f8f9fa;
            border: 1px solid #ddd;
            padding: 6px;
            text-align: left;
            font-weight: bold;
        }

        .items-table td {
            border: 1px solid #ddd;
            padding: 4px 6px;
        }

        .items-table tbody tr:nth-child(even) {
            background-color: #f8f9fa;
        }

        .footer-section {
            margin-top: 30px;
            padding-top: 15px;
            border-top: 2px solid #333;
            text-align: center;
            color: #666;
            font-size: 10px;
        }

        .signatures {
            display: table;
            width: 100%;
            margin-top: 30px;
        }

        .signature-block {
            display: table-cell;
            text-align: center;
            width: 33%;
            vertical-align: top;
        }

        .signature-line {
            border-bottom: 1px solid #333;
            width: 100px;
            margin: 0 auto 5px auto;
        }
    </style>
</head>
<body>
    <div class="gate-pass-container">
        @include('components.pdf.header', ['title' => 'Outward Gate Pass - ' . $outwardGatePass->gate_pass_number])

        <div class="header-section">
            <h2>OUTWARD GATE PASS</h2>
            <p><strong>Gate Pass No:</strong> {{ $outwardGatePass->gate_pass_number }}</p>
            <p><strong>Date:</strong> {{ $outwardGatePass->created_at->format('d/m/Y') }}</p>
        </div>

        <div class="gate-pass-info">
            <div class="info-section">
                <div class="section-title">Gate Pass Details</div>
                <table class="info-table">
                    <tr>
                        <td class="label">Gate Pass #:</td>
                        <td>{{ $outwardGatePass->gate_pass_number }}</td>
                    </tr>
                    <tr>
                        <td class="label">Status:</td>
                        <td>
                            <span class="status-badge status-{{ $outwardGatePass->status }}">
                                {{ ucfirst($outwardGatePass->status) }}
                            </span>
                        </td>
                    </tr>
                    @if($outwardGatePass->issued_at)
                    <tr>
                        <td class="label">Issued At:</td>
                        <td>{{ $outwardGatePass->issued_at->format('d/m/Y H:i') }}</td>
                    </tr>
                    <tr>
                        <td class="label">Issued By:</td>
                        <td>{{ $outwardGatePass->issuedBy->name ?? 'N/A' }}</td>
                    </tr>
                    @endif
                    @if($outwardGatePass->completed_at)
                    <tr>
                        <td class="label">Completed At:</td>
                        <td>{{ $outwardGatePass->completed_at->format('d/m/Y H:i') }}</td>
                    </tr>
                    <tr>
                        <td class="label">Completed By:</td>
                        <td>{{ $outwardGatePass->completedBy->name ?? 'N/A' }}</td>
                    </tr>
                    @endif
                    <tr>
                        <td class="label">Created:</td>
                        <td>{{ $outwardGatePass->created_at->format('d/m/Y H:i') }}</td>
                    </tr>
                </table>
            </div>

            <div class="info-section">
                <div class="section-title">Invoice & Customer</div>
                <table class="info-table">
                    <tr>
                        <td class="label">Invoice #:</td>
                        <td>{{ $outwardGatePass->factoryInvoice ? $outwardGatePass->factoryInvoice->invoice_number : 'Multiple Invoices' }}</td>
                    </tr>
                    <tr>
                        <td class="label">Customer:</td>
                        <td>{{ $outwardGatePass->factoryInvoice ? ($outwardGatePass->factoryInvoice->customer->name ?? 'N/A') : ($outwardGatePass->customer->name ?? 'N/A') }}</td>
                    </tr>
                    <tr>
                        <td class="label">Invoice Date:</td>
                        <td>{{ $outwardGatePass->factoryInvoice ? $outwardGatePass->factoryInvoice->invoice_date->format('d/m/Y') : 'N/A' }}</td>
                    </tr>
                </table>
            </div>

            <div class="info-section">
                <div class="section-title">Vehicle & Personnel</div>
                <table class="info-table">
                    <tr>
                        <td class="label">Vehicle No:</td>
                        <td>{{ $outwardGatePass->vehicle_no ?? 'N/A' }}</td>
                    </tr>
                    <tr>
                        <td class="label">Driver Name:</td>
                        <td>{{ $outwardGatePass->driver_name ?? 'N/A' }}</td>
                    </tr>
                    @if($outwardGatePass->other_persons)
                    <tr>
                        <td class="label">Other Persons:</td>
                        <td>{{ $outwardGatePass->other_persons }}</td>
                    </tr>
                    @endif
                </table>
            </div>
        </div>

        <div class="items-section">
            <div class="section-title">Items for Dispatch</div>

            @foreach($itemsGroupedByWarehouse as $warehouseName => $warehouseData)
            <div class="warehouse-section" style="margin-bottom: 20px; border: 1px solid #ddd; padding: 10px;">
                <div class="warehouse-header" style="background-color: #f8f9fa; padding: 8px; margin-bottom: 10px; border-bottom: 2px solid #333;">
                    <strong>Warehouse: {{ $warehouseName }} ({{ $warehouseData['warehouse_code'] }})</strong>
                </div>

                <table class="items-table" style="width: 100%; border-collapse: collapse; border: 1px solid #ddd; font-size: 10px;">
                    <thead>
                        <tr>
                            <th style="background-color: #f8f9fa; border: 1px solid #ddd; padding: 6px; text-align: left; font-weight: bold;">Item Name</th>
                            <th style="background-color: #f8f9fa; border: 1px solid #ddd; padding: 6px; text-align: left; font-weight: bold;">SKU/Code</th>
                            <th style="background-color: #f8f9fa; border: 1px solid #ddd; padding: 6px; text-align: left; font-weight: bold;">Quantity</th>
                            <th style="background-color: #f8f9fa; border: 1px solid #ddd; padding: 6px; text-align: left; font-weight: bold;">Unit</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($warehouseData['items'] as $item)
                        <tr>
                            <td style="border: 1px solid #ddd; padding: 4px 6px;">{{ $item->item->name ?? 'Unknown Item' }}</td>
                            <td style="border: 1px solid #ddd; padding: 4px 6px;">{{ $item->item->sku ?? 'N/A' }}</td>
                            <td style="border: 1px solid #ddd; padding: 4px 6px;">{{ number_format($item->quantity, 2) }}</td>
                            <td style="border: 1px solid #ddd; padding: 4px 6px;">{{ $item->item->uom->name ?? 'N/A' }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                    <tfoot>
                        <tr style="background-color: #f8f9fa;">
                            <td colspan="2" style="border: 1px solid #ddd; padding: 6px; font-weight: bold;">Warehouse Total: {{ $warehouseData['items']->count() }} items</td>
                            <td style="border: 1px solid #ddd; padding: 6px; font-weight: bold;">{{ number_format($warehouseData['items']->sum('quantity'), 2) }}</td>
                            <td style="border: 1px solid #ddd; padding: 6px;"></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            @endforeach

            <div style="margin-top: 20px; padding: 10px; background-color: #f8f9fa; border: 1px solid #ddd;">
                <strong>Grand Total: {{ $outwardGatePass->items->count() }} items, Quantity: {{ number_format($outwardGatePass->total_items, 2) }}</strong>
            </div>
        </div>

        @if($outwardGatePass->remarks)
        <div class="items-section">
            <div class="section-title">Remarks</div>
            <p style="margin: 0; padding: 10px; background-color: #f8f9fa; border-radius: 4px;">{{ $outwardGatePass->remarks }}</p>
        </div>
        @endif

        <div class="signatures">
            <div class="signature-block">
                <div class="signature-line"></div>
                <p><strong>Issued By</strong></p>
                <p>{{ $outwardGatePass->issuedBy->name ?? '' }}</p>
            </div>
            <div class="signature-block">
                <div class="signature-line"></div>
                <p><strong>Driver</strong></p>
                <p>{{ $outwardGatePass->driver_name ?? '' }}</p>
            </div>
            <div class="signature-block">
                <div class="signature-line"></div>
                <p><strong>Security/Guard</strong></p>
            </div>
        </div>

        <div class="footer-section">
            <p>This is a computer-generated document. No signature required.</p>
            <p>© {{ date('Y') }} Habib Cables - Outward Gate Pass System</p>
        </div>

        @include('components.pdf.footer')
    </div>
</body>
</html>
