@extends('cargo_company.templates.layout')

@php
    $quote = $order->activeQuote;
    $quoteInfo = $quote
        ? (config("global.quote_statuses.{$quote->status}") ?? ['text'=>'—','class'=>'secondary'])
        : null;

    $totalExpected  = collect($variantAssignment)->sum('total');
    $totalAssigned  = collect($variantAssignment)->sum('assigned');
    $totalRemaining = collect($variantAssignment)->sum('remaining');
    $progressPct    = $totalExpected > 0 ? round(($totalAssigned / $totalExpected) * 100) : 0;
@endphp

@section('head')
    <style>
        .kv-label { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: #64748b; font-weight: 600; }
        .kv-value { font-size: 14px; font-weight: 600; color: #1e293b; }
        .kv-muted { font-size: 13px; color: #64748b; }

        .stat-card { border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px 16px; background: #fff; }
        .stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: #64748b; font-weight: 600; }
        .stat-value { font-size: 20px; font-weight: 700; color: #0f172a; line-height: 1.2; }
        .stat-value.warn { color: #d97706; }
        .stat-value.ok { color: #16a34a; }

        .stat-progress {
            height: 4px; background: #f1f5f9; border-radius: 999px;
            overflow: hidden; margin-top: 6px;
        }
        .stat-progress > span {
            display: block; height: 100%;
            background: linear-gradient(90deg, #6366f1, #4338ca);
            transition: width .3s ease;
        }

        .ref-collapse {
            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;
        }
        .ref-trigger {
            font-size: 11px;
            padding: 3px 10px;
            border-radius: 999px;
            background: #eef2ff;
            color: #4338ca;
            border: 1px solid #c7d2fe;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .ref-trigger:hover { background: #e0e7ff; color: #3730a3; }
        .ref-trigger[aria-expanded="true"] { background: #4338ca; color: #fff; border-color: #4338ca; }
        .ref-box { max-width: 100%; }
        .ref-box-scroll {
            max-height: 140px; overflow-y: auto;
            padding: 8px 10px;
            border: 1px solid #e9edf2;
            border-radius: 8px;
            background: #fbfcfe;
        }
        .ref-box-scroll::-webkit-scrollbar { width: 6px; }
        .ref-box-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

        .party-card { display: flex; gap: 12px; align-items: flex-start; }
        .party-logo { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; border: 1px solid #e2e8f0; flex-shrink: 0; }
        .party-logo-placeholder {
            width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            background: #eef2ff; color: #4338ca; font-weight: 700; font-size: 15px;
        }
        .party-name { font-weight: 600; color: #0f172a; font-size: 14px; line-height: 1.3; }
        .party-meta { font-size: 12px; color: #64748b; }

        .timeline-dot { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .timeline-line { position: relative; }
        .timeline-line::after {
            content: ''; position: absolute; left: 15px; top: 32px; bottom: -16px;
            width: 2px; background: #e2e8f0;
        }
        .timeline-line:last-child::after { display: none; }

        .delivery-timeline { border-left: 2px solid #e2e8f0; padding-left: 16px; margin-left: 8px; }
        .delivery-timeline-item { position: relative; padding-bottom: 14px; }
        .delivery-timeline-item::before {
            content: ''; position: absolute; left: -21px; top: 6px;
            width: 10px; height: 10px; border-radius: 50%;
            background: #6366f1; border: 2px solid #fff; box-shadow: 0 0 0 1px #e2e8f0;
        }
        .delivery-timeline-item:last-child { padding-bottom: 0; }

        /* CTA banner — matches card styling, no new visual language */
        .cta-inline {
            display: flex; align-items: center; gap: 14px;
            padding: 14px 18px; border-radius: 10px;
            background: #eef2ff; border: 1px solid #c7d2fe;
            margin-bottom: 16px;
        }
        .cta-inline .cta-icon {
            width: 42px; height: 42px; border-radius: 10px;
            background: #4338ca; color: #fff;
            display: flex; align-items: center; justify-content: center;
            font-size: 20px; flex-shrink: 0;
        }
        .cta-inline .cta-body { flex: 1; }
        .cta-inline .cta-body h6 {
            font-size: 14px; font-weight: 700; color: #0f172a; margin: 0 0 3px;
        }
        .cta-inline .cta-body p {
            font-size: 12.5px; color: #475569; margin: 0;
        }
        .cta-inline .btn {
            white-space: nowrap;
            display: inline-flex; align-items: center; gap: 6px;
            font-size: 13px; font-weight: 600;
        }

        /* Assign bar under Assigned cell */
        .assign-bar {
            width: 60px; height: 4px;
            background: #f1f5f9; border-radius: 999px;
            overflow: hidden; margin-left: auto;
        }
        .assign-bar > span {
            display: block; height: 100%;
            background: linear-gradient(90deg, #6366f1, #4338ca);
        }

        /* Quote breakdown rows */
        .quote-breakdown-row {
            display: flex; justify-content: space-between;
            padding: 6px 0; font-size: 12.5px; color: #475569;
            border-bottom: 1px dashed #eef2f7;
        }
        .quote-breakdown-row:last-child { border-bottom: none; }
        .quote-breakdown-row .name { font-weight: 500; }
        .quote-breakdown-row .price {
            font-weight: 600; color: #0f172a;
            font-variant-numeric: tabular-nums;
        }
    </style>
@endsection

@section('content')

{{-- ═══════════════════════════════════════════════════════════
     CREATE DELIVERY CTA (inline, above the header card)
     ═══════════════════════════════════════════════════════════ --}}
@if($canCreateDelivery)
    <div class="cta-inline">
        <div class="cta-icon"><i class="ri-truck-line"></i></div>
        <div class="cta-body">
            <h6>Ready to ship</h6>
            <p>
                {{ $totalAssigned }} of {{ $totalExpected }} units assigned.
                @if($totalRemaining > 0)
                    <strong>{{ $totalRemaining }} remaining</strong> — assign them to a transporter.
                @endif
            </p>
        </div>
        <a href="{{ route('cargo_company.deliveries.create', $order->id) }}" class="btn btn-primary">
            <i class="ri-add-line"></i> Create Delivery
        </a>
    </div>
@endif

{{-- ═══════════════════════════════════════════════════════════
     HEADER ROW — Info card + Quote panel
     ═══════════════════════════════════════════════════════════ --}}
<div class="row g-3 mb-3">
    <div class="col-lg-8">
        <div class="card h-100">
            <div class="card-header border-bottom d-flex justify-content-between align-items-center py-3">
                <div>
                    <div class="kv-label mb-1">Shipment</div>
                    <div class="d-flex align-items-center gap-2">
                        <h5 class="card-title mb-0 fw-bold">{{ $order->order_reference }}</h5>
                        <button class="btn btn-sm btn-soft-secondary py-0 px-2" title="Copy"
                                onclick="navigator.clipboard.writeText('{{ $order->order_reference }}'); toastr.success('Copied');">
                            <i class="ri-file-copy-line"></i>
                        </button>
                    </div>
                </div>
                <div class="d-flex align-items-center gap-2">
                    {!! order_status_badge($order->status) !!}
                    <span class="badge bg-light text-dark border">
                        {{ web_date_in_timezone($order->created_at, 'M d, Y h:i A') }}
                    </span>
                </div>
            </div>

            {{-- Stats --}}
            <div class="card-body pb-2">
                <div class="row g-3">
                    <div class="col-md-3">
                        <div class="stat-card">
                            <div class="stat-label">Total Units</div>
                            <div class="stat-value">{{ (int) $totalExpected }}</div>
                            <div class="kv-muted">{{ $order->orderItems->count() }} item(s)</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stat-card">
                            <div class="stat-label">Assigned</div>
                            <div class="stat-value">{{ (int) $totalAssigned }}</div>
                            <div class="stat-progress"><span style="width: {{ $progressPct }}%"></span></div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stat-card">
                            <div class="stat-label">Remaining</div>
                            <div class="stat-value {{ $totalRemaining > 0 ? 'warn' : 'ok' }}">
                                {{ (int) $totalRemaining }}
                            </div>
                            <div class="kv-muted">
                                @if($totalRemaining > 0) Not yet assigned @else <i class="ri-check-line"></i> Full @endif
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stat-card">
                            <div class="stat-label">Deliveries</div>
                            <div class="stat-value">{{ $order->deliveries->count() }}</div>
                            <div class="kv-muted">
                                {{ $order->deliveries->where('is_published', true)->count() }} on marketplace
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Parties --}}
            <div class="card-body pt-3 border-top">
                <div class="row g-3">
                    <div class="col-md-6">
                        <div class="kv-label mb-2">Merchant</div>
                        @if($order->merchant)
                            <div class="party-card">
                                @if($order->merchant->profileImage)
                                    <img src="{{ $order->merchant->profileImage->url }}" class="party-logo" alt="">
                                @else
                                    <div class="party-logo-placeholder">
                                        {{ strtoupper(substr($order->merchant->company_name ?: $order->merchant->name, 0, 1)) }}
                                    </div>
                                @endif
                                <div>
                                    <div class="party-name">{{ $order->merchant->company_name ?: $order->merchant->name }}</div>
                                    @if($order->merchant->user_code)
                                        <div class="party-meta">{{ $order->merchant->user_code }}</div>
                                    @endif
                                    @if($order->merchant->email)
                                        <div class="party-meta"><i class="ri-mail-line"></i> {{ $order->merchant->email }}</div>
                                    @endif
                                    @if($order->merchant->phone)
                                        <div class="party-meta"><i class="ri-phone-line"></i> +{{ $order->merchant->dial_code }}{{ $order->merchant->phone }}</div>
                                    @endif
                                </div>
                            </div>
                        @else
                            <span class="text-muted">—</span>
                        @endif
                    </div>

                    <div class="col-md-6">
                        <div class="kv-label mb-2">Transporter(s)</div>
                        @php
                            $transporters = $order->deliveries
                                ->map(fn ($d) => $d->transporter)
                                ->filter()
                                ->unique('id')
                                ->values();
                        @endphp
                        @forelse($transporters as $t)
                            <div class="party-meta mb-1">
                                <i class="ri-truck-line"></i>
                                <strong>{{ $t->company_name ?: $t->name }}</strong>
                                @if($t->phone)
                                    <span class="text-muted">· +{{ $t->dial_code }}{{ $t->phone }}</span>
                                @endif
                            </div>
                        @empty
                            <div class="kv-muted">Not assigned</div>
                        @endforelse
                    </div>
                </div>

                <div class="row g-3 mt-2">
                    <div class="col-md-4">
                        <div class="kv-label mb-1">Destination</div>
                        <div class="kv-value">
                            {{ $order->destination_city ?: '—' }}
                            @if($order->destination_country), {{ $order->destination_country }}@endif
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="kv-label mb-1">Items Amount</div>
                        <div class="kv-value">
                            {{ number_format((float) ($order->total_items_amount ?: 0), 2) }}
                            <span class="kv-muted" style="font-weight:500;">{{ $order->currency ?: 'AED' }}</span>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="kv-label mb-1">Weight</div>
                        <div class="kv-value">{{ $order->total_weight ?: 0 }} kg</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ═══════════════════════════════════════════════════════════
         QUOTE PANEL (right column — replaces admin's "Change Status")
         ═══════════════════════════════════════════════════════════ --}}
    <div class="col-lg-4">
        <div class="card h-100">
            <div class="card-header border-bottom d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">Shipping Quote</h5>
                @if($quoteInfo)
                    <span class="badge bg-{{ $quoteInfo['class'] }}-subtle text-{{ $quoteInfo['class'] }}">
                        {{ $quoteInfo['text'] }}
                    </span>
                @endif
            </div>
            <div class="card-body d-flex flex-column">

                {{-- REQUESTED → form --}}
                @if($quote && $quote->status == QUOTE_REQUESTED)
                    <p class="text-muted fs-13 mb-3">
                        Submit your price per variant. The sum becomes your total quote.
                    </p>

                    <form id="quoteForm" data-url="{{ route('cargo_company.shipments.submit_quote', $order->id) }}"
                          class="d-flex flex-column flex-grow-1">
                        @csrf
                        <div class="table-responsive mb-3">
                            <table class="table table-sm align-middle mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th style="font-size:11px;">Variant</th>
                                        <th class="text-end" style="width:50px;font-size:11px;">Qty</th>
                                        <th class="text-end" style="width:100px;font-size:11px;">Price</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($order->orderItems as $item)
                                        @foreach($item->orderItemVariants as $variant)
                                            <tr>
                                                <td>
                                                    <div class="fw-semibold fs-12">{{ $item->name }}</div>
                                                    <div class="text-muted fs-11">{{ $variant->variant }}</div>
                                                </td>
                                                <td class="text-end fs-12">{{ $variant->quantity }}</td>
                                                <td>
                                                    <input type="number" step="0.01" min="0"
                                                           class="form-control form-control-sm text-end quote-price"
                                                           style="height:32px;font-size:12.5px;"
                                                           data-variant-id="{{ $variant->id }}"
                                                           required>
                                                </td>
                                            </tr>
                                        @endforeach
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <button type="submit" class="btn btn-primary w-100 mt-auto" id="submitQuoteBtn">
                            <span class="btn-text">Submit Quote</span>
                            <span class="spinner-border spinner-border-sm d-none ms-2"></span>
                        </button>
                    </form>

                {{-- SUBMITTED → waiting + breakdown --}}
                @elseif($quote && $quote->status == QUOTE_SUBMITTED)
                    <div class="alert alert-info py-2 small mb-3">
                        <i class="ri-hourglass-line"></i> Waiting for merchant review.
                    </div>

                    <div class="d-flex justify-content-between mb-2">
                        <span class="kv-muted">Your total</span>
                        <span class="fw-bold text-primary">
                            {{ number_format((float) $quote->total_amount, 2) }} AED
                        </span>
                    </div>

                    @if($quote->items->isNotEmpty())
                        <div class="pt-2" style="border-top:1px solid #eef2f7;">
                            <div class="kv-label mb-2">Breakdown</div>
                            @foreach($quote->items as $qi)
                                <div class="quote-breakdown-row">
                                    <span class="name">
                                        {{ $qi->orderItemVariant?->orderItem?->name ?? '—' }}
                                        <span class="text-muted">· {{ $qi->orderItemVariant?->variant ?? '' }}</span>
                                    </span>
                                    <span class="price">{{ number_format((float) $qi->price, 2) }} AED</span>
                                </div>
                            @endforeach
                        </div>
                    @endif

                {{-- ACCEPTED → accept shipment flow / create delivery --}}
                @elseif($quote && $quote->status == QUOTE_ACCEPTED)
                    <div class="alert alert-success py-2 small mb-3">
                        <i class="ri-checkbox-circle-line"></i> Merchant accepted your quote.
                    </div>

                    @if((int) $order->status === ORDER_PENDING)
                        <div class="d-grid gap-2 mt-auto">
                            <button class="btn btn-success accept-shipment-btn"
                                    data-url="{{ route('cargo_company.shipments.accept', $order->id) }}">
                                <i class="ri-check-line"></i> Accept Shipment
                            </button>
                            <button class="btn btn-outline-danger reject-shipment-btn">
                                <i class="ri-close-line"></i> Reject Shipment
                            </button>
                        </div>
                    @elseif(in_array((int) $order->status, [ORDER_ACCEPTED, ORDER_ASSIGNED, ORDER_IN_TRANSIT]))
                        <div class="alert alert-success py-2 small mb-3">
                            <i class="ri-check-double-line"></i> You accepted this shipment.
                        </div>
                        @if($canCreateDelivery)
                            <a href="{{ route('cargo_company.deliveries.create', $order->id) }}"
                               class="btn btn-primary w-100 mt-auto">
                                <i class="ri-add-line"></i> Create Delivery
                            </a>
                        @else
                            <div class="kv-muted text-center py-2 mt-auto">
                                <i class="ri-check-double-line"></i> All items assigned.
                            </div>
                        @endif
                    @else
                        <div class="kv-muted mt-auto">
                            Shipment is now in
                            <strong>{{ config("global.order_statuses.{$order->status}.text") ?? 'progress' }}</strong>.
                        </div>
                    @endif

                {{-- REJECTED --}}
                @elseif($quote && $quote->status == QUOTE_REJECTED)
                    <div class="alert alert-danger py-2 small mb-0">
                        <i class="ri-close-circle-line"></i> Your quote was rejected.
                    </div>

                {{-- CANCELLED --}}
                @elseif($quote && $quote->status == QUOTE_CANCELLED)
                    <div class="alert alert-secondary py-2 small mb-0">
                        <i class="ri-close-circle-line"></i> This quote was cancelled.
                    </div>

                {{-- NO QUOTE --}}
                @else
                    <div class="text-center text-muted py-4">
                        <i class="ri-receipt-line" style="font-size:32px;opacity:.4;"></i>
                        <div class="mt-2 fs-13">No active quote for this shipment.</div>
                    </div>
                @endif

            </div>
        </div>
    </div>
</div>

{{-- ═══════════════════════════════════════════════════════════
     ITEMS
     ═══════════════════════════════════════════════════════════ --}}
<div class="row g-3 mb-3">
    <div class="col-12">
        <div class="card">
            <div class="card-header border-bottom d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">Items</h5>
                <span class="badge bg-primary-subtle text-primary">
                    {{ $order->orderItems->count() }} item(s) · {{ $totalExpected }} unit(s)
                </span>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th style="width:50px;">#</th>
                                <th>Item</th>
                                <th>Variants</th>
                                <th class="text-center" style="width:80px;">Total</th>
                                <th class="text-center" style="width:100px;">Assigned</th>
                                <th class="text-center" style="width:100px;">Remaining</th>
                                <th class="text-end" style="width:120px;">Amount</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($order->orderItems as $i => $item)
                                @foreach($item->orderItemVariants as $vIdx => $variant)
                                    @php
                                        $a = $variantAssignment[$variant->id] ?? ['total'=>0,'assigned'=>0,'remaining'=>0];
                                        $pct = $a['total'] > 0 ? round(($a['assigned'] / $a['total']) * 100) : 0;
                                    @endphp
                                    <tr>
                                        @if($vIdx === 0)
                                            <td rowspan="{{ $item->orderItemVariants->count() }}" class="text-muted align-top">
                                                {{ $i + 1 }}
                                            </td>
                                            <td rowspan="{{ $item->orderItemVariants->count() }}" class="align-top">
                                                <div class="d-flex align-items-center gap-2">
                                                    @if($item->image)
                                                        <img src="{{ $item->image->url }}" width="40" height="40" class="rounded border" style="object-fit:cover;">
                                                    @endif
                                                    <div>
                                                        <div class="fw-semibold">{{ $item->name ?: '—' }}</div>
                                                        @if($item->min_variant_price)
                                                            <div class="party-meta">min {{ number_format((float) $item->min_variant_price, 2) }} AED</div>
                                                        @endif
                                                    </div>
                                                </div>
                                            </td>
                                        @endif
                                        <td>
                                            <div class="d-flex align-items-center gap-2">
                                                @if($variant->image)
                                                    <img src="{{ $variant->image->url }}" width="28" height="28" class="rounded border" style="object-fit:cover;">
                                                @elseif($item->image)
                                                    <img src="{{ $item->image->url }}" width="28" height="28" class="rounded border" style="object-fit:cover;opacity:.55;">
                                                @endif
                                                <div>
                                                    <div class="fw-medium fs-13">{{ $variant->variant }}</div>
                                                    <div class="party-meta">{{ number_format((float) $variant->price, 2) }} AED</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="text-center fw-semibold">{{ $a['total'] }}</td>
                                        <td class="text-center">
                                            <div class="fw-semibold">{{ $a['assigned'] }}</div>
                                            <div class="assign-bar"><span style="width: {{ $pct }}%"></span></div>
                                        </td>
                                        <td class="text-center">
                                            @if($a['remaining'] > 0)
                                                <span class="badge bg-warning-subtle text-warning">{{ $a['remaining'] }}</span>
                                            @else
                                                <span class="badge bg-success-subtle text-success"><i class="ri-check-line"></i> Full</span>
                                            @endif
                                        </td>
                                        @if($vIdx === 0)
                                            <td rowspan="{{ $item->orderItemVariants->count() }}" class="text-end fw-semibold align-top">
                                                {{ number_format((float) ($item->total_items_amount ?: 0), 2) }}
                                                <div class="party-meta">AED</div>
                                            </td>
                                        @endif
                                    </tr>
                                @endforeach
                            @empty
                                <tr><td colspan="7" class="text-center text-muted py-4">No items.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ═══════════════════════════════════════════════════════════
     DELIVERIES
     ═══════════════════════════════════════════════════════════ --}}
<div class="row g-3 mb-3">
    <div class="col-12">
        <div class="card">
            <div class="card-header border-bottom d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">Deliveries</h5>
                <div class="d-flex align-items-center gap-2">
                    <span class="badge bg-warning-subtle text-warning">{{ $order->deliveries->count() }} total</span>
                    @if($canCreateDelivery && $order->deliveries->count())
                        <a href="{{ route('cargo_company.deliveries.create', $order->id) }}"
                           class="btn btn-sm btn-soft-primary">
                            <i class="ri-add-line"></i> New Delivery
                        </a>
                    @endif
                </div>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Tracking #</th>
                                <th>Transporter</th>
                                <th class="text-center">Qty</th>
                                <th class="text-end">Charges</th>
                                <th>Status</th>
                                <th>Published</th>
                                <th>Arrival Estimate</th>
                                <th>Delivered At</th>
                                <th style="width:120px;">History</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($order->deliveries as $delivery)
                                @php
                                    $dInfo = config("global.transporter_delivery_statuses.{$delivery->status}")
                                        ?? ['text' => 'Unknown', 'class' => 'secondary'];
                                @endphp
                                <tr>
                                    <td class="fw-semibold">
                                        <a href="{{ route('cargo_company.deliveries.show', $delivery->id) }}"
                                           class="text-primary font-monospace">
                                            {{ $delivery->tracking_number }}
                                        </a>
                                    </td>
                                    <td>{{ $delivery->transporter?->company_name ?: ($delivery->transporter?->name ?: '—') }}</td>
                                    <td class="text-center">{{ $delivery->quantity }}</td>
                                    <td class="text-end">{{ number_format((float) $delivery->total_charges, 2) }} AED</td>
                                    <td>
                                        <span class="badge bg-{{ $dInfo['class'] }}-subtle text-{{ $dInfo['class'] }}">
                                            {{ $dInfo['text'] }}
                                        </span>
                                    </td>
                                    <td>
                                        @if($delivery->is_published)
                                            <span class="badge bg-success-subtle text-success">Yes</span>
                                        @else
                                            <span class="badge bg-secondary-subtle text-secondary">No</span>
                                        @endif
                                    </td>
                                    <td class="text-muted fs-12">
                                        {{ $delivery->arrival_estimate ? web_date_in_timezone($delivery->arrival_estimate, 'M d, Y h:i A') : '—' }}
                                    </td>
                                    <td class="text-muted fs-12">
                                        {{ $delivery->delivered_at ? web_date_in_timezone($delivery->delivered_at, 'M d, Y h:i A') : '—' }}
                                    </td>
                                    <td>
                                        @if($delivery->statusHistories->isEmpty())
                                            <span class="text-muted fs-12">—</span>
                                        @else
                                            <button class="ref-trigger" type="button"
                                                    data-bs-toggle="collapse"
                                                    data-bs-target="#delivery-history-{{ $delivery->id }}">
                                                <i class="ri-history-line"></i>
                                                {{ $delivery->statusHistories->count() }}
                                            </button>
                                        @endif
                                    </td>
                                </tr>
                                @if($delivery->statusHistories->isNotEmpty())
                                    <tr class="collapse" id="delivery-history-{{ $delivery->id }}">
                                        <td colspan="9" class="bg-light">
                                            <div class="p-3">
                                                <div class="kv-label mb-3">Delivery Status History — {{ $delivery->tracking_number }}</div>
                                                <div class="delivery-timeline">
                                                    @foreach($delivery->statusHistories->sortByDesc('created_at') as $sh)
                                                        @php
                                                            $shInfo = config("global.transporter_delivery_statuses.{$sh->status}")
                                                                ?? ['text' => 'Unknown', 'class' => 'secondary'];
                                                        @endphp
                                                        <div class="delivery-timeline-item">
                                                            <div class="d-flex justify-content-between align-items-center">
                                                                <span class="badge bg-{{ $shInfo['class'] }}-subtle text-{{ $shInfo['class'] }}">
                                                                    {{ $shInfo['text'] }}
                                                                </span>
                                                                <small class="text-muted">
                                                                    {{ web_date_in_timezone($sh->created_at, 'M d, Y h:i A') }}
                                                                </small>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                @endif
                            @empty
                                <tr>
                                    <td colspan="9" class="text-center py-5">
                                        <i class="ri-truck-line text-muted" style="font-size:32px;opacity:.4;"></i>
                                        <div class="text-muted mt-2">No deliveries yet.</div>
                                        @if($canCreateDelivery)
                                            <a href="{{ route('cargo_company.deliveries.create', $order->id) }}"
                                               class="btn btn-primary btn-sm mt-3">
                                                <i class="ri-add-line"></i> Create First Delivery
                                            </a>
                                        @endif
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ═══════════════════════════════════════════════════════════
     ORDER STATUS TIMELINE
     ═══════════════════════════════════════════════════════════ --}}
<div class="row g-3">
    <div class="col-12">
        <div class="card">
            <div class="card-header border-bottom d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">Status Timeline</h5>
                <span class="badge bg-secondary-subtle text-secondary">{{ $order->histories->count() }} entries</span>
            </div>
            <div class="card-body">
                @forelse($order->histories->sortByDesc('created_at') as $history)
                    <div class="d-flex mb-3 timeline-line">
                        <div class="flex-shrink-0 me-3">
                            <div class="timeline-dot bg-primary-subtle text-primary">
                                <i class="ri-checkbox-circle-line"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1">
                            <div class="d-flex justify-content-between">
                                <div class="fw-semibold">{!! order_status_badge($history->status) !!}</div>
                                <small class="text-muted">{{ web_date_in_timezone($history->created_at, 'M d, Y h:i A') }}</small>
                            </div>
                            <div class="text-muted fs-13">{{ $history->remark ?: '—' }}</div>
                            @if($history->changer)
                                <small class="text-muted">
                                    by {{ $history->changer->name }}
                                    @if($history->changed_by_role)
                                        ({{ config("global.user_roles.{$history->changed_by_role}") ?? '' }})
                                    @endif
                                </small>
                            @endif
                        </div>
                    </div>
                @empty
                    <div class="text-center text-muted py-4">No status history yet.</div>
                @endforelse
            </div>
        </div>
    </div>
</div>

{{-- Reject modal --}}
<div class="modal fade" id="rejectModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Reject Shipment</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <label class="form-label">Reason (optional)</label>
                <textarea id="rejectReason" class="form-control" rows="3"
                          placeholder="Why are you rejecting this shipment?"></textarea>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="confirmRejectBtn">Reject Shipment</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script>
$(function () {
    var CSRF = '{{ csrf_token() }}';

    /* ═══ Submit quote ═══ */
    $('#quoteForm').on('submit', function (e) {
        e.preventDefault();

        var items = [];
        var valid = true;
        $(this).find('.quote-price').each(function () {
            var price = $(this).val();
            if (price === '' || price === null) { valid = false; return; }
            items.push({
                variant_id: $(this).data('variant-id'),
                price:      price
            });
        });

        if (! valid || ! items.length) {
            toastr.warning('Please enter a price for every variant.');
            return;
        }

        var $btn = $('#submitQuoteBtn');
        $btn.prop('disabled', true).find('.btn-text').text('Submitting...');
        $btn.find('.spinner-border').removeClass('d-none');

        $.ajax({
            url: $(this).data('url'),
            type: 'POST',
            data: { _token: CSRF, items: items },
            success: function (res) {
                if (res.status === 'success') {
                    toastr.success(res.message);
                    setTimeout(function () { location.reload(); }, 600);
                } else {
                    toastr.error(res.message);
                    $btn.prop('disabled', false).find('.btn-text').text('Submit Quote');
                    $btn.find('.spinner-border').addClass('d-none');
                }
            },
            error: function (xhr) {
                toastr.error(xhr.responseJSON?.message || 'Failed to submit quote');
                $btn.prop('disabled', false).find('.btn-text').text('Submit Quote');
                $btn.find('.spinner-border').addClass('d-none');
            }
        });
    });

    /* ═══ Accept shipment ═══ */
    $('.accept-shipment-btn').on('click', function () {
        var url = $(this).data('url');
        Swal.fire({
            title: 'Accept this shipment?',
            text: 'You will be able to create deliveries after accepting.',
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: 'Yes, accept',
            confirmButtonColor: '#10b981'
        }).then(function (r) {
            if (! r.isConfirmed) return;
            $.ajax({
                url: url, type: 'POST', data: { _token: CSRF },
                success: function (res) { toastr.success(res.message); location.reload(); },
                error: function (xhr) { toastr.error(xhr.responseJSON?.message || 'Failed'); }
            });
        });
    });

    /* ═══ Reject shipment ═══ */
    $('.reject-shipment-btn').on('click', function () {
        new bootstrap.Modal(document.getElementById('rejectModal')).show();
    });

    $('#confirmRejectBtn').on('click', function () {
        $.ajax({
            url: '{{ route("cargo_company.shipments.reject", $order->id) }}',
            type: 'POST',
            data: { _token: CSRF, reason: $('#rejectReason').val() },
            success: function (res) { toastr.success(res.message); location.reload(); },
            error: function (xhr) { toastr.error(xhr.responseJSON?.message || 'Failed'); }
        });
    });
});
</script>
@endsection