@extends('layouts.app')

@section('page_title', 'Orders')
@section('page_subtitle', 'Search, import, and manage every order')

@section('page_actions')
    <button type="button" class="btn btn-secondary" onclick="openExportModal()" style="display:inline-flex; align-items:center; gap:6px; margin-right:8px;">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
        Export Report
    </button>
    <button type="button" class="btn btn-secondary" onclick="openImportModal()" style="display:inline-flex; align-items:center; gap:6px; margin-right:8px;">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
        Import Orders
    </button>
    <a class="btn btn-primary" href="{{ route('orders.create') }}">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
        Create Order
    </a>
@endsection

@push('head')
<style type="text/tailwindcss">
    @layer components {
        /* ── Bulk action bar ───────────────────────────── */
        #bulk-bar {
            @apply fixed bottom-0 left-0 right-0 z-40 flex items-center gap-3 px-6 py-4;
            background: var(--color-ink);
            transform: translateY(100%);
            transition: transform 240ms cubic-bezier(.4,0,.2,1);
            box-shadow: 0 -4px 24px rgba(16,24,38,.22);
        }
        #bulk-bar.is-visible { transform: translateY(0); }
        #bulk-bar-count {
            @apply text-sm font-semibold shrink-0;
            color: rgba(255,255,255,.85);
        }
        #bulk-bar .bulk-divider {
            @apply h-6 w-px shrink-0;
            background: rgba(255,255,255,.14);
        }
        .bulk-btn {
            @apply inline-flex items-center gap-2 px-3.5 py-2 rounded-lg text-sm font-medium border cursor-pointer;
            background: rgba(255,255,255,.08);
            border-color: rgba(255,255,255,.14);
            color: #fff;
            transition: background 140ms ease;
        }
        .bulk-btn:hover { background: rgba(255,255,255,.16); }
        .bulk-btn-danger {
            background: rgba(179,38,30,.25);
            border-color: rgba(179,38,30,.4);
            color: #fca5a5;
        }
        .bulk-btn-danger:hover { background: rgba(179,38,30,.4); }
        #bulk-bar-cancel {
            @apply ml-auto inline-flex items-center gap-1.5 text-sm cursor-pointer;
            color: rgba(255,255,255,.55);
            background: transparent;
            border: none;
            transition: color 120ms ease;
        }
        #bulk-bar-cancel:hover { color: #fff; }

        /* ── Checkboxes ────────────────────────────────── */
        .order-cb {
            @apply w-4 h-4 rounded cursor-pointer;
            accent-color: var(--color-brand);
        }
        tr.is-selected { background: var(--color-brand-soft); }

        /* ── Filter bar enhancements ───────────────────── */
        .filter-active-pill {
            @apply inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium;
            background: var(--color-brand-soft);
            color: var(--color-brand-strong);
        }
        /* ── Dropdown options styles ───────────────────── */
        .dropdown-item:hover {
            background: var(--color-surface-alt) !important;
        }
        .dropdown-item-danger:hover {
            background: var(--color-danger-soft) !important;
            color: var(--color-danger) !important;
        }
        
        .dim-input::-webkit-outer-spin-button,
        .dim-input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        .dim-input[type=number] {
            -moz-appearance: textfield;
        }
    }
</style>
@endpush

