@extends('store.layout.main')
@section('title', 'Sales Orders')

@section('page-header')
<x-store.page-header
    pretitle="Store"
    title="Sales Orders"
    back-route="store.dashboard"
    :other-btn="[
        [
            'href'  => route('store.sales.add'),
            'text'  => 'Add Sale',
            'class' => 'btn btn-success',
            'icon'  => svg_icon('plus','#fff'),
        ]
    ]"
/>
@endsection

@section('main-container')
@php
    $totalShown   = $sales->total();
    $totalPayable = $sales->getCollection()->sum('grand_total');
    $totalDue     = $sales->getCollection()->sum('amount_due');
@endphp

{{-- ── Summary Cards ────────────────────────────────────────── --}}
<div class="row g-3 mb-3">
    @php
        $cards = [
            [
                'label'   => 'Orders',
                'value'   => number_format($totalShown),
                'icon'    => 'bi-receipt',
                'iconClr' => '#1d4ed8',
                'iconBg'  => '#dbeafe',
                'shadow'  => 'rgba(59,130,246,.18)',
            ],
            [
                'label'   => 'Total Payable',
                'value'   => number_format($totalPayable, 2),
                'icon'    => 'bi-cash-coin',
                'iconClr' => '#15803d',
                'iconBg'  => '#dcfce7',
                'shadow'  => 'rgba(34,197,94,.18)',
            ],
            [
                'label'   => 'Total Due',
                'value'   => number_format($totalDue, 2),
                'icon'    => $totalDue > 0 ? 'bi-hourglass-split' : 'bi-check2-circle',
                'iconClr' => $totalDue > 0 ? '#b45309' : '#0f766e',
                'iconBg'  => $totalDue > 0 ? '#fef3c7' : '#ccfbf1',
                'shadow'  => $totalDue > 0 ? 'rgba(245,158,11,.18)' : 'rgba(20,184,166,.18)',
            ],
            [
                'label'   => 'Collected',
                'value'   => number_format($totalPayable - $totalDue, 2),
                'icon'    => 'bi-wallet2',
                'iconClr' => '#6d28d9',
                'iconBg'  => '#ede9fe',
                'shadow'  => 'rgba(139,92,246,.18)',
            ],
        ];
    @endphp

    @foreach($cards as $card)
    <div class="col-6 col-sm-3">
        <div class="card border-0" style="box-shadow:0 2px 14px {{ $card['shadow'] }},0 1px 4px rgba(0,0,0,.06);border-radius:14px">
            <div class="card-body py-3 px-3">
                <div class="d-flex align-items-center gap-3">
                    <div style="width:46px;height:46px;border-radius:12px;background:{{ $card['iconBg'] }};display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 3px 10px {{ $card['shadow'] }}">
                        <i class="bi {{ $card['icon'] }}" style="font-size:1.25rem;color:{{ $card['iconClr'] }}"></i>
                    </div>
                    <div>
                        <div style="font-size:.72rem;font-weight:500;color:#94a3b8;letter-spacing:.4px;text-transform:uppercase">{{ $card['label'] }}</div>
                        <div class="fw-bold" style="font-size:1.1rem;line-height:1.3;color:#1e293b">{{ $card['value'] }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endforeach
</div>

{{-- ── Filters + Search ─────────────────────────────────────── --}}
@php
    $activeFilter       = request('filter', '');
    $activeStatus       = request('status', '');
    $activePayment      = request('payment', '');
    $activeFulfillment  = request('fulfillment', '');
    $activeDiscounted   = request('discounted', '');
    $activeCustomerType = request('customer_type', '');
    $activeOrderType    = request('order_type', '');
    $searchQuery        = request('search', '');
    $hasAnyFilter       = $searchQuery || $activeFilter || $activeStatus || $activePayment
                       || $activeFulfillment || $activeDiscounted || $activeCustomerType || $activeOrderType;

    $fpUrl = function(string $key, string $val): string {
        $params = array_filter([
            'search'        => request('search', ''),
            'filter'        => request('filter', ''),
            'status'        => request('status', ''),
            'payment'       => request('payment', ''),
            'fulfillment'   => request('fulfillment', ''),
            'discounted'    => request('discounted', ''),
            'customer_type' => request('customer_type', ''),
            'order_type'    => request('order_type', ''),
        ]);
        if ($val === '') unset($params[$key]);
        else $params[$key] = $val;
        return route('store.sales.list', $params);
    };

    $filterGroups = [
        'filter' => [
            'label'   => 'Date',
            'active'  => $activeFilter,
            'default' => ['label' => 'All Dates',        'bg' => '#f1f5f9', 'color' => '#64748b', 'dot' => '#94a3b8'],
            'options' => [
                'today'     => ['label' => 'Today',      'bg' => '#dbeafe', 'color' => '#1d4ed8', 'dot' => '#1d4ed8'],
                'yesterday' => ['label' => 'Yesterday',  'bg' => '#dbeafe', 'color' => '#1d4ed8', 'dot' => '#1d4ed8'],
                'this_week' => ['label' => 'This Week',  'bg' => '#dbeafe', 'color' => '#1d4ed8', 'dot' => '#1d4ed8'],
            ],
        ],
        'status' => [
            'label'   => 'Status',
            'active'  => $activeStatus,
            'default' => ['label' => 'All Status',       'bg' => '#f1f5f9', 'color' => '#64748b', 'dot' => '#94a3b8'],
            'options' => [
                'completed' => ['label' => 'Completed',  'bg' => '#dcfce7', 'color' => '#15803d', 'dot' => '#15803d'],
                'pending'   => ['label' => 'Pending',    'bg' => '#f1f5f9', 'color' => '#475569', 'dot' => '#94a3b8'],
                'cancelled' => ['label' => 'Cancelled',  'bg' => '#fee2e2', 'color' => '#b91c1c', 'dot' => '#b91c1c'],
            ],
        ],
        'payment' => [
            'label'   => 'Payment',
            'active'  => $activePayment,
            'default' => ['label' => 'All Payment',      'bg' => '#f1f5f9', 'color' => '#64748b', 'dot' => '#94a3b8'],
            'options' => [
                'paid'    => ['label' => 'Paid',         'bg' => '#dcfce7', 'color' => '#15803d', 'dot' => '#15803d'],
                'partial' => ['label' => 'Partial',      'bg' => '#fef3c7', 'color' => '#b45309', 'dot' => '#d97706'],
                'unpaid'  => ['label' => 'Unpaid',       'bg' => '#fee2e2', 'color' => '#b91c1c', 'dot' => '#b91c1c'],
            ],
        ],
        'fulfillment' => [
            'label'   => 'Fulfillment',
            'active'  => $activeFulfillment,
            'default' => ['label' => 'All Fulfillment',  'bg' => '#f1f5f9', 'color' => '#64748b', 'dot' => '#94a3b8'],
            'options' => [
                'pending'   => ['label' => 'Pending',    'bg' => '#f1f5f9', 'color' => '#64748b', 'dot' => '#94a3b8'],
                'approved'  => ['label' => 'Approved',   'bg' => '#e6f7f5', 'color' => '#0d5c56', 'dot' => '#0d9488'],
                'shipped'   => ['label' => 'Shipped',    'bg' => '#f3e8ff', 'color' => '#7c3aed', 'dot' => '#7c3aed'],
                'delivered' => ['label' => 'Delivered',  'bg' => '#dcfce7', 'color' => '#16a34a', 'dot' => '#16a34a'],
                'cancelled' => ['label' => 'Cancelled',  'bg' => '#fee2e2', 'color' => '#dc2626', 'dot' => '#dc2626'],
            ],
        ],
        'discounted' => [
            'label'   => 'Discount',
            'active'  => $activeDiscounted,
            'default' => ['label' => 'Any Discount',     'bg' => '#f1f5f9', 'color' => '#64748b', 'dot' => '#94a3b8'],
            'options' => [
                'yes' => ['label' => 'Discounted',       'bg' => '#fef3c7', 'color' => '#b45309', 'dot' => '#d97706'],
                'no'  => ['label' => 'No Discount',      'bg' => '#f1f5f9', 'color' => '#475569', 'dot' => '#94a3b8'],
            ],
        ],
        'customer_type' => [
            'label'   => 'Customer',
            'active'  => $activeCustomerType,
            'default' => ['label' => 'All Customers',    'bg' => '#f1f5f9', 'color' => '#64748b', 'dot' => '#94a3b8'],
            'options' => [
                'new'   => ['label' => 'New Customer',   'bg' => '#ccfbf1', 'color' => '#0f766e', 'dot' => '#14b8a6'],
                'guest' => ['label' => 'Guest / Walk-in','bg' => '#f0f9ff', 'color' => '#0369a1', 'dot' => '#0ea5e9'],
            ],
        ],
        'order_type' => [
            'label'   => 'Order Type',
            'active'  => $activeOrderType,
            'default' => ['label' => 'All Types',        'bg' => '#f1f5f9', 'color' => '#64748b', 'dot' => '#94a3b8'],
            'options' => [
                'pos' => ['label' => 'POS',              'bg' => '#e0e7ff', 'color' => '#4338ca', 'dot' => '#4338ca'],
                'app' => ['label' => 'App / Online',     'bg' => '#f3e8ff', 'color' => '#7c3aed', 'dot' => '#7c3aed'],
            ],
        ],
    ];
@endphp

<div class="card border-0 mb-3" style="box-shadow:0 1px 6px rgba(0,0,0,.07);border-radius:14px">
    <div class="card-body py-3 px-3">

        {{-- Row 1: Search + button + clear --}}
        <form method="GET" class="d-flex align-items-center gap-2 mb-3">
            @foreach(['filter','status','payment','fulfillment','discounted','customer_type','order_type'] as $_pk)
                @if(request($_pk))<input type="hidden" name="{{ $_pk }}" value="{{ request($_pk) }}">@endif
            @endforeach
            <div style="position:relative;flex:1">
                <i class="bi bi-search" style="position:absolute;left:11px;top:50%;transform:translateY(-50%);color:#94a3b8;font-size:.8rem;pointer-events:none;z-index:1"></i>
                <input type="text" name="search" value="{{ $searchQuery }}"
                    class="form-control form-control-sm"
                    placeholder="Search order #, customer, phone, transaction ID…"
                    style="padding-left:30px;height:32px;border-radius:20px;border-color:#e2e8f0;background:#f8fafc;font-size:.82rem">
            </div>
            <button type="submit" class="btn btn-sm btn-primary" style="border-radius:20px;height:32px;padding:0 16px;font-size:.78rem;white-space:nowrap;flex-shrink:0">
                <i class="bi bi-search me-1"></i>Search
            </button>
            @if($hasAnyFilter)
            <a href="{{ route('store.sales.list') }}"
               style="display:inline-flex;align-items:center;height:32px;padding:0 13px;border-radius:20px;font-size:.76rem;font-weight:600;background:#fee2e2;color:#b91c1c;text-decoration:none;white-space:nowrap;flex-shrink:0">
                <i class="bi bi-x-lg me-1"></i>Clear All
            </a>
            @endif
        </form>

        {{-- Row 2: Split-pill filter dropdowns --}}
        <div style="display:flex;flex-wrap:wrap;gap:8px;align-items:center">

            @foreach($filterGroups as $paramKey => $cfg)
            @php
                $activeVal  = $cfg['active'];
                $activeCfg  = $activeVal && isset($cfg['options'][$activeVal])
                    ? $cfg['options'][$activeVal]
                    : $cfg['default'];
            @endphp

            <div style="position:relative;display:inline-block">
                {{-- Split pill --}}
                <div id="fpill-{{ $paramKey }}"
                     style="display:inline-flex;align-items:stretch;border-radius:20px;overflow:hidden;font-size:.73rem;font-weight:600;background:{{ $activeCfg['bg'] }};color:{{ $activeCfg['color'] }};white-space:nowrap;border:1.5px solid {{ $activeVal ? 'transparent' : '#e2e8f0' }};cursor:default;user-select:none">
                    <span style="display:inline-flex;align-items:center;gap:5px;padding:4px 7px 4px 10px;pointer-events:none">
                        <span style="width:6px;height:6px;border-radius:50%;background:{{ $activeCfg['dot'] }};flex-shrink:0"></span>
                        <span id="fplabel-{{ $paramKey }}">{{ $activeCfg['label'] }}</span>
                    </span>
                    <span style="width:1px;background:rgba(0,0,0,.1);align-self:stretch;flex-shrink:0"></span>
                    <button type="button"
                            class="fp-toggle"
                            data-key="{{ $paramKey }}"
                            style="display:flex;align-items:center;padding:4px 9px;background:transparent;border:none;color:inherit;cursor:pointer;font-size:.68rem;line-height:1">
                        <i class="bi bi-chevron-down" id="fpicon-{{ $paramKey }}"></i>
                    </button>
                </div>

                {{-- Dropdown --}}
                <div class="fp-dropdown" id="fpdrop-{{ $paramKey }}"
                     style="display:none;position:absolute;top:calc(100% + 5px);left:0;background:#fff;border:1px solid #e2e8f0;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.12);min-width:155px;z-index:500;padding:4px">

                    {{-- "All" clear option --}}
                    <button type="button" class="fp-opt"
                            data-url="{{ $fpUrl($paramKey, '') }}"
                            style="display:flex;align-items:center;gap:8px;width:100%;padding:6px 10px;border:none;background:{{ !$activeVal ? $cfg['default']['bg'] : 'transparent' }};border-radius:7px;cursor:pointer;font-size:.76rem;font-weight:{{ !$activeVal ? '600' : '400' }};color:{{ !$activeVal ? $cfg['default']['color'] : '#374151' }};text-align:left">
                        <span style="width:8px;height:8px;border-radius:50%;background:{{ $cfg['default']['dot'] }};flex-shrink:0"></span>
                        {{ $cfg['default']['label'] }}
                        @if(!$activeVal)<i class="bi bi-check2 ms-auto" style="font-size:.7rem"></i>@endif
                    </button>

                    @foreach($cfg['options'] as $optVal => $opt)
                    <button type="button" class="fp-opt"
                            data-url="{{ $fpUrl($paramKey, $optVal) }}"
                            style="display:flex;align-items:center;gap:8px;width:100%;padding:6px 10px;border:none;background:{{ $activeVal === $optVal ? $opt['bg'] : 'transparent' }};border-radius:7px;cursor:pointer;font-size:.76rem;font-weight:{{ $activeVal === $optVal ? '600' : '400' }};color:{{ $activeVal === $optVal ? $opt['color'] : '#374151' }};text-align:left">
                        <span style="width:8px;height:8px;border-radius:50%;background:{{ $opt['dot'] }};flex-shrink:0"></span>
                        {{ $opt['label'] }}
                        @if($activeVal === $optVal)<i class="bi bi-check2 ms-auto" style="font-size:.7rem"></i>@endif
                    </button>
                    @endforeach

                </div>
            </div>
            @endforeach

        </div>

    </div>
</div>

{{-- ── Table ────────────────────────────────────────────────── --}}
<div class="card">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0" id="salesTable">
                <thead class="table-light border-bottom">
                    <tr>
                        <th class="ps-3" style="width:36px"></th>
                        <th style="text-align:left!important;width:210px">Order</th>
                        <th style="width:130px;max-width:130px">Customer</th>
                        <th>Amount</th>
                        <th style="width:148px;max-width:155px">Delivery</th>
                        <th>Status</th>
                        <th style="width:170px;max-width:170px">Fulfillment</th>
                        <th class="text-end pe-3" style="width:100px">Actions</th>
                    </tr>
                </thead>
                <tbody>
                @forelse($sales as $sale)
                    {{-- Main row --}}
                    <tr class="sales-row" data-id="{{ $sale->id }}">

                        {{-- Expand toggle --}}
                        <td class="ps-3">
                            <button class="toggle-row btn btn-sm btn-primary" data-id="{{ $sale->id }}" title="Details"
                                style="width:28px;height:28px;padding:0;line-height:1;border-radius:6px;font-size:1rem;font-weight:700;box-shadow:0 2px 6px rgba(59,130,246,.35)">
                                <span class="toggle-icon">+</span>
                            </button>
                        </td>

                        {{-- Order: items first, then order#, then date --}}
                        <td style="width:210px;max-width:210px;text-align:left!important;vertical-align:middle">
                            <div style="display:flex;align-items:center;gap:4px;margin-bottom:3px;justify-content:flex-start">
                                <span data-bs-toggle="tooltip" data-bs-title="{{ $sale->product_tooltip }}"
                                      class="fw-semibold text-dark"
                                      style="max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;">
                                    {{ $sale->product_hint }}
                                </span>
                                <span class="badge bg-light text-secondary border" style="font-size:.68rem;flex-shrink:0">{{ $sale->orderDetails->count() }}</span>
                            </div>
                            <div style="display:flex;align-items:center;gap:4px;justify-content:flex-start;margin-bottom:2px">
                                <span class="text-muted" style="font-size:.8rem">#{{ getOrderNumber($sale) }}</span>
                                <button type="button"
                                        class="btn btn-link p-0 border-0 copy-order-btn"
                                        data-copy="{{ getOrderNumber($sale) }}"
                                        title="Copy order number"
                                        style="font-size:.75rem;color:#adb5bd;line-height:1;">
                                    <i class="bi bi-copy"></i>
                                </button>
                            </div>
                            <div style="font-size:.72rem;color:#6c757d;text-align:left">{{ $sale->created_at->format('d M Y · h:i A') }}</div>
                        </td>

                        {{-- Customer --}}
                        <td>
                            <div class="fw-semibold">{{ $sale->customer_name ?: 'Walk-in' }}</div>
                            @if($sale->customer_phone)
                                <div class="text-muted mt-1" style="font-size:.78rem">{{ $sale->customer_phone }}</div>
                            @endif
                        </td>

                        {{-- Amount --}}
                        <td>
                            <div class="fw-bold {{ $sale->amount_due > 0 ? 'text-warning' : 'text-success' }}">
                                {{ format_currency($sale->grand_total) }}
                            </div>
                            @if($sale->amount_due > 0)
                                <div class="text-danger" style="font-size:.78rem">Due: {{ format_currency($sale->amount_due) }}</div>
                            @else
                                <div class="text-success" style="font-size:.75rem"><i class="bi bi-check2"></i> Cleared</div>
                            @endif
                            @php $saleDiscount = ($sale->total_discount ?? 0) + ($sale->coupon_discount ?? 0); @endphp
                            @if($saleDiscount > 0)
                                <div style="margin-top:3px">
                                    <span style="display:inline-flex;align-items:center;gap:3px;font-size:.68rem;font-weight:600;background:#fff7ed;color:#c2410c;border:1px solid #fed7aa;border-radius:4px;padding:1px 5px;line-height:1.5">
                                        <i class="bi bi-tag-fill" style="font-size:.6rem"></i> -{{ format_currency($saleDiscount) }}
                                    </span>
                                </div>
                            @endif
                        </td>

                        {{-- Delivery / fulfillment snapshot --}}
                        <td style="max-width:155px;vertical-align:middle;font-size:.74rem;line-height:1.35">
                            @php
                                $isPosRow = \Illuminate\Support\Str::startsWith((string) ($sale->order_number ?? ''), 'PS-');
                                $resolvedDel = store_order_resolved_delivery_type($sale->shipping_delivery_type ?? null, $sale->shipping_method ?? null);
                                $delLabel = store_order_delivery_type_label($resolvedDel ?? 'none');
                                $rateLbl = store_order_shipping_rate_label($sale->shipping_rate_mode ?? null);
                                $shipFeeRow = (float) ($sale->shipping_fee ?? 0);
                                $dPkgLine = store_order_delivery_package_display(
                                    $sale->shipping_method ?? null,
                                    $sale->shipping_option_key ?? null,
                                    $sale->shipping_delivery_type ?? $resolvedDel
                                );
                            @endphp
                            @if ($isPosRow)
                                <span class="badge bg-secondary-lt text-secondary border border-secondary" style="font-size:.65rem;">POS</span>
                                @if ($dPkgLine !== '' || filled($sale->shipping_method ?? null) || $shipFeeRow > 0)
                                    <div class="mt-1 text-muted" style="font-size:.7rem;">{{ Str::limit($dPkgLine !== '' ? $dPkgLine : (string) ($sale->shipping_method ?? '—'), 26) }}</div>
                                @endif
                            @elseif ($resolvedDel === null && !filled($sale->shipping_method ?? null) && $shipFeeRow < 0.01)
                                <span class="text-muted">—</span>
                            @else
                                @php
                                    $delBadgeScheme = match ($resolvedDel ?? 'none') {
                                        'pickup' => ['bg' => 'warning-lt', 'text' => 'warning', 'border' => 'warning'],
                                        'delivery' => ['bg' => 'azure-lt', 'text' => 'azure', 'border' => 'azure'],
                                        default => ['bg' => 'secondary-lt', 'text' => 'secondary', 'border' => 'secondary'],
                                    };
                                @endphp
                                <span class="badge bg-{{ $delBadgeScheme['bg'] }} text-{{ $delBadgeScheme['text'] }} border border-{{ $delBadgeScheme['border'] }}" style="font-size:.62rem;">{{ $delLabel }}</span>
                                @if (($resolvedDel ?? '') === 'delivery' && $dPkgLine !== '')
                                    <div class="fw-semibold text-dark mt-1" style="font-size:.73rem;">{{ Str::limit($dPkgLine, 26) }}</div>
                                @endif
                                @if (($sale->shipping_rate_mode ?? null) && ($resolvedDel ?? '') === 'delivery')
                                    <div class="text-muted mt-1">{{ $rateLbl }}</div>
                                @endif
                                @if (($sale->shipping_distance_km ?? null) !== null && (float) $sale->shipping_distance_km >= 0 && ($resolvedDel ?? '') === 'delivery')
                                    <div class="text-muted" style="font-size:.68rem;">{{ number_format((float) $sale->shipping_distance_km, 2) }} km</div>
                                @endif
                                @if ($shipFeeRow > 0.005)
                                    <div class="fw-semibold mt-1" style="font-size:.73rem;">{{ format_currency($shipFeeRow) }}</div>
                                @endif
                            @endif
                        </td>

                        {{-- Status --}}
                        <td>
                            @php
                                $sCls = match($sale->status) {
                                    'completed' => 'success',
                                    'cancelled' => 'danger',
                                    default     => 'secondary',
                                };
                                $pCls = match($sale->payment_status) {
                                    'paid'    => 'success',
                                    'unpaid'  => 'danger',
                                    'partial' => 'warning',
                                    default   => 'secondary',
                                };
                            @endphp
                            <span class="badge bg-{{ $sCls }}-lt text-{{ $sCls }} border border-{{ $sCls }} mb-1">{{ ucfirst($sale->status) }}</span><br>
                            <span id="pay-badge-{{ $sale->id }}" class="badge bg-{{ $pCls }}-lt text-{{ $pCls }} border border-{{ $pCls }}">{{ ucfirst($sale->payment_status) }}</span>
                            @if($sale->payment_proof_path)
                                @php $proofUrl = asset('storage/' . ltrim($sale->payment_proof_path, '/')); @endphp
                                <button type="button"
                                        class="payment-proof-thumb ms-1 d-inline-block align-middle border-0 p-0 bg-transparent"
                                        title="View payment proof"
                                        data-proof-src="{{ $proofUrl }}"
                                        style="cursor:zoom-in;line-height:0;border-radius:6px;box-shadow:0 1px 4px rgba(13,92,86,.12)">
                                    <img src="{{ $proofUrl }}" alt="" width="28" height="28" style="object-fit:cover;border-radius:6px;border:1px solid #e2e8f0;display:block">
                                </button>
                            @endif
                        </td>

                        {{-- Fulfillment --}}
                        @php
                            $fStatus = $sale->fulfillment_status ?? 'pending';
                            if ($fStatus === 'accepted') {
                                $fStatus = 'approved';
                            }
                            $fBadge  = match($fStatus) {
                                'approved'  => ['label' => 'Approved',  'bg' => '#e6f7f5', 'color' => '#0d5c56', 'dot' => '#0d9488'],
                                'shipped'   => ['label' => 'Shipped',   'bg' => '#f3e8ff', 'color' => '#7c3aed', 'dot' => '#7c3aed'],
                                'delivered' => ['label' => 'Delivered', 'bg' => '#dcfce7', 'color' => '#16a34a', 'dot' => '#16a34a'],
                                'cancelled' => ['label' => 'Cancelled', 'bg' => '#fee2e2', 'color' => '#dc2626', 'dot' => '#dc2626'],
                                default     => ['label' => 'Pending',   'bg' => '#f1f5f9', 'color' => '#64748b', 'dot' => '#94a3b8'],
                            };

                            // Delivery progress bar
                            $dpBar = null;
                            if ($sale->estimated_delivery && $sale->shipping_tracking_no) {
                                $dpDays = match($sale->estimated_delivery) {
                                    '3-5 days'  => 5,
                                    '1 week'    => 7,
                                    '2 weeks'   => 14,
                                    '3 weeks'   => 21,
                                    '1 month'   => 30,
                                    '2 months'  => 60,
                                    '6 months'  => 180,
                                    default     => null,
                                };
                                if ($dpDays) {
                                    $dpStart   = $sale->updated_at ?? $sale->created_at;
                                    $dpEnd     = $dpStart->copy()->addDays($dpDays);
                                    $dpElapsed = (int) $dpStart->diffInDays(now());
                                    $dpPct     = min(100, round($dpElapsed / $dpDays * 100));
                                    $dpLeft    = max(0, (int) now()->diffInDays($dpEnd, false));
                                    $dpOverdue = now()->gt($dpEnd);
                                    $dpColor   = $dpOverdue ? '#dc2626' : ($dpPct >= 80 ? '#f59e0b' : ($dpPct >= 55 ? '#3b82f6' : '#22c55e'));
                                    $dpLabel   = $dpOverdue
                                        ? 'Overdue by ' . (int) $dpEnd->diffInDays(now()) . 'd'
                                        : $dpLeft . ' day' . ($dpLeft === 1 ? '' : 's') . ' left';
                                    $dpBar = ['pct' => $dpPct, 'color' => $dpColor, 'label' => $dpLabel, 'overdue' => $dpOverdue];
                                }
                            }
                        @endphp
                        <td style="width:170px;max-width:170px;padding-right:18px">
                            {{-- Status split-pill --}}
                            <div style="position:relative;display:inline-block">
                                <div id="ffbadge-{{ $sale->id }}"
                                     style="display:inline-flex;align-items:stretch;border-radius:20px;overflow:hidden;font-size:.72rem;font-weight:600;background:{{ $fBadge['bg'] }};color:{{ $fBadge['color'] }};white-space:nowrap;border:1.5px solid transparent">
                                    <span style="display:inline-flex;align-items:center;gap:5px;padding:3px 6px 3px 9px;pointer-events:none">
                                        <span class="ff-dot" id="ffdot-{{ $sale->id }}" style="width:6px;height:6px;border-radius:50%;background:{{ $fBadge['dot'] }};flex-shrink:0"></span>
                                        <span class="ff-label" id="fflabel-{{ $sale->id }}">{{ $fBadge['label'] }}</span>
                                    </span>
                                    <span style="width:1px;background:rgba(0,0,0,.1);align-self:stretch;flex-shrink:0"></span>
                                    <button type="button"
                                            class="ff-edit-btn"
                                            data-id="{{ $sale->id }}"
                                            data-bs-toggle="tooltip"
                                            title="Change Status"
                                            style="display:flex;align-items:center;padding:3px 8px;background:transparent;border:none;color:inherit;cursor:pointer;font-size:.68rem;line-height:1">
                                        <i class="bi bi-chevron-down" id="fftoggleicon-{{ $sale->id }}"></i>
                                    </button>
                                </div>
                                {{-- Status dropdown --}}
                                <div class="ff-dropdown" id="ffdrop-{{ $sale->id }}"
                                     style="display:none;position:absolute;top:calc(100% + 5px);left:0;background:#fff;border:1px solid #e2e8f0;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.12);min-width:148px;z-index:300;padding:4px">
                                    @foreach([
                                        'pending'   => ['Pending',   '#f1f5f9', '#64748b', '#94a3b8'],
                                        'approved'  => ['Approved',  '#e6f7f5', '#0d5c56', '#0d9488'],
                                        'shipped'   => ['Shipped',   '#f3e8ff', '#7c3aed', '#7c3aed'],
                                        'delivered' => ['Delivered', '#dcfce7', '#16a34a', '#16a34a'],
                                        'cancelled' => ['Cancelled', '#fee2e2', '#dc2626', '#dc2626'],
                                    ] as $optVal => [$optLabel, $optBg, $optColor, $optDot])
                                    <button type="button"
                                            class="ff-status-opt"
                                            data-id="{{ $sale->id }}"
                                            data-val="{{ $optVal }}"
                                            data-url="{{ route('store.sales.fulfillment', $sale->id) }}"
                                            data-bg="{{ $optBg }}"
                                            data-color="{{ $optColor }}"
                                            data-dot="{{ $optDot }}"
                                            data-label="{{ $optLabel }}"
                                            style="display:flex;align-items:center;gap:8px;width:100%;padding:6px 10px;border:none;background:{{ $fStatus === $optVal ? $optBg : 'transparent' }};border-radius:7px;cursor:pointer;font-size:.76rem;font-weight:{{ $fStatus === $optVal ? '600' : '400' }};color:{{ $fStatus === $optVal ? $optColor : '#374151' }};text-align:left">
                                        <span style="width:8px;height:8px;border-radius:50%;background:{{ $optDot }};flex-shrink:0"></span>
                                        {{ $optLabel }}
                                        @if($fStatus === $optVal)<i class="bi bi-check2 ms-auto" style="font-size:.7rem"></i>@endif
                                    </button>
                                    @endforeach
                                </div>
                            </div>
                            {{-- Courier info (shown when set) --}}
                            <div id="ffcourierinfo-{{ $sale->id }}" style="margin-top:6px;display:{{ ($sale->shipping_tracking_no || $sale->courier) ? 'flex' : 'none' }};flex-direction:column;gap:3px">
                                <span class="ff-courier-name" style="font-size:.7rem;color:#374151;font-weight:600">{{ $sale->courier->name ?? '' }}</span>
                                <div style="display:flex;align-items:center;gap:3px">
                                    <span class="ff-courier-tracking" style="font-size:.7rem;color:#64748b;font-family:monospace">{{ $sale->shipping_tracking_no ?? '' }}</span>
                                    @if($sale->shipping_tracking_no)
                                    <button type="button" class="ff-copy-tracking btn btn-link p-0 border-0"
                                            data-copy="{{ $sale->shipping_tracking_no }}"
                                            style="color:#adb5bd;font-size:.65rem;line-height:1;flex-shrink:0">
                                        <i class="bi bi-copy"></i>
                                    </button>
                                    @else
                                    <button type="button" class="ff-copy-tracking btn btn-link p-0 border-0"
                                            data-copy=""
                                            style="color:#adb5bd;font-size:.65rem;line-height:1;flex-shrink:0;display:none">
                                        <i class="bi bi-copy"></i>
                                    </button>
                                    @endif
                                </div>
                                {{-- Estimated delivery + progress bar --}}
                                <div class="ff-delivery-block" style="margin-top:1px;max-width:115px">
                                    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:3px">
                                        <span class="ff-courier-delivery" style="font-size:.67rem;color:#94a3b8">
                                            {{ $sale->estimated_delivery ? '~'.$sale->estimated_delivery : '' }}
                                        </span>
                                        @if($dpBar)
                                        <span style="font-size:.63rem;font-weight:600;color:{{ $dpBar['overdue'] ? '#dc2626' : ($dpBar['pct'] >= 80 ? '#f59e0b' : '#64748b') }}">
                                            {{ $dpBar['label'] }}
                                        </span>
                                        @endif
                                    </div>
                                    @if($dpBar)
                                    <div style="background:#f1f5f9;border-radius:6px;height:5px;overflow:hidden">
                                        <div style="width:{{ $dpBar['pct'] }}%;height:100%;background:{{ $dpBar['color'] }};border-radius:6px;transition:width .4s ease"></div>
                                    </div>
                                    @endif
                                </div>
                            </div>
                        </td>

                        {{-- Actions --}}
                        @php
                            $courierTooltip = $sale->shipping_tracking_no
                                ? 'Show Courier Details'
                                : 'Enter Tracking#';
                        @endphp
                        <td class="text-end pe-3">
                            <div class="d-flex gap-1 justify-content-end align-items-center">
                                {{-- Courier --}}
                                <button type="button"
                                        class="ff-courier-btn btn btn-light border"
                                        id="ffcourierbtn-{{ $sale->id }}"
                                        data-id="{{ $sale->id }}"
                                        data-orderno="{{ $sale->order_number }}"
                                        data-courier="{{ $sale->courier_id ?? '' }}"
                                        data-tracking="{{ $sale->shipping_tracking_no ?? '' }}"
                                        data-delivery="{{ $sale->estimated_delivery ?? '' }}"
                                        data-url="{{ route('store.sales.courier', $sale->id) }}"
                                        data-bs-toggle="tooltip"
                                        title="{{ $courierTooltip }}"
                                        style="padding:3px 8px;font-size:.8rem;line-height:1.6;{{ $sale->shipping_tracking_no ? 'color:#1a56db;border-color:#c7d7f8!important;background:#f0f5ff' : '' }}">
                                    <i class="bi bi-truck"></i>
                                </button>
                                {{-- Three-dot menu --}}
                                <div class="dropdown">
                                    <button type="button"
                                            class="btn btn-light border"
                                            data-bs-toggle="dropdown"
                                            aria-expanded="false"
                                            style="padding:3px 8px;font-size:.8rem;line-height:1.6">
                                        <i class="bi bi-three-dots"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end" style="min-width:170px;font-size:.82rem">
                                        <li>
                                            <a class="open-popup dropdown-item"
                                               href="{{ route('store.popup.itemDetail', ['id' => $sale->id, 'controller' => 'StoreSalesController', 'method' => 'detailPopup']) }}"
                                               popup-title="Invoice #{{ $sale->order_number }}"
                                               style="display:flex;align-items:center;gap:8px;text-align:left">
                                                <i class="bi bi-eye text-muted" style="width:14px;flex-shrink:0"></i> View Order Detail
                                            </a>
                                        </li>
                                        <li><hr class="dropdown-divider my-1"></li>
                                        <li>
                                            <a class="dropdown-item"
                                               href="{{ route('store.sales.download-invoice', $sale->id) }}"
                                               target="_blank"
                                               style="display:flex;align-items:center;gap:8px;text-align:left">
                                                <i class="bi bi-download text-muted" style="width:14px;flex-shrink:0"></i> Download Invoice
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item"
                                               href="{{ route('store.sales.print-invoice', $sale->id) }}"
                                               target="_blank"
                                               style="display:flex;align-items:center;gap:8px;text-align:left">
                                                <i class="bi bi-printer text-muted" style="width:14px;flex-shrink:0"></i> Print Invoice
                                            </a>
                                        </li>
                                        <li><hr class="dropdown-divider my-1"></li>
                                        @if($sale->payment_status !== 'paid')
                                        <li>
                                            <button type="button"
                                                    class="mark-paid-btn dropdown-item"
                                                    data-id="{{ $sale->id }}"
                                                    data-url="{{ route('store.sales.mark-paid', $sale->id) }}"
                                                    style="display:flex;align-items:center;gap:8px;text-align:left;color:#16a34a">
                                                <i class="bi bi-check-circle" style="width:14px;flex-shrink:0"></i> Mark as Paid
                                            </button>
                                        </li>
                                        <li><hr class="dropdown-divider my-1"></li>
                                        @endif
                                        <li>
                                            <a class="dropdown-item"
                                               href="{{ route('store.sales.edit', $sale->id) }}"
                                               style="display:flex;align-items:center;gap:8px;text-align:left">
                                                <i class="bi bi-pencil text-muted" style="width:14px;flex-shrink:0"></i> Edit Order
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </td>
                    </tr>

                    {{-- Expandable detail row --}}
                    <tr class="d-none expand-row" id="expand-{{ $sale->id }}">
                        <td colspan="8" class="p-0 border-0">
                            <div class="bg-light border-top border-bottom px-4 py-3">
                                <div class="row g-3 text-sm">
                                    <div class="col-sm-auto">
                                        <span class="text-muted">Base Price</span><br>
                                        <strong>{{ format_currency($sale->order_base_price) }}</strong>
                                    </div>
                                    <div class="col-sm-auto">
                                        <span class="text-muted">Subtotal</span><br>
                                        <strong>{{ format_currency($sale->subtotal) }}</strong>
                                    </div>
                                    <div class="col-sm-auto">
                                        <span class="text-muted">Discount</span><br>
                                        <strong class="text-danger">-{{ format_currency($sale->total_discount) }}</strong>
                                    </div>
                                    <div class="col-sm-auto">
                                        <span class="text-muted">Tax</span><br>
                                        <strong>{{ format_currency($sale->total_tax) }}</strong>
                                    </div>
                                    @if($sale->coupon_code)
                                    <div class="col-sm-auto">
                                        <span class="text-muted">Coupon</span><br>
                                        <strong class="text-success">{{ $sale->coupon_code }} (-{{ format_currency($sale->coupon_discount) }})</strong>
                                    </div>
                                    @endif
                                    <div class="col-sm-auto">
                                        <span class="text-muted">Grand Total</span><br>
                                        <strong class="text-primary fs-6">{{ format_currency($sale->grand_total) }}</strong>
                                    </div>
                                    @if($sale->payment_method)
                                    <div class="col-sm-auto">
                                        <span class="text-muted">Payment Method</span><br>
                                        <strong>{{ ucfirst(str_replace('_', ' ', $sale->payment_method)) }}</strong>
                                    </div>
                                    @endif
                                    @if($sale->transaction_id)
                                    <div class="col-sm-auto">
                                        <span class="text-muted">Transaction ID</span><br>
                                        <code class="text-dark">{{ $sale->transaction_id }}</code>
                                    </div>
                                    @endif
                                    @if(filled($sale->shipping_method) || filled($sale->shipping_delivery_type) || filled($sale->shipping_rate_mode) || (float)($sale->shipping_fee ?? 0) > 0 || $sale->shipping_distance_km !== null)
                                    <div class="col-sm-auto">
                                        <span class="text-muted">Delivery</span><br>
                                        @php $expDel = store_order_resolved_delivery_type($sale->shipping_delivery_type ?? null, $sale->shipping_method ?? null) ?? 'none'; @endphp
                                        <strong>{{ store_order_delivery_type_label($expDel) }}</strong>
                                        @if(filled($sale->shipping_method ?? null))
                                            <div class="small text-muted">{{ Str::limit($sale->shipping_method, 40) }}</div>
                                        @endif
                                        @if(filled($sale->shipping_rate_mode ?? null))
                                            <div class="small">{{ store_order_shipping_rate_label($sale->shipping_rate_mode) }}</div>
                                        @endif
                                        @if($sale->shipping_distance_km !== null)
                                            <div class="small text-muted">{{ number_format((float)$sale->shipping_distance_km, 2) }} km</div>
                                        @endif
                                        @if((float)($sale->shipping_fee ?? 0) > 0)
                                            <div class="small fw-semibold">{{ format_currency((float)$sale->shipping_fee) }}</div>
                                        @endif
                                    </div>
                                    @endif
                                    @if($sale->customer_note)
                                    <div class="col-12">
                                        <span class="text-muted">Note:</span> {{ $sale->customer_note }}
                                    </div>
                                    @endif
                                    @php
                                        $expandAddr = array_filter([
                                            filled($sale->shipping_address_line ?? null) ? $sale->shipping_address_line : null,
                                            filled($sale->shipping_area ?? null)         ? 'Area: ' . $sale->shipping_area : null,
                                            filled($sale->shipping_city ?? null)         ? 'City: ' . $sale->shipping_city : null,
                                            filled($sale->shipping_state ?? null)        ? 'State: ' . $sale->shipping_state : null,
                                            filled($sale->shipping_postal_code ?? null)  ? $sale->shipping_postal_code : null,
                                            filled($sale->shipping_country ?? null)      ? strtoupper($sale->shipping_country) : null,
                                        ]);
                                    @endphp
                                    @if (count($expandAddr))
                                    <div class="col-12">
                                        <span class="text-muted">Address:</span>
                                        <span>{{ implode(',  ', $expandAddr) }}</span>
                                    </div>
                                    @endif
                                </div>
                            </div>
                        </td>
                    </tr>

                @empty
                    <tr>
                        <td colspan="8" class="text-center text-muted py-5">
                            <i class="bi bi-inbox fs-2 d-block mb-2"></i>
                            No sales found
                            @if($searchQuery || $activeFilter)
                                — <a href="{{ route('store.sales.list') }}">clear filters</a>
                            @endif
                        </td>
                    </tr>
                @endforelse
                </tbody>
            </table>
        </div>

        @if($sales->hasPages())
        <div class="card-footer d-flex align-items-center justify-content-between">
            <small class="text-muted">
                Showing {{ $sales->firstItem() }}–{{ $sales->lastItem() }} of {{ $sales->total() }} orders
            </small>
            {{ $sales->appends(request()->query())->links() }}
        </div>
        @endif
    </div>
</div>

{{-- ── Courier Modal ────────────────────────────────────────── --}}
<div class="modal fade" id="courierModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content" style="border-radius:12px;overflow:hidden">
            <div class="modal-header border-0 pb-0 px-4 pt-4">
                <div>
                    <h6 class="modal-title fw-bold mb-0" style="font-size:.95rem">Shipping Info</h6>
                    <p class="text-muted mb-0" style="font-size:.72rem">Order #<span id="cmOrderNum"></span></p>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" style="font-size:.75rem"></button>
            </div>
            <div class="modal-body px-4 py-3">
                <input type="hidden" id="cmOrderId">
                <input type="hidden" id="cmUrl">
                <div class="mb-3">
                    <label class="form-label small fw-semibold mb-1" style="font-size:.75rem;color:#374151">Courier Company</label>
                    <select id="cmCourier" class="form-select form-select-sm" style="font-size:.8rem">
                        <option value="">— Select courier —</option>
                        @foreach(($couriers ?? collect()) as $c)
                            <option value="{{ $c->id }}">{{ $c->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label small fw-semibold mb-1" style="font-size:.75rem;color:#374151">Tracking Number</label>
                    <input type="text" id="cmTracking" class="form-control form-control-sm" placeholder="e.g. TCS-123456789" style="font-size:.8rem">
                </div>
                <div class="mb-0">
                    <label class="form-label small fw-semibold mb-1" style="font-size:.75rem;color:#374151">Estimated Delivery</label>
                    <select id="cmDelivery" class="form-select form-select-sm" style="font-size:.8rem">
                        <option value="">— Select estimate —</option>
                        <option value="3-5 days">3–5 days</option>
                        <option value="1 week">1 week</option>
                        <option value="2 weeks">2 weeks</option>
                        <option value="3 weeks">3 weeks</option>
                        <option value="1 month">1 month</option>
                        <option value="2 months">2 months</option>
                        <option value="6 months">6 months</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer border-0 px-4 pb-4 pt-0 gap-2">
                <button type="button" class="btn btn-primary btn-sm px-4" id="cmSaveBtn" style="border-radius:8px">
                    <i class="bi bi-check2"></i> Save
                </button>
                <button type="button" class="btn btn-light border btn-sm" data-bs-dismiss="modal" style="border-radius:8px">Cancel</button>
            </div>
        </div>
    </div>
</div>

{{-- Full-screen payment proof preview --}}
<div id="paymentProofLightbox" class="sales-proof-lightbox" aria-hidden="true">
    <div class="sales-proof-lightbox__backdrop" data-proof-close></div>
    <div class="sales-proof-lightbox__inner">
        <button type="button" class="sales-proof-lightbox__close btn btn-icon" aria-label="Close" data-proof-close>
            <i class="bi bi-x-lg"></i>
        </button>
        <div class="sales-proof-lightbox__imgwrap">
            <img src="" alt="Payment proof" class="sales-proof-lightbox__img" id="paymentProofLightboxImg" decoding="async">
        </div>
    </div>
</div>

@endsection

@section('script')
<script>
const _csrf = '{{ csrf_token() }}';

(function () {
    const lb = document.getElementById('paymentProofLightbox');
    const img = document.getElementById('paymentProofLightboxImg');
    if (!lb || !img) return;

    function openLb(src) {
        img.src = src;
        lb.classList.add('is-open');
        lb.setAttribute('aria-hidden', 'false');
        document.body.style.overflow = 'hidden';
        requestAnimationFrame(() => requestAnimationFrame(() => lb.classList.add('is-visible')));
    }

    function closeLb() {
        if (!lb.classList.contains('is-open')) return;
        lb.classList.remove('is-visible');
        window.clearTimeout(closeLb._t);
        closeLb._t = window.setTimeout(() => {
            lb.classList.remove('is-open');
            lb.setAttribute('aria-hidden', 'true');
            document.body.style.overflow = '';
            img.removeAttribute('src');
        }, 320);
    }

    document.addEventListener('click', function (e) {
        const thumb = e.target.closest('.payment-proof-thumb');
        if (thumb && thumb.dataset.proofSrc) {
            e.preventDefault();
            openLb(thumb.dataset.proofSrc);
            return;
        }
        if (lb.classList.contains('is-open') && e.target.closest('[data-proof-close]')) {
            closeLb();
        }
    });

    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape' && lb.classList.contains('is-open')) closeLb();
    });
})();

const _ffCfg = {
    pending:   { label: 'Pending',   bg: '#f1f5f9', color: '#64748b', dot: '#94a3b8' },
    approved:  { label: 'Approved',  bg: '#e6f7f5', color: '#0d5c56', dot: '#0d9488' },
    shipped:   { label: 'Shipped',   bg: '#f3e8ff', color: '#7c3aed', dot: '#7c3aed' },
    delivered: { label: 'Delivered', bg: '#dcfce7', color: '#16a34a', dot: '#16a34a' },
    cancelled: { label: 'Cancelled', bg: '#fee2e2', color: '#dc2626', dot: '#dc2626' },
};

function openCourierModalForSale(orderId) {
    const courierBtn = document.getElementById('ffcourierbtn-' + orderId);
    const modalEl = document.getElementById('courierModal');
    if (!courierBtn || !modalEl) return;
    document.getElementById('cmOrderId').value = courierBtn.dataset.id;
    document.getElementById('cmUrl').value = courierBtn.dataset.url;
    document.getElementById('cmOrderNum').textContent = courierBtn.dataset.orderno || '';
    document.getElementById('cmCourier').value = courierBtn.dataset.courier || '';
    document.getElementById('cmTracking').value = courierBtn.dataset.tracking || '';
    document.getElementById('cmDelivery').value = courierBtn.dataset.delivery || '';
    bootstrap.Modal.getOrCreateInstance(modalEl).show();
}

document.addEventListener('click', function (e) {
    // ── Filter split-pill dropdowns ──────────────────────────────
    const fpToggle = e.target.closest('.fp-toggle');
    if (fpToggle) {
        const key  = fpToggle.dataset.key;
        const drop = document.getElementById('fpdrop-' + key);
        const icon = document.getElementById('fpicon-' + key);
        const open = drop.style.display === 'none';
        // close all filter drops
        document.querySelectorAll('.fp-dropdown').forEach(d => d.style.display = 'none');
        document.querySelectorAll('[id^="fpicon-"]').forEach(i => { i.className = 'bi bi-chevron-down'; i.style.color = ''; });
        if (open) {
            drop.style.display = 'block';
            icon.className = 'bi bi-x-lg';
            icon.style.color = '#dc2626';
        }
        return;
    }
    const fpOpt = e.target.closest('.fp-opt');
    if (fpOpt) { window.location.href = fpOpt.dataset.url; return; }
    if (!e.target.closest('.fp-dropdown') && !e.target.closest('.fp-toggle')) {
        document.querySelectorAll('.fp-dropdown').forEach(d => d.style.display = 'none');
        document.querySelectorAll('[id^="fpicon-"]').forEach(i => { i.className = 'bi bi-chevron-down'; i.style.color = ''; });
    }
    // ────────────────────────────────────────────────────────────

    // Expand toggle
    const toggleBtn = e.target.closest('.toggle-row');
    if (toggleBtn) {
        const id   = toggleBtn.dataset.id;
        const row  = document.getElementById('expand-' + id);
        const icon = toggleBtn.querySelector('.toggle-icon');
        const isOpen = !row.classList.contains('d-none');
        row.classList.toggle('d-none', isOpen);
        icon.textContent = isOpen ? '+' : '−';
        toggleBtn.title = isOpen ? 'Show Details' : 'Hide Details';
        toggleBtn.style.opacity = isOpen ? '1' : '0.65';
        return;
    }

    // Copy order number or tracking number
    const copyBtn = e.target.closest('.copy-order-btn, .ff-copy-tracking');
    if (copyBtn) {
        navigator.clipboard.writeText(copyBtn.dataset.copy).then(() => {
            const icon = copyBtn.querySelector('i');
            icon.className = 'bi bi-check2';
            copyBtn.style.color = '#198754';
            setTimeout(() => { icon.className = 'bi bi-copy'; copyBtn.style.color = ''; }, 1800);
        });
        return;
    }

    // Fulfillment split-pill toggle
    const ffEdit = e.target.closest('.ff-edit-btn');
    if (ffEdit) {
        const id   = ffEdit.dataset.id;
        const drop = document.getElementById('ffdrop-' + id);
        const icon = document.getElementById('fftoggleicon-' + id);
        const open = drop.style.display === 'none';
        // Close all other open dropdowns
        document.querySelectorAll('.ff-dropdown').forEach(d => { if (d !== drop) d.style.display = 'none'; });
        document.querySelectorAll('[id^="fftoggleicon-"]').forEach(i => { if (i !== icon) { i.className = 'bi bi-chevron-down'; i.style.color = ''; } });
        drop.style.display = open ? 'block' : 'none';
        icon.className     = open ? 'bi bi-x-lg' : 'bi bi-chevron-down';
        icon.style.color   = open ? '#dc2626' : '';
        bootstrap.Tooltip.getInstance(ffEdit)?.hide();
        return;
    }

    // Fulfillment status option selected
    const ffOpt = e.target.closest('.ff-status-opt');
    if (ffOpt) {
        const id    = ffOpt.dataset.id;
        const val   = ffOpt.dataset.val;
        const cfg   = { bg: ffOpt.dataset.bg, color: ffOpt.dataset.color, dot: ffOpt.dataset.dot, label: ffOpt.dataset.label };
        const badge = document.getElementById('ffbadge-' + id);
        const drop  = document.getElementById('ffdrop-' + id);
        const icon  = document.getElementById('fftoggleicon-' + id);

        // Update badge
        badge.style.background = cfg.bg;
        badge.style.color      = cfg.color;
        document.getElementById('ffdot-' + id).style.background = cfg.dot;
        document.getElementById('fflabel-' + id).textContent    = cfg.label;

        // Update checkmark inside dropdown
        drop.querySelectorAll('.ff-status-opt').forEach(b => {
            const isThis = b.dataset.val === val;
            b.style.background  = isThis ? cfg.bg        : 'transparent';
            b.style.fontWeight  = isThis ? '600'         : '400';
            b.style.color       = isThis ? cfg.color     : '#374151';
            const chk = b.querySelector('.bi-check2');
            if (isThis && !chk) {
                const i = document.createElement('i');
                i.className = 'bi bi-check2 ms-auto';
                i.style.fontSize = '.7rem';
                b.appendChild(i);
            } else if (!isThis && chk) {
                chk.remove();
            }
        });

        // Close dropdown
        drop.style.display = 'none';
        icon.className     = 'bi bi-chevron-down';
        icon.style.color   = '';

        // AJAX
        fetch(ffOpt.dataset.url, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': _csrf, 'Accept': 'application/json' },
            body: JSON.stringify({ fulfillment_status: val }),
        })
        .then(r => r.json())
        .then(d => {
            if (!d || !d.ok) return;
            if (d.payment_marked_paid) {
                const payBadge = document.getElementById('pay-badge-' + id);
                if (payBadge) {
                    payBadge.className = 'badge bg-success-lt text-success border border-success';
                    payBadge.textContent = 'Paid';
                }
                const paidBtn = document.querySelector('.mark-paid-btn[data-id="' + id + '"]');
                if (paidBtn) {
                    const paidLi = paidBtn.closest('li');
                    const nextLi = paidLi?.nextElementSibling;
                    if (nextLi?.querySelector('hr')) nextLi.remove();
                    paidLi?.remove();
                }
            }
            if (val === 'shipped') {
                setTimeout(() => openCourierModalForSale(id), 120);
            }
        })
        .catch(() => {});
        return;
    }

    // Close open ff-dropdowns on outside click
    if (!e.target.closest('.ff-dropdown') && !e.target.closest('.ff-edit-btn')) {
        document.querySelectorAll('.ff-dropdown').forEach(d => d.style.display = 'none');
        document.querySelectorAll('[id^="fftoggleicon-"]').forEach(i => { i.className = 'bi bi-chevron-down'; i.style.color = ''; });
    }

    // Mark as Paid
    const paidBtn = e.target.closest('.mark-paid-btn');
    if (paidBtn) {
        const id  = paidBtn.dataset.id;
        const url = paidBtn.dataset.url;
        paidBtn.disabled = true;
        paidBtn.innerHTML = '<span class="spinner-border spinner-border-sm" style="width:.7rem;height:.7rem"></span> Marking...';

        fetch(url, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': _csrf, 'Accept': 'application/json' },
            body: JSON.stringify({}),
        })
        .then(r => r.json())
        .then(d => {
            if (!d.ok) return;
            // Update payment badge
            const badge = document.getElementById('pay-badge-' + id);
            if (badge) {
                badge.className = 'badge bg-success-lt text-success border border-success';
                badge.textContent = 'Paid';
            }
            // Remove the "Mark as Paid" li and its following divider li
            const paidLi = paidBtn.closest('li');
            const nextLi = paidLi?.nextElementSibling;
            if (nextLi?.querySelector('hr')) nextLi.remove();
            paidLi?.remove();
        })
        .catch(() => { paidBtn.disabled = false; paidBtn.innerHTML = '<i class="bi bi-check-circle" style="width:14px;flex-shrink:0"></i> Mark as Paid'; });
        return;
    }

    // Courier button → open modal
    const ffCourier = e.target.closest('.ff-courier-btn');
    if (ffCourier) {
        openCourierModalForSale(ffCourier.dataset.id);
        return;
    }
});


// Courier modal save
document.getElementById('cmSaveBtn').addEventListener('click', function () {
    const btn      = this;
    const url      = document.getElementById('cmUrl').value;
    const id       = document.getElementById('cmOrderId').value;
    const courier  = document.getElementById('cmCourier').value;
    const tracking = document.getElementById('cmTracking').value.trim();
    const delivery = document.getElementById('cmDelivery').value;

    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm" style="width:.8rem;height:.8rem"></span>';

    fetch(url, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': _csrf, 'Accept': 'application/json' },
        body: JSON.stringify({ courier_id: courier || null, shipping_tracking_no: tracking, estimated_delivery: delivery }),
    })
    .then(r => r.json())
    .then(d => {
        if (!d.ok) return;

        // Update data attrs on action button
        const actionBtn = document.getElementById('ffcourierbtn-' + id);
        if (actionBtn) {
            actionBtn.dataset.courier  = courier;
            actionBtn.dataset.tracking = tracking;
            actionBtn.dataset.delivery = delivery;

            // Rebuild tooltip text
            const courierName = actionBtn.querySelector ? null : null; // resolved from cmCourier select text
            const selEl = document.getElementById('cmCourier');
            const courierLabel = selEl.options[selEl.selectedIndex]?.text || '';
            const parts = [
                courier ? courierLabel : null,
                tracking || null,
                delivery ? 'Est: ' + delivery : null,
            ].filter(Boolean);
            const tipText = parts.length ? 'Show Courier Details' : 'Enter Tracking#';

            // Destroy old tooltip, rebuild with new title
            const ttInstance = bootstrap.Tooltip.getInstance(actionBtn);
            if (ttInstance) ttInstance.dispose();
            actionBtn.setAttribute('title', tipText);
            actionBtn.setAttribute('data-bs-original-title', tipText);
            new bootstrap.Tooltip(actionBtn);

            if (tracking) {
                actionBtn.style.color       = '#1a56db';
                actionBtn.style.background  = '#f0f5ff';
            } else {
                actionBtn.style.color       = '';
                actionBtn.style.background  = '';
            }
        }

        // Update fulfillment column courier info
        const infoBox = document.getElementById('ffcourierinfo-' + id);
        if (infoBox) {
            const selEl        = document.getElementById('cmCourier');
            const courierLabel = courier ? (selEl.options[selEl.selectedIndex]?.text || '') : '';
            const nameEl       = infoBox.querySelector('.ff-courier-name');
            const trackEl      = infoBox.querySelector('.ff-courier-tracking');
            const copyBtn      = infoBox.querySelector('.ff-copy-tracking');
            const deliveryEl   = infoBox.querySelector('.ff-courier-delivery');

            if (tracking || courierLabel) {
                if (nameEl)     nameEl.textContent      = courierLabel;
                if (trackEl)    trackEl.textContent     = tracking;
                if (deliveryEl) deliveryEl.textContent  = delivery;
                if (copyBtn) {
                    copyBtn.dataset.copy   = tracking;
                    copyBtn.style.display  = tracking ? '' : 'none';
                }
                infoBox.style.display = 'flex';
            } else {
                infoBox.style.display = 'none';
            }
        }

        bootstrap.Modal.getInstance(document.getElementById('courierModal')).hide();
    })
    .catch(() => {})
    .finally(() => {
        btn.disabled = false;
        btn.innerHTML = '<i class="bi bi-check2"></i> Save';
    });
});
</script>
@endsection