@extends('admin.templates.layout')

@php
    $currency = $order->currency ?: 'AED';
    $merchant = $order->merchant;

    $prefix = config('global.invoice_prefix', 'INV');
    $invoiceNumber = preg_match('/-(\d+)$/', $order->order_reference, $m)
        ? $prefix . '-' . $m[1]
        : $prefix . '-' . str_pad((string) $order->id, 8, '0', STR_PAD_LEFT);
@endphp

@section('head')
<style>
    .invoice-sheet {
        background: #fff;
        border: 1px solid #e9edf2;
        border-radius: 12px;
        padding: 40px;
    }

    .invoice-brand {
        font-size: 22px; font-weight: 800; color: #0f172a;
        letter-spacing: -.4px;
    }
    .invoice-brand .brand-mark {
        display: inline-flex;
        width: 34px; height: 34px;
        border-radius: 8px;
        background: #4338ca;
        color: #fff;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        margin-right: 8px;
    }

    .invoice-heading {
        font-size: 22px; font-weight: 800; color: #4338ca;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        letter-spacing: .5px;
    }
    .meta-label {
        font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
        color: #94a3b8; font-weight: 700; margin-bottom: 4px;
    }
    .meta-value { font-size: 13.5px; font-weight: 600; color: #0f172a; }

    .divider { border: 0; border-top: 1px solid #e9edf2; margin: 24px 0; }

    .items-table { width: 100%; }
    .items-table thead th {
        font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
        color: #64748b; font-weight: 700; background: #fafbfd;
        padding: 12px 14px; border-bottom: 1px solid #e9edf2;
    }
    .items-table tbody td {
        padding: 12px 14px; font-size: 13.5px; color: #334155;
        border-bottom: 1px solid #f1f4f9; vertical-align: middle;
    }
    .items-table tbody tr:last-child td { border-bottom: none; }
    .items-table .amount { text-align: right; font-variant-numeric: tabular-nums; }

    .item-thumb {
        width: 34px; height: 34px;
        border-radius: 6px; object-fit: cover;
        border: 1px solid #e2e8f0;
        flex-shrink: 0;
    }

    .total-block {
        margin-left: auto; width: 100%; max-width: 400px;
    }
    .total-row {
        display: flex; justify-content: space-between;
        padding: 10px 0; font-size: 13.5px; color: #475569;
    }
    .total-row.grand {
        border-top: 2px solid #0f172a;
        margin-top: 8px; padding-top: 14px;
        font-size: 16px; font-weight: 800; color: #0f172a;
    }
    .total-row .amount { font-variant-numeric: tabular-nums; }
    .total-hint {
        font-size: 11.5px; color: #94a3b8; margin-top: -4px;
        display: block;
    }

    .delivery-chip {
        font-size: 10.5px;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        padding: 2px 8px;
        border-radius: 6px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        color: #475569;
        white-space: nowrap;
    }

    .print-actions {
        display: flex; justify-content: center; gap: 8px; margin-top: 24px;
    }

    @media print {
        .no-print, #page-topbar, .app-menu, .footer, .vertical-overlay,
        #back-to-top, .navbar-header, .page-title-box { display: none !important; }
        .main-content { margin-left: 0 !important; padding: 0 !important; }
        .invoice-sheet { border: none !important; box-shadow: none !important; padding: 24px; }
        .card, .row, .col-lg-10 { border: none !important; box-shadow: none !important; }
        a { color: inherit !important; text-decoration: none !important; }
        body { background: #fff !important; }
    }
</style>
@endsection

@section('content')

<div class="row justify-content-center">
    <div class="col-lg-10">

        <div class="d-flex justify-content-between align-items-center mb-3 no-print">
            <a href="{{ route('admin.invoices.index') }}" class="btn btn-sm btn-light">
                <i class="ri-arrow-left-line"></i> Back to Invoices
            </a>
            <div class="d-flex gap-2">
                <a href="{{ route('admin.orders.show', $order->id) }}" class="btn btn-sm btn-soft-info">
                    <i class="ri-eye-line"></i> View Order
                </a>
                <button type="button" class="btn btn-sm btn-primary" onclick="window.print()">
                    <i class="ri-printer-line"></i> Print / Save PDF
                </button>
            </div>
        </div>

        <div class="invoice-sheet">

            {{-- ═══ Header ═══ --}}
            <div class="d-flex justify-content-between align-items-start mb-4 flex-wrap gap-3">
                <div>
                    <div class="invoice-brand mb-2">
                        <span class="brand-mark"><i class="ri-truck-line"></i></span>
                        {{ config('global.site_name', 'Kabamex') }}
                    </div>
                    <!-- <div class="text-muted fs-13">{{ config('app.url') }}</div> -->
                </div>

                <div class="text-end">
                    <div class="invoice-heading mb-1">{{ $invoiceNumber }}</div>
                    <div class="text-muted fs-13">
                        Issued {{ web_date_in_timezone($order->updated_at, 'M d, Y') }}
                    </div>
                    <div class="mt-2">{!! order_status_badge($order->status) !!}</div>
                </div>
            </div>

            <hr class="divider">

            {{-- ═══ Billed to / meta ═══ --}}
            <div class="row g-4 mb-2">
                <div class="col-md-6">
                    <div class="meta-label">Billed To</div>
                    <div class="meta-value">{{ $merchant?->company_name ?: ($merchant?->name ?: '—') }}</div>
                    @if($merchant?->user_code)
                        <div class="text-muted fs-13 font-monospace">{{ $merchant->user_code }}</div>
                    @endif
                    @if($merchant?->email)
                        <div class="text-muted fs-13">{{ $merchant->email }}</div>
                    @endif
                    @if($merchant?->phone)
                        <div class="text-muted fs-13">+{{ $merchant->dial_code }}{{ $merchant->phone }}</div>
                    @endif
                    @if($merchant?->address)
                        <div class="text-muted fs-13 mt-1">{{ $merchant->address }}</div>
                    @endif
                </div>

                <div class="col-md-6">
                    <div class="row g-3">
                        <div class="col-12">
                            <div class="meta-label">Order Reference</div>
                            <div class="meta-value font-monospace">{{ $order->order_reference }}</div>
                        </div>
                        <div class="col-6">
                            <div class="meta-label">Total Units</div>
                            <div class="meta-value">{{ number_format($totalUnits) }}</div>
                        </div>
                        <div class="col-6">
                            <div class="meta-label">Deliveries</div>
                            <div class="meta-value">{{ $order->deliveries->count() }}</div>
                        </div>
                        @if($order->cargoCompany)
                            <div class="col-12">
                                <div class="meta-label">Cargo Company</div>
                                <div class="meta-value">{{ $order->cargoCompany->company_name ?: $order->cargoCompany->name }}</div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <hr class="divider">

            {{-- ═══ Items table ═══ --}}
            <div class="meta-label mb-2">Items</div>
            <div class="table-responsive mb-4">
                <table class="items-table">
                    <thead>
                        <tr>
                            <th style="width:60%;">Item / Variant</th>
                            <th class="amount" style="width:12%;">Qty</th>
                            <th class="amount" style="width:14%;">Price</th>
                            <th class="amount" style="width:14%;">Subtotal</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($lines as $line)
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center gap-2">
                                        @if($line->image)
                                            <img src="{{ $line->image }}" class="item-thumb" alt="">
                                        @endif
                                        <div>
                                            <div class="fw-semibold">{{ $line->item_name }}</div>
                                            <small class="text-muted">{{ $line->variant }}</small>
                                        </div>
                                    </div>
                                </td>
                                <td class="amount">{{ $line->qty }}</td>
                                <td class="amount">{{ number_format($line->price, 2) }} {{ $currency }}</td>
                                <td class="amount fw-semibold">{{ number_format($line->subtotal, 2) }} {{ $currency }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="4" class="text-center text-muted py-4">No items.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            {{-- ═══ Deliveries summary (with transporter + charges) ═══ --}}
            @php
                $activeDeliveries = $order->deliveries
                    ->where('status', '!=', TRANSPORTER_DELIVERY_REJECTED);
                $deliveriesChargesSum = (float) $activeDeliveries->sum('total_charges');
            @endphp

            @if($activeDeliveries->count())
                <div class="meta-label mb-2">Deliveries &amp; Transporter Charges</div>
                <div class="table-responsive mb-4">
                    <table class="items-table">
                        <thead>
                            <tr>
                                <th style="width:26%;">Tracking #</th>
                                <th style="width:30%;">Transporter</th>
                                <th style="width:16%;">Status</th>
                                <th class="amount" style="width:10%;">Qty</th>
                                <th class="amount" style="width:18%;">Charges</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($activeDeliveries as $d)
                                @php
                                    $dinfo = config("global.transporter_delivery_statuses.{$d->status}")
                                        ?? ['text'=>'—','class'=>'secondary'];
                                    $tName = $d->transporter?->company_name
                                        ?: ($d->transporter?->name ?: '—');
                                    $tCode = $d->transporter?->user_code;
                                @endphp
                                <tr>
                                    <td class="font-monospace" style="font-size:12.5px;">
                                        {{ $d->tracking_number }}
                                    </td>
                                    <td>
                                        <div class="fw-semibold">{{ $tName }}</div>
                                        @if($tCode)
                                            <small class="text-muted font-monospace">{{ $tCode }}</small>
                                        @endif
                                    </td>
                                    <td>
                                        <span class="badge bg-{{ $dinfo['class'] }}-subtle text-{{ $dinfo['class'] }}"
                                            style="font-size:11px;">
                                            {{ $dinfo['text'] }}
                                        </span>
                                    </td>
                                    <td class="amount">×{{ (int) $d->quantity }}</td>
                                    <td class="amount fw-semibold">
                                        {{ number_format((float) $d->total_charges, 2) }} {{ $currency }}
                                    </td>
                                </tr>
                            @endforeach
                            {{-- Aggregate row --}}
                            <tr style="background:#fafbfd; border-top:2px solid #e9edf2;">
                                <td colspan="4" class="fw-semibold" style="text-align:right;">
                                    Total Delivery Charges
                                </td>
                                <td class="amount fw-bold">
                                    {{ number_format($deliveriesChargesSum, 2) }} {{ $currency }}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            @endif

            {{-- ═══ Totals ═══ --}}
            {{-- ═══ Totals ═══ --}}
            <div class="total-block">
                {{-- Item Value --}}
                <div class="total-row">
                    <span>
                        <strong>Item Value</strong>
                        <span class="total-hint">goods subtotal</span>
                    </span>
                    <span class="amount fw-semibold">{{ number_format($itemsSubtotal, 2) }} {{ $currency }}</span>
                </div>

                {{-- Shipment / Transporter Charges --}}
                <div class="total-row">
                    <span>
                        <strong>Shipment Charges</strong>
                        @if($usesQuote)
                            <span class="total-hint">from accepted cargo quote</span>
                        @else
                            <span class="total-hint">sum of transporter charges</span>
                        @endif
                    </span>
                    <span class="amount fw-semibold">{{ number_format($shippingCharge, 2) }} {{ $currency }}</span>
                </div>

                {{-- Optional: show which transporters contributed (only if any have charges) --}}
                @if(!$usesQuote && $deliveriesChargesSum > 0)
                    @foreach($order->deliveries->where('status', '!=', TRANSPORTER_DELIVERY_REJECTED) as $d)
                        @if((float) $d->total_charges > 0)
                            <div class="total-row" style="padding-left:16px; font-size:12.5px; color:#64748b;">
                                <span>
                                    ↳
                                    {{ $d->transporter?->company_name ?: ($d->transporter?->name ?: 'Transporter') }}
                                    @if($d->transporter?->user_code)
                                        <span class="font-monospace">({{ $d->transporter->user_code }})</span>
                                    @endif
                                </span>
                                <span class="amount">{{ number_format((float) $d->total_charges, 2) }} {{ $currency }}</span>
                            </div>
                        @endif
                    @endforeach
                @endif

                <div class="total-row grand">
                    <span>Total</span>
                    <span class="amount">{{ number_format($grandTotal, 2) }} {{ $currency }}</span>
                </div>
            </div>

            {{-- ═══ Footer ═══ --}}
            <hr class="divider" style="margin-top: 32px;">

            <div class="text-center text-muted fs-12">
                This is a system-generated invoice from {{ config('global.site_name', 'Kabamex') }}.
                For any queries, contact support.
            </div>

        </div>

        <div class="print-actions no-print">
            <button type="button" class="btn btn-primary" onclick="window.print()">
                <i class="ri-printer-line"></i> Print / Save PDF
            </button>
            <a href="{{ route('admin.invoices.index') }}" class="btn btn-light">
                Back to Invoices
            </a>
        </div>

    </div>
</div>
@endsection