@section('content')


    {{-- ── Filter card ─────────────────────────────────── --}}
    <div class="card card-pad" style="margin-bottom:18px;">
        <form method="GET" action="{{ route('orders.index') }}" id="filter-form">
            <div style="display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; width: 100%;">
                {{-- Search --}}
                <label style="flex: 1.5; min-width: 180px; max-width: 240px; display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; font-weight: 600; color: var(--color-muted);">
                    <span>Search</span>
                    <div style="position: relative;">
                        <svg style="position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--color-muted);pointer-events:none;" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
                        <input type="text" name="search" value="{{ request('search') }}" placeholder="Search orders..." style="width: 100%; height: 40px; padding: 0 12px 0 36px; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); box-sizing: border-box; font-size: 0.88rem;">
                    </div>
                </label>

                {{-- Project Name (replaces Project ID) --}}
                <label style="flex: 1; min-width: 125px; max-width: 200px; display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; font-weight: 600; color: var(--color-muted);">
                    <span>Project</span>
                    <select name="project_name" style="width: 100%; height: 40px; padding: 0 24px 0 12px; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); box-sizing: border-box; font-size: 0.88rem; appearance: none; -webkit-appearance: none; background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'%2364748B\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'%3E%3Cpolyline points=\'6 9 12 15 18 9\'/%3E%3C/svg%3E'); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px;">
                        <option value="">All Projects</option>
                        @foreach ($projects as $project)
                            <option value="{{ $project->name }}"
                                {{ request('project_name') === $project->name ? 'selected' : '' }}>
                                {{ $project->name }}
                            </option>
                        @endforeach
                    </select>
                </label>

                {{-- Printing Status --}}
                <label style="flex: 1; min-width: 125px; max-width: 155px; display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; font-weight: 600; color: var(--color-muted);">
                    <span>Printing Status</span>
                    <select name="printing_status" style="width: 100%; height: 40px; padding: 0 24px 0 12px; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); box-sizing: border-box; font-size: 0.88rem; appearance: none; -webkit-appearance: none; background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'%2364748B\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'%3E%3Cpolyline points=\'6 9 12 15 18 9\'/%3E%3C/svg%3E'); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px;">
                        <option value="">All Printing</option>
                        <option value="not_printed" {{ request('printing_status') === 'not_printed' ? 'selected' : '' }}>Not Printed</option>
                        <option value="generated"   {{ request('printing_status') === 'generated'   ? 'selected' : '' }}>Generated</option>
                        <option value="printed"     {{ request('printing_status') === 'printed'     ? 'selected' : '' }}>Printed</option>
                        <option value="cancelled"   {{ request('printing_status') === 'cancelled'   ? 'selected' : '' }}>Cancelled</option>
                    </select>
                </label>

                {{-- Shipment Status --}}
                <label style="flex: 1; min-width: 125px; max-width: 155px; display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; font-weight: 600; color: var(--color-muted);">
                    <span>Shipment Status</span>
                    <select name="shipment_status" style="width: 100%; height: 40px; padding: 0 24px 0 12px; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); box-sizing: border-box; font-size: 0.88rem; appearance: none; -webkit-appearance: none; background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'%2364748B\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'%3E%3Cpolyline points=\'6 9 12 15 18 9\'/%3E%3C/svg%3E'); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px;">
                        <option value="">All Shipments</option>
                        <option value="not_booked"       {{ request('shipment_status') === 'not_booked'       ? 'selected' : '' }}>Pending</option>
                        <option value="booked"           {{ request('shipment_status') === 'booked'           ? 'selected' : '' }}>Booked</option>
                        <option value="manifested"       {{ request('shipment_status') === 'manifested'       ? 'selected' : '' }}>Manifested</option>
                        <option value="in_transit"       {{ request('shipment_status') === 'in_transit'       ? 'selected' : '' }}>In Transit</option>
                        <option value="delivered"        {{ request('shipment_status') === 'delivered'        ? 'selected' : '' }}>Delivered</option>
                        <option value="RTO"              {{ request('shipment_status') === 'RTO'              ? 'selected' : '' }}>RTO</option>
                        <option value="cancelled"        {{ request('shipment_status') === 'cancelled'        ? 'selected' : '' }}>Cancelled</option>
                    </select>
                </label>

                {{-- Action Buttons --}}
                <div style="display: flex; gap: 8px; flex-shrink: 0; align-items: center; margin-bottom: 2px;">
                    <button class="btn btn-primary justify-center" type="submit" style="white-space: nowrap; height: 40px; padding: 0 18px; display: inline-flex; align-items: center; border-radius: 8px; font-size: 0.88rem; font-weight: 600;">
                        Apply
                    </button>
                    <a class="btn justify-center" href="{{ route('orders.index') }}" style="min-width: 72px; white-space: nowrap; height: 40px; padding: 0 18px; display: inline-flex; align-items: center; border-radius: 8px; border: 1px solid var(--color-border); color: var(--color-text); text-decoration: none; font-size: 0.88rem; font-weight: 500; background: var(--color-surface);">Reset</a>
                    <button type="button" class="btn btn-secondary justify-center" onclick="getAllSuggestions()" style="white-space: nowrap; height: 40px; padding: 0 18px; display: inline-flex; align-items: center; border-radius: 8px; font-size: 0.88rem; font-weight: 500;">Get Suggestions</button>
                </div>
            </div>

            {{-- Active filter pills --}}
            @if(request('search') || request('project_name') || request('printing_status') || request('shipment_status'))
                <div style="display:flex;align-items:center;justify-content:space-between;margin-top:12px;flex-wrap:wrap;gap:8px;">
                    <div style="display:flex;flex-wrap:wrap;gap:6px;">
                        @if(request('search'))
                            <span class="filter-active-pill">Search: {{ request('search') }}</span>
                        @endif
                        @if(request('project_name'))
                            <span class="filter-active-pill">Project: {{ request('project_name') }}</span>
                        @endif
                        @if(request('printing_status'))
                            <span class="filter-active-pill">Printing: {{ str_replace('_',' ',request('printing_status')) }}</span>
                        @endif
                        @if(request('shipment_status'))
                            <span class="filter-active-pill">Shipment: {{ request('shipment_status') === 'not_booked' ? 'Pending' : str_replace('_',' ',request('shipment_status')) }}</span>
                        @endif
                    </div>
                </div>
            @endif
        </form>
    </div>

    {{-- Export Report Modal --}}
    <div id="export-orders-modal" style="
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(15, 23, 42, 0.45);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        z-index: 99999;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 200ms ease;
    ">
        <div class="export-card" style="
            background: var(--color-surface);
            border: 1px solid var(--color-border);
            border-radius: 20px;
            box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
            width: 100%;
            max-width: 580px;
            padding: 28px;
            transform: scale(0.95);
            transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
        ">
            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:18px;">
                <h2 style="font-size:1.3rem; font-weight:700; color:var(--color-text); margin:0;">Export Orders Report</h2>
                <button type="button" onclick="closeExportModal()" style="background:none; border:none; color:var(--color-muted); cursor:pointer; padding:4px;">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </button>
            </div>
            <p style="font-size:0.9rem; color:var(--color-muted); margin-bottom:20px; line-height:1.5;">
                Select filters below to export order details in CSV format.
            </p>
            <form method="POST" action="{{ route('orders.export-report') }}" class="form-grid">
                @csrf
                <div style="display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;">
                    <label>
                        <span>Start Date</span>
                        <input type="date" name="start_date" style="width:100%;">
                    </label>
                    <label>
                        <span>End Date</span>
                        <input type="date" name="end_date" style="width:100%;">
                    </label>
                </div>
                <label style="margin-bottom:16px;">
                    <span>Project</span>
                    <select name="project_id" style="width:100%;">
                        <option value="all">All Projects</option>
                        @foreach ($projects as $project)
                            <option value="{{ $project->id }}">
                                {{ $project->name }}
                            </option>
                        @endforeach
                    </select>
                </label>
                <label style="margin-bottom:24px;">
                    <span>Shipment Status</span>
                    <select name="shipment_status" style="width:100%;">
                        <option value="all">All Statuses</option>
                        <option value="not_booked">Pending (Not Booked)</option>
                        <option value="booked">Booked</option>
                        <option value="manifest_pending">Manifest Pending</option>
                        <option value="manifested">Manifested</option>
                        <option value="in_transit">In Transit</option>
                        <option value="delivered">Delivered</option>
                        <option value="RTO">RTO</option>
                        <option value="cancelled">Cancelled</option>
                    </select>
                </label>
                <div style="display:flex; gap:12px; justify-content:flex-end;">
                    <button type="button" class="btn" onclick="closeExportModal()">Cancel</button>
                    <button class="btn btn-primary" type="submit">Export CSV</button>
                </div>
            </form>
        </div>
    </div>

    {{-- Bulk Import CSV Modal --}}
    <div id="import-orders-modal" style="
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(15, 23, 42, 0.45);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        z-index: 99999;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 200ms ease;
    ">
        <div class="import-card" style="
            background: var(--color-surface);
            border: 1px solid var(--color-border);
            border-radius: 20px;
            box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
            width: 100%;
            max-width: 480px;
            padding: 28px;
            transform: scale(0.95);
            transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
        ">
            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:18px;">
                <h2 style="font-size:1.3rem; font-weight:700; color:var(--color-text); margin:0;">Bulk Import CSV</h2>
                <button type="button" onclick="closeImportModal()" style="background:none; border:none; color:var(--color-muted); cursor:pointer; padding:4px;">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </button>
            </div>
            <p style="font-size:0.9rem; color:var(--color-muted); margin-bottom:20px; line-height:1.5;">
                Select a project and upload a CSV file with the required order columns (order_number, customer_name, length, width, height, weight).
            </p>
            <form method="POST" action="{{ route('orders.import') }}" enctype="multipart/form-data" class="form-grid">
                @csrf
                <label style="margin-bottom:16px;">
                    <span>Project <span style="color:var(--color-danger);">*</span></span>
                    <select name="project_id" required style="width:100%;">
                        <option value="">— select project —</option>
                        @foreach ($projects as $project)
                            <option value="{{ $project->id }}" {{ old('project_id') == $project->id ? 'selected' : '' }}>
                                {{ $project->name }}
                            </option>
                        @endforeach
                    </select>
                </label>
                <label style="margin-bottom:24px;">
                    <span>CSV File <span style="color:var(--color-danger);">*</span></span>
                    <input type="file" name="csv_file" accept=".csv,.txt" required style="width:100%;">
                </label>
                <div style="display:flex; gap:12px; justify-content:flex-end; align-items:center;">
                    <a href="{{ route('orders.download-sample') }}" class="btn" style="margin-right:auto; text-decoration:none; display:inline-flex; align-items:center; gap:6px;">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                        Sample CSV
                    </a>
                    <button type="button" class="btn" onclick="closeImportModal()">Cancel</button>
                    <button class="btn btn-primary" type="submit">Import Orders</button>
                </div>
            </form>
        </div>
    </div>

    {{-- ── Order List ───────────────────────────────────── --}}
    <div class="section-head">
        <div>
            <h2>Order List</h2>
            <p>{{ $orders->total() }} records found</p>
        </div>
        <div id="select-info" style="display:none; font-size:.88rem; color:var(--color-muted);">
            <span id="selected-count">0</span> selected
        </div>
    </div>

    {{-- Bulk action form wraps the table --}}
    <form method="POST" action="{{ route('orders.bulk-action') }}" id="bulk-form">
        @csrf
        <input type="hidden" name="bulk_action" id="bulk-action-input" value="">

        <div class="card table-wrap">
            <table id="orders-table">
                <thead>
                <tr>
                    <th style="width:44px;">
                        <input type="checkbox" class="order-cb" id="select-all" title="Select all on this page">
                    </th>
                    <th>Order</th>
                    <th>Customer</th>
                    <th>Address</th>
                    <th>Printing Status</th>
                    <th>Shipping Status</th>
                    <th>Dimensions & Weight</th>
                    <th>Total</th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                @forelse ($orders as $order)
                    @php
                        $pkgCls = match($order->shipment_status) {
                            'packed'            => 'badge-success',
                            'shipped'           => 'badge-info',
                            'ready_for_packing' => 'badge-warning',
                            'not_booked'        => 'badge-warning',
                            'booked'            => 'badge-info',
                            'manifested'        => 'badge-success',
                            'in_transit'        => 'badge-info',
                            'delivered'         => 'badge-success',
                            'RTO'               => 'badge-danger',
                            'cancelled'         => 'badge-danger',
                            default             => 'badge-warning',
                        };
                    @endphp
                    <tr data-id="{{ $order->id }}">
                        <td>
                            <input type="checkbox" class="order-cb row-cb" name="ids[]" value="{{ $order->id }}" data-printing-status="{{ $order->printing_status }}" data-shipment-status="{{ $order->shipment_status }}">
                        </td>
                        <td>
                            <strong style="font-family:'IBM Plex Mono',monospace; font-size:.88rem;">{{ $order->order_number }}</strong>
                            <div class="muted" style="font-size:.8rem;">{{ optional($order->project)->name ?? '—' }}</div>
                        </td>
                        <td>
                            <div>{{ $order->customer_name }}</div>
                            <div class="muted" style="font-size:.82rem;">{{ $order->customer_phone ?: 'No phone' }}</div>
                        </td>
                        <td>
                            <div title="{{ $order->shipping_address }}">
                                <div>{{ $order->extracted_city }}</div>
                                <div style="font-size: 0.8rem; color: var(--color-text-muted);">{{ $order->extracted_pincode }}</div>
                            </div>
                        </td>
                        <td>
                            @if($order->printing_status === 'printed')
                                <span class="badge badge-success">Printed</span>
                            @elseif($order->printing_status === 'generated')
                                <span class="badge badge-info">Generated</span>
                            @else
                                <span class="badge badge-warning">Not Printed</span>
                            @endif
                        </td>
                        <td>
                            @if ($order->shipment_status === 'cancelled')
                                <div style="font-weight: 600; text-transform: uppercase; font-size: 0.72rem; color: #EF4444; margin-bottom: 6px; letter-spacing: 0.5px;">
                                    CANCELLED
                                </div>
                                <div class="shipment-suggestion" data-order-id="{{ $order->id }}" style="font-size: 0.8rem; line-height: 1.3; font-weight: 500;">
                                    —
                                </div>
                            @elseif ($order->awb_number && $order->latest_shipment_log)
                                @php
                                    $statusColor = match($order->shipment_status) {
                                        'packed', 'manifested', 'delivered' => '#10B981',
                                        'shipped', 'booked', 'in_transit'   => '#3B82F6',
                                        'ready_for_packing', 'not_booked'   => '#F59E0B',
                                        'RTO', 'cancelled'                  => '#EF4444',
                                        default                             => '#6B7280'
                                    };
                                @endphp
                                <div style="font-weight: 600; text-transform: uppercase; font-size: 0.72rem; color: {{ $statusColor }}; margin-bottom: 4px; letter-spacing: 0.5px;">
                                    {{ str_replace('_', ' ', $order->shipment_status) }}
                                </div>
                                <div style="font-size: 0.8rem; line-height: 1.3;">
                                    <span class="muted" style="font-weight: 500;">{{ $order->latest_shipment_log->courier_name }}</span>
                                    <br>
                                    <a href="{{ $order->tracking_url }}" target="_blank" style="font-family:'IBM Plex Mono',monospace; font-weight:600; text-decoration:underline; color:var(--color-brand);" title="Track Order">
                                        {{ $order->awb_number }}
                                    </a>
                                </div>
                            @else
                                <div class="shipment-suggestion" data-order-id="{{ $order->id }}" style="font-size: 0.8rem; line-height: 1.3; font-weight: 500;">
                                    <button type="button" onclick="getSingleSuggestion({{ $order->id }}, this)" style="background: none; border: none; color: var(--color-brand); font-size: 0.78rem; text-decoration: underline; cursor: pointer; padding: 0;">Get Suggestion</button>
                                </div>
                            @endif
                        </td>
                        <td>
                            @php
                                $isBooked = !empty($order->awb_number) && $order->shipment_status !== 'cancelled';
                            @endphp
                            <div style="display:flex; flex-direction:column; gap: 8px; max-width: 170px; width: 100%;" class="dimensions-editor" data-order-id="{{ $order->id }}">
                                {{-- Weight on top row --}}
                                <div style="width: 100%;">
                                    <input type="number" step="1" value="{{ floatval($order->weight) }}" class="dim-input dim-weight" style="padding: 6px 12px; font-size: 0.85rem; border-radius: 6px; border: 1px solid var(--color-border); width: 100%; box-sizing: border-box; background: var(--color-surface); color: var(--color-text); transition: border-color 150ms ease;" onchange="saveDimensions({{ $order->id }})" title="Weight (grams)" placeholder="Weight (g)" {{ $isBooked ? 'disabled' : '' }}>
                                </div>
                                {{-- L, W, H on bottom row --}}
                                <div style="display:flex; gap: 6px; width: 100%;">
                                    <input type="number" step="0.01" value="{{ floatval($order->length) }}" class="dim-input dim-length" style="padding: 6px 12px; font-size: 0.85rem; border-radius: 6px; border: 1px solid var(--color-border); flex: 1; min-width: 0; box-sizing: border-box; background: var(--color-surface); color: var(--color-text); transition: border-color 150ms ease;" onchange="saveDimensions({{ $order->id }})" title="Length (cm)" placeholder="L" {{ $isBooked ? 'disabled' : '' }}>
                                    <input type="number" step="0.01" value="{{ floatval($order->width) }}" class="dim-input dim-width" style="padding: 6px 12px; font-size: 0.85rem; border-radius: 6px; border: 1px solid var(--color-border); flex: 1; min-width: 0; box-sizing: border-box; background: var(--color-surface); color: var(--color-text); transition: border-color 150ms ease;" onchange="saveDimensions({{ $order->id }})" title="Width (cm)" placeholder="W" {{ $isBooked ? 'disabled' : '' }}>
                                    <input type="number" step="0.01" value="{{ floatval($order->height) }}" class="dim-input dim-height" style="padding: 6px 12px; font-size: 0.85rem; border-radius: 6px; border: 1px solid var(--color-border); flex: 1; min-width: 0; box-sizing: border-box; background: var(--color-surface); color: var(--color-text); transition: border-color 150ms ease;" onchange="saveDimensions({{ $order->id }})" title="Height (cm)" placeholder="H" {{ $isBooked ? 'disabled' : '' }}>
                                </div>
                            </div>
                        </td>
                        <td style="font-family:'IBM Plex Mono',monospace; font-size:.88rem;">
                            ₹{{ number_format((float) $order->amount, 2) }}
                        </td>
                        <td style="text-align:right;">
                            <div class="options-dropdown" style="position:relative; display:inline-block;">
                                <button type="button" class="btn btn-icon options-trigger" style="padding: 6px 12px; font-weight: bold; border-radius: 6px; cursor: pointer; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); line-height: 1;" onclick="toggleOptionsDropdown(event, {{ $order->id }})">
                                    •••
                                </button>
                                <div id="options-menu-{{ $order->id }}" class="dropdown-menu" style="display:none; position:absolute; right:0; top:100%; margin-top:4px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:8px; box-shadow:0 8px 16px rgba(0,0,0,0.1); z-index:100; min-width:160px; overflow:hidden; text-align:left;">
                                    @if ($order->shipment_status === 'not_booked' || $order->shipment_status === 'ready_for_packing' || $order->shipment_status === 'cancelled')
                                        {{-- view order (editable) --}}
                                        <a class="dropdown-item" href="{{ route('orders.edit', $order) }}" style="display:flex; align-items:center; gap:8px; padding:10px 14px; font-size:0.85rem; color:var(--color-text); text-decoration:none; transition:background 120ms ease;">
                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5Z"/></svg>
                                            View Order
                                        </a>
                                        {{-- create shipment --}}
                                        <button type="button" class="dropdown-item" onclick="openCreateShipmentModal({{ $order->id }})" style="display:flex; align-items:center; gap:8px; width:100%; text-align:left; border:none; background:none; padding:10px 14px; font-size:0.85rem; color:var(--color-text); cursor:pointer; transition:background 120ms ease;">
                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="3" width="15" height="13" rx="1"/><path d="M16 8h4l3 3v5h-7V8Z"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>
                                            Create Shipment
                                        </button>
                                    @elseif (in_array($order->shipment_status, ['booked', 'manifest_pending', 'manifested']))
                                        {{-- view order (order not editable only show details) --}}
                                        <a class="dropdown-item" href="{{ route('orders.show', [$order, 'from' => 'orders']) }}" style="display:flex; align-items:center; gap:8px; padding:10px 14px; font-size:0.85rem; color:var(--color-text); text-decoration:none; transition:background 120ms ease;">
                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                                            View Order
                                        </a>
                                        {{-- cancel shipment --}}
                                        <button type="button" class="dropdown-item" style="display:flex; align-items:center; gap:8px; width:100%; text-align:left; border:none; background:none; padding:10px 14px; font-size:0.85rem; color:var(--color-text); cursor:pointer; transition:background 120ms ease;" onclick="cancelBooking({{ $order->id }}, '{{ route('manifest.order.cancel-booking', $order) }}')">
                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
                                            Cancel Shipment
                                        </button>
                                        {{-- manifest --}}
                                        @if ($order->shipment_status === 'booked')
                                            <button type="button" class="dropdown-item" style="display:flex; align-items:center; gap:8px; width:100%; text-align:left; border:none; background:none; padding:10px 14px; font-size:0.85rem; color:var(--color-text); cursor:pointer; transition:background 120ms ease;" onclick="manifestOrder({{ $order->id }}, '{{ route('manifest.order.manifest', $order) }}')">
                                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
                                                Manifest
                                            </button>
                                        @endif
                                    @else
                                        {{-- view order (not editable) --}}
                                        <a class="dropdown-item" href="{{ route('orders.show', [$order, 'from' => 'orders']) }}" style="display:flex; align-items:center; gap:8px; padding:10px 14px; font-size:0.85rem; color:var(--color-text); text-decoration:none; transition:background 120ms ease;">
                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                                            View Order
                                        </a>
                                    @endif
                                </div>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="9"><div class="empty">No orders found. Try adjusting your filters.</div></td>
                    </tr>
                @endforelse
                </tbody>
            </table>
        </div>
    </form>

    {{-- Hidden standalone delete form (outside bulk-form to avoid nesting) --}}
    <form method="POST" id="delete-single-form" style="display:none;">
        @csrf
        @method('DELETE')
    </form>

    {{-- Hidden standalone cancel booking form --}}
    <form method="POST" id="cancel-booking-single-form" style="display:none;">
        @csrf
        <input type="hidden" name="reason" id="cancel-booking-reason">
    </form>

    {{-- Hidden standalone manifest form --}}
    <form method="POST" id="manifest-single-form" style="display:none;">
        @csrf
    </form>

    {{-- Hidden label-sheet form (opens in new tab) --}}
    <form method="POST" action="{{ route('orders.bulk-label-sheet') }}" id="label-sheet-form"
          target="_blank" style="display:none;">
        @csrf
        <input type="hidden" name="mode" id="label-sheet-mode" value="">
        {{-- ids injected by JS --}}
    </form>

    {{-- Hidden form for inline status update --}}
    <form method="POST" id="status-update-form" style="display:none;">
        @csrf
        @method('PATCH')
        <input type="hidden" name="status" id="status-update-val">
    </form>

    {{-- Hidden form for inline shipment status update --}}
    <form method="POST" id="shipment-status-update-form" style="display:none;">
        @csrf
        @method('PATCH')
        <input type="hidden" name="status" id="shipment-status-update-val">
    </form>

    <div style="margin-top:16px;">{{ $orders->links() }}</div>

    {{-- ── Bulk action sticky bar ───────────────────────── --}}
    <div id="bulk-bar" role="toolbar" aria-label="Bulk actions">
        <span id="bulk-bar-count">0 orders selected</span>
        <div class="bulk-divider"></div>

        <button type="button" class="bulk-btn" onclick="submitBulk('create_shipment')">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="3" width="15" height="13" rx="1"/><path d="M16 8h4l3 3v5h-7V8Z"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>
            Create Shipment
        </button>

        <button type="button" class="bulk-btn" id="bulk-generate-btn" onclick="submitBulk('generate_labels')">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82Z"/><line x1="7" y1="7" x2="7.01" y2="7"/></svg>
            Generate Labels
        </button>


        <button type="button" class="bulk-btn" id="bulk-print-btn" onclick="openLabelSheet('print_labels')">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9V2h12v7"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><path d="M6 14h12v8H6z"/></svg>
            Print Labels
        </button>

        <button type="button" class="bulk-btn" onclick="submitBulk('export_selected')">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
            Export Selected
        </button>

        <div class="bulk-divider"></div>

        <button type="button" class="bulk-btn bulk-btn-danger" onclick="submitBulk('delete', true)">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg>
            Delete Orders
        </button>

        <button type="button" id="bulk-bar-cancel" onclick="clearSelection()">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
            Cancel
        </button>
    </div>

    {{-- ── Create Shipment Modal (Full Screen Page) ───────────────── --}}
    <div id="create-shipment-overlay" style="
        display: none; position: fixed; inset: 0; z-index: 1000;
        background: var(--color-surface); align-items: stretch; justify-content: stretch;
    ">
        <div style="
            background: var(--color-surface);
            width: 100%; height: 100vh;
            display: flex; flex-direction: column;
            overflow: hidden;
        ">
            {{-- Modal Header --}}
            <div style="display:flex; align-items:center; justify-content:space-between; padding:20px 28px 16px; border-bottom:1px solid var(--color-border); flex-shrink:0;">
                <div>
                    <div style="font-size:1.25rem; font-weight:800; color:var(--color-brand-strong);">Create Shipment</div>
                    <div id="cs-order-badge" class="muted" style="font-size:0.85rem; margin-top:2px;"></div>
                </div>
                <button type="button" onclick="closeCreateShipmentModal()" style="background:none; border:none; cursor:pointer; padding:6px 12px; font-size:0.88rem; font-weight:600; color:var(--color-muted); border-radius:6px; transition:background 120ms;" onmouseover="this.style.background='var(--color-surface-alt)'" onmouseout="this.style.background='none'">
                    Back to Orders ✕
                </button>
            </div>

            {{-- Modal Body --}}
            <div id="cs-modal-body" style="overflow-y:auto; padding:24px 28px; flex:1; display:flex; flex-direction:column; gap:28px; max-width: 900px; margin: 0 auto; width: 100%;">

                {{-- Loading --}}
                <div id="cs-loading" style="text-align:center; padding:48px 0;">
                    <div style="border:3px solid rgba(0,0,0,.08); border-top-color:var(--color-brand); border-radius:50%; width:36px; height:36px; animation:cs-spin 0.7s linear infinite; margin:0 auto 12px;"></div>
                    <span class="muted" style="font-size:0.88rem;">Loading order details...</span>
                </div>

                {{-- Section 1: Items --}}
                <div id="cs-section-items" style="display:none;">
                    <div id="cs-order-info" style="background:var(--color-surface-alt); border:1px solid var(--color-border); border-radius:10px; padding:14px 16px; margin-bottom:16px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:10px;">
                        <div>
                            <div id="cs-customer-name" style="font-weight:700; font-size:0.95rem;"></div>
                            <div id="cs-address" class="muted" style="font-size:0.8rem; margin-top:3px; line-height:1.5;"></div>
                        </div>
                        <div style="text-align:right;">
                            <div class="muted" style="font-size:0.75rem; text-transform:uppercase; letter-spacing:.04em;">Order Value</div>
                            <div id="cs-order-value" style="font-size:1rem; font-weight:700; color:var(--color-brand); font-family:'IBM Plex Mono',monospace;"></div>
                            <div id="cs-box-pack-size-pill" style="margin-top:4px; display:inline-block; font-size:0.72rem; padding:2px 8px; border-radius:12px; background:var(--color-brand-soft); color:var(--color-brand); font-weight:600;"></div>
                        </div>
                    </div>
                    <div style="display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; flex-wrap:wrap;">
                        <div style="display:flex; align-items:center; gap:10px;">
                            <div style="width:26px; height:26px; border-radius:50%; background:var(--color-brand); color:#fff; display:flex; align-items:center; justify-content:center; font-size:0.78rem; font-weight:700; flex-shrink:0;">1</div>
                            <div style="font-weight:700; font-size:0.95rem;">Select Items (Plants) to Ship</div>
                        </div>
                        <div class="muted" style="font-size:0.78rem;">
                            Plant quantities are based on box pack size. Check/uncheck or edit quantities as needed.
                        </div>
                    </div>
                    <div style="border:1px solid var(--color-border); border-radius:10px; overflow:hidden;">
                        <table style="width:100%; border-collapse:collapse; font-size:0.86rem;">
                            <thead>
                                <tr style="background:var(--color-surface-alt);">
                                    <th style="padding:10px 12px; text-align:left; font-size:0.76rem; color:var(--color-muted); text-transform:uppercase; letter-spacing:.04em; width:40px;">
                                        <input type="checkbox" id="cs-select-all" checked title="Select / Deselect All Plants"
                                            style="width:15px; height:15px; cursor:pointer; accent-color:var(--color-brand);"
                                            onchange="csToggleSelectAll(this.checked)">
                                    </th>
                                    <th style="padding:10px 12px; text-align:left; font-size:0.76rem; color:var(--color-muted); text-transform:uppercase; letter-spacing:.04em;">PLANT / PRODUCT</th>
                                    <th style="padding:10px 12px; text-align:left; font-size:0.76rem; color:var(--color-muted); text-transform:uppercase; letter-spacing:.04em; width:130px;">SKU</th>
                                    <th style="padding:10px 12px; text-align:right; font-size:0.76rem; color:var(--color-muted); text-transform:uppercase; letter-spacing:.04em; width:95px;">PACK QTY</th>
                                    <th style="padding:10px 12px; text-align:right; font-size:0.76rem; color:var(--color-muted); text-transform:uppercase; letter-spacing:.04em; width:105px;">SHIP QTY</th>
                                </tr>
                            </thead>
                            <tbody id="cs-items-tbody"></tbody>
                            <tfoot>
                                <tr style="border-top:1px solid var(--color-border); background:var(--color-surface-alt);">
                                    <td colspan="4" style="padding:10px 12px; font-weight:600;">
                                        <div style="display:flex; align-items:center; gap:8px; flex-wrap:wrap;">
                                            <span>Total Ship Quantity</span>
                                            <span id="cs-selected-count-badge" class="badge badge-success" style="font-size:0.72rem; padding:2px 7px; border-radius:6px;">0 plants selected</span>
                                            <span id="cs-box-size-info" class="muted" style="font-size:0.75rem;"></span>
                                        </div>
                                    </td>
                                    <td style="padding:10px 12px; text-align:right; font-weight:700; font-family:'IBM Plex Mono',monospace; font-size:1rem; color:var(--color-brand);" id="cs-total-ship-qty">0</td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>

                {{-- Section 2: Package Details --}}
                <div id="cs-section-package" style="display:none;">
                    <div style="display:flex; align-items:center; gap:10px; margin-bottom:16px;">
                        <div style="width:26px; height:26px; border-radius:50%; background:var(--color-brand); color:#fff; display:flex; align-items:center; justify-content:center; font-size:0.78rem; font-weight:700; flex-shrink:0;">2</div>
                        <div style="font-weight:700; font-size:0.95rem;">Package Details</div>
                    </div>
                    <div style="margin-bottom:16px;">
                        <label style="display:block; font-size:0.82rem; font-weight:600; color:var(--color-muted); margin-bottom:6px;">Warehouse / Pickup Location</label>
                        <select id="cs-warehouse" style="width:100%; padding:10px 12px; border-radius:8px; border:1px solid var(--color-border); background:var(--color-surface); color:var(--color-text); font-size:0.9rem;">
                            <option value="">Select warehouse...</option>
                            @if(isset($warehouses) && count($warehouses) > 0)
                                @php
                                    $defaultWh = $warehouses->firstWhere('is_default', true);
                                    $defaultWhId = $defaultWh ? $defaultWh->warehouse_id : (auth()->user()->warehouse ?? '');
                                @endphp
                                @foreach($warehouses as $wh)
                                    <option value="{{ $wh->warehouse_id }}" data-pincode="{{ $wh->pin_code }}" {{ $defaultWhId === $wh->warehouse_id ? 'selected' : '' }}>
                                        {{ $wh->address_title }} — {{ $wh->address_line_one }} ({{ $wh->pin_code }}) [{{ $wh->warehouse_id }}]
                                    </option>
                                @endforeach
                            @endif
                        </select>
                    </div>
                    <div style="display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:12px;">
                        <div>
                            <label style="display:block; font-size:0.82rem; font-weight:600; color:var(--color-muted); margin-bottom:6px;">Weight (grams) <span style="color:var(--color-danger);">*</span></label>
                            <input type="number" id="cs-weight" min="1" step="1" placeholder="500" oninput="updateWeightInfo()" style="width:100%; padding:10px 12px; border-radius:8px; border:1px solid var(--color-border); background:var(--color-surface); color:var(--color-text); font-size:0.9rem; box-sizing:border-box;">
                        </div>
                        <div>
                            <label style="display:block; font-size:0.82rem; font-weight:600; color:var(--color-muted); margin-bottom:6px;">Length (cm) <span style="color:var(--color-danger);">*</span></label>
                            <input type="number" id="cs-length" min="1" step="0.1" placeholder="10" oninput="updateWeightInfo()" style="width:100%; padding:10px 12px; border-radius:8px; border:1px solid var(--color-border); background:var(--color-surface); color:var(--color-text); font-size:0.9rem; box-sizing:border-box;">
                        </div>
                        <div>
                            <label style="display:block; font-size:0.82rem; font-weight:600; color:var(--color-muted); margin-bottom:6px;">Breadth (cm) <span style="color:var(--color-danger);">*</span></label>
                            <input type="number" id="cs-width" min="1" step="0.1" placeholder="10" oninput="updateWeightInfo()" style="width:100%; padding:10px 12px; border-radius:8px; border:1px solid var(--color-border); background:var(--color-surface); color:var(--color-text); font-size:0.9rem; box-sizing:border-box;">
                        </div>
                        <div>
                            <label style="display:block; font-size:0.82rem; font-weight:600; color:var(--color-muted); margin-bottom:6px;">Height (cm) <span style="color:var(--color-danger);">*</span></label>
                            <input type="number" id="cs-height" min="1" step="0.1" placeholder="10" oninput="updateWeightInfo()" style="width:100%; padding:10px 12px; border-radius:8px; border:1px solid var(--color-border); background:var(--color-surface); color:var(--color-text); font-size:0.9rem; box-sizing:border-box;">
                        </div>
                    </div>
                    <div id="cs-weight-info" style="margin-top:8px; font-size:0.8rem; color:var(--color-muted);"></div>
                </div>

                {{-- Section 3: Rate Comparison --}}
                <div id="cs-section-rates" style="display:none;">
                    <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;">
                        <div style="display:flex; align-items:center; gap:10px;">
                            <div style="width:26px; height:26px; border-radius:50%; background:var(--color-brand); color:#fff; display:flex; align-items:center; justify-content:center; font-size:0.78rem; font-weight:700; flex-shrink:0;">3</div>
                            <div style="font-weight:700; font-size:0.95rem;">Rate Comparison</div>
                        </div>
                        <button type="button" id="cs-check-rates-btn" onclick="checkRates()" style="background:var(--color-brand); color:#fff; border:none; padding:8px 18px; border-radius:8px; font-size:0.86rem; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:7px; transition:opacity 150ms;">
                            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>
                            Check Rates
                        </button>
                    </div>
                    <div id="cs-rates-list" style="display:flex; flex-direction:column; gap:8px;">
                        <div id="cs-rates-placeholder" style="text-align:center; padding:28px; border:1px dashed var(--color-border); border-radius:10px; color:var(--color-muted); font-size:0.86rem;">
                            Fill in package details above then click <strong>Check Rates</strong>
                        </div>
                    </div>
                </div>

            </div>

            {{-- Modal Footer --}}
            <div style="display:flex; align-items:center; justify-content:space-between; padding:16px 28px; border-top:1px solid var(--color-border); flex-shrink:0; background:var(--color-surface); max-width: 900px; margin: 0 auto; width: 100%;">
                <div id="cs-footer-info" class="muted" style="font-size:0.82rem;"></div>
                <div style="display:flex; gap:10px;">
                    <button type="button" onclick="closeCreateShipmentModal()" class="btn">Cancel</button>
                    <button type="button" id="cs-submit-btn" onclick="submitCreateShipment()" class="btn btn-primary" disabled style="opacity:0.5; cursor:not-allowed;">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                        Create Shipment
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Single Shipment Success Details Modal -->
    <div id="shipment-success-modal" style="
        display: none; position: fixed; inset: 0;
        background: rgba(16, 24, 38, 0.65); backdrop-filter: blur(6px);
        z-index: 9999; align-items: center; justify-content: center;
        padding: 16px;
    ">
        <div style="
            background: var(--color-surface); border-radius: 18px;
            width: 100%; max-width: 540px;
            box-shadow: 0 24px 80px rgba(0,0,0,.28);
            overflow: hidden; padding: 28px;
            text-align: left;
        ">
            <div style="display: flex; align-items: center; gap: 14px; margin-bottom: 20px; border-bottom: 1px solid var(--color-border); padding-bottom: 16px;">
                <div style="width: 46px; height: 46px; border-radius: 50%; background: var(--color-brand-soft); color: var(--color-brand-strong); display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                </div>
                <div>
                    <div style="display: flex; align-items: center; gap: 8px;">
                        <h3 style="font-size: 1.15rem; font-weight: 700; margin: 0;">Shipment Booked Successfully</h3>
                        <span id="success-order-number" style="font-size: 0.8rem; font-family: 'IBM Plex Mono', monospace; font-weight: 600; background: var(--color-surface-alt); padding: 2px 8px; border-radius: 6px; color: var(--color-text);">#—</span>
                    </div>
                    <p class="muted" style="font-size: 0.82rem; margin: 2px 0 0 0;">AWB number generated and tracking record created.</p>
                </div>
            </div>
            
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px;">
                <div style="background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: 10px; padding: 12px;">
                    <div class="muted" style="font-size: 0.75rem; font-weight: 600; text-transform: uppercase; margin-bottom: 4px;">AWB / Tracking Number</div>
                    <div style="display: flex; align-items: center; gap: 6px;">
                        <strong id="success-awb-number" style="font-size: 0.95rem; font-family: 'IBM Plex Mono', monospace; color: var(--color-brand); word-break: break-all;">—</strong>
                    </div>
                </div>
                <div style="background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: 10px; padding: 12px;">
                    <div class="muted" style="font-size: 0.75rem; font-weight: 600; text-transform: uppercase; margin-bottom: 4px;">Courier Partner</div>
                    <strong id="success-courier-name" style="font-size: 0.92rem; color: var(--color-text);">—</strong>
                </div>
            </div>

            <div style="background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: 12px; padding: 14px; margin-bottom: 16px;">
                <div class="muted" style="font-size: 0.75rem; font-weight: 700; text-transform: uppercase; margin-bottom: 10px; letter-spacing: 0.5px;">Recipient & Package Breakdown</div>
                
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 0.84rem; margin-bottom: 8px;">
                    <div>
                        <span class="muted">Customer:</span> <strong id="success-customer-name" style="color: var(--color-text);">—</strong>
                    </div>
                    <div>
                        <span class="muted">Phone:</span> <strong id="success-customer-phone" style="color: var(--color-text);">—</strong>
                    </div>
                </div>
                <div style="font-size: 0.82rem; margin-bottom: 8px;">
                    <span class="muted">Delivery Address:</span> <span id="success-address" style="color: var(--color-text);">—</span>
                </div>
                <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; font-size: 0.82rem; border-top: 1px dashed var(--color-border); margin-top: 8px; padding-top: 8px;">
                    <div>
                        <span class="muted">Weight:</span> <strong id="success-weight">—</strong>
                    </div>
                    <div>
                        <span class="muted">Dimensions:</span> <strong id="success-dimensions">—</strong>
                    </div>
                    <div>
                        <span class="muted">Shipping Charge:</span> <strong id="success-rate" style="color: var(--color-brand);">—</strong>
                    </div>
                </div>
            </div>

            <div id="success-extra-details-container" style="display: none; background: rgba(59, 130, 246, 0.04); border: 1px solid rgba(59, 130, 246, 0.2); border-radius: 10px; padding: 12px; margin-bottom: 20px; font-size: 0.8rem; line-height: 1.45;">
                <div style="font-weight: 700; color: var(--color-brand); margin-bottom: 4px; font-size: 0.78rem; text-transform: uppercase;">Confirmed API Shipment Details</div>
                <div id="success-extra-details" style="color: var(--color-text-muted);"></div>
            </div>

            <div style="display: flex; gap: 10px; justify-content: flex-end;">
                <a id="success-track-btn" href="#" target="_blank" class="btn" style="display: flex; align-items: center; gap: 6px; text-decoration: none; font-size: 0.86rem;">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
                    Track Shipment
                </a>
                <button type="button" id="success-print-btn" class="btn btn-primary" style="display: flex; align-items: center; gap: 6px; font-size: 0.86rem;">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M6 9V2h12v7"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><path d="M6 14h12v8H6z"/></svg>
                    Print Label
                </button>
                <button type="button" id="success-close-btn" class="btn" style="padding-left: 20px; padding-right: 20px; font-size: 0.86rem;">
                    Close
                </button>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
