<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ $title }} — Salihiya World Cargo</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=DM+Sans:wght@400;500;600&display=swap" rel="stylesheet">
    <style>
        :root {
            --navy:      #2c2860;
            --navy-deep: #1e1b47;
            --gold:      #f4b65a;
            --gold-dark: #d4952f;
            --ease-out:  cubic-bezier(0.23, 1, 0.32, 1);
        }
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: 'DM Sans', sans-serif; background: #f0eef8; min-height: 100vh; color: #1a1a2e; }
        h1,h2,h3,h4 { font-family: 'Syne', sans-serif; }

        /* ── Toolbar ──────────────────────────────────────────── */
        .toolbar {
            background: var(--navy); height: 56px;
            display: flex; align-items: center;
            justify-content: space-between; padding: 0 32px;
            position: sticky; top: 0; z-index: 100;
        }
        .toolbar-left { display: flex; align-items: center; gap: 14px; }
        .toolbar-logo { height: 30px; }
        .toolbar-badge {
            font-size: 11px; font-weight: 700; letter-spacing: 0.8px;
            text-transform: uppercase; color: var(--gold);
            background: rgba(244,182,90,0.12); border: 1px solid rgba(244,182,90,0.2);
            padding: 4px 10px; border-radius: 6px;
        }
        .toolbar-right { display: flex; align-items: center; gap: 8px; }
        .toolbar-btn {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 8px 16px; border-radius: 8px;
            font-size: 13px; font-weight: 600; font-family: 'Syne', sans-serif;
            cursor: pointer; border: none; text-decoration: none;
            transition: all 150ms var(--ease-out);
        }
        .toolbar-btn svg { width: 15px; height: 15px; }
        .btn-back { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.1); }
        .btn-back:hover { background: rgba(255,255,255,0.12); color: #fff; }
        .btn-print { background: var(--gold); color: var(--navy); }
        .btn-print:hover { background: #fac96e; }

        /* ── Document wrapper ─────────────────────────────────── */
        .doc-wrap { max-width: 820px; margin: 36px auto; padding: 0 20px 60px; }
        .doc {
            background: #fff; border-radius: 16px; overflow: hidden;
            box-shadow: 0 2px 24px rgba(44,40,96,0.10);
            animation: slideUp 280ms var(--ease-out) forwards; opacity: 0;
        }
        @keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        /* ── Doc header ───────────────────────────────────────── */
        .doc-head {
            background: var(--navy); padding: 28px 36px;
            display: flex; align-items: flex-start; justify-content: space-between;
            position: relative; overflow: hidden;
        }
        .doc-head::after {
            content: ''; position: absolute; right: -60px; bottom: -60px;
            width: 200px; height: 200px; border-radius: 50%;
            background: rgba(244,182,90,0.06); pointer-events: none;
        }
        .doc-head-logo { height: 40px; position: relative; z-index: 1; }
        .doc-head-right { text-align: right; position: relative; z-index: 1; }
        .doc-type-label { font-family: 'Syne', sans-serif; font-size: 24px; font-weight: 800; color: #fff; letter-spacing: 2px; text-transform: uppercase; }
        .doc-number { font-size: 13px; font-weight: 600; color: var(--gold); margin-top: 4px; }
        .doc-date { font-size: 11px; color: rgba(233,206,159,0.45); margin-top: 3px; }

        /* ── Doc body ─────────────────────────────────────────── */
        .doc-body { padding: 32px 36px; }
        .section-heading {
            font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px;
            color: #aaa8c0; font-weight: 700; margin-bottom: 10px;
            padding-bottom: 8px; border-bottom: 1px solid #f0eef8;
        }
        .info-band {
            display: grid; grid-template-columns: repeat(3, 1fr);
            border: 1px solid #ebe9f4; border-radius: 12px;
            overflow: hidden; margin-bottom: 28px;
        }
        .info-cell { padding: 14px 18px; border-right: 1px solid #ebe9f4; }
        .info-cell:last-child { border-right: none; }
        .info-cell-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #aaa8c0; font-weight: 700; margin-bottom: 4px; }
        .info-cell-value { font-size: 13px; font-weight: 600; color: var(--navy); line-height: 1.3; }
        .info-cell-sub { font-size: 11px; color: #8b87a8; margin-top: 2px; }
        .doc-section { margin-bottom: 28px; }

        /* ── Cargo table ──────────────────────────────────────── */
        .cargo-table { width: 100%; border-collapse: collapse; font-size: 13px; border: 1px solid #ebe9f4; border-radius: 10px; overflow: hidden; }
        .cargo-table thead tr { background: #f9fafb; }
        .cargo-table thead th { padding: 11px 16px; text-align: left; font-size: 11px; font-weight: 700; color: #8b87a8; text-transform: uppercase; letter-spacing: 0.8px; border-bottom: 1px solid #ebe9f4; }
        .cargo-table tbody td { padding: 14px 16px; color: var(--navy); font-weight: 500; border-bottom: 1px solid #f5f4f9; }
        .cargo-table tbody tr:last-child td { border-bottom: none; }

        /* ── Invoice line items ───────────────────────────────── */
        .line-table { width: 100%; border-collapse: collapse; font-size: 13px; border: 1px solid #ebe9f4; border-radius: 10px; overflow: hidden; margin-bottom: 24px; }
        .line-table thead tr { background: var(--navy); }
        .line-table thead th { padding: 11px 16px; text-align: left; font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.75); letter-spacing: 0.5px; text-transform: uppercase; }
        .line-table thead th:not(:first-child) { text-align: right; }
        .line-table tbody tr { border-bottom: 1px solid #f5f4f9; }
        .line-table tbody tr:last-child { border-bottom: none; }
        .line-table tbody tr:nth-child(even) { background: #faf9fd; }
        .line-table tbody td { padding: 12px 16px; color: #374151; }
        .line-table tbody td:not(:first-child) { text-align: right; font-weight: 500; color: var(--navy); }

        /* ── Totals ───────────────────────────────────────────── */
        .totals { display: flex; justify-content: flex-end; margin-bottom: 28px; }
        .totals-box { width: 280px; border: 1px solid #ebe9f4; border-radius: 12px; overflow: hidden; }
        .totals-row { display: flex; justify-content: space-between; padding: 10px 16px; font-size: 13px; border-bottom: 1px solid #f5f4f9; }
        .totals-row:last-child { border-bottom: none; }
        .totals-row .t-label { color: #8b87a8; }
        .totals-row .t-value { font-weight: 600; color: var(--navy); }
        .totals-grand { background: var(--navy); display: flex; justify-content: space-between; padding: 13px 16px; }
        .totals-grand .t-label { font-family: 'Syne', sans-serif; font-size: 12px; font-weight: 700; color: rgba(233,206,159,0.6); letter-spacing: 0.5px; text-transform: uppercase; }
        .totals-grand .t-value { font-family: 'Syne', sans-serif; color: var(--gold); }

        /* ── Receipt specific ─────────────────────────────────── */
        .receipt-wrap {
            max-width: 400px; margin: 36px auto; padding: 0 16px 60px;
            font-family: Arial, sans-serif;
        }
        .receipt-card {
            background: #fff; border: 1px solid #ddd;
            padding: 28px 24px; font-size: 13px; color: #111;
            animation: slideUp 280ms var(--ease-out) forwards; opacity: 0;
        }
        .receipt-co { text-align: center; margin-bottom: 12px; }
        .receipt-co-name { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
        .receipt-co-sub { font-size: 11px; color: #555; margin-top: 2px; }
        .receipt-div { border: none; border-top: 1px dashed #aaa; margin: 12px 0; }
        .receipt-title { text-align: center; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
        .receipt-row { display: flex; justify-content: space-between; margin: 5px 0; font-size: 13px; }
        .receipt-row .rl { color: #555; }
        .receipt-row .rv { font-weight: 600; text-align: right; }
        .receipt-section-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #777; font-weight: 700; margin: 10px 0 4px; }
        .receipt-amount-big { text-align: center; font-size: 28px; font-weight: 700; margin: 10px 0 4px; }
        .receipt-amount-method { text-align: center; font-size: 12px; color: #555; margin-bottom: 4px; }
        .receipt-footer { text-align: center; font-size: 11px; color: #777; margin-top: 10px; }
        .receipt-paid-stamp {
            text-align: center; border: 2px solid #15803d; color: #15803d;
            font-weight: 700; font-size: 12px; padding: 4px 0;
            text-transform: uppercase; letter-spacing: 2px; margin: 8px 0;
        }
        .receipt-outstanding {
            text-align: center; border: 2px solid #dc2626; color: #dc2626;
            font-weight: 700; font-size: 12px; padding: 4px 0;
            text-transform: uppercase; letter-spacing: 1px; margin: 8px 0;
        }
        @media print {
            .receipt-wrap { max-width: 100%; margin: 0; padding: 0; }
            .receipt-card { border: none; animation: none; opacity: 1; box-shadow: none; }
        }

        /* ── Signature ────────────────────────────────────────── */
        .sig-section { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding-top: 28px; border-top: 1px solid #f0eef8; margin-top: 8px; }
        .sig-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #aaa8c0; font-weight: 700; margin-bottom: 44px; }
        .sig-line { border-bottom: 1.5px solid #c4c0d8; }
        .sig-sub { margin-top: 7px; font-size: 11px; color: #aaa8c0; }

        /* ── Footer ───────────────────────────────────────────── */
        .doc-foot { background: #faf9fd; border-top: 1px solid #ebe9f4; padding: 16px 36px; display: flex; justify-content: space-between; align-items: center; }
        .doc-foot p { font-size: 11px; color: #aaa8c0; }

        /* ── Print ────────────────────────────────────────────── */
        @media print {
            body { background: #fff; }
            .toolbar { display: none !important; }
            .doc-wrap { max-width: 100%; margin: 0; padding: 0; }
            .doc { border-radius: 0; box-shadow: none; animation: none; opacity: 1; }
        }
        @media (prefers-reduced-motion: reduce) { .doc { animation: none; opacity: 1; } }
    </style>
</head>
<body>

@php
    $isInvoice  = $docType === 'invoice';
    $isDN       = $docType === 'delivery-note';
    $isReceipt  = $docType === 'receipt';

    // For invoice + DN
    $docNumber = $isInvoice
        ? ($document->invoice_number ?? '—')
        : ($isDN ? ($document->dn_number ?? '—') : ($payment->receipt_number ?? '—'));

    $docDate = $isInvoice
        ? $document->created_at->format('M d, Y')
        : ($isDN
            ? ($document->issued_at?->format('M d, Y') ?? now()->format('M d, Y'))
            : ($payment->created_at->format('M d, Y')));

    // Reference for consignment — flight_no (air slot) takes priority, HAWB shown as sub-line
    $reference = isset($consignment)
        ? ($consignment->flight_no ?? $consignment->container_no ?? $consignment->house_waybill_no ?? "CON-{$consignment->id}")
        : ($payment->consignment->flight_no ?? $payment->consignment->container_no ?? $payment->consignment->house_waybill_no ?? '—');
@endphp

{{-- ── Toolbar ───────────────────────────────────────────────── --}}
<div class="toolbar">
    <div class="toolbar-left">
        <img src="/images/logo.webp" class="toolbar-logo" alt="Salihiya World Cargo">
        <span class="toolbar-badge">
            {{ $isInvoice ? 'Invoice' : ($isDN ? 'Delivery Note' : 'Receipt') }}
        </span>
    </div>
    <div class="toolbar-right">
        <a href="{{ $backUrl }}" class="toolbar-btn btn-back">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
            </svg>
            Back
        </a>
        <button onclick="window.print()" class="toolbar-btn btn-print">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/>
            </svg>
            Print
        </button>
    </div>
</div>

{{-- ── RECEIPT — rendered outside the fancy doc wrapper ────────── --}}
@if($isReceipt)
<div class="receipt-wrap">
<div class="receipt-card">

    {{-- Company header --}}
    <div class="receipt-co">
        <div class="receipt-co-name">Salihiya World Cargo Limited</div>
        <div class="receipt-co-sub">Nairobi, Kenya</div>
    </div>

    <hr class="receipt-div">
    <div class="receipt-title">Payment Receipt</div>

    <div class="receipt-row">
        <span class="rl">Receipt No.</span>
        <span class="rv">{{ $payment->receipt_number }}</span>
    </div>
    <div class="receipt-row">
        <span class="rl">Date</span>
        <span class="rv">{{ $payment->created_at->format('d M Y, H:i') }}</span>
    </div>
    @if($payment->cashier)
    <div class="receipt-row">
        <span class="rl">Served By</span>
        <span class="rv">{{ $payment->cashier->name }}</span>
    </div>
    @endif

    <hr class="receipt-div">
    <div class="receipt-section-label">Received From</div>
    <div class="receipt-row">
        <span class="rl">Name</span>
        <span class="rv">{{ $payment->consignment->customer_name }}</span>
    </div>
    <div class="receipt-row">
        <span class="rl">Phone</span>
        <span class="rv">{{ $payment->consignment->phone }}</span>
    </div>
    <div class="receipt-row">
        <span class="rl">Cargo Ref.</span>
        <span class="rv">{{ $reference }}</span>
    </div>
    @if($payment->invoice)
    <div class="receipt-row">
        <span class="rl">Invoice No.</span>
        <span class="rv">{{ $payment->invoice->invoice_number }}</span>
    </div>
    @endif

    <hr class="receipt-div">
    <div class="receipt-section-label">Payment</div>
    <div class="receipt-amount-big">KES {{ number_format($payment->amount_kes, 2) }}</div>
    <div class="receipt-amount-method">
        via {{ match($payment->method) {
            'mpesa'  => 'M-Pesa',
            'cash'   => 'Cash',
            'bank'   => 'Bank Transfer',
            'cheque' => 'Cheque',
            default  => ucfirst($payment->method),
        } }}
        @if($payment->reference)
            &nbsp;&bull;&nbsp;{{ $payment->reference }}
        @endif
    </div>

    @if($payment->invoice)
    <hr class="receipt-div">
    <div class="receipt-section-label">Invoice Balance</div>
    <div class="receipt-row">
        <span class="rl">Invoice Total</span>
        <span class="rv">KES {{ number_format($payment->invoice->amount_kes, 2) }}</span>
    </div>
    <div class="receipt-row">
        <span class="rl">Total Paid</span>
        <span class="rv">KES {{ number_format($payment->invoice->amount_paid_kes, 2) }}</span>
    </div>
    <div class="receipt-row">
        <span class="rl">Balance Due</span>
        <span class="rv">KES {{ number_format($payment->invoice->outstanding_kes, 2) }}</span>
    </div>

    @if($payment->invoice->payment_status === 'paid')
        <div class="receipt-paid-stamp">&#10003; Fully Paid</div>
    @elseif($payment->invoice->outstanding_kes > 0)
        <div class="receipt-outstanding">Balance: KES {{ number_format($payment->invoice->outstanding_kes, 2) }}</div>
    @endif
    @endif

    @if($payment->notes)
    <hr class="receipt-div">
    <div class="receipt-row"><span class="rl">Notes</span><span class="rv">{{ $payment->notes }}</span></div>
    @endif

    <hr class="receipt-div">
    <div class="receipt-footer">Thank you for your business.</div>

</div>
</div>

{{-- Invoice & DN use the fancy doc wrapper --}}
@else
<div class="doc-wrap">
<div class="doc">

    {{-- Header --}}
    <div class="doc-head">
        <img src="/images/logo.webp" class="doc-head-logo" alt="Salihiya World Cargo">
        <div class="doc-head-right">
            <div class="doc-type-label">{{ $isDN ? 'Delivery Note' : 'Invoice' }}</div>
            <div class="doc-number">{{ $docNumber }}</div>
            <div class="doc-date">{{ $docDate }}</div>
        </div>
    </div>

    <div class="doc-body">

        {{-- placeholder so @elseif/$isInvoice block below works --}}
        @if(false)

        {{-- ── INVOICE ───────────────────────────────────────────── --}}
        @elseif($isInvoice)

{{-- 
    REPLACE only the INVOICE section inside document-print.blade.php
    Find the @elseif($isInvoice) block and replace everything inside it
    with the content below (keep the @elseif and @else lines themselves)
--}}

        {{-- ── INVOICE ───────────────────────────────────────────── --}}

        {{-- Top info band --}}
        <div class="info-band">
            <div class="info-cell">
                <div class="info-cell-label">Bill To</div>
                <div class="info-cell-value">{{ $consignment->customer_name }}</div>
                <div class="info-cell-sub">{{ $consignment->phone }}</div>
            </div>
            <div class="info-cell">
                <div class="info-cell-label">
                    {{ $consignment->shipment->type === 'air' ? 'Flight No.' : 'Container No.' }}
                </div>
                <div class="info-cell-value">{{ $reference }}</div>
                @if($consignment->shipment->type === 'air' && $consignment->house_waybill_no && $consignment->flight_no)
                <div class="info-cell-sub">HAWB: {{ $consignment->house_waybill_no }}</div>
                @else
                <div class="info-cell-sub">
                    {{ strtoupper($consignment->shipment->type) }} Freight
                </div>
                @endif
            </div>
            <div class="info-cell">
                <div class="info-cell-label">Shipment</div>
                <div class="info-cell-value">{{ $consignment->shipment->reference }}</div>
                <div class="info-cell-sub">
                    {{ $consignment->shipment->origin }}
                    &rarr;
                    {{ $consignment->shipment->destination }}
                </div>
            </div>
        </div>

        {{-- Charge breakdown --}}
        <div class="doc-section">
            <div class="section-heading">Charge Breakdown</div>

            @php
                $shipmentType = $consignment->shipment->type;
                $exRate       = \App\Models\GlobalSetting::exchangeRate();
                $extraUsd     = (float) $document->extra_charge_usd;
                $totalUsd     = (float) $document->amount_usd;
                $freightUsd   = $shipmentType === 'air'
                    ? round($totalUsd - $extraUsd, 2)
                    : 0;
            @endphp

            <div class="info-band"
                 style="grid-template-columns: repeat({{ $shipmentType === 'air' ? 3 : 2 }}, 1fr);">

                @if($shipmentType === 'air')
                {{-- Air: show freight USD + extra USD + exchange rate --}}
                <div class="info-cell">
                    <div class="info-cell-label">
                        Freight
                        @if($consignment->actual_weight_kgs)
                            ({{ $consignment->actual_weight_kgs }} KGS
                            &times; ${{ number_format(\App\Models\GlobalSetting::airRateForRoute($consignment->shipment->origin . $consignment->shipment->destination), 2) }})
                        @endif
                    </div>
                    <div class="info-cell-value">
                        $ {{ number_format($freightUsd, 2) }}
                    </div>
                </div>
                @else
                {{-- Sea: show CBM charge in KES --}}
                @php
                    $cbmRate    = \App\Models\GlobalSetting::seaRateForRoute($consignment->shipment->origin . $consignment->shipment->destination);
                    $cbmCharge  = round((float)$consignment->cbm * $cbmRate, 2);
                @endphp
                <div class="info-cell">
                    <div class="info-cell-label">
                        Sea Freight
                        @if($consignment->cbm)
                            ({{ $consignment->cbm }} CBM
                            &times; KES {{ number_format($cbmRate, 0) }})
                        @endif
                    </div>
                    <div class="info-cell-value">
                        KES {{ number_format($cbmCharge, 2) }}
                    </div>
                </div>
                @endif

                {{-- Extra charge --}}
                <div class="info-cell">
                    <div class="info-cell-label">
                        Extra Charge
                    </div>
                    <div class="info-cell-value">
                        @if($extraUsd > 0)
                            $ {{ number_format($extraUsd, 2) }}
                            <div class="info-cell-sub">
                                = KES {{ number_format($extraUsd * $exRate, 2) }}
                            </div>
                        @else
                            <span style="color:#d1d5db;">—</span>
                        @endif
                    </div>
                </div>

                {{-- Exchange rate used --}}
                @if($shipmentType === 'air')
                <div class="info-cell">
                    <div class="info-cell-label">Exchange Rate</div>
                    <div class="info-cell-value">
                        KES {{ number_format($exRate, 2) }}
                    </div>
                    <div class="info-cell-sub">per $1 USD</div>
                </div>
                @endif

            </div>
        </div>

        {{-- Totals box --}}
        <div class="totals">
            <div class="totals-box">

                @if($shipmentType === 'air' && $document->amount_usd > 0)
                <div class="totals-row">
                    <span class="t-label">Total (USD)</span>
                    <span class="t-value">$ {{ number_format($document->amount_usd, 2) }}</span>
                </div>
                @endif

                <div class="totals-row">
                    <span class="t-label">Invoice Total (KES)</span>
                    <span class="t-value" style="font-size:15px;color:#2c2860;">
                        KES {{ number_format($document->amount_kes, 2) }}
                    </span>
                </div>

                <div class="totals-row">
                    <span class="t-label">Amount Paid</span>
                    <span class="t-value" style="color:#15803d;">
                        KES {{ number_format($document->amount_paid_kes, 2) }}
                    </span>
                </div>

                <div class="totals-grand">
                    <span class="t-label">Outstanding</span>
                    <span class="t-value">
                        KES {{ number_format($document->outstanding_kes, 2) }}
                    </span>
                </div>

            </div>
        </div>

        {{-- Payment status note --}}
        @if($document->payment_status === 'paid')
        <div style="text-align:center;padding:12px;background:#f0fdf4;
                    border-radius:10px;margin-bottom:20px;
                    border:1px solid #bbf7d0;">
            <span style="font-size:13px;font-weight:700;color:#15803d;">
                &#10003; FULLY PAID
            </span>
        </div>
        @elseif($document->payment_status === 'partial')
        <div style="text-align:center;padding:12px;background:#fffbeb;
                    border-radius:10px;margin-bottom:20px;
                    border:1px solid #fde68a;">
            <span style="font-size:13px;font-weight:700;color:#92400e;">
                Partial Payment — Outstanding: KES {{ number_format($document->outstanding_kes, 2) }}
            </span>
        </div>
        @endif


        {{-- ── DELIVERY NOTE ─────────────────────────────────────── --}}
        @else

        {{-- Delivery confirmed banner (shown once goods are released) --}}
        @if($consignment->status === 'delivered' && $consignment->collected_at)
        <div style="background:#f0fdf4;border:2px solid #16a34a;border-radius:10px;
                    padding:14px 20px;margin-bottom:24px;
                    display:flex;align-items:center;justify-content:space-between;gap:16px;">
            <div style="display:flex;align-items:center;gap:10px;">
                <span style="font-size:20px;">&#10003;</span>
                <div>
                    <div style="font-size:13px;font-weight:700;color:#15803d;">
                        GOODS RELEASED — DELIVERY CONFIRMED
                    </div>
                    <div style="font-size:12px;color:#166534;margin-top:2px;">
                        This delivery note is final and cannot be modified.
                    </div>
                </div>
            </div>
            <div style="text-align:right;font-size:12px;color:#166534;white-space:nowrap;">
                <div><strong>Collected by:</strong> {{ $consignment->collected_by ?? $document->received_by ?? '—' }}</div>
                <div><strong>At:</strong> {{ $consignment->collected_at->format('d M Y, H:i') }}</div>
            </div>
        </div>
        @endif

        <div class="info-band">
            <div class="info-cell">
                <div class="info-cell-label">Consignee</div>
                <div class="info-cell-value">{{ $consignment->customer_name }}</div>
                <div class="info-cell-sub">{{ $consignment->phone }}</div>
            </div>
            <div class="info-cell">
                <div class="info-cell-label">Reference</div>
                <div class="info-cell-value">{{ $reference }}</div>
                <div class="info-cell-sub">
                    {{ strtoupper($consignment->shipment->type) }} Freight
                </div>
            </div>
            <div class="info-cell">
                <div class="info-cell-label">
                    {{ $consignment->shipment->type === 'sea' ? 'Container Batch' : 'Flight Batch' }}
                </div>
                <div class="info-cell-value">{{ $consignment->shipment->reference }}</div>
                <div class="info-cell-sub">{{ $consignment->destination }}</div>
            </div>
        </div>

        <div class="doc-section">
            <div class="section-heading">Cargo Details</div>
            <table class="cargo-table">
                <thead>
                    <tr>
                        <th>Description</th>
                        <th>PCS/CTN</th>
                        @if($consignment->actual_weight_kgs)
                        <th>Weight (KGS)</th>
                        @endif
                        @if($consignment->cbm)
                        <th>CBM (m&sup3;)</th>
                        @endif
                        <th>Destination</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{{ $consignment->description ?? '—' }}</td>
                        <td>{{ $consignment->pcs }}</td>
                        @if($consignment->actual_weight_kgs)
                        <td>{{ $consignment->actual_weight_kgs }}</td>
                        @endif
                        @if($consignment->cbm)
                        <td>{{ $consignment->cbm }}</td>
                        @endif
                        <td>{{ $consignment->destination }}</td>
                    </tr>
                </tbody>
            </table>
        </div>

        @if($document->notes)
        <div class="doc-section">
            <div class="section-heading">Notes</div>
            <p style="font-size:13px;color:#6b7280;font-style:italic;">{{ $document->notes }}</p>
        </div>
        @endif

        <div class="sig-section">
            <div>
                <div class="sig-label">Released By — Cargo Staff</div>
                <div class="sig-line"></div>
                <div class="sig-sub">Name &amp; Signature</div>
            </div>
            <div>
                <div class="sig-label">Received By — Consignee</div>
                @if($consignment->status === 'delivered')
                    {{-- Goods taken: show confirmed details instead of blank line --}}
                    <div style="border:1.5px solid #16a34a;border-radius:6px;padding:8px 12px;margin-top:4px;">
                        <div style="font-size:13px;font-weight:700;color:#15803d;">
                            {{ $consignment->collected_by ?? $document->received_by ?? '—' }}
                        </div>
                        @if($consignment->collected_at)
                        <div style="font-size:11px;color:#166534;margin-top:3px;">
                            {{ $consignment->collected_at->format('d M Y \a\t H:i') }}
                        </div>
                        @endif
                    </div>
                @else
                    <div class="sig-line"></div>
                    <div class="sig-sub">
                        @if($document->received_by)
                            {{ $document->received_by }}
                        @else
                            Name, Signature &amp; Date
                        @endif
                    </div>
                @endif
            </div>
        </div>

        @endif

    </div>

    <div class="doc-foot">
        <p>Salihiya World Cargo Limited &middot; Nairobi, Kenya</p>
        <p>{{ $docNumber }} &middot; Printed {{ now()->format('M d, Y H:i') }}</p>
    </div>

</div>
</div>
@endif {{-- end @else (invoice/DN doc wrapper) --}}

<script>
    window.addEventListener('load', function () {
        // Receipts use system fonts — no delay needed.
        // Invoice/DN load Google Fonts so wait 600ms.
        var delay = {{ $isReceipt ? 100 : 600 }};
        setTimeout(function () { window.print(); }, delay);
    });
</script>

</body>
</html>