<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Delivery Receipt - {{ $booking->cntr_no }}</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu:wght@400;700&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

        body {
            font-family: 'Inter', sans-serif;
            font-size: 11px;
            color: #1f2937;
            margin: 0;
            padding: 0;
            background: #fff;
            line-height: 1.4;
        }

        .urdu-font {
            font-family: 'Noto Nastaliq Urdu', serif;
            direction: rtl;
        }

        .container {
            width: 210mm;
            margin: 0 auto;
            padding: 10mm;
            box-sizing: border-box;
        }

        /* Colorful Header */
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
            color: white;
            padding: 25px 30px;
            border-radius: 12px;
            margin-bottom: 25px;
            box-shadow: 0 10px 25px rgba(30, 58, 138, 0.2);
        }

        .company-info h1 {
            color: white;
            font-size: 26px;
            font-weight: 700;
            margin: 0 0 8px 0;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .company-details {
            color: rgba(255, 255, 255, 0.9);
            font-size: 11px;
            line-height: 1.5;
        }

        .qr-section {
            text-align: center;
            background: rgba(255, 255, 255, 0.15);
            padding: 15px;
            border-radius: 8px;
            backdrop-filter: blur(10px);
        }

        .invoice-meta {
            text-align: right;
        }

        .invoice-title {
            font-size: 28px;
            font-weight: 800;
            color: rgba(255, 255, 255, 0.95);
            text-transform: uppercase;
            letter-spacing: 2px;
            line-height: 1;
            margin-bottom: 15px;
        }

        .meta-grid {
            display: grid;
            grid-template-columns: auto auto;
            gap: 8px 20px;
            text-align: right;
        }

        .meta-label {
            color: rgba(255, 255, 255, 0.8);
            font-weight: 500;
        }

        .meta-value {
            font-weight: 600;
            color: white;
        }

        /* Colorful Office Grid */
        .office-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            margin-bottom: 25px;
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            border-radius: 12px;
            padding: 20px;
            border: 1px solid #e2e8f0;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

        .office-box {
            text-align: center;
            padding: 15px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            transition: transform 0.2s ease;
        }
        
        .office-box:hover {
            transform: translateY(-2px);
        }
        
        .office-box:not(:last-child) {
            border-right: 1px solid #e2e8f0;
        }

        .office-title {
            font-weight: 700;
            color: #1e3a8a;
            margin-bottom: 10px;
            text-transform: uppercase;
            font-size: 11px;
            letter-spacing: 0.5px;
            background: linear-gradient(90deg, #1e3a8a, #3b82f6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .office-content {
            color: #475569;
            font-size: 10px;
            line-height: 1.4;
        }

        /* Client & Shipment Info */
        .info-section {
            display: flex;
            justify-content: space-between;
            margin-bottom: 25px;
            gap: 30px;
        }

        .info-col {
            flex: 1;
        }

        .info-header {
            font-size: 11px;
            font-weight: 700;
            color: #9ca3af;
            text-transform: uppercase;
            margin-bottom: 10px;
            letter-spacing: 0.5px;
            border-bottom: 1px solid #e5e7eb;
            padding-bottom: 5px;
        }

        .info-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 6px;
        }

        .info-label {
            color: #6b7280;
            font-weight: 500;
            width: 100px;
        }

        .info-value {
            flex: 1;
            font-weight: 600;
            color: #111827;
            text-align: right;
        }

        /* Colorful Table */
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 25px;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

        th {
            background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
            color: white;
            font-weight: 600;
            text-transform: uppercase;
            font-size: 10px;
            padding: 12px;
            text-align: center;
            border-bottom: 2px solid #1e40af;
        }
        
        th:first-child { text-align: left; padding-left: 15px; border-top-left-radius: 0; }
        th:last-child { text-align: right; padding-right: 15px; border-top-right-radius: 0; }

        td {
            padding: 10px;
            text-align: center;
            border-bottom: 1px solid #e2e8f0;
            color: #475569;
            font-size: 11px;
        }

        td:first-child { text-align: left; padding-left: 15px; font-weight: 500; color: #1e293b; }
        td:last-child { text-align: right; padding-right: 15px; font-weight: 600; }

        .total-row td {
            background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
            font-weight: 700;
            color: #1e293b;
            border-top: 2px solid #cbd5e1;
            border-bottom: none;
        }

        /* Colorful Summary Footer */
        .footer-summary {
            display: flex;
            justify-content: flex-end;
            margin-bottom: 30px;
        }

        .summary-box {
            width: 280px;
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            border-radius: 12px;
            padding: 20px;
            border: 1px solid #cbd5e1;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

        .summary-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            padding: 4px 0;
        }
        
        .summary-row.total {
            border-top: 2px solid #3b82f6;
            padding-top: 12px;
            margin-top: 12px;
            margin-bottom: 0;
            font-size: 15px;
            font-weight: 700;
        }

        .summary-label { color: #475569; font-weight: 500; }
        .summary-value { font-weight: 600; color: #1e293b; }
        
        .summary-row.total .summary-value { color: #1e3a8a; font-size: 16px; }

        /* Dates & Signature */
        .dates-sig {
            display: flex;
            justify-content: space-between;
            margin-top: 40px;
            border-top: 1px solid #e5e7eb;
            padding-top: 20px;
        }

        .date-box {
            font-size: 10px;
            color: #6b7280;
        }
        
        .date-box span {
            display: block;
            margin-bottom: 2px;
        }
        
        .date-val {
            font-weight: 600;
            color: #111827;
            font-size: 11px;
        }

        /* Colorful Terms */
        .terms {
            margin-top: 30px;
            padding: 20px;
            background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
            border: 1px solid #fca5a5;
            border-radius: 8px;
            text-align: right;
            font-size: 9px;
            line-height: 1.6;
            color: #7f1d1d;
            direction: rtl;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

        @media print {
            body { -webkit-print-color-adjust: exact; }
            .no-print { display: none; }
            .container { width: 100%; margin: 0; padding: 0; }
            .office-grid, .summary-box, th, .total-row td, .terms { background-color: #f9fafb !important; }
        }
    </style>
</head>
<body>
    <div class="no-print" style="position: fixed; top: 20px; right: 20px; display: flex; gap: 10px;">
        <button onclick="window.print()" style="padding: 12px 24px; background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); color: #fff; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; box-shadow: 0 4px 6px -1px rgba(30, 58, 138, 0.3); transition: all 0.3s ease;">
            Print Receipt
        </button>
    </div>

    <div class="container">
        <!-- Header -->
        <div class="header">
            <div class="company-info">
                <h1>{{ \App\Models\Setting::get('company_name', 'BAKHT RAWAN TRADING CO.') }}</h1>
                <div class="company-details">
                    @if(\App\Models\Setting::get('company_address'))
                        <div>{{ \App\Models\Setting::get('company_address') }}</div>
                    @endif
                    @if(\App\Models\Setting::get('company_phone'))
                        <div>Phone: {{ \App\Models\Setting::get('company_phone') }}</div>
                    @endif
                    <div>Email: {{ \App\Models\Setting::get('company_email', 'fazeer0301@gmail.com') }}</div>
                    <div>Tracking: {{ \App\Models\Setting::get('company_website', 'www.bakhttrd.com') }}</div>
                </div>
            </div>
            
            <div class="qr-section">
                <!-- SVG QR Code -->
                {!! QrCode::size(100)->generate(url('/print.php?id=' . $booking->id)) !!}
                <div style="font-size: 10px; color: #333; margin-top: 4px; font-weight: 600;">Scan to Track</div>
            </div>
            
            <div class="invoice-meta">
                <div class="invoice-title">DELIVERY RECEIPT</div>
                <div class="meta-grid">
                    <span class="meta-label">Booking ID:</span>
                    <span class="meta-value">#{{ $booking->id }}</span>
                    <span class="meta-label">Date:</span>
                    <span class="meta-value">{{ \Carbon\Carbon::parse($booking->booking_date)->format('d M, Y') }}</span>
                </div>
            </div>
        </div>

        <!-- Office Locations -->
        <div class="office-grid">
            @if(\App\Models\Setting::get('office_rawalpindi_status', '1'))
            <div class="office-box">
                <div class="office-title">{{ \App\Models\Setting::get('office_rawalpindi_title', 'Rawalpindi Office') }}</div>
                <div class="office-content">
                    <div class="urdu-font">{!! nl2br(e(\App\Models\Setting::get('office_rawalpindi_address', 'بالمقابل القمر فلور مل ریلوے ورکشاپ روڈ'))) !!}</div>
                    <div>{!! nl2br(e(\App\Models\Setting::get('office_rawalpindi_phone', "051-5530940, 051-5558105\n0301-5559072, 0334-5559072"))) !!}</div>
                </div>
            </div>
            @endif

            @if(\App\Models\Setting::get('office_peshawar_status', '1'))
            <div class="office-box">
                <div class="office-title">{{ \App\Models\Setting::get('office_peshawar_title', 'Peshawar Office') }}</div>
                <div class="office-content">
                    <div class="urdu-font">{!! nl2br(e(\App\Models\Setting::get('office_peshawar_address', 'بالمقابل اٹک پٹرول پمپ نزد نیشنل کانٹا رنگ روڈ'))) !!}</div>
                    <div>{!! nl2br(e(\App\Models\Setting::get('office_peshawar_phone', '0312-3366411'))) !!}</div>
                    <div style="margin-top: 5px; font-weight: 600;">Guangzhou Warehouse</div>
                </div>
            </div>
            @endif

            @if(\App\Models\Setting::get('office_lahore_status', '1'))
            <div class="office-box">
                <div class="office-title">{{ \App\Models\Setting::get('office_lahore_title', 'Lahore Office') }}</div>
                <div class="office-content">
                    <div class="urdu-font">{!! nl2br(e(\App\Models\Setting::get('office_lahore_address', 'باجوہ ہاؤس، پی ایس او پمپ لنک، حضرت علی روڈ'))) !!}</div>
                    <div>{!! nl2br(e(\App\Models\Setting::get('office_lahore_phone', "042-37339922, 042-37339921\n0331-4444630, 0301-1851177"))) !!}</div>
                </div>
            </div>
            @endif
        </div>

        <!-- Info Section -->
        <div class="info-section">
            <div class="info-col">
                <div class="info-header">Receiver Info</div>
                <div class="info-row">
                    <span class="info-label">Receiver Name:</span>
                    <span class="info-value">{{ $booking->receiver_name ?? $booking->customer->name }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">Phone:</span>
                    <span class="info-value">{{ $booking->receiver_phone ?? $booking->customer->phone }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">Destination:</span>
                    <span class="info-value">{{ $booking->destination_city ?? '-' }}</span>
                </div>
            </div>
            <div class="info-col">
                <div class="info-header">Shipment Details</div>
                <div class="info-row">
                    <span class="info-label">Container No:</span>
                    <span class="info-value">{{ $booking->cntr_no }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">Origin:</span>
                    <span class="info-value">{{ $booking->origin_city ?? '-' }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">Status:</span>
                    <span class="info-value">{{ $booking->status }}</span>
                </div>
            </div>
        </div>

        <!-- Items Table -->
        <table>
            <thead>
                <tr>
                    <th>Description</th>
                    <th>Quantity</th>
                    <th>Unit</th>
                    <th>Additional Info</th>
                    <th>Rate</th>
                    <th>Amount</th>
                </tr>
            </thead>
            <tbody>
                @php
                    $totalAmount = 0;
                    $unitTotals = ['KG' => 0, 'PCS' => 0, 'CTN' => 0, 'CBM' => 0];
                @endphp
                @foreach($booking->items as $item)
                    @php
                        $totalAmount += $item->amount;
                        $unit = strtoupper($item->unit ?? 'PCS');
                        if (isset($unitTotals[$unit])) {
                            $unitTotals[$unit] += $item->quantity;
                        }
                        
                        $additionalInfo = [];
                        if (!empty($item->cartons) && $item->cartons > 0) {
                            $additionalInfo[] = $item->cartons . ' CTN';
                        }
                        if (!empty($item->baggage) && $item->baggage > 0) {
                            $additionalInfo[] = $item->baggage . ' BGG';
                        }
                        if (!empty($item->custom_label) && !empty($item->custom_value)) {
                            $additionalInfo[] = $item->custom_value . ' ' . $item->custom_label;
                        }
                        $additionalInfoText = !empty($additionalInfo) ? implode(', ', $additionalInfo) : '-';
                    @endphp
                    <tr>
                        <td>{{ $item->description }}</td>
                        <td>{{ number_format($item->quantity, 2) }}</td>
                        <td style="font-weight: 600;">{{ strtoupper($item->unit ?? 'PCS') }}</td>
                        <td style="font-size: 10px;">{{ $additionalInfoText }}</td>
                        <td>{{ number_format($item->rate, 0) }}</td>
                        <td>{{ number_format($item->amount, 2) }}</td>
                    </tr>
                @endforeach
                
                <!-- Spacer rows to maintain height if few items -->
                @for($i = $booking->items->count(); $i < 3; $i++)
                    <tr>
                        <td>&nbsp;</td><td></td><td></td><td></td><td></td><td></td>
                    </tr>
                @endfor
                
                <tr class="total-row">
                    <td>Total</td>
                    <td>
                        @foreach($unitTotals as $unit => $total)
                            @if($total > 0)
                                {{ number_format($total, 2) }} {{ $unit }}
                                @if(!$loop->last && array_sum(array_slice($unitTotals, $loop->index + 1)) > 0), @endif
                            @endif
                        @endforeach
                    </td>
                    <td></td>
                    <td></td>
                    <td>{{ number_format($totalAmount, 0) }}</td>
                </tr>
            </tbody>
        </table>

        <!-- Summary Footer -->
        <div class="footer-summary">
            <div class="summary-box">
                <div class="summary-row">
                    <span class="summary-label">Subtotal:</span>
                    <span class="summary-value">{{ number_format($totalAmount, 0) }}</span>
                </div>
                <div class="summary-row">
                    <span class="summary-label">Discount:</span>
                    <span class="summary-value text-red-600">-{{ number_format($booking->discount ?? 0, 0) }}</span>
                </div>
                <div class="summary-row total">
                    <span class="summary-label">Total Payable:</span>
                    <span class="summary-value">{{ number_format($booking->total_amount, 0) }}</span>
                </div>
                <div class="summary-row" style="margin-top: 10px; border-top: 1px solid #e5e7eb; padding-top: 5px;">
                    <span class="summary-label">Advance:</span>
                    <span class="summary-value">{{ number_format($booking->advance_payment, 0) }}</span>
                </div>
                <div class="summary-row">
                    <span class="summary-label">Balance Due:</span>
                    <span class="summary-value text-red-600">{{ number_format($booking->due_payment, 0) }}</span>
                </div>
            </div>
        </div>

        <!-- Dates -->
        <div class="dates-sig">
            <div class="date-box">
                <span>Loading Date</span>
                <div class="date-val">{{ $booking->loading_date ? \Carbon\Carbon::parse($booking->loading_date)->format('d M, Y') : '-' }}</div>
            </div>
            <div class="date-box">
                <span>Shipping Date</span>
                <div class="date-val">{{ $booking->shipping_date ? \Carbon\Carbon::parse($booking->shipping_date)->format('d M, Y') : '-' }}</div>
            </div>
            <div class="date-box" style="text-align: right; margin-top: 10px;">
                __________________________<br>
                <span>Receiver Signature</span>
            </div>
        </div>

        <!-- Terms -->
        <div class="terms urdu-font">
            نوٹ: تمام کسٹمرز کو مطلع کیا جاتا ہے کے مال لوڈنگ کے بعد کسی بھی آئٹم کے اوپر نیا رولنگ یا ڈیوٹی جاری ہو تو اتنے ریٹ کے مطابق دوسرا بلٹی بنانا ہوگا اور کسٹمر پابند ہوگا۔ بیوپاری کو چاہیے کے مال وصول کرتے وقت اچھی طرح ملاحظہ کریں ورنہ بعد میں کوئی شکایت نہیں سنی جائے گی۔ مال گودام سے لے جانے کے بعد میں مال کی کمی پیشی قبول نہیں ہوگی۔ خلاف قانون مال کا کمپنی ذمہ دار نہ ہوگی۔ غلط بیانی کی صورت میں مال ضبط کیا جائیگا یا جرمانہ کیا جائیگا۔ جرمانے کی حد کرانے کا دوسرا حصہ ہوگا۔ قدرتی آفات کی کمپنی ذمہ دار نہیں ہوگی مثلاً جہاز ڈوب جانا، آگ لگ جانا، روڈ پر ایکسیڈنٹ ہونا یا بارش سے مال خراب ہونا۔
        </div>
    </div>
</body>
</html>