<script>
(function () {
    const selectAll    = document.getElementById('select-all');
    const bulkBar      = document.getElementById('bulk-bar');
    const bulkCount    = document.getElementById('bulk-bar-count');
    const selectInfo   = document.getElementById('select-info');
    const selectedCnt  = document.getElementById('selected-count');
    const bulkForm     = document.getElementById('bulk-form');
    const actionInput  = document.getElementById('bulk-action-input');
    const deleteForm   = document.getElementById('delete-single-form');
    const sheetForm    = document.getElementById('label-sheet-form');
    const sheetMode    = document.getElementById('label-sheet-mode');

    function getChecked() {
        return [...document.querySelectorAll('.row-cb:checked')];
    }

    function updateBar() {
        const checked = getChecked();
        const n = checked.length;

        if (n > 0) {
            bulkBar.classList.add('is-visible');
            bulkCount.textContent = n + ' order' + (n !== 1 ? 's' : '') + ' selected';
        } else {
            bulkBar.classList.remove('is-visible');
        }

        // Show/hide Print Labels button if any selected order is generated/printed
        const hasGeneratedOrPrinted = checked.some(cb => {
            const status = cb.getAttribute('data-printing-status');
            return status === 'generated' || status === 'printed';
        });
        const printBtn = document.getElementById('bulk-print-btn');
        if (printBtn) {
            printBtn.style.display = hasGeneratedOrPrinted ? 'inline-flex' : 'none';
        }
        const generateBtn = document.getElementById('bulk-generate-btn');
        if (generateBtn) {
            generateBtn.style.display = hasGeneratedOrPrinted ? 'none' : 'inline-flex';
        }

        selectInfo.style.display = n > 0 ? '' : 'none';
        selectedCnt.textContent = n;

        document.querySelectorAll('.row-cb').forEach(cb => {
            cb.closest('tr').classList.toggle('is-selected', cb.checked);
        });

        const total = document.querySelectorAll('.row-cb').length;
        selectAll.indeterminate = n > 0 && n < total;
        selectAll.checked = total > 0 && n === total;
    }

    // Select-all toggle
    selectAll.addEventListener('change', function () {
        document.querySelectorAll('.row-cb').forEach(cb => cb.checked = this.checked);
        updateBar();
    });

    // Individual checkboxes
    document.querySelectorAll('.row-cb').forEach(cb => {
        cb.addEventListener('change', updateBar);
    });

    // ── Single order delete (no nested form needed) ──────────────────
    window.deleteOrder = function(id, orderNum) {
        window.customConfirm({
            title: 'Delete Order',
            message: 'Delete order ' + orderNum + '? This cannot be undone.',
            isDanger: true
        }, function() {
            const url = '{{ url("/orders") }}/' + id;
            deleteForm.action = url;
            deleteForm.submit();
        });
    };

    // ── Inline Status/Packaging Change ────────────────────────────────
    window.confirmAndChangeStatus = function(selectEl, id, type, currentVal) {
        const newVal = selectEl.value;
        if (!newVal) return;

        window.customConfirm({
            title: 'Change Status',
            message: 'Are you sure you want to change ' + type + ' status to ' + newVal.replace(/_/g, ' ') + '?',
            isDanger: false
        }, function() {
            if (type === 'status') {
                const form = document.getElementById('status-update-form');
                form.action = '{{ url("/orders") }}/' + id + '/status';
                document.getElementById('status-update-val').value = newVal;
                form.submit();
            } else if (type === 'packaging' || type === 'shipment') {
                const form = document.getElementById('shipment-status-update-form');
                form.action = '{{ url("/orders") }}/' + id + '/shipment-status';
                document.getElementById('shipment-status-update-val').value = newVal;
                form.submit();
            }
        });

        // Reset select element so it returns to placeholder
        selectEl.value = '';
    };

    // ── Bulk action submit ───────────────────────────────────────────
    window.submitBulk = function (action, confirmNeeded = false) {
        const checked = getChecked();
        if (checked.length === 0) return;

        if (action === 'create_shipment' && checked.length >= 1) {
            const hasBooked = checked.some(cb => {
                const status = (cb.getAttribute('data-shipment-status') || '').toLowerCase();
                return status === 'booked' || status === 'manifested' || status === 'in_transit' || status === 'delivered';
            });

            if (hasBooked) {
                const alertTitle = 'Booked Order Selected';
                const alertMsg = 'Selected orders contain booked order(s). Please remove / deselect booked orders before creating shipment.';
                
                if (typeof window.customAlert === 'function') {
                    window.customAlert({
                        title: alertTitle,
                        message: alertMsg,
                        isDanger: true
                    });
                } else if (typeof window.customConfirm === 'function') {
                    window.customConfirm({
                        title: alertTitle,
                        message: alertMsg,
                        alertOnly: true,
                        confirmText: 'OK',
                        isDanger: true
                    });
                } else {
                    alert(alertMsg);
                }
                return;
            }

            const idsQuery = checked.map(cb => 'ids[]=' + cb.value).join('&');
            window.location.href = '{{ url("/orders/bulk-shipment") }}?' + idsQuery + '&from=orders';
            return;
        }

        if (action === 'generate_labels') {
            const hasNotBooked = checked.some(cb => cb.getAttribute('data-shipment-status') !== 'booked');
            if (hasNotBooked) {
                window.customConfirm({
                    title: 'Shipment Required',
                    message: 'You cannot generate labels before creating a shipment. Please book the shipment first to generate a label.',
                    isDanger: false,
                    confirmText: 'OK',
                    alertOnly: true
                }, function() {
                    // Do nothing
                });
                return;
            }
        }

        if (confirmNeeded) {
            window.customConfirm({
                title: 'Delete Orders',
                message: 'Delete ' + checked.length + ' order(s)? This cannot be undone.',
                isDanger: true
            }, function() {
                actionInput.value = action;
                bulkForm.submit();
            });
        } else {
            actionInput.value = action;
            bulkForm.submit();
        }
    };

    // ── Open label sheet in new tab ──────────────────────────────────
    window.openLabelSheet = function(mode) {
        const checked = getChecked();
        if (checked.length === 0) { alert('Please select at least one order.'); return; }

        // Remove previous id inputs
        sheetForm.querySelectorAll('input[name="ids[]"]').forEach(el => el.remove());

        // Inject selected IDs
        checked.forEach(cb => {
            const inp = document.createElement('input');
            inp.type  = 'hidden';
            inp.name  = 'ids[]';
            inp.value = cb.value;
            sheetForm.appendChild(inp);
        });

        sheetMode.value = mode;
        sheetForm.submit();    // target="_blank" → opens in new tab
    };

    // ── Export Report Modal Visibility ──────────────────────────────
    window.openExportModal = function() {
        const modal = document.getElementById('export-orders-modal');
        const card = modal.querySelector('.export-card');
        modal.style.display = 'flex';
        requestAnimationFrame(() => {
            modal.style.opacity = '1';
            card.style.transform = 'scale(1)';
        });
    };

    window.closeExportModal = function() {
        const modal = document.getElementById('export-orders-modal');
        const card = modal.querySelector('.export-card');
        modal.style.opacity = '0';
        card.style.transform = 'scale(0.95)';
        setTimeout(() => {
            modal.style.display = 'none';
        }, 200);
    };

    // ── Bulk Import CSV Modal Visibility ──────────────────────────────
    window.openImportModal = function() {
        const modal = document.getElementById('import-orders-modal');
        const card = modal.querySelector('.import-card');
        modal.style.display = 'flex';
        requestAnimationFrame(() => {
            modal.style.opacity = '1';
            card.style.transform = 'scale(1)';
        });
    };

    window.closeImportModal = function() {
        const modal = document.getElementById('import-orders-modal');
        const card = modal.querySelector('.import-card');
        modal.style.opacity = '0';
        card.style.transform = 'scale(0.95)';
        setTimeout(() => {
            modal.style.display = 'none';
        }, 200);
    };

    // ── Toggle Options Dropdown ──────────────────────────────────────
    window.toggleOptionsDropdown = function(event, id) {
        event.stopPropagation();
        document.querySelectorAll('.dropdown-menu').forEach(menu => {
            if (menu.id !== 'options-menu-' + id) {
                menu.style.display = 'none';
            }
        });
        const menu = document.getElementById('options-menu-' + id);
        if (menu.style.display === 'none' || !menu.style.display) {
            menu.style.display = 'block';
        } else {
            menu.style.display = 'none';
        }
    };

    document.addEventListener('click', function() {
        document.querySelectorAll('.dropdown-menu').forEach(menu => {
            menu.style.display = 'none';
        });
    });

    window.createShipmentAction = function(event, id, orderNum) {
        event.stopPropagation();
        alert("Create Shipment functionality will be configured after these changes.");
    };

    window.saveDimensions = function(orderId) {
        const editor = document.querySelector(`.dimensions-editor[data-order-id="${orderId}"]`);
        if (!editor) return;

        const length = editor.querySelector('.dim-length').value || 0;
        const width = editor.querySelector('.dim-width').value || 0;
        const height = editor.querySelector('.dim-height').value || 0;
        const weight = editor.querySelector('.dim-weight').value || 0;

        // Perform the patch call
        fetch(`/orders/${orderId}/dimensions`, {
            method: 'PATCH',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Accept': 'application/json'
            },
            body: JSON.stringify({ length, width, height, weight })
        })
        .then(response => {
            if (!response.ok) {
                return response.json().then(err => { throw err; });
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                // Flash success color briefly
                editor.querySelectorAll('.dim-input').forEach(inp => {
                    inp.style.borderColor = 'var(--color-success)';
                });
                setTimeout(() => {
                    editor.querySelectorAll('.dim-input').forEach(inp => {
                        inp.style.borderColor = '';
                    });
                }, 800);

                // Dynamically update shipment suggestion
                const suggestionEl = document.querySelector(`tr[data-id="${orderId}"] .shipment-suggestion`);
                if (suggestionEl && data.suggestion) {
                    suggestionEl.innerHTML = data.suggestion;
                }
            }
        })
        .catch(err => {
            console.error(err);
            let msg = 'Failed to save dimensions.';
            if (err.errors) {
                msg += '\n' + Object.values(err.errors).flat().join('\n');
            }
            alert(msg);
        });
    };

    window.getSingleSuggestion = function(orderId, btnEl) {
        const container = btnEl ? btnEl.closest('.shipment-suggestion') : document.querySelector(`.shipment-suggestion[data-order-id="${orderId}"]`);
        if (container) {
            container.innerHTML = '<span class="muted" style="font-size:0.8rem;">Loading...</span>';
        }
        fetch(`/orders/${orderId}/suggestion`)
            .then(response => {
                if (!response.ok) throw new Error('Failed');
                return response.json();
            })
            .then(data => {
                if (data.success && data.suggestion && container) {
                    container.innerHTML = data.suggestion;
                } else if (container) {
                    container.innerHTML = '—';
                }
            })
            .catch(() => {
                if (container) {
                    container.innerHTML = '<span style="color: var(--color-danger); font-size: 0.8rem;">Error</span>';
                }
            });
    };

    window.getAllSuggestions = function() {
        const containers = document.querySelectorAll('.shipment-suggestion[data-order-id]');
        containers.forEach(el => {
            const orderId = el.getAttribute('data-order-id');
            el.innerHTML = '<span class="muted" style="font-size:0.8rem;">Loading...</span>';
            
            fetch(`/orders/${orderId}/suggestion`)
                .then(response => {
                    if (!response.ok) throw new Error('Failed');
                    return response.json();
                })
                .then(data => {
                    if (data.success && data.suggestion) {
                        el.innerHTML = data.suggestion;
                    } else {
                        el.innerHTML = '—';
                    }
                })
                .catch(() => {
                    el.innerHTML = '<span style="color: var(--color-danger); font-size: 0.8rem;">Error</span>';
                });
        });
    };

    // ── Clear selection ──────────────────────────────────────────────
    window.clearSelection = function () {
        document.querySelectorAll('.row-cb').forEach(cb => cb.checked = false);
        selectAll.checked = false;
        updateBar();
    };

    // Standalone Cancel Booking and Manifest triggers to avoid nesting
    window.cancelBooking = function(orderId, actionUrl) {
        window.customConfirm({
            title: 'Cancel Booking',
            message: 'Cancel this shipment booking? This will revert the order to not booked status.',
            isDanger: true,
            showInput: true,
            inputLabel: 'Cancellation Reason',
            inputPlaceholder: 'Enter reason for cancellation...'
        }, function(reason) {
            const form = document.getElementById('cancel-booking-single-form');
            form.action = actionUrl;
            const reasonInput = document.getElementById('cancel-booking-reason');
            if (reasonInput) {
                reasonInput.value = reason || '';
            }
            form.submit();
        });
    };

    window.manifestOrder = function(orderId, actionUrl) {
        window.customConfirm({
            title: 'Manifest Shipment',
            message: 'Are you sure you want to manifest this order?',
            isDanger: false
        }, function() {
            const form = document.getElementById('manifest-single-form');
            form.action = actionUrl;
            form.submit();
        });
    };

    // Intercept Enter key inside dimension inputs to blur and save instead of submitting form
    document.addEventListener('keydown', function(event) {
        if (event.target && event.target.classList.contains('dim-input') && event.key === 'Enter') {
            event.preventDefault();
            event.target.blur();
        }
    });

    // Add bottom padding when bulk bar visible so content isn't hidden
    const observer = new MutationObserver(() => {
        document.body.style.paddingBottom = bulkBar.classList.contains('is-visible') ? '80px' : '';
    });
    observer.observe(bulkBar, { attributes: true, attributeFilter: ['class'] });
})();

// ══════════════════════════════════════════════════════════════
//  Create Shipment Modal Logic
// ══════════════════════════════════════════════════════════════
(function () {
    'use strict';

    /* ── Inject keyframe animation ─────────────────── */
    const style = document.createElement('style');
    style.textContent = `
        @keyframes cs-spin { to { transform: rotate(360deg); } }
        .cs-courier-row {
            display: flex; align-items: center; gap: 14px;
            padding: 14px 16px; border: 1px solid var(--color-border);
            border-radius: 10px; cursor: pointer;
            transition: border-color 140ms, background 140ms;
            background: var(--color-surface);
        }
        .cs-courier-row:hover { background: var(--color-surface-alt); }
        .cs-courier-row.selected {
            border-color: var(--color-brand);
            background: var(--color-brand-soft);
        }
        .cs-courier-row.unavailable {
            opacity: 0.6; cursor: default;
            background: var(--color-surface-alt);
        }
        .cs-badge-serviceable {
            display: inline-flex; align-items: center; gap: 4px;
            padding: 2px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 700;
            background: #dcfce7; color: #16a34a;
        }
        .cs-badge-unavailable {
            display: inline-flex; align-items: center; gap: 4px;
            padding: 2px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 700;
            background: var(--color-danger-soft, #fee2e2); color: var(--color-danger, #dc2626);
        }
    `;
    document.head.appendChild(style);

    /* ── State ─────────────────────────────────────── */
    let csOrderId        = null;
    let csOrderData      = null;
    let csSelectedCourier = null;
    let csItemSelections = {};     // { itemId: selectedQty }
    const CSRF = () => document.querySelector('meta[name="csrf-token"]').content;

    /* ── DOM refs ──────────────────────────────────── */
    const overlay      = document.getElementById('create-shipment-overlay');
    const loading      = document.getElementById('cs-loading');
    const secItems     = document.getElementById('cs-section-items');
    const secPackage   = document.getElementById('cs-section-package');
    const secRates     = document.getElementById('cs-section-rates');
    const itemsTbody   = document.getElementById('cs-items-tbody');
    const ratesList    = document.getElementById('cs-rates-list');
    const submitBtn    = document.getElementById('cs-submit-btn');
    const footerInfo   = document.getElementById('cs-footer-info');

    /* ── Open modal ────────────────────────────────── */
    window.openCreateShipmentModal = function (orderId) {
        csOrderId         = orderId;
        csOrderData       = null;
        csSelectedCourier = null;
        csItemSelections  = {};

        // Reset UI
        loading.style.display    = 'block';
        secItems.style.display   = 'none';
        secPackage.style.display = 'none';
        secRates.style.display   = 'none';
        ratesList.innerHTML      = `<div id="cs-rates-placeholder" style="text-align:center; padding:28px; border:1px dashed var(--color-border); border-radius:10px; color:var(--color-muted); font-size:0.86rem;">Fill in package details above then click <strong>Check Rates</strong></div>`;
        submitBtn.disabled       = true;
        submitBtn.style.opacity  = '0.5';
        submitBtn.style.cursor   = 'not-allowed';
        footerInfo.textContent   = '';
        document.getElementById('cs-weight-info').textContent = '';
        ['cs-weight','cs-length','cs-width','cs-height'].forEach(id => document.getElementById(id).value = '');
        document.getElementById('cs-warehouse').value = "{{ isset($warehouses) ? ($warehouses->firstWhere('is_default', true)->warehouse_id ?? auth()->user()->warehouse ?? '') : (auth()->user()->warehouse ?? '') }}";
        document.getElementById('cs-order-badge').textContent = '#…';

        overlay.style.display = 'flex';
        document.body.style.overflow = 'hidden';

        // Fetch order data
        fetch(`/api/orders/${orderId}/shipment-form`, {
            headers: { 'X-CSRF-TOKEN': CSRF() }
        })
        .then(r => r.json())
        .then(data => {
            csOrderData = data;
            populateModal(data);
        })
        .catch(err => {
            loading.textContent = 'Failed to load order data.';
            console.error(err);
        });
    };

    /* ── Close modal ───────────────────────────────── */
    window.closeCreateShipmentModal = function () {
        overlay.style.display = 'none';
        document.body.style.overflow = '';
    };

    // Close on overlay click
    overlay.addEventListener('click', function (e) {
        if (e.target === overlay) closeCreateShipmentModal();
    });

    /* ── Populate modal with order data ────────────── */
    function populateModal(data) {
        loading.style.display = 'none';

        // Header badge
        document.getElementById('cs-order-badge').textContent = '#' + data.order_number;

        // Order info
        document.getElementById('cs-customer-name').textContent = data.customer_name || '—';
        document.getElementById('cs-address').innerHTML = [
            data.city, data.pincode ? '— ' + data.pincode : ''
        ].filter(Boolean).join(' ') + (data.shipping_address ? '<br>' + data.shipping_address : '');
        document.getElementById('cs-order-value').textContent = '₹' + parseFloat(data.amount || 0).toFixed(2);

        const packSize = parseInt(data.box_pack_size || 1);
        const packPill = document.getElementById('cs-box-pack-size-pill');
        if (packPill) {
            packPill.textContent = `📦 Box Pack Size: ${packSize} ${packSize === 1 ? 'unit' : 'units'}`;
        }
        const boxSizeInfo = document.getElementById('cs-box-size-info');
        if (boxSizeInfo) {
            boxSizeInfo.textContent = `(Pack Size: ${packSize})`;
        }

        // Pre-fill dimensions & weight (from saved order data)
        if (data.weight > 0) document.getElementById('cs-weight').value = data.weight; // already grams from DB
        if (data.length > 0) document.getElementById('cs-length').value = data.length;
        if (data.width  > 0) document.getElementById('cs-width').value  = data.width;
        if (data.height > 0) document.getElementById('cs-height').value = data.height;
        updateWeightInfo();

        // Items table
        itemsTbody.innerHTML = '';
        csItemSelections = {};
        const selectAllCb = document.getElementById('cs-select-all');
        if (selectAllCb) selectAllCb.checked = true;

        if (!data.items || data.items.length === 0) {
            itemsTbody.innerHTML = '<tr><td colspan="5" style="padding:14px; text-align:center; color:var(--color-muted);">No items found for this order.</td></tr>';
        } else {
            data.items.forEach(item => {
                const itemQty = parseInt(item.quantity) || 1;
                const unitPrice = parseFloat(item.unit_price) || 0;
                const lineTotal = parseFloat(item.line_total) || (itemQty * unitPrice);

                csItemSelections[item.id] = {
                    id:           item.id,
                    product_name: item.product_name,
                    sku:          item.sku,
                    quantity:     itemQty,
                    max_qty:      item.max_qty || itemQty,
                    unit_price:   unitPrice,
                    line_total:   lineTotal,
                    selected:     true
                };

                const tr = document.createElement('tr');
                tr.id = `cs-item-row-${item.id}`;
                tr.style.borderTop = '1px solid var(--color-border)';
                tr.style.transition = 'background 0.15s ease, opacity 0.15s ease';
                tr.innerHTML = `
                    <td style="padding:10px 12px; vertical-align:middle;">
                        <input type="checkbox" checked data-item-id="${item.id}" id="cs-cb-${item.id}" class="cs-item-cb"
                            style="width:16px; height:16px; cursor:pointer; accent-color:var(--color-brand);"
                            onchange="csItemToggle(${item.id}, this.checked)">
                    </td>
                    <td style="padding:10px 12px; font-weight:600; vertical-align:middle;">
                        <div style="display:flex; align-items:center; gap:8px;">
                            <span style="font-size:1.1rem; line-height:1;">🌿</span>
                            <span style="color:var(--color-text);">${item.product_name || 'Plant Item'}</span>
                        </div>
                    </td>
                    <td style="padding:10px 12px; font-family:'IBM Plex Mono',monospace; font-size:0.8rem; color:var(--color-muted); vertical-align:middle;">
                        <span style="background:var(--color-surface-alt); border:1px solid var(--color-border); padding:2px 6px; border-radius:4px;">${item.sku || '—'}</span>
                    </td>
                    <td style="padding:10px 12px; text-align:right; font-weight:600; color:var(--color-muted); vertical-align:middle;">
                        ${item.max_qty || itemQty}
                    </td>
                    <td style="padding:10px 12px; text-align:right; vertical-align:middle;">
                        <input type="number" value="${itemQty}" min="1"
                            id="cs-ship-qty-${item.id}" data-item-id="${item.id}"
                            oninput="csQtyChange(${item.id}, this.value)"
                            style="width:70px; padding:5px 8px; border-radius:6px; border:1px solid var(--color-border); text-align:right; font-size:0.88rem; font-weight:600; background:var(--color-surface); color:var(--color-text);">
                    </td>
                `;
                itemsTbody.appendChild(tr);
            });
        }
        updateDeclaredValue();

        // Show all sections
        secItems.style.display   = 'block';
        secPackage.style.display = 'block';
        secRates.style.display   = 'block';
    }

    /* ── Item checkbox toggle ──────────────────────── */
    window.csItemToggle = function (itemId, checked) {
        if (!csItemSelections[itemId]) return;
        csItemSelections[itemId].selected = checked;

        const row = document.getElementById('cs-item-row-' + itemId);
        const qtyInput = document.getElementById('cs-ship-qty-' + itemId);
        if (qtyInput) qtyInput.disabled = !checked;
        if (row) {
            row.style.opacity = checked ? '1' : '0.45';
            row.style.background = checked ? '' : 'var(--color-surface-alt)';
        }

        // Update Select All checkbox state
        const allCbs = document.querySelectorAll('.cs-item-cb');
        const checkedCbs = document.querySelectorAll('.cs-item-cb:checked');
        const selectAllCb = document.getElementById('cs-select-all');
        if (selectAllCb) {
            selectAllCb.checked = allCbs.length > 0 && allCbs.length === checkedCbs.length;
            selectAllCb.indeterminate = checkedCbs.length > 0 && checkedCbs.length < allCbs.length;
        }

        updateDeclaredValue();
    };

    /* ── Select All toggle ─────────────────────────── */
    window.csToggleSelectAll = function (checked) {
        if (!csItemSelections) return;
        Object.keys(csItemSelections).forEach(id => {
            csItemSelections[id].selected = checked;
            const cb = document.getElementById('cs-cb-' + id);
            const qtyInput = document.getElementById('cs-ship-qty-' + id);
            const row = document.getElementById('cs-item-row-' + id);
            if (cb) cb.checked = checked;
            if (qtyInput) qtyInput.disabled = !checked;
            if (row) {
                row.style.opacity = checked ? '1' : '0.45';
                row.style.background = checked ? '' : 'var(--color-surface-alt)';
            }
        });
        updateDeclaredValue();
    };

    /* ── Qty change ────────────────────────────────── */
    window.csQtyChange = function (itemId, newQty) {
        if (!csItemSelections[itemId]) return;
        const val = Math.max(1, parseInt(newQty) || 1);
        csItemSelections[itemId].quantity = val;
        const lineTotal = val * csItemSelections[itemId].unit_price;
        csItemSelections[itemId].line_total = lineTotal;
        const valEl = document.getElementById('cs-item-val-' + itemId);
        if (valEl) valEl.textContent = '₹' + lineTotal.toFixed(2);
        updateDeclaredValue();
    };

    /* ── Declared value & quantities calc ──────────── */
    function updateDeclaredValue() {
        if (!csItemSelections) return;
        let totalVal = 0;
        let totalQty = 0;
        let selectedCount = 0;

        Object.values(csItemSelections).forEach(item => {
            if (item.selected) {
                selectedCount++;
                totalQty += item.quantity;
                totalVal += item.quantity * item.unit_price;
            }
        });

        const badge = document.getElementById('cs-selected-count-badge');
        if (badge) {
            badge.textContent = `${selectedCount} ${selectedCount === 1 ? 'plant' : 'plants'} selected`;
            badge.className = selectedCount > 0 ? 'badge badge-success' : 'badge badge-danger';
        }

        const qtyEl = document.getElementById('cs-total-ship-qty');
        if (qtyEl) qtyEl.textContent = totalQty;

        const valEl = document.getElementById('cs-declared-value');
        if (valEl) valEl.textContent = '₹' + totalVal.toFixed(2);

        // Update check rates sample amount if user checks rates
        if (csOrderData) {
            csOrderData.amount = totalVal;
        }
    }

    /* ── Volumetric weight info ────────────────────── */
    window.updateWeightInfo = function () {
        const w = parseFloat(document.getElementById('cs-weight').value) || 0;
        const l = parseFloat(document.getElementById('cs-length').value) || 0;
        const b = parseFloat(document.getElementById('cs-width').value)  || 0;
        const h = parseFloat(document.getElementById('cs-height').value) || 0;
        if (w > 0 && l > 0 && b > 0 && h > 0) {
            const volWeight     = (l * b * h * 7) / 27000; // Blue Dart formula
            const chargeableKg  = Math.max(w / 1000, volWeight);
            document.getElementById('cs-weight-info').textContent =
                `Volumetric weight: ${volWeight.toFixed(3)} kg | Chargeable: ${chargeableKg.toFixed(3)} kg`;
        } else {
            document.getElementById('cs-weight-info').textContent = '';
        }
    };

    /* ── Check Rates ───────────────────────────────── */
    window.checkRates = function () {
        const warehouse = document.getElementById('cs-warehouse');
        const weight    = document.getElementById('cs-weight').value;
        const length    = document.getElementById('cs-length').value;
        const width     = document.getElementById('cs-width').value;
        const height    = document.getElementById('cs-height').value;
        const pincode   = csOrderData ? csOrderData.pincode : '';
        const selectedOpt = warehouse.options[warehouse.selectedIndex];
        const pickupPin   = selectedOpt && selectedOpt.dataset.pincode ? selectedOpt.dataset.pincode : '';

        // Validate
        if (!warehouse.value) {
            window.customConfirm({
                title: 'Warehouse Required',
                message: 'Please select a warehouse / pickup location.',
                confirmText: 'OK',
                alertOnly: true
            });
            return;
        }
        if (!weight || !length || !width || !height) {
            window.customConfirm({
                title: 'Invalid Dimensions',
                message: 'Please fill in all weight and dimension fields before checking rates.',
                confirmText: 'OK',
                alertOnly: true
            });
            return;
        }
        if (!pincode || !/^\d{6}$/.test(pincode)) {
            window.customConfirm({
                title: 'Invalid Delivery Address',
                message: 'Delivery pincode is missing or invalid. Please check the order address.',
                confirmText: 'OK',
                alertOnly: true
            });
            return;
        }

        const btn = document.getElementById('cs-check-rates-btn');
        btn.disabled = true;
        btn.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" style="animation:cs-spin 0.7s linear infinite; flex-shrink:0;"><circle cx="12" cy="12" r="10" stroke="rgba(255,255,255,.4)" stroke-width="3" fill="none"/><path d="M22 12a10 10 0 0 0-10-10" stroke="#fff" stroke-width="3" fill="none"/></svg> Checking...`;

        ratesList.innerHTML = `<div style="text-align:center; padding:24px; color:var(--color-muted); font-size:0.86rem;">Checking serviceability and rates...</div>`;
        csSelectedCourier = null;
        submitBtn.disabled = true;
        submitBtn.style.opacity = '0.5';
        submitBtn.style.cursor = 'not-allowed';

        fetch('/api/shipments/check-rates-sample', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF() },
            body: JSON.stringify({ pincode, weight, length, width, height, warehouse: warehouse.value })
        })
        .then(r => r.json())
        .then(data => {
            btn.disabled = false;
            btn.innerHTML = `<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg> Check Rates`;
            renderRates(data.couriers);
        })
        .catch(err => {
            btn.disabled = false;
            btn.innerHTML = `Check Rates`;
            ratesList.innerHTML = `<div style="text-align:center; padding:24px; color:var(--color-danger); font-size:0.86rem;">Failed to fetch rates. Please try again.</div>`;
            console.error(err);
        });
    };

    /* ── Render courier rate cards ─────────────────── */
    function renderRates(couriers) {
        ratesList.innerHTML = '';
        couriers.forEach((c, idx) => {
            const row = document.createElement('div');
            row.className = 'cs-courier-row' + (c.serviceable ? '' : ' unavailable');
            row.id = `cs-courier-row-${idx}`;
            row.innerHTML = `
                <div style="flex-shrink:0;">
                    ${c.serviceable
                        ? `<input type="radio" name="cs_courier" value="${idx}" style="width:16px; height:16px; cursor:pointer; accent-color:var(--color-brand);" onchange="csSelectCourier(${idx})">`
                        : `<input type="radio" name="cs_courier" disabled style="width:16px; height:16px; opacity:0.4;">`
                    }
                </div>
                <div style="flex:1;">
                    <div style="display:flex; align-items:center; gap:8px; flex-wrap:wrap;">
                        <span style="font-weight:700; font-size:0.9rem;">${c.courier}</span>
                        <span class="${c.serviceable ? 'cs-badge-serviceable' : 'cs-badge-unavailable'}">
                            ${c.serviceable ? '● Serviceable' : '● Unavailable'}
                        </span>
                    </div>
                    <div style="font-size:0.8rem; color:var(--color-muted); margin-top:3px;">${c.service}${c.eta ? ' | ' + c.eta : ''}${c.note ? ' — ' + c.note : ''}</div>
                </div>
                <div style="text-align:right; flex-shrink:0;">
                    ${c.serviceable
                        ? `<div style="font-weight:700; font-size:0.95rem; font-family:'IBM Plex Mono',monospace;">₹${parseFloat(c.rate).toFixed(2)}</div>
                           <div style="font-size:0.75rem; color:var(--color-muted);">Shipping cost</div>`
                        : `<div style="font-size:0.86rem; color:var(--color-muted);">Unavailable</div>`
                    }
                </div>
            `;
            if (c.serviceable) {
                row.dataset.courierData = JSON.stringify(c);
                row.addEventListener('click', function () { csSelectCourier(idx); });
            }
            ratesList.appendChild(row);
        });
    }

    /* ── Select courier ────────────────────────────── */
    window.csSelectCourier = function (idx) {
        // Deselect all
        document.querySelectorAll('.cs-courier-row').forEach(r => r.classList.remove('selected'));
        document.querySelectorAll('input[name="cs_courier"]').forEach(r => r.checked = false);

        const row = document.getElementById(`cs-courier-row-${idx}`);
        if (!row || row.classList.contains('unavailable')) return;
        row.classList.add('selected');
        const radio = row.querySelector('input[type="radio"]');
        if (radio) radio.checked = true;

        try {
            csSelectedCourier = JSON.parse(row.dataset.courierData);
        } catch(e) { return; }

        // Enable submit
        submitBtn.disabled = false;
        submitBtn.style.opacity = '1';
        submitBtn.style.cursor = 'pointer';
        footerInfo.textContent = `Selected: ${csSelectedCourier.courier} — ₹${parseFloat(csSelectedCourier.rate).toFixed(2)} | ${csSelectedCourier.eta}`;
    };

    /* ── Submit Create Shipment ────────────────────── */
    window.submitCreateShipment = function () {
        if (!csSelectedCourier || !csOrderId) return;

        const selectedItemsPayload = Object.values(csItemSelections)
            .filter(i => i.selected)
            .map(i => ({
                id:           i.id,
                product_name: i.product_name,
                sku:          i.sku,
                quantity:     i.quantity,
                unit_price:   i.unit_price,
                line_total:   i.quantity * i.unit_price
            }));

        if (selectedItemsPayload.length === 0) {
            window.customConfirm({
                title: 'No Plants Selected',
                message: 'Please select at least one plant to ship.',
                confirmText: 'OK',
                alertOnly: true
            });
            return;
        }

        const weight = parseFloat(document.getElementById('cs-weight').value);
        const length = parseFloat(document.getElementById('cs-length').value);
        const width  = parseFloat(document.getElementById('cs-width').value);
        const height = parseFloat(document.getElementById('cs-height').value);

        submitBtn.disabled = true;
        submitBtn.style.opacity = '0.7';
        submitBtn.innerHTML = `<span style="border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; width:14px; height:14px; animation:cs-spin 0.7s linear infinite; display:inline-block;"></span> Creating...`;

        fetch('/api/shipments/create', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF() },
            body: JSON.stringify({
                order_ids:         [csOrderId],
                courier_selection: csSelectedCourier.courier,
                weight_override:   weight,  // grams (DB now stores grams)
                length:            length,
                width:             width,
                height:            height,
                items:             selectedItemsPayload,
            })
        })
        .then(r => r.json())
        .then(data => {
            if (data.success && data.results && data.results.length > 0) {
                const result = data.results[0];
                closeCreateShipmentModal();
                
                // Populate and show the Success Details Modal
                document.getElementById('success-order-number').textContent = '#' + (result.order_number || result.order_id);
                document.getElementById('success-courier-name').textContent = result.courier_name || '—';
                document.getElementById('success-awb-number').textContent = result.tracking_number || '—';
                document.getElementById('success-customer-name').textContent = result.customer_name || '—';
                document.getElementById('success-customer-phone').textContent = result.customer_phone || '—';
                document.getElementById('success-address').textContent = (result.shipping_address || '') + (result.city ? ', ' + result.city : '') + (result.pincode ? ' - ' + result.pincode : '');
                document.getElementById('success-weight').textContent = result.weight ? (result.weight >= 1000 ? (result.weight / 1000).toFixed(2) + ' kg' : result.weight + ' g') : '—';
                document.getElementById('success-dimensions').textContent = result.dimensions || '—';
                document.getElementById('success-rate').textContent = result.rate ? '₹' + parseFloat(result.rate).toFixed(2) : '—';

                // Configure Track button
                const trackBtn = document.getElementById('success-track-btn');
                if (result.tracking_url) {
                    trackBtn.href = result.tracking_url;
                    trackBtn.style.display = 'inline-flex';
                } else {
                    trackBtn.style.display = 'none';
                }

                // Handle Extended API Shipment Details (from Shree Maruti /getshipmentdetails or API)
                const extraContainer = document.getElementById('success-extra-details-container');
                const extraDiv = document.getElementById('success-extra-details');
                if (result.shipment_details && typeof result.shipment_details === 'object') {
                    const sd = result.shipment_details;
                    let infoHtml = [];
                    if (sd.WayBillNo || sd.TrackingNo) infoHtml.push(`<strong>Waybill/AWB:</strong> ${sd.WayBillNo || sd.TrackingNo}`);
                    if (sd.ServiceType) infoHtml.push(`<strong>Service:</strong> ${sd.ServiceType}`);
                    if (sd.ShippingMode || sd.TravelType) infoHtml.push(`<strong>Mode:</strong> ${sd.ShippingMode || sd.TravelType}`);
                    if (sd.DocumentNoRef) infoHtml.push(`<strong>Ref:</strong> ${sd.DocumentNoRef}`);
                    if (sd.Piece || sd.TotalPiece) infoHtml.push(`<strong>Pieces:</strong> ${sd.Piece || sd.TotalPiece}`);
                    if (sd.ActualWeight) infoHtml.push(`<strong>Actual Wt:</strong> ${sd.ActualWeight} g`);
                    if (sd.bookingdate || sd.BookingDate) infoHtml.push(`<strong>Booking Date:</strong> ${sd.bookingdate || sd.BookingDate}`);

                    if (infoHtml.length > 0) {
                        extraDiv.innerHTML = infoHtml.join(' &bull; ');
                        extraContainer.style.display = 'block';
                    } else {
                        extraContainer.style.display = 'none';
                    }
                } else {
                    extraContainer.style.display = 'none';
                }

                // Configure Print Label button
                document.getElementById('success-print-btn').onclick = function() {
                    printSingleLabel(csOrderId);
                };
                
                // Configure Close button
                document.getElementById('success-close-btn').onclick = function() {
                    document.getElementById('shipment-success-modal').style.display = 'none';
                    // Update the order row inline dynamically without reload
                    updateOrderRowAfterBooking(csOrderId, result);
                };
                
                document.getElementById('shipment-success-modal').style.display = 'flex';
            } else {
                const msg = data.errors ? Object.values(data.errors).flat().join('\n') : 'Failed to create shipment.';
                window.customConfirm({
                    title: 'Creation Failed',
                    message: msg,
                    confirmText: 'OK',
                    alertOnly: true
                });
                submitBtn.disabled = false;
                submitBtn.style.opacity = '1';
                submitBtn.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg> Create Shipment`;
            }
        })
        .catch(err => {
            console.error(err);
            window.customConfirm({
                title: 'Network Error',
                message: 'A network error occurred. Please try again.',
                confirmText: 'OK',
                alertOnly: true
            });
            submitBtn.disabled = false;
            submitBtn.style.opacity = '1';
            submitBtn.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg> Create Shipment`;
        });
    };

    /* ── Print Single Label Helper ─────────────────── */
    function printSingleLabel(orderId) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = '/orders/bulk-label-sheet';
        form.target = '_blank';
        
        const csrf = document.createElement('input');
        csrf.type = 'hidden';
        csrf.name = '_token';
        csrf.value = CSRF();
        form.appendChild(csrf);
        
        const mode = document.createElement('input');
        mode.type = 'hidden';
        mode.name = 'mode';
        mode.value = 'print_labels';
        form.appendChild(mode);
        
        const idInput = document.createElement('input');
        idInput.type = 'hidden';
        idInput.name = 'ids[]';
        idInput.value = orderId;
        form.appendChild(idInput);
        
        document.body.appendChild(form);
        form.submit();
        document.body.removeChild(form);
    }

    /* ── Inline row update ─────────────────────────── */
    function updateOrderRowAfterBooking(orderId, result) {
        const rows = document.querySelectorAll('#orders-table tbody tr');
        rows.forEach(tr => {
            // Find the row containing our order ID via options menu trigger or target elements
            const trigger = tr.querySelector(`.options-trigger[onclick*="(${orderId})"]`) || tr.querySelector(`button[onclick*="(${orderId})"]`);
            if (trigger) {
                // 1. Update the Shipping Status cell (index 5)
                const statusCell = tr.cells[5];
                if (statusCell) {
                    statusCell.innerHTML = `
                        <div style="font-weight: 600; text-transform: uppercase; font-size: 0.72rem; color: #3B82F6; margin-bottom: 4px; letter-spacing: 0.5px;">
                            BOOKED
                        </div>
                        <div style="font-size: 0.8rem; line-height: 1.3;">
                            <span class="muted" style="font-weight: 500;">${result.courier_name}</span>
                            <br>
                            <a href="/orders/${orderId}/track" target="_blank" style="font-family:'IBM Plex Mono',monospace; font-weight:600; text-decoration:underline; color:var(--color-brand);" title="Track Order">
                                ${result.tracking_number}
                            </a>
                        </div>
                    `;
                }

                // 2. Disable dimensions inputs in cell (index 6)
                const dimCell = tr.cells[6];
                if (dimCell) {
                    dimCell.querySelectorAll('input').forEach(inp => inp.disabled = true);
                }

                // 3. Update actions dropdown menu options (replace "Create Shipment" with "Cancel Shipment" and "Manifest")
                const menu = document.getElementById(`options-menu-${orderId}`);
                if (menu) {
                    const manifestUrl = `/manifest/order/${orderId}`;
                    const cancelUrl = `/manifest/order/${orderId}/cancel-booking`;
                    
                    // Rebuild inner dropdown HTML completely to represent a Booked/Manifestable order
                    menu.innerHTML = `
                        <a class="dropdown-item" href="/orders/${orderId}" style="display:flex; align-items:center; gap:8px; padding:10px 14px; font-size:0.85rem; color:var(--color-text); text-decoration:none; transition:background 120ms ease;">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                            View Order
                        </a>
                        <button type="button" class="dropdown-item" style="display:flex; align-items:center; gap:8px; width:100%; text-align:left; border:none; background:none; padding:10px 14px; font-size:0.85rem; color:var(--color-text); cursor:pointer; transition:background 120ms ease;" onclick="cancelBooking(${orderId}, '${cancelUrl}')">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
                            Cancel Shipment
                        </button>
                        <button type="button" class="dropdown-item" style="display:flex; align-items:center; gap:8px; width:100%; text-align:left; border:none; background:none; padding:10px 14px; font-size:0.85rem; color:var(--color-text); cursor:pointer; transition:background 120ms ease;" onclick="manifestOrder(${orderId}, '${manifestUrl}')">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
                            Manifest
                        </button>
                    `;
                }
            }
        });
    }

    /* ── Success toast ─────────────────────────────── */
    function showSuccessToast(msg) {
        const toast = document.createElement('div');
        toast.style.cssText = `
            position:fixed; bottom:24px; right:24px; z-index:2000;
            background:var(--color-brand); color:#fff; padding:14px 20px;
            border-radius:10px; font-size:0.86rem; font-weight:600;
            box-shadow:0 8px 24px rgba(0,0,0,.2);
            animation:cs-toastIn 250ms ease forwards;
            max-width:400px; line-height:1.4;
        `;
        toast.textContent = msg;
        const toastStyle = document.createElement('style');
        toastStyle.textContent = `@keyframes cs-toastIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }`;
        document.head.appendChild(toastStyle);
        document.body.appendChild(toast);
        setTimeout(() => { toast.style.opacity = '0'; toast.style.transition = 'opacity 300ms'; setTimeout(() => toast.remove(), 300); }, 4000);
    }

})();

</script>
@endpush