@extends('template.desktop.app')
@push('styles')
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <link rel="stylesheet" href="https://npmcdn.com/flatpickr/dist/themes/airbnb.css">

    <style>
        .ui-card {
            @apply p-5 bg-white rounded-2xl shadow-[0_2px_12px_rgba(0, 0, 0, 0.05)];
            border: 1px solid rgba(226, 232, 240, 0.6);
        }

        .ui-section-title {
            @apply flex items-center gap-2 mb-4 text-[13px] font-semibold text-slate-700;
        }

        .ui-section-indicator {
            @apply h-[18px] w-[3px] rounded-full;
        }

        .ui-section-icon {
            @apply text-[18px] text-slate-500/70;
        }

        .ui-info {
            @apply text-[13px] text-slate-700 space-y-2;
        }

        .ui-label {
            @apply text-slate-500 text-[12px];
        }

        .ui-badge {
            @apply inline-block ml-2 px-3 py-[3px] rounded-full text-[11px] font-medium;
        }

        .ui-item {
            @apply p-4 bg-slate-50 rounded-xl shadow-inner;
        }

        .ui-item-title {
            @apply font-medium text-[13px];
        }

        .ui-item-grid {
            @apply mt-2 text-[12px] text-slate-600 space-y-1;
        }

        .radio-card {
            transition: .25s ease;
            border: 2px solid #e5e7eb;
        }

        .radio-card.active {
            border-color: #4f46e5 !important;
            box-shadow: 0 0 0 3px rgba(79, 70, 229, .20);
            background: #eef2ff !important;
        }

        .radio-card .check-icon {
            opacity: 0;
            transform: scale(.6);
            transition: .25s ease;
        }

        .radio-card.active .check-icon {
            opacity: 1;
            transform: scale(1);
        }

        .text-truncate-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .swal2-container {
            z-index: 99999 !important
        }

        /* Fix Flatpickr Z-Index */
        .flatpickr-calendar {
            z-index: 99999 !important;
        }

        .badge-pill {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 10px;
            font-size: 12px;
            font-weight: 600;
            border-radius: 9999px;
            white-space: nowrap;
        }

        /* ===== Scrollbar Elegan Premium ===== */
        #status-tabs {
            scrollbar-width: thin;
            scrollbar-color: #cfcfcf transparent;
        }

        #status-tabs::-webkit-scrollbar {
            height: 6px;
        }

        #status-tabs::-webkit-scrollbar-track {
            background: transparent;
        }

        #status-tabs::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.15);
            border-radius: 999px;
            transition: all 0.3s ease;
        }

        #status-tabs::-webkit-scrollbar-thumb:hover {
            background: rgba(0, 0, 0, 0.28);
        }

        #status-tabs::-webkit-scrollbar-thumb:active {
            background: rgba(0, 0, 0, 0.35);
        }

        /* Scrollbar disembunyikan jika tidak scroll */
        #status-tabs {
            overflow-y: hidden;
        }

        /* Style untuk tombol tanggal di custom calendar */
        #customCalendar button {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            height: 1.75rem;
            width: 1.75rem;
            transition: all 0.2s ease;
        }

        /* Hover state untuk tanggal */
        #customCalendar button:hover {
            background-color: #fef2f2 !important;
            color: #dc2626 !important;
        }

        /* Selected date (tanggal yang dipilih) */
        #customCalendar button.bg-red-600 {
            background-color: #dc2626 !important; /* bg-red-600 */
            color: white !important;
        }

        /* Date in range (tanggal di antara range) */
        #customCalendar button.bg-red-100 {
            background-color: #fef2f2 !important; /* bg-red-50 */
            color: #dc2626 !important; /* text-red-700 */
        }

        /* Today date */
        #customCalendar button.bg-red-50 {
            background-color: #fef2f2 !important; /* bg-red-50 */
            color: #dc2626 !important; /* text-red-700 */
        }

        /* Style untuk tombol preset date filter */
        .date-preset {
            transition: all 0.2s ease;
        }

        .date-preset:hover {
            background-color: #fef2f2 !important; /* bg-red-50 */
            color: #dc2626 !important; /* text-red-700 */
            border-color: #fecaca !important; /* border-red-200 */
        }

        .date-preset.active {
            background-color: #fef2f2 !important; /* bg-red-50 */
            color: #dc2626 !important; /* text-red-700 */
            border-color: #fecaca !important; /* border-red-200 */
        }

        /* Complex Filter Styles */
        .category-btn.active {
            background-color: #fef2f2;
            color: #dc2626;
            border-color: #fecaca;
        }

        /* Enhanced selection styles */
        .preview-item.selected {
            background-color: #eef2ff !important;
            border-color: #fa7269ff !important;
            border-width: 1px;
        }

        .preview-item.selected .font-medium {
            color: #e54646ff;
        }

        .preview-item.selected .text-gray-500 {
            color: #f16d63ff !important;
        }

        /* Hover states */
        .preview-item:hover:not(.selected) {
            background-color: #f8fafc;
            border-color: #e2e8f0;
        }

        .full-data-item:hover:not(.selected) {
            background-color: #f8fafc;
            border-color: #e2e8f0;
        }

        /* Scrollbar untuk preview */
        #previewList::-webkit-scrollbar {
            width: 4px;
        }

        #previewList::-webkit-scrollbar-track {
            background: #f1f5f9;
            border-radius: 10px;
        }

        #previewList::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 10px;
        }

        #previewList::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }
                
    </style>
@endpush

@section('content')
<div id="main-filter-bar" class="mb-5 rounded-xl border border-gray-200 bg-white px-6 py-4 shadow-sm space-y-4">

    <!-- Baris 1: Status Tabs -->
    <div class="w-full py-2">
        <div id="status-tabs" class="flex flex-wrap gap-3 px-1 pb-1">

            @php
                $tabs = [
                    ['all', 'bx-grid-alt', 'Semua', 'all'],
                    ['waiting_pickup', 'bx-time-five', 'Menunggu Pickup', 'waiting_pickup'],
                    ['waiting_dropoff', 'bx-package', 'Menunggu Dikirim', 'waiting_dropoff'],
                    ['failed_pickup', 'bx-error-circle', 'Gagal Pickup', 'failed_pickup'],
                    ['shipped', 'bx-truck', 'Sedang Dikirim', 'shipped'],
                    ['problematic', 'bx-error', 'Paket Bermasalah', 'problematic'],
                    ['in_return_process', 'bx-revision', 'Proses Retur', 'in_return_process'],
                    ['return', 'bx-undo', 'Return', 'return'],
                    ['completed', 'bx-badge-check', 'Selesai', 'completed'],
                    ['cancelled', 'bx-x-circle', 'Dibatalkan', 'cancelled'],
                ];
            @endphp

            @foreach ($tabs as $i => $t)
                <button data-status="{{ $t[0] }}"
                    class="status-tab flex items-center gap-2 rounded-xl px-5 py-2 text-[13px] font-semibold transition-all
            
            {{ $i === 0
                ? 'bg-gray-900 text-white shadow active-tab'
                : 'text-gray-700 border border-gray-200 inactive-tab' }}"
                    style="border-radius: 14px;">

                    <i class="bx {{ $t[1] }} text-[15px]"></i>

                    <span>{{ $t[2] }}</span>

                    <span class="rounded-lg bg-gray-100 px-2 py-0.5 text-[10px] font-semibold text-gray-700">
                        {{ $statusCounts[$t[3]] ?? 0 }}
                    </span>
                </button>
            @endforeach

        </div>
    </div>

    <!-- Baris 2: Filter & Actions -->
    <div class="flex flex-col md:flex-row items-stretch md:items-center justify-between gap-3">

        <!-- Kiri: Search -->
        <div class="flex-1 md:max-w-md">
            <div class="flex items-center gap-2 rounded-full border border-gray-200 bg-gray-50 px-4 py-2.5 
                hover:bg-white transition-all duration-150 focus-within:bg-white focus-within:shadow-sm">
                <i class='bx bx-search text-xl text-gray-400'></i>
                <input id="search" type="text"
                    class="w-full bg-transparent text-[14px] text-gray-800 placeholder:text-gray-400 outline-none"
                    placeholder="Cari nomor resi, nomor order, atau nama penerima...">
            </div>
        </div>

        <!-- ALL FILTER -->
        <div class="flex items-center gap-3">

            <!-- Compact Complex Filter Mitra & Distributor -->
            <div class="relative w-44" id="complexActorDropdownContainer">

                <!-- Trigger Button -->
                <button id="complexActorDropdownBtn"
                    class="flex items-center justify-between w-full rounded-full border border-gray-200 bg-gray-50 
                    px-3 py-2 text-[12px] font-medium text-gray-700 hover:bg-white hover:shadow-sm transition-all" style="border-radius: 900px;">
                    <span id="complexActorSelectedLabel">Semua Partner</span>
                    <i class='bx bx-chevron-down text-sm'></i>
                </button>

                <input type="hidden" id="filter-actor-label" value="">
                <input type="hidden" id="filter-actor-id" value="">

                <!-- Dropdown -->
                <div id="complexActorDropdownMenu"
                    class="hidden absolute left-0 top-full mt-1 w-[360px] rounded-lg border border-gray-200 bg-white shadow-md z-50">

                    <!-- Kategori -->
                    <div class="p-3 border-b border-gray-100">
                        <h4 class="text-[12px] font-semibold text-gray-700 mb-2">Pilih Kategori</h4>

                        <div class="flex gap-1">
                            <button data-category="mitra"
                                class="category-btn flex-1 px-2 py-1.5 rounded-md border border-gray-200 
                                text-[11px] font-medium text-gray-600 hover:bg-gray-50 transition">
                                <i class='bx bx-group mr-1 text-xs'></i>Mitra
                            </button>

                            <button data-category="distributor"
                                class="category-btn flex-1 px-2 py-1.5 rounded-md border border-gray-200 
                                text-[11px] font-medium text-gray-600 hover:bg-gray-50 transition">
                                <i class='bx bx-package mr-1 text-xs'></i>Distributor
                            </button>
                        </div>
                    </div>

                    <!-- Preview Section -->
                    <div id="previewSection" class="p-3 border-b border-gray-100 hidden">
                        <div class="flex justify-between items-center mb-2">
                            <h4 class="text-[12px] font-semibold text-gray-700" id="previewTitle">Preview Data</h4>
                            <span class="text-[10px] text-gray-500" id="previewCount">5 data teratas</span>
                        </div>

                        <div id="previewList" class="space-y-1.5 max-h-36 overflow-y-auto text-[11px]">
                            <!-- Items here -->
                        </div>
                    </div>

                    <!-- View All -->
                    <div id="viewAllSection" class="p-2 hidden">
                        <button id="viewAllBtn"
                            class="w-full px-3 py-1.5 text-[11px] text-red-600 border border-red-200 
                            rounded-md hover:bg-red-50 active:bg-red-100 active:scale-[0.97] transition font-medium">
                            <i class='bx bx-list-ul mr-1 text-xs'></i>View All Data
                        </button>
                    </div>

                    <!-- Modal -->
                    <div id="fullDataModal"
                        class="hidden fixed inset-0 bg-black bg-opacity-50 z-[99999] flex items-center justify-center p-3">
                        <div class="bg-white rounded-lg w-full max-w-xl max-h-[75vh] overflow-hidden">

                            <!-- Header -->
                            <div class="flex justify-between items-center p-3 border-b border-gray-200">
                                <h3 class="text-[14px] font-semibold text-gray-800" id="modalTitle">Data Lengkap</h3>
                                <button id="closeModalBtn" class="text-gray-400 hover:text-gray-600">
                                    <i class='bx bx-x text-lg'></i>
                                </button>
                            </div>

                            <!-- Body -->
                            <div class="p-3 text-[12px]">
                                <input type="text" id="fullDataSearch"
                                    class="w-full px-2 py-1.5 border border-gray-200 rounded-md text-[12px] mb-2"
                                    placeholder="Cari data...">

                                <div id="fullDataList" class="space-y-1.5 max-h-64 overflow-y-auto text-[11px]">
                                    <!-- Full items -->
                                </div>

                                <div class="mt-2 flex justify-between items-center text-[11px] text-gray-500">
                                    <span id="fullDataCount">0 data ditemukan</span>
                                    <button id="selectAllBtn" class="text-red-600 hover:text-red-700 font-medium">
                                        Pilih Semua
                                    </button>
                                </div>
                            </div>

                            <!-- Footer -->
                            <div class="flex justify-end gap-2 p-3 border-t border-gray-200">
                                <button id="cancelFullDataBtn"
                                    class="px-3 py-1.5 text-[12px] text-gray-600 border border-gray-200 rounded-md hover:bg-gray-50">
                                    Batal
                                </button>
                                <button id="applyFullDataBtn"
                                    class="px-3 py-1.5 text-[12px] bg-red-600 text-white rounded-md hover:bg-red-700">
                                    Terapkan
                                </button>
                            </div>

                        </div>
                    </div>

                </div>
            </div>

            <!-- Dropdown Filter CS -->
            <div class="relative w-48" id="csDropdownContainer">
                <!-- Trigger Button -->
                <button id="csDropdownBtn"
                    class="flex items-center justify-between w-full rounded-full border border-gray-200 bg-gray-50 px-4 py-2.5 
                    text-[13px] font-semibold text-gray-700 hover:bg-white hover:shadow-sm transition-all" 
                    style="border-radius: 900px;">
                    <span id="csSelectedLabel">Semua CS</span> <!-- PERBAIKI ID DI SINI -->
                    <i class='bx bx-chevron-down'></i>
                </button>
                
                <input type="hidden" id="filter-cs" value="">
                
                <!-- Dropdown Menu -->
                <div id="csDropdownMenu"
                    class="hidden absolute left-0 top-full mt-2 w-full rounded-xl border border-gray-200 bg-white shadow-lg z-50">
                    <!-- Search Box -->
                    <div class="p-2 border-b border-gray-100">
                        <input id="csSearchInput" type="text"
                            class="w-full px-3 py-1.5 rounded-lg border border-gray-200 text-[13px] outline-none"
                            placeholder="Cari CS...">
                    </div>

                    <!-- List -->
                    <div id="csList" class="max-h-64 overflow-y-auto p-2 space-y-1 text-[13px]">
                        <div data-id="" data-name="Semua CS"
                            class="cs-item px-3 py-2 rounded-lg hover:bg-gray-50 cursor-pointer">
                            Semua CS
                        </div>

                        @foreach ($customerServices as $cs)
                            <div data-id="{{ $cs->id }}" data-name="{{ $cs->name }}"
                                class="cs-item px-3 py-2 rounded-lg hover:bg-gray-50 cursor-pointer">
                                {{ $cs->name }}
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
            
            <!-- Date Filter -->
            <div class="relative">
                <button id="dateFilterBtn"
                    class="flex items-center gap-2 rounded-full border border-gray-200 bg-gray-50 px-4 py-2.5 text-[13px] font-semibold text-gray-700 hover:bg-white hover:shadow-sm transition-all whitespace-nowrap" style="border-radius: 900px;">
                    <i class='bx bx-calendar text-[16px] text-gray-500'></i>
                    <span id="dateFilterLabel">Filter Waktu</span>
                    <i class='bx bx-chevron-down text-gray-400'></i>
                </button>

                <div id="dateFilterDropdown"
                    class="hidden absolute right-0 top-full mt-2 w-[640px] rounded-xl border border-gray-200 bg-white shadow-xl z-50 overflow-hidden">
                    
                    <div class="flex">
                        <!-- Kiri: Quick Presets -->
                        <div class="w-48 p-3  border-r border-gray-100">
                            <div class="space-y-1 text-[14px]">
                                <button onclick="applyDatePreset('today')" class="date-preset w-full text-left px-3 py-2 rounded-lg hover:bg-gray-50 font-medium text-gray-700 flex justify-between items-center">
                                    <span>Hari Ini</span>
                                </button>
                                <button onclick="applyDatePreset('yesterday')" class="date-preset w-full text-left px-3 py-2 rounded-lg hover:bg-gray-50 font-medium text-gray-700 flex justify-between items-center">
                                    <span>Kemarin</span>
                                </button>
                                <button onclick="applyDatePreset('last7')" class="date-preset w-full text-left px-3 py-2 rounded-lg hover:bg-gray-50 font-medium text-gray-700 flex justify-between items-center">
                                    <span>7 Hari Terakhir</span>
                                </button>
                                <button onclick="applyDatePreset('last30')" class="date-preset w-full text-left px-3 py-2 rounded-lg hover:bg-gray-50 font-medium text-gray-700 flex justify-between items-center">
                                    <span>30 Hari Terakhir</span>
                                </button>
                                <button onclick="applyDatePreset('this_month')" class="date-preset w-full text-left px-3 py-2 rounded-lg hover:bg-gray-50 font-medium text-gray-700 flex justify-between items-center">
                                    <span>Bulan Ini</span>
                                </button>
                                <button onclick="applyDatePreset('last_month')" class="date-preset w-full text-left px-3 py-2 rounded-lg hover:bg-gray-50 font-medium text-gray-700 flex justify-between items-center">
                                    <span>Bulan Lalu</span>
                                </button>
                                <button onclick="applyDatePreset('this_year')" class="date-preset w-full text-left px-3 py-2 rounded-lg hover:bg-gray-50 font-medium text-gray-700 flex justify-between items-center">
                                    <span>Tahun Ini</span>
                                </button>
                                <button onclick="applyDatePreset('max')" class="date-preset w-full text-left px-3 py-2 rounded-lg hover:bg-gray-50 font-medium text-gray-700 flex justify-between items-center">
                                    <span>Semua (Max)</span>
                                </button>
                            </div>
                        </div>

                        <!-- Kanan: Custom Range Section -->
                        <div class="flex-1 p-4">
                            <!-- Date Display -->
                            <div class="flex items-center justify-between mb-3 p-3 bg-gray-50 rounded-lg">
                                <div class="text-center">
                                    <div class="text-[11px] text-gray-500">Dari</div>
                                    <div id="customStartDate" class="text-[13px] font-medium text-gray-700">-</div>
                                </div>
                                <div class="text-gray-400">
                                    <i class='bx bx-right-arrow-alt'></i>
                                </div>
                                <div class="text-center">
                                    <div class="text-[11px] text-gray-500">Sampai</div>
                                    <div id="customEndDate" class="text-[13px] font-medium text-gray-700">-</div>
                                </div>
                            </div>
                            <!-- Dual Calendar Container -->
                            <div id="customCalendar" class="mb-3"></div>
                        </div>
                    </div>

                    <!-- Clear Filter Button (Full Width) -->
                    <div class="p-4 border-t border-gray-100">
                        <button onclick="clearDateFilter()" class="w-full px-3 py-2 text-[13px] text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50 transition">
                            Hapus Filter
                        </button>
                    </div>
                </div>
            </div>

            <!-- Print Button -->
            <button id="print-awb-button" disabled
                class="inline-flex items-center gap-1.5 rounded-full bg-gray-900 px-4 py-2.5 text-[14px] font-semibold text-white shadow-sm hover:bg-black disabled:bg-gray-200 disabled:text-gray-400 disabled:cursor-not-allowed whitespace-nowrap"
                style="border-radius: 16px;">
                <i class='bx bx-printer text-base'></i>
                Print Massal
            </button>
        </div>
    </div>
</div>

<div class="rounded-2xl border border-gray-200 bg-white shadow-sm">

    <div class="px-4 py-3">
        <div class="flex items-center gap-1 text-[14px] text-gray-600">
            <i class='bx bx-info-circle text-gray-400 text-sm'></i>
            <span>Klik Detail untuk info lengkap & Lacak pengiriman.</span>
        </div>
    </div>

    <div class="px-4 pb-4">
        <section class="rounded-xl border border-gray-100 bg-white overflow-hidden">
            <table class="min-w-full divide-y divide-gray-100 text-[13px]">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="py-3 px-3 text-center text-[14px] text-gray-700">
                            <input id="select-all-checkbox" class="h-4 w-4 rounded border-gray-300 text-gray-700"
                                type="checkbox">
                        </th>
                        <th class="py-3 px-4 text-left text-[14px] text-gray-700 uppercase">Order</th>
                        <th class="py-3 px-4 text-left text-[14px] text-gray-700 uppercase" style="width: 500px;">
                            Pengirim & Penerima</th>
                        <th class="py-3 px-4 text-left text-[14px] text-gray-700 uppercase">Paket</th>
                        <th class="py-3 px-4 text-left text-[14px] text-gray-700 uppercase">Kurir</th>
                        <th class="py-3 px-4 text-left text-[14px] text-gray-700 uppercase">Total</th>
                    </tr>
                </thead>

                <tbody id="order-table-body" class="divide-y divide-gray-100 bg-white"></tbody>
            </table>
        </section>
    </div>

    <div class="flex flex-wrap items-center justify-between gap-3 border-t border-gray-100 px-4 py-3 text-[14px] text-gray-700">

        <div class="flex items-center gap-2">
            <div class="flex items-center gap-1 rounded-full border border-gray-200 bg-gray-50 px-2 py-1">
                <i class='bx bx-slider-alt text-sm text-gray-400'></i>
                <select id="items-per-page" class="h-7 border-0 bg-transparent text-gray-800 text-[14px] focus:ring-0">
                    <option value="10">10 / halaman</option>
                    <option value="25">25 / halaman</option>
                    <option value="50">50 / halaman</option>
                    <option value="100">100 / halaman</option>
                </select>
            </div>

            <span id="pagination-info">Menampilkan 0–0 dari 0</span>
        </div>

        <ul id="pagination" class="flex items-center gap-1"></ul>
    </div>

</div>

@include('orders.partials.modal')
@endsection


@push('scripts')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://npmcdn.com/flatpickr/dist/l10n/id.js"></script>

    <script>
        let selectedPrintIds = [];
    </script>

    <script>
        const statusMap = {
            "WAITING FOR DROP OFF": "Perlu Dikirim",
            "WAITING FOR PICK UP": "Menunggu pickup",
            "FAILED PICKUP": "Gagal Pickup",
            "REJECTED": "Paket Bermasalah",
            "REPEAT DELIVERY": "Pengiriman Ulang",
            "WAITING FOR DELIVERY": "Menunggu Pengiriman",
            "ONGOING TO RECEIVER": "Sedang Dikirim",
            "WITH DELIVERY COURIER": "Dibawa Kurir",
            "ARRIVED AT DESTINATION CITY": "Sampai Kota Tujuan",
            "APPROVED": "Siap Dikirim",
            "IN PROCESS": "Sedang Diproses",
            "IN PROCESS RETURN": "Proses Retur",
            "RETURN": "Retur Diterima",
            "COMPLETED": "Selesai",
            "DELIVERED": "Terkirim",
            "CANCELLED": "Dibatalkan",
            "IN TROUBLE": "Bermasalah",
            "FORCE MAJEURE": "Kendala Alam",
            "LOST OR BROKEN": "Hilang/Rusak",
            "EXPIRED": "Expired",
            "FAILED AWB": "Gagal Resi"
        };

        function formatDate(dateStr, includeTime = true) {
            if (!dateStr) return '-';
            const d = new Date(dateStr);
            const opts = {
                day: '2-digit',
                month: 'short',
                year: 'numeric'
            };
            if (includeTime) {
                opts.hour = '2-digit';
                opts.minute = '2-digit';
            }
            return d.toLocaleString('id-ID', opts);
        }

        function formatRupiah(v) {
            if (v === null || v === undefined || v === '' || isNaN(v)) return 'Rp 0';
            return new Intl.NumberFormat('id-ID', {
                style: 'currency',
                currency: 'IDR',
                minimumFractionDigits: 0
            }).format(parseInt(v));
        }

        function getBadge(status) {
            const s = (status || '').toUpperCase();
            if (['WAITING FOR DROP OFF', 'WAITING FOR PICK UP', 'PENDING', 'DRAFT'].includes(s)) {
                return 'bg-amber-100 text-amber-800 border border-amber-200';
            }
            if (['ONGOING TO RECEIVER', 'ARRIVED AT DESTINATION CITY', 'APPROVED', 'WITH DELIVERY COURIER', 'WAITING FOR DELIVERY', 'IN PROCESS'].includes(s)) {
                return 'bg-blue-100 text-blue-800 border border-blue-200';
            }
            if (['COMPLETED', 'DELIVERED', 'SELESAI'].includes(s)) {
                return 'bg-emerald-100 text-emerald-800 border border-emerald-200';
            }
            if (['CANCELLED', 'FAILED PICKUP', 'FAILED AWB', 'EXPIRED', 'DIBATALKAN'].includes(s)) {
                return 'bg-rose-100 text-rose-800 border border-rose-200';
            }
            if (['IN PROCESS RETURN', 'RETURN', 'IN TROUBLE', 'LOST OR BROKEN', 'FORCE MAJEURE', 'REJECTED', 'REPEAT DELIVERY'].includes(s)) {
                return 'bg-orange-100 text-orange-800 border border-orange-200';
            }
            return 'bg-gray-100 text-gray-700 border border-gray-200';
        }

        function getCourierName(item) {
            return item.logistic?.name + ' - ' + item.logistic?.rate_name ||
                item.logistic?.courier ||
                item.logistic?.service ||
                item.courier_detail ||
                "Everpro";
        }

        function updateStatusTabs(counts) {
            document.querySelectorAll(".status-tab").forEach(btn => {
                let key = btn.dataset.status;
                let badge = btn.querySelector("span:last-child");
                if (badge && counts[key] !== undefined) {
                    badge.textContent = counts[key];
                }
            });
        }
    </script>

    <script>
        function selectCard(el) {
            // Reset semua card
            document.querySelectorAll('.radio-card').forEach((card, i) => {
                card.classList.remove('active');
                const radio = card.querySelector('input[type="radio"]');

                if (radio) {
                    radio.checked = false;
                }
            });

            // Set active ke yang dipilih
            el.classList.add('active');

            const selectedRadio = el.querySelector('input[type="radio"]');
            if (selectedRadio) {
                selectedRadio.checked = true;
            }
        }

        function printAWB() {
            const selectedSize = document.querySelector('input[name="ukuranCetak"]:checked');

            if (!selectedSize) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Pilih ukuran cetak dulu.'
                });
                return;
            }

            let ids = selectedPrintIds.length ? [...selectedPrintIds] : [...document.querySelectorAll(
                ".order-checkbox:checked")].map(c => c.value);

            if (!ids.length) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Tidak ada order dipilih.'
                });
                return;
            }

            const form = document.createElement('form');
            form.method = 'POST';
            form.action = "{{ route('orders.printAWB') }}";
            form.target = "_blank";

            form.innerHTML = `
        <input type="hidden" name="_token" value="{{ csrf_token() }}">
        <input type="hidden" name="ukuran" value="${selectedSize.value}">`;

            ids.forEach(id => {
                form.innerHTML += `<input type="hidden" name="ids[]" value="${id}">`;
            });

            document.body.appendChild(form);
            form.submit();
            form.remove();

            selectedPrintIds = [];
            bootstrap.Modal.getInstance(document.getElementById("printModal"))?.hide();
        }
    </script>

    <script>
        function showOrderDetail(orderId) {

            const modalBody = document.getElementById("detailModalContent");
            new bootstrap.Modal(document.getElementById("detailModal")).show();

            /* Modern Loading */
            modalBody.innerHTML = `
        <div class="py-8 text-center">
            <div class="mx-auto h-7 w-7 animate-spin rounded-full border-[3px] border-slate-300 border-t-red-500"></div>
            <p class="mt-3 text-[13px] text-slate-600 tracking-wide">Memuat detail...</p>
        </div> `;

            axios.get('/orders/detail/' + orderId)
                .then(res => {
                    const o = res.data.data;

                    /* ============================
                       UI HELPER FUNCTIONS
                    ============================ */
                    const statusColorMap = {
                        approved: "bg-emerald-100 text-emerald-700",
                        pending: "bg-amber-100 text-amber-700",
                        canceled: "bg-rose-100 text-rose-700"
                    };

                    const statusColor = statusColorMap[o.order.status] ?? "bg-slate-200 text-slate-700";

                    function infoRow(label, value, bold = false) {
                        return `
                    <div class="flex justify-between text-[13px]">
                        <span class="text-slate-500">${label}</span>
                        <span class="${bold ? 'font-semibold text-slate-800' : 'font-medium text-slate-700'} text-right">
                            ${value ?? '-'}
                        </span>
                    </div>
                `;
                    }

                    function itemLine(label, value) {
                        return `
                    <div class="flex justify-between text-[12px]">
                        <span class="text-slate-500">${label}</span>
                        <span class="font-medium text-slate-700">${value ?? '-'}</span>
                    </div>
                `;
                    }

                    /* ============================
                        ACTOR (PENGIRIM BARANG)
                    ============================ */
                    const actorHtml = `
                <div class="p-5 rounded-xl bg-white border border-slate-200 shadow-[0_2px_10px_rgba(0,0,0,0.03)] h-full">

                    <div class="flex items-center gap-2 mb-4 text-[13px] font-semibold text-slate-700">
                        <i class='bx bx-store-alt text-[18px] text-orange-500'></i>
                        <span>Pengirim Barang (Actor)</span>
                    </div>

                    <div class="space-y-2 text-[13px] text-slate-700">
                        ${infoRow("Nama", o.actor.name)}
                        ${infoRow("Kode", o.actor.code)}
                        ${infoRow("Telepon", o.actor.phone_number)}

                        <div class="pt-3 text-[12px] uppercase tracking-wide text-slate-400 font-semibold border-t border-slate-100 mt-3">
                            Alamat Pengirim
                        </div>

                        <div class="leading-relaxed space-y-0.5 text-[13px] text-slate-700">
                            <div>${o.actor.address ?? '-'}</div>
                            <div>${o.actor.area.sub_district_name}, ${o.actor.area.district_name}</div>
                            <div>${o.actor.area.city_name}, ${o.actor.area.province_name}</div>
                            <div>Kode Pos: ${o.actor.area.zip_code}</div>
                        </div>

                        <div class="pt-3 text-[12px] uppercase tracking-wide text-slate-400 font-semibold border-t border-slate-100 mt-3">
                            Warehouse
                        </div>

                        <div class="text-[13px] text-slate-700">
                            ${o.actor.warehouse?.name ?? '-'}
                        </div>
                    </div>
                </div>
            `;

                    /* ============================
                        RECEIVER (PENERIMA)
                    ============================ */
                    const receiverHtml = o.receiver ? `
                <div class="text-[13px] text-slate-700 space-y-2 leading-relaxed">
                    <div class="font-semibold flex items-center gap-2">
                        <i class='bx bx-user-pin text-[18px] text-blue-500'></i>
                        <span>${o.receiver.name}</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <i class='bx bx-phone text-[14px] text-slate-500'></i>
                        <span>${o.receiver.phone_number}</span>
                    </div>
                    <div class="flex gap-2 items-start">
                        <i class='bx bx-map text-[14px] mt-[2px] text-slate-500'></i>
                        <div class="text-[13px] space-y-0.5">
                            <div>${o.receiver.address}</div>
                            <div>${o.receiver.sub_district}, ${o.receiver.district}</div>
                            <div>${o.receiver.city} - ${o.receiver.postal_code}</div>
                        </div>
                    </div>
                </div>
            ` : `<div class="text-[13px] text-slate-500">Tidak ada data penerima.</div>`;

                    /* ============================
                        SHIPMENT (PENGIRIMAN)
                    ============================ */
                    const shipmentHtml = o.shipment ? `
                <div class="text-[13px] space-y-2">
                    <div class="flex justify-between items-center">
                        <span class="text-slate-500">AWB Number</span>
                        <span class="font-medium text-slate-800 flex items-center gap-2">
                            <i class='bx bxs-truck text-[16px] text-purple-500'></i>
                            ${o.shipment.awb_number}
                        </span>
                    </div>
                    ${infoRow("Biaya Pengiriman", "Rp " + Number(o.shipment.shipment_cost ?? 0).toLocaleString())}
                    <div class="flex items-center justify-between pt-1">
                        <span class="text-slate-500">Status</span>
                        <span class="px-3 py-[3px] rounded-full bg-red-100 text-red-700 text-[11px] font-medium">
                            ${o.shipment.status_name ?? '-'}
                        </span>
                    </div>
                    <div class="text-[12px] text-slate-500 mt-2">
                        Estimasi ${o.shipment.min_duration ?? '-'}–${o.shipment.max_duration ?? '-'} hari
                    </div>
                </div>
            ` : `<div class="text-[13px] text-slate-500">Belum ada data pengiriman.</div>`;

                    /* ============================
                        RENDERING KE DALAM MODAL
                    ============================ */

                    modalBody.innerHTML = `
                <div class="space-y-6">

                    <div class="flex justify-between items-center pb-4 border-b border-slate-200">
                        <div>
                            <p class="text-[13px] text-slate-500 mt-1">
                                Ref: ${o.order.reference_no}
                            </p>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-3 gap-5">

                        <div class="p-5 rounded-xl bg-white border border-slate-200 shadow-[0_2px_10px_rgba(0,0,0,0.03)] h-full">
                            <div class="flex items-center gap-2 mb-4 text-[13px] font-semibold text-slate-700">
                                <i class='bx bx-receipt text-[18px] text-red-500'></i>
                                <span>Data Pesanan</span>
                            </div>

                            <div class="space-y-2">
                                ${infoRow("Order No", o.order.client_order_no)}
                                ${infoRow("Sumber", o.order.order_source)}
                                ${infoRow("Tanggal Order", o.order.order_date)}
                                ${infoRow("Metode Pembayaran", o.order.payment_method)}
                                ${infoRow("Total Pembayaran", "Rp " + Number(o.order.total_payment ?? o.order.total).toLocaleString(), true)}

                                <div class="pt-3 flex justify-between items-center text-[13px] border-t border-slate-100 mt-3">
                                    <span class="text-slate-500 font-medium">Status</span>
                                    <span class="px-3 py-[3px] rounded-full text-[11px] font-medium ${statusColor}">
                                        ${o.order.status.toUpperCase()}
                                    </span>
                                </div>
                            </div>
                        </div>

                        ${actorHtml}

                        <div class="p-5 rounded-xl bg-white border border-slate-200 shadow-[0_2px_10px_rgba(0,0,0,0.03)] h-full">
                            <div class="flex items-center gap-2 mb-4 text-[13px] font-semibold text-slate-700">
                                <i class='bx bx-user text-[18px] text-blue-500'></i>
                                <span>Penerima</span>
                            </div>

                            ${receiverHtml}
                        </div>

                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">

                        <div class="p-5 rounded-xl bg-white border border-slate-200 shadow-[0_2px_10px_rgba(0,0,0,0.03)] h-full">
                            <div class="flex items-center gap-2 mb-4 text-[13px] font-semibold text-slate-700">
                                <i class='bx bxs-truck text-[18px] text-purple-500'></i>
                                <span>Informasi Pengiriman</span>
                            </div>

                            ${shipmentHtml}
                        </div>

                        <div class="p-5 rounded-xl bg-white border border-slate-200 shadow-[0_2px_10px_rgba(0,0,0,0.03)] h-full">
                            <div class="flex items-center gap-2 mb-4 text-[13px] font-semibold text-slate-700">
                                <i class='bx bx-package text-[18px] text-emerald-500'></i>
                                <span>Daftar Produk (${o.products.length})</span>
                            </div>

                            <div class="space-y-3 max-h-56 overflow-y-auto pr-2">
                                ${o.products.map(p => `
                                            <div class="flex justify-between items-center p-3 bg-slate-50/70 rounded-lg border border-slate-100">
                                                <div>
                                                    <div class="font-medium text-[13px] text-slate-800">${p.product_name}</div>
                                                    <div class="text-[11px] text-slate-500 mt-0.5">SKU: ${p.sku}</div>
                                                </div>
                                                <div class="text-right space-y-0.5">
                                                    <div class="text-[13px] font-semibold text-slate-700">x${p.qty}</div>
                                                    <div class="text-[12px] text-slate-500">${"Rp " + Number(p.price).toLocaleString()}</div>
                                                </div>
                                            </div>
                                        `).join('')}
                            </div>
                        </div>

                    </div>
                </div>
            `;
                })
                .catch(() => {
                    modalBody.innerHTML = `
                <div class="py-6 text-center text-rose-600 text-[13px]">
                    <i class='bx bx-error text-[22px]'></i>
                    <p class="mt-2">Gagal memuat detail pesanan.</p>
                </div>
            `;
                });
        }
    </script>

    <script>
        function trackShipment(awb) {
            if (!awb) return;

            const modalBody = document.getElementById("trackModalContent");
            const modal = new bootstrap.Modal(document.getElementById("trackModal"));
            modal.show();

            modalBody.innerHTML = `
            <div class="py-6 text-center">
                <div class="mx-auto h-6 w-6 animate-spin rounded-full border-2 border-slate-300 border-t-red-500"></div>
                <p class="mt-2 text-[13px] text-slate-600">Memuat tracking...</p>
            </div>
        `;

            axios.get('/orders/tracking/' + awb)
                .then(res => {
                    const data = res.data;
                    const history = data.tracking_history || [];

                    let timelineHtml = '';
                    history.forEach((item, index) => {
                        const date = new Date(item.date).toLocaleString('id-ID', {
                            year: "numeric",
                            month: "long",
                            day: "numeric",
                            hour: "2-digit",
                            minute: "2-digit"
                        });

                        timelineHtml += `
                        <div class="border-l-2 border-slate-300 pl-3 ml-2 mb-4 relative">
                            <span class="w-3 h-3 bg-red-500 rounded-full absolute -left-[7px] top-1"></span>
                            
                            <p class="text-[13px] font-semibold text-slate-800">${item.status}</p>
                            <p class="text-[12px] text-slate-600">${item.description ?? '-'}</p>
                            <p class="text-[11px] text-slate-400">${date}</p>

                            ${item.image_urls.length ? `
                                            <a href="${item.image_urls[0]}" target="_blank" 
                                               class="inline-block mt-2 text-[11px] text-red-600 underline">
                                                Lihat Gambar (${item.image_urls.length})
                                            </a>` 
                                : ''
                            }
                        </div>
                    `;
                    });

                    if (!timelineHtml) {
                        timelineHtml = `
                        <p class="text-center text-slate-500 text-[13px] py-3">
                            Tidak ada riwayat tracking tersedia.
                        </p>
                    `;
                    }

                    modalBody.innerHTML = `
                    <div class="mb-4 p-3 bg-slate-50 rounded">
                        <p class="text-[13px]"><strong>Nomor Resi:</strong> ${data.awb_number}</p>
                        <p class="text-[13px]"><strong>Asal:</strong> ${data.origin}</p>
                        <p class="text-[13px]"><strong>Tujuan:</strong> ${data.destination}</p>
                        <p class="text-[13px]">
                            <strong>Status Terakhir:</strong> 
                            <span class="text-red-600">${data.tracking_code}</span>
                        </p>
                    </div>

                    <h6 class="text-[13px] mb-3 font-semibold text-slate-700">Riwayat Pelacakan</h6>
                    <div>${timelineHtml}</div>
                `;
                })
                .catch(() => {
                    modalBody.innerHTML = `
                    <div class="py-6 text-center text-rose-600 text-[13px]">
                        Gagal memuat riwayat tracking.
                    </div>
                `;
                });
        }
    </script>

    <script>
        function confirmCancel(orderId, awb) {
            Swal.fire({
                title: "Batalkan Order?",
                text: "Order yang dibatalkan tidak bisa dikembalikan.",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#dc2626",
                cancelButtonColor: "#6b7280",
                confirmButtonText: "Ya, batalkan",
                cancelButtonText: "Tidak"
            }).then((result) => {
                if (!result.isConfirmed) return;

                Swal.fire({
                    title: "Memproses...",
                    allowOutsideClick: false,
                    didOpen: () => Swal.showLoading()
                });

                axios.post('/orders/cancel', {
                        order_id: orderId,
                        awb_number: awb
                    })
                    .then(res => {
                        Swal.fire({
                            icon: "success",
                            title: "Berhasil",
                            text: res.data.message || "Order berhasil dibatalkan."
                        });
                        document.querySelector('[data-status="all"]').click();
                    })
                    .catch(err => {
                        Swal.fire({
                            icon: "error",
                            title: "Gagal",
                            text: err.response?.data?.message || "Terjadi kesalahan"
                        });
                    });
            });
        }
    </script>

    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const tbody = document.getElementById("order-table-body");
            const pagination = document.getElementById("pagination");
            const paginationInfo = document.getElementById("pagination-info");
            const searchInput = document.getElementById("search");
            const statusTabs = document.getElementById("status-tabs");
            const itemsSelect = document.getElementById("items-per-page");
            const printButton = document.getElementById("print-awb-button");
            const selectAll = document.getElementById("select-all-checkbox");

            let currentStatus = "all";
            let currentPage = 1;
            let limit = parseInt(itemsSelect.value);

            function debounce(fn, delay = 400) {
                let t;
                return (...a) => {
                    clearTimeout(t);
                    t = setTimeout(() => fn(...a), delay);
                };
            }

            function fetchData(page = 1) {
                currentPage = page;

                tbody.innerHTML = `
                    <tr>
                        <td colspan="7" class="py-6 text-center text-[14px] text-slate-500">
                            <div class="flex flex-col items-center gap-2">
                                <div class="h-6 w-6 animate-spin rounded-full border-2 border-slate-300 border-t-red-500"></div>
                                <p>Memuat data...</p>
                            </div>
                        </td>
                    </tr>
                `;

                // Get date filter values from date filter script
                const startDate = window.dateFilterState?.startDate || null;
                const endDate = window.dateFilterState?.endDate || null;

                axios.get('/orders/data', {
                    params: {
                        page: currentPage,
                        limit,
                        status: currentStatus,
                        search: searchInput.value.trim(),
                        customer_service_id: document.getElementById("filter-cs").value,
                        actor_label: document.getElementById("filter-actor-label").value, 
                        actor_id: document.getElementById("filter-actor-id").value, 
                        start_date: startDate,
                        end_date: endDate
                    }
                }).then(res => {
                    const p = res.data.data;
                    renderTable(p.data);
                    renderPagination(p.current_page, p.last_page, p.total, p.from, p.to);

                    updateStatusTabs(res.data.status_counts);
                }).catch(() => {
                    tbody.innerHTML = `
                        <tr>
                            <td colspan="7" class="py-4 text-center text-red-600 text-[14px]">
                                Gagal memuat data.
                            </td>
                        </tr>
                    `;
                });
            }

            function renderTable(rows) {
                tbody.innerHTML = '';

                if (!rows?.length) {
                    tbody.innerHTML = `
                        <tr>
                            <td colspan="7" class="py-6 text-center text-slate-500 text-[14px]">
                                Tidak ada data ditemukan
                            </td>
                        </tr>
                    `;
                    return;
                }

                rows.forEach(item => {
                    const isCod = item.payment_method === "COD";
                    const statusRaw = (item.shipment?.status_name || item.status || '').toUpperCase();
                    

                    const statusTranslated = statusMap[item.shipment.status_name] || item.status;
                    const badge = getBadge(item.shipment.status_name || item.status);

                    const isCancelled = ['CANCELLED', 'EXPIRED', 'FAILED AWB'].includes(statusRaw);

                    const totalPayment = parseInt(item.total_payment || 0);
                    const shipmentCost = parseInt(item.shipment?.shipment_cost || 0);
                    const cashback = parseInt(item.shipment?.cashback || 0);
                    const cair = totalPayment - shipmentCost;

                    const receiver = item.receiver || {};
                    const actor = item.actor || {};
                    const warehouse = actor.warehouse || {};
                    const area = actor.area || {};

                    const cs = item.cs_bonus.customer_service || {};

                    const row = `
                        <tr class="hover:bg-gray-50 transition">
                            <td class="px-3 py-3 text-center align-top">
                                <input type="checkbox" class="order-checkbox h-4 w-4 rounded border-gray-300 text-red-600" value="${item.id}">
                            </td>
                            <td class="px-4 py-4 align-top">
                                <div class="flex items-start gap-3">
                                    <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gray-900 text-white shadow-sm">
                                        <i class='bx bx-receipt text-xl'></i>
                                    </div>
                                    <div class="flex flex-col gap-2">
                                        <div class="text-[15px] font-semibold text-gray-900 leading-tight">
                                            ${item.shipment_order_no || '-'}
                                        </div>
                                        <div class="flex items-center gap-1 text-[13px] text-gray-500">
                                            <i class='bx bx-time-five text-sm'></i>
                                            ${formatDate(item.created_at)}
                                        </div>
                                        ${cs.name ? `
                                            <div class="flex items-center gap-1 text-[13px] text-gray-600">
                                                <i class='bx bx-user text-sm text-red-600'></i>
                                                <span class="font-medium">${cs.name}</span>
                                            </div>
                                        ` : ''}
                                        <div class="flex flex-wrap items-center gap-2 mt-1">
                                            ${isCod
                                                ? `<span class="badge-pill bg-rose-50 text-rose-700 border border-rose-100">
                                                    <i class='bx bx-money text-sm'></i> COD
                                                </span>`
                                                : `<span class="badge-pill bg-emerald-50 text-emerald-700 border border-emerald-100">
                                                    <i class='bx bx-credit-card text-sm'></i> Transfer
                                                </span>`
                                            }
                                            <span class="badge-pill ${badge}">
                                                <i class='bx bx-badge-check text-sm'></i>
                                                ${statusTranslated}
                                            </span>
                                        </div>
                                        ${["WAITING FOR PICK UP", "WAITING FOR DROP OFF", "FAILED PICKUP"].includes(statusRaw)
                                            ? `
                                                <button onclick="confirmCancel(${item.id}, '${item.awb_number || ''}')"
                                                    class="inline-flex items-center justify-center gap-1 bg-rose-600 text-white px-3 py-1.5 
                                                    text-[13px] font-semibold hover:bg-rose-700 transition rounded-xl" style="border-radius: 16px;">
                                                    <i class='bx bx-x-circle text-sm'></i>
                                                    Batalkan
                                                </button>
                                            `
                                            : ""
                                        }
                                    </div>
                                </div>
                            </td>
                            <td class="px-4 py-4 align-top text-[14px] text-gray-700">
                                <div class="font-semibold text-gray-600 mb-1">Pengirim</div>
                                <b>[${actor.code || '-'}] Mitra ${actor.area?.city_name || '-'}</b><br>
                                <span class="text-gray-500">${actor.phone_number || ''}</span><br>
                                <span class="text-gray-500">
                                    ${area.sub_district_name || ''}, ${area.district_name || ''}, ${area.city_name || ''}
                                </span>
                                <div class="font-semibold text-gray-600 mt-3 mb-1">Penerima</div>
                                <b>${receiver.name || '-'}</b><br>
                                <span class="text-gray-500">${receiver.phone_number || '-'}</span><br>
                                <span class="text-gray-500">${receiver.address || '-'}</span>
                            </td>
                            <td class="px-4 py-4 align-top text-[14px]">
                                <div class="font-semibold text-gray-600 mb-1">Paket</div>
                                <div class="text-gray-600">Produk: <b>${item.details?.[0]?.sku || '-'}</b></div>
                                <div class="text-gray-600">Total: <b>${formatRupiah(item.details?.[0]?.price)}</b></div>
                                <div class="text-gray-600">Berat: <b>${item.details?.[0]?.weight ?? 1} kg</b></div>
                            </td>
                            <td class="px-4 py-4 align-top text-[14px]">
                                <div class="font-semibold text-gray-600 mb-1">Kurir</div>
                                <div class="text-gray-800">${getCourierName(item)}</div>
                                <div class="mt-1 text-gray-600">
                                    Resi: <b>${item.awb_number || 'Belum ada AWB'}</b>
                                </div>
                                <div class="flex flex-wrap gap-2 mt-3">
                                    <button onclick="showOrderDetail(${item.id})"
                                        class="bg-gray-900 text-white px-4 py-1.5 text-[14px] rounded-xl hover:bg-black transition" style="border-radius: 16px;">
                                        Detail
                                    </button>

                                    ${!isCancelled ? `
                                        <button onclick="trackShipment('${item.awb_number}')"
                                            class="bg-gray-100 text-gray-700 px-4 py-1.5 text-[14px] rounded-xl hover:bg-gray-200 transition"
                                            ${!item.awb_number ? "disabled style='opacity:.4;cursor:not-allowed'" : ""} style="border-radius: 16px;">
                                            Lacak
                                        </button>
                                        <button class="print-label-button bg-emerald-500 text-white px-4 py-1.5 text-[14px] rounded-xl hover:bg-emerald-600 transition"
                                            data-id="${item.id}" style="border-radius: 16px;">
                                            Cetak Label
                                        </button>
                                    ` : ''}
                                    
                                </div>
                            </td>
                            <td class="px-4 py-4 align-top text-[14px]">
                                <div class="font-semibold text-gray-600 mb-1">Ringkasan</div>
                                <div>Total: <b>${formatRupiah(totalPayment)}</b></div>
                                <div>Ongkir: ${formatRupiah(shipmentCost)}</div>
                                <div>Cashback: ${formatRupiah(cashback)}</div>
                                <div class="mt-1">
                                    Cair:
                                    <span class="inline-flex items-center bg-emerald-100 text-emerald-700 px-2 py-0.5 rounded-lg font-semibold">
                                        ${formatRupiah(cair)}
                                    </span>
                                </div>
                            </td>
                        </tr>
                    `;

                    tbody.insertAdjacentHTML('beforeend', row);
                });
            }

            function renderPagination(current, last, total, from, to) {
                pagination.innerHTML = '';
                paginationInfo.textContent = `Menampilkan ${from}-${to} dari ${total}`;

                const addBtn = (label, page, disabled, active, icon = null) => {
                    const li = document.createElement('li');
                    const btn = document.createElement("button");

                    btn.className =
                        "inline-flex h-8 items-center justify-center gap-1 rounded-full border px-3 text-[14px] transition " +
                        (disabled ?
                            "bg-gray-100 text-gray-300 border-gray-200 cursor-not-allowed" :
                            active ?
                            "bg-gray-900 text-white border-gray-900" :
                            "bg-white hover:bg-gray-50 text-gray-700 border-gray-200");

                    if (icon) {
                        btn.innerHTML = `<i class='${icon} text-sm'></i>`;
                    } else {
                        btn.textContent = label;
                    }

                    if (!disabled && !active) {
                        btn.addEventListener("click", () => fetchData(page));
                    }

                    li.appendChild(btn);
                    pagination.appendChild(li);
                };

                addBtn("", current - 1, current === 1, false, "bx bx-chevron-left");

                const start = Math.max(1, current - 2);
                const end = Math.min(last, current + 2);

                for (let p = start; p <= end; p++) {
                    addBtn(p, p, false, p === current);
                }

                addBtn("", current + 1, current === last, false, "bx bx-chevron-right");
            }

            // STATUS TAB ACTIVE HANDLING
            statusTabs.querySelectorAll(".status-tab").forEach(btn => {
                btn.addEventListener("click", () => {
                    statusTabs.querySelectorAll(".status-tab").forEach(b => {
                        b.classList.remove("bg-gray-900", "text-white", "shadow-sm");
                        b.classList.add(
                            "bg-gray-50",
                            "text-gray-700",
                            "border",
                            "border-gray-200",
                            // "hover:bg-gray-100"
                        );
                    });

                    btn.classList.remove("bg-gray-50", "text-gray-700", "border", "border-gray-200",
                        "hover:bg-gray-100");
                    btn.classList.add("bg-gray-900", "text-white", "shadow-sm");

                    currentStatus = btn.dataset.status;
                    fetchData(1);
                });
            });

            // AUTO SEARCH (NO BUTTON)
            const doSearch = debounce(() => fetchData(1));
            searchInput.addEventListener("input", doSearch);

            itemsSelect.addEventListener("change", () => {
                limit = itemsSelect.value;
                fetchData(1);
            });


            selectAll.addEventListener("change", function() {
                document.querySelectorAll(".order-checkbox").forEach(cb => cb.checked = this.checked);
                printButton.disabled = !this.checked;
            });

            document.addEventListener("change", e => {
                if (e.target.classList.contains("order-checkbox")) {
                    const all = document.querySelectorAll(".order-checkbox");
                    const checked = document.querySelectorAll(".order-checkbox:checked");
                    selectAll.checked = checked.length === all.length;
                    printButton.disabled = checked.length === 0;
                }
            });

            printButton.addEventListener("click", () => {
                selectedPrintIds = [];
                new bootstrap.Modal(document.getElementById("printModal")).show();
            });

            document.addEventListener("click", e => {
                const btn = e.target.closest(".print-label-button");
                if (btn) {
                    selectedPrintIds = [btn.dataset.id];
                    new bootstrap.Modal(document.getElementById("printModal")).show();
                }
            });

            // Export fetchData function to be used by date filter
            window.fetchOrderData = fetchData;
            
            // Initial Load
            fetchData(1);
        });

        // Utility functions
        function formatDate(dateString) {
            const date = new Date(dateString);
            return date.toLocaleDateString('id-ID', {
                day: 'numeric',
                month: 'short',
                year: 'numeric'
            });
        }

        function formatRupiah(amount) {
            return new Intl.NumberFormat('id-ID', {
                style: 'currency',
                currency: 'IDR',
                minimumFractionDigits: 0
            }).format(amount);
        }

        function getCourierName(item) {
            return item.shipment?.courier?.name || 'Belum dipilih';
        }
    </script>

    <!-- DATE FILTER SCRIPT -->
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            // === LOGIC FILTER TANGGAL DENGAN CUSTOM CALENDAR ===
            let startDate = null;
            let endDate = null;
            let currentDateFilter = null;
            let customStart = null;
            let customEnd = null;
            
            // State untuk dua kalender
            let currentLeftMonth = new Date().getMonth();
            let currentLeftYear = new Date().getFullYear();
            let currentRightMonth = new Date().getMonth() + 1;
            let currentRightYear = new Date().getFullYear();

            const dateBtn = document.getElementById('dateFilterBtn');
            const dateLabel = document.getElementById('dateFilterLabel');
            const dateDropdown = document.getElementById('dateFilterDropdown');
            const customStartDateEl = document.getElementById('customStartDate');
            const customEndDateEl = document.getElementById('customEndDate');
            const applyCustomDateBtn = document.getElementById('applyCustomDateBtn');

            // Global state untuk diakses oleh data script
            window.dateFilterState = {
                startDate: null,
                endDate: null
            };

            // 1. Toggle Dropdown
            dateBtn.addEventListener('click', (e) => {
                e.stopPropagation();
                dateDropdown.classList.toggle('hidden');
                
                // Initialize calendar when dropdown opens
                if (!dateDropdown.classList.contains('hidden')) {
                    // Set kalender kanan ke bulan berikutnya dari kiri
                    currentLeftMonth = new Date().getMonth();
                    currentLeftYear = new Date().getFullYear();
                    currentRightMonth = currentLeftMonth + 1;
                    currentRightYear = currentLeftYear;
                    
                    // Handle tahun baru
                    if (currentRightMonth > 11) {
                        currentRightMonth = 0;
                        currentRightYear++;
                    }
                    
                    setTimeout(initializeDualCalendar, 100);
                }
            });

            dateDropdown.addEventListener('click', (e) => {
                e.stopPropagation();
            });

            // Tutup dropdown jika klik di luar
            document.addEventListener('click', (e) => {
                if (!dateBtn.contains(e.target) && !dateDropdown.contains(e.target)) {
                    dateDropdown.classList.add('hidden');
                }
            });

            // 2. Format Tanggal untuk API (YYYY-MM-DD)
            const formatDateApi = (date) => {
                const offset = date.getTimezoneOffset();
                date = new Date(date.getTime() - (offset * 60 * 1000));
                return date.toISOString().split('T')[0];
            };

            // 3. Format tanggal untuk display
            const formatDateDisplay = (date) => {
                return date.toLocaleDateString('id-ID', {
                    day: 'numeric',
                    month: 'short',
                    year: 'numeric'
                });
            };


            // 4. Fungsi untuk update indikator preset aktif
            function updateDateFilterIndicator(activePreset = null) {
                // Reset semua indikator
                document.querySelectorAll('.date-preset').forEach(btn => {
                    btn.classList.remove(
                        'bg-red-50', 
                        'text-red-700', 
                        'border-red-200', 
                        'active',
                        'bg-red-50',
                        'text-red-700', 
                        'border-red-200'
                    );
                    btn.classList.add('text-gray-700', 'border-transparent');
                });
                
                // Set indikator untuk preset yang aktif
                if (activePreset) {
                    const activeButtons = document.querySelectorAll(`[onclick="applyDatePreset('${activePreset}')"]`);
                    activeButtons.forEach(btn => {
                        btn.classList.add('bg-red-50', 'text-red-700', 'border-red-200', 'active');
                        btn.classList.remove('text-gray-700', 'border-transparent');
                    });
                }
            }

            // 5. Initialize Dual Calendar
            function initializeDualCalendar() {
                const calendarContainer = document.getElementById('customCalendar');
                if (!calendarContainer) return;
                
                // Clear previous calendar
                calendarContainer.innerHTML = '';
                
                // Create dual calendar HTML
                const calendarHTML = `
                    <div class="flex gap-4">
                        <!-- Left Calendar -->
                        <div class="flex-1">
                            <div class="mb-3">
                                <div class="flex items-center justify-between mb-2">
                                    <button type="button" onclick="navigateMonth('left', -1)" class="p-1 hover:bg-gray-100 rounded">
                                        <i class='bx bx-chevron-left text-gray-600'></i>
                                    </button>
                                    <div class="text-[13px] font-semibold text-gray-700">
                                        ${new Date(currentLeftYear, currentLeftMonth).toLocaleDateString('id-ID', { month: 'long', year: 'numeric' })}
                                    </div>
                                    <div class="w-6"></div> <!-- Spacer untuk alignment -->
                                </div>
                                
                                <div class="grid grid-cols-7 gap-1 text-center">
                                    ${['M', 'S', 'S', 'R', 'K', 'J', 'S'].map(day => 
                                        `<div class="text-[11px] text-gray-500 py-1">${day}</div>`
                                    ).join('')}
                                    
                                    ${generateCalendarDays(currentLeftYear, currentLeftMonth, 'left')}
                                </div>
                            </div>
                        </div>
                        
                        <!-- Right Calendar -->
                        <div class="flex-1">
                            <div class="mb-3">
                                <div class="flex items-center justify-between mb-2">
                                    <div class="w-6"></div> <!-- Spacer untuk alignment -->
                                    <div class="text-[13px] font-semibold text-gray-700">
                                        ${new Date(currentRightYear, currentRightMonth).toLocaleDateString('id-ID', { month: 'long', year: 'numeric' })}
                                    </div>
                                    <button type="button" onclick="navigateMonth('right', 1)" class="p-1 hover:bg-gray-100 rounded">
                                        <i class='bx bx-chevron-right text-gray-600'></i>
                                    </button>
                                </div>
                                
                                <div class="grid grid-cols-7 gap-1 text-center">
                                    ${['M', 'S', 'S', 'R', 'K', 'J', 'S'].map(day => 
                                        `<div class="text-[11px] text-gray-500 py-1">${day}</div>`
                                    ).join('')}
                                    
                                    ${generateCalendarDays(currentRightYear, currentRightMonth, 'right')}
                                </div>
                            </div>
                        </div>
                    </div>
                `;
                
                calendarContainer.innerHTML = calendarHTML;
            }

            // 6. Generate Calendar Days untuk kedua kalender
            function generateCalendarDays(year, month, calendarSide) {
                const firstDay = new Date(year, month, 1);
                const lastDay = new Date(year, month + 1, 0);
                const startingDay = firstDay.getDay();
                const daysInMonth = lastDay.getDate();
                
                let daysHTML = '';
                
                // Empty cells for days before month starts
                for (let i = 0; i < startingDay; i++) {
                    daysHTML += `<div class="h-7"></div>`;
                }
                
                // Days of the month
                for (let day = 1; day <= daysInMonth; day++) {
                    const date = new Date(year, month, day);
                    const isSelected = isDateInRange(date);
                    const isToday = isTodayDate(date);
                    const isInRange = isDateInSelectedRange(date);
                    
                    daysHTML += `
                        <button type="button" onclick="selectCustomDate('${date.toISOString()}')" 
                            class="h-7 w-7 text-[11px] rounded-full transition-all ${
                                isSelected ? 'bg-red-600 text-white' : 
                                isInRange ? 'bg-red-100 text-red-700' :
                                isToday ? 'bg-red-50 text-red-600' : 
                                'hover:bg-gray-100 text-gray-700'
                            } ${isToday ? 'font-semibold' : ''}">
                            ${day}
                        </button>
                    `;
                }
                
                return daysHTML;
            }

            // 7. Date Selection Functions
            function isTodayDate(date) {
                const today = new Date();
                return date.toDateString() === today.toDateString();
            }

            function isDateInRange(date) {
                if (!customStart && !customEnd) return false;
                
                const dateStr = date.toISOString().split('T')[0];
                const startStr = customStart ? customStart.toISOString().split('T')[0] : null;
                const endStr = customEnd ? customEnd.toISOString().split('T')[0] : null;
                
                if (customStart && !customEnd) {
                    return dateStr === startStr;
                }
                
                if (customStart && customEnd) {
                    return dateStr === startStr || dateStr === endStr;
                }
                
                return false;
            }

            function isDateInSelectedRange(date) {
                if (!customStart || !customEnd) return false;
                
                const dateStr = date.toISOString().split('T')[0];
                const startStr = customStart.toISOString().split('T')[0];
                const endStr = customEnd.toISOString().split('T')[0];
                
                return dateStr > startStr && dateStr < endStr;
            }

            // 8. Global functions untuk calendar
            window.selectCustomDate = (dateString) => {
                const date = new Date(dateString);
                
                if (!customStart || (customStart && customEnd)) {
                    // Start new selection
                    customStart = date;
                    customEnd = null;
                } else if (customStart && !customEnd) {
                    // Complete selection
                    if (date < customStart) {
                        customEnd = new Date(customStart);
                        customStart = date;
                    } else {
                        customEnd = date;
                    }
                    
                    // AUTO APPLY ketika kedua tanggal sudah dipilih
                    setTimeout(() => {
                        applyCustomDate();
                    }, 300);
                }
                
                updateCustomDateDisplay();
                updateApplyButton();
                initializeDualCalendar(); // Refresh calendar untuk update visual
            }

            window.navigateMonth = (side, direction) => {
                if (side === 'left') {
                    currentLeftMonth += direction;
                    if (currentLeftMonth < 0) {
                        currentLeftMonth = 11;
                        currentLeftYear--;
                    } else if (currentLeftMonth > 11) {
                        currentLeftMonth = 0;
                        currentLeftYear++;
                    }
                    
                    // Update right calendar untuk tetap menjadi bulan berikutnya
                    currentRightMonth = currentLeftMonth + 1;
                    currentRightYear = currentLeftYear;
                    if (currentRightMonth > 11) {
                        currentRightMonth = 0;
                        currentRightYear++;
                    }
                } else {
                    currentRightMonth += direction;
                    if (currentRightMonth < 0) {
                        currentRightMonth = 11;
                        currentRightYear--;
                    } else if (currentRightMonth > 11) {
                        currentRightMonth = 0;
                        currentRightYear++;
                    }
                    
                    // Update left calendar untuk tetap menjadi bulan sebelumnya
                    currentLeftMonth = currentRightMonth - 1;
                    currentLeftYear = currentRightYear;
                    if (currentLeftMonth < 0) {
                        currentLeftMonth = 11;
                        currentLeftYear--;
                    }
                }
                
                initializeDualCalendar();
            }

            function updateCustomDateDisplay() {
                if (customStartDateEl) {
                    customStartDateEl.textContent = customStart ? formatDateDisplay(customStart) : '-';
                }
                if (customEndDateEl) {
                    customEndDateEl.textContent = customEnd ? formatDateDisplay(customEnd) : '-';
                }
            }

            function updateApplyButton() {
                if (applyCustomDateBtn) {
                    applyCustomDateBtn.disabled = !customStart || !customEnd;
                }
            }

            // 9. Apply Custom Date
            window.applyCustomDate = () => {
                if (!customStart || !customEnd) return;
                
                startDate = formatDateApi(customStart);
                endDate = formatDateApi(customEnd);
                
                // Update global state
                window.dateFilterState.startDate = startDate;
                window.dateFilterState.endDate = endDate;
                
                // Update label
                dateLabel.textContent = `${formatDateDisplay(customStart)} - ${formatDateDisplay(customEnd)}`;
                
                // Reset preset indicator
                currentDateFilter = null;
                updateDateFilterIndicator(null);
                
                // Close dropdown and fetch data
                dateDropdown.classList.add('hidden');
                
                // Panggil fetch data dari data script
                if (window.fetchOrderData) {
                    window.fetchOrderData(1);
                }
            }

            // 10. Logic Preset
            window.applyDatePreset = (preset) => {
                const today = new Date();
                let start = new Date();
                let end = new Date();
                let label = "";

                // Reset custom selection ketika memilih preset
                customStart = null;
                customEnd = null;
                updateCustomDateDisplay();
                updateApplyButton();

                switch (preset) {
                    case 'today':
                        label = "Hari Ini";
                        break; 
                    case 'yesterday':
                        start.setDate(today.getDate() - 1);
                        end.setDate(today.getDate() - 1);
                        label = "Kemarin";
                        break;
                    case 'last7':
                        start.setDate(today.getDate() - 6);
                        label = "7 Hari Terakhir";
                        break;
                    case 'last30':
                        start.setDate(today.getDate() - 29);
                        label = "30 Hari Terakhir";
                        break;
                    case 'this_month':
                        start = new Date(today.getFullYear(), today.getMonth(), 1);
                        label = "Bulan Ini";
                        break;
                    case 'last_month':
                        start = new Date(today.getFullYear(), today.getMonth() - 1, 1);
                        end = new Date(today.getFullYear(), today.getMonth(), 0);
                        label = "Bulan Lalu";
                        break;
                    case 'this_year':
                        start = new Date(today.getFullYear(), 0, 1);
                        label = "Tahun Ini";
                        break;
                    case 'max':
                        startDate = null;
                        endDate = null;
                        label = "Semua (Max)";
                        currentDateFilter = 'max';
                        updateDateFilterIndicator('max');
                        dateLabel.textContent = label;
                        dateDropdown.classList.add('hidden');
                        
                        // Update global state
                        window.dateFilterState.startDate = null;
                        window.dateFilterState.endDate = null;
                        
                        // Fetch data
                        if (window.fetchOrderData) {
                            window.fetchOrderData(1);
                        }
                        return;
                }

                // Set Global State untuk preset yang membutuhkan tanggal
                if (preset !== 'max') {
                    startDate = formatDateApi(start);
                    endDate = formatDateApi(end);
                    
                    // Update global state
                    window.dateFilterState.startDate = startDate;
                    window.dateFilterState.endDate = endDate;
                }

                // Update state dan UI
                currentDateFilter = preset;
                updateDateFilterIndicator(preset);
                dateLabel.textContent = label;
                dateDropdown.classList.add('hidden');

                // Fetch Data Baru
                if (window.fetchOrderData) {
                    window.fetchOrderData(1);
                }
            };

            // 11. Fungsi untuk menghapus filter
            window.clearDateFilter = () => {
                startDate = null;
                endDate = null;
                currentDateFilter = null;
                customStart = null;
                customEnd = null;
                
                // Update global state
                window.dateFilterState.startDate = null;
                window.dateFilterState.endDate = null;
                
                dateLabel.textContent = "Filter Tanggal";
                dateDropdown.classList.add('hidden');
                updateDateFilterIndicator(null);
                updateCustomDateDisplay();
                updateApplyButton();
                
                // Fetch data
                if (window.fetchOrderData) {
                    window.fetchOrderData(1);
                }
            };

            updateDateFilterIndicator(null);
            updateCustomDateDisplay();
            updateApplyButton();
        });
    </script>

    <!-- Customer Service Filter -->
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const csBtn = document.getElementById("csDropdownBtn");
            const csMenu = document.getElementById("csDropdownMenu");
            const csSearchInput = document.getElementById("csSearchInput");
            const csList = document.getElementById("csList");
            const csLabel = document.getElementById("csSelectedLabel"); // Pastikan ID ini match

            // Debug: Check if elements exist
            console.log('CS Elements:', {
                btn: csBtn,
                menu: csMenu,
                search: csSearchInput,
                list: csList,
                label: csLabel
            });

            // Toggle Dropdown
            if (csBtn) {
                csBtn.addEventListener("click", (e) => {
                    e.stopPropagation();
                    csMenu.classList.toggle("hidden");
                    csSearchInput.value = "";
                    filterCsList("");
                });
            }

            // Click outside close
            document.addEventListener("click", (e) => {
                if (!document.getElementById("csDropdownContainer").contains(e.target)) {
                    csMenu.classList.add("hidden");
                }
            });

            // Search filtering
            if (csSearchInput) {
                csSearchInput.addEventListener("input", (e) => {
                    filterCsList(e.target.value.trim().toLowerCase());
                });
            }

            function filterCsList(keyword) {
                const items = csList.querySelectorAll(".cs-item");

                items.forEach(item => {
                    const name = item.dataset.name.toLowerCase();
                    if (name.includes(keyword)) {
                        item.style.display = "block";
                    } else {
                        item.style.display = "none";
                    }
                });
            }

            // Select CS
            if (csList) {
                csList.addEventListener("click", e => {
                    const item = e.target.closest(".cs-item");
                    if (!item) return;

                    const id = item.dataset.id;
                    const name = item.dataset.name;

                    if (csLabel) {
                        csLabel.textContent = name;
                    }
                    
                    csMenu.classList.add("hidden");

                    // Apply filter ke REST API
                    document.getElementById("filter-cs").value = id;
                    
                    // Trigger fetch data
                    if (window.fetchOrderData) {
                        window.fetchOrderData(1);
                    } else {
                        console.log('fetchOrderData not available');
                    }
                });
            }
        });
    </script>


    <!-- Complex Actor Filter Script -->
    <script>
        document.addEventListener("DOMContentLoaded", () => {

            // ==== ELEMENTS ====
            const complexBtn = document.getElementById("complexActorDropdownBtn");
            const complexMenu = document.getElementById("complexActorDropdownMenu");
            const complexLabel = document.getElementById("complexActorSelectedLabel");
            const categoryBtns = document.querySelectorAll(".category-btn");
            const previewSection = document.getElementById("previewSection");
            const previewList = document.getElementById("previewList");
            const previewTitle = document.getElementById("previewTitle");
            const viewAllSection = document.getElementById("viewAllSection");
            const viewAllBtn = document.getElementById("viewAllBtn");

            const fullDataModal = document.getElementById("fullDataModal");
            const fullDataList = document.getElementById("fullDataList");
            const fullDataSearch = document.getElementById("fullDataSearch");
            const fullDataCount = document.getElementById("fullDataCount");
            const closeModalBtn = document.getElementById("closeModalBtn");
            const cancelFullDataBtn = document.getElementById("cancelFullDataBtn");
            const applyFullDataBtn = document.getElementById("applyFullDataBtn");
            const selectAllBtn = document.getElementById("selectAllBtn");
            const modalTitle = document.getElementById("modalTitle");

            // ==== STATE ====
            let currentCategory = null;
            let currentPreviewData = [];
            let currentFullData = [];
            let selectedActor = null;

            // ==== OPEN DROPDOWN ====
            complexBtn.addEventListener("click", (e) => {
                e.stopPropagation();
                complexMenu.classList.toggle("hidden");

                if (!complexMenu.classList.contains("hidden")) {
                    resetComplexFilter();
                }
            });

            // ========== GLOBAL CLICK FIX (PENTING) ==========
            document.addEventListener("click", (e) => {
                const dropdownContainer = document.getElementById("complexActorDropdownContainer");
           
                    // Jika klik di tombol filter → jangan tutup
                if (complexBtn.contains(e.target)) return;

                // Jika klik di dalam dropdown → jangan tutup
                if (complexMenu.contains(e.target)) return;

                // Jika klik di dalam View All Section → jangan tutup
                if (viewAllSection.contains(e.target)) return;

                // Jika klik di tombol View All → jangan tutup
                if (viewAllBtn.contains(e.target)) return;

                // Jika klik di modal → jangan tutup
                if (fullDataModal.contains(e.target)) return;

                // Selain itu → tutup dropdown
                complexMenu.classList.add("hidden");
            });

            // ==== CATEGORY SELECT ====
            categoryBtns.forEach(btn => {
                btn.addEventListener("click", (e) => {
                    e.stopPropagation();
                    const category = btn.dataset.category;

                    categoryBtns.forEach(b => b.classList.remove("active"));
                    btn.classList.add("active");

                    currentCategory = category;
                    loadPreviewData(category);
                });
            });

            // ==== PREVIEW LOADER ====
            async function loadPreviewData(category) {
                try {
                    previewList.innerHTML = `
                        <div class="flex justify-center items-center py-4">
                            <div class="h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-red-500"></div>
                            <span class="ml-2 text-[12px] text-gray-500">Memuat data...</span>
                        </div>
                    `;

                    previewSection.classList.remove("hidden");

                    const res = await axios.get("/orders/actors/preview", {
                        params: { category, limit: 5 }
                    });

                    if (!res.data.success) throw new Error(res.data.message);
                    currentPreviewData = res.data.data || [];

                    if (currentPreviewData.length === 0) {
                        previewList.innerHTML = `
                            <div class="text-center py-4 text-[12px] text-gray-500">
                                Tidak ada data
                            </div>
                        `;
                        viewAllSection.classList.add("hidden");
                        return;
                    }

                    renderPreviewList(currentPreviewData);
                    previewTitle.textContent = `Preview ${getCategoryLabel(category)}`;
                    viewAllSection.classList.remove("hidden");

                } catch (err) {
                    previewList.innerHTML = `<div class="text-red-500 py-4">${err.message}</div>`;
                    viewAllSection.classList.add("hidden");
                }
            }

            // ==== PREVIEW LIST ====
            function renderPreviewList(data) {
                previewList.innerHTML = "";

                data.forEach(actor => {
                    const item = document.createElement("div");
                    item.className = `preview-item p-3 rounded-lg cursor-pointer`;
                    item.innerHTML = `
                        <div class="flex justify-between items-start">
                            <div class="flex-1">
                                <div class="font-medium text-[13px]">${actor.name}</div>
                                <div class="text-[11px] text-gray-500">${actor.code} • ${actor.phone_number || '-'}</div>
                                <div class="text-[11px] text-gray-500">${actor.address}</div>
                            </div>
                        </div>
                    `;

                    item.addEventListener("click", (event) => {
                        event.stopPropagation();
                        selectPreviewActor(actor, item);
                    });

                    previewList.appendChild(item);
                });
            }

            function selectPreviewActor(actor, element) {
                // Hapus selection dari semua item preview
                document.querySelectorAll('.preview-item').forEach(item => {
                    item.classList.remove('selected', 'bg-red-50', 'border-red-300');
                });
                
                // Tambahkan selection ke item yang dipilih
                element.classList.add('selected', 'bg-red-50', 'border-red-300');
                
                selectedActor = actor;
                applyComplexFilter(actor);
                complexMenu.classList.add("hidden");
            }

            // ==== VIEW ALL (FIXED) ====
            viewAllBtn.addEventListener("click", (e) => {
                e.stopPropagation(); // FIX TERPENTING
                e.stopImmediatePropagation(); // TAMBAHKAN INI
                loadFullData(currentCategory);
            });

            // ==== FULL DATA LOADER ====
            async function loadFullData(category) {
                try {
                    fullDataList.innerHTML = `
                        <div class="flex justify-center items-center py-8">
                            <div class="h-5 w-5 animate-spin rounded-full border-2 border-gray-300 border-t-red-500"></div>
                            <span class="ml-2 text-[13px] text-gray-500">Memuat data...</span>
                        </div>
                    `;

                    const res = await axios.get("/orders/actors/full-data", {
                        params: { category }
                    });

                    if (!res.data.success) throw new Error(res.data.message);
                    currentFullData = res.data.data || [];

                    renderFullDataList(currentFullData);

                    modalTitle.textContent = `Semua Data ${getCategoryLabel(category)}`;
                    fullDataModal.classList.remove("hidden");
                    // complexMenu.classList.add("hidden");

                } catch (err) {
                    fullDataList.innerHTML = `<div class="text-red-500 py-4">${err.message}</div>`;
                }
            }

            // ==== FULL DATA LIST ====
            function renderFullDataList(data, searchTerm = '') {
                fullDataList.innerHTML = "";

                const filtered = searchTerm
                    ? data.filter(a =>
                        a.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
                        a.code.toLowerCase().includes(searchTerm.toLowerCase()) ||
                        (a.phone_number || "").toLowerCase().includes(searchTerm.toLowerCase())
                    )
                    : data;

                if (filtered.length === 0) {
                    fullDataList.innerHTML = `<div class="text-center py-8 text-gray-500 text-[13px]">Tidak ada data cocok</div>`;
                    fullDataCount.textContent = "0 data ditemukan";
                    return;
                }

                filtered.forEach(actor => {
                    const isSelected = selectedActor && selectedActor.id === actor.id;
                    const item = document.createElement("div");
                    item.className = `full-data-item p-3 rounded-lg cursor-pointer ${
                        isSelected ? 'selected bg-red-50 border-red-300' : 'border border-transparent'
                    }`;
                    item.innerHTML = `
                        <div class="flex justify-between items-start">
                            <div class="flex-1">
                                <div class="font-medium text-[13px] ${isSelected ? 'text-red-700' : 'text-gray-800'}">${actor.name}</div>
                                <div class="text-[11px] ${isSelected ? 'text-red-600' : 'text-gray-500'}">${actor.code} • ${actor.phone_number || '-'}</div>
                                <div class="text-[11px] ${isSelected ? 'text-red-600' : 'text-gray-500'}">${actor.address}</div>
                            </div>
                            <i class='bx bx-check text-lg text-red-600 ${isSelected ? "" : "hidden"}'></i>
                        </div>
                    `;

                    item.addEventListener("click", (ev) => {
                        ev.stopPropagation();
                        selectFullDataActor(actor, item);
                    });

                    fullDataList.appendChild(item);
                });

                fullDataCount.textContent = `${filtered.length} data ditemukan`;
            }

            function selectFullDataActor(actor, item) {
                selectedActor = actor;

                document.querySelectorAll(".full-data-item").forEach(el => {
                    el.classList.remove('selected', 'bg-red-50', 'border-red-300');
                });
                
                document.querySelectorAll(".full-data-item .bx-check").forEach(el => {
                    el.classList.add("hidden");
                });
                item.classList.add('selected', 'bg-red-50', 'border-red-300');
                item.querySelector(".bx-check").classList.remove("hidden");
            }

            fullDataSearch.addEventListener("input", (e) => {
                renderFullDataList(currentFullData, e.target.value);
            });

            selectAllBtn.addEventListener("click", () => {
                selectedActor = null;
                document.querySelectorAll(".full-data-item .bx-check").forEach(el => el.classList.add("hidden"));
            });

            fullDataModal.addEventListener("click", (e) => e.stopPropagation());

            closeModalBtn.addEventListener("click", () => fullDataModal.classList.add("hidden"));
            cancelFullDataBtn.addEventListener("click", () => fullDataModal.classList.add("hidden"));

            applyFullDataBtn.addEventListener("click", () => {
                if (selectedActor) applyComplexFilter(selectedActor);
                else resetComplexFilterUI();
                fullDataModal.classList.add("hidden");
            });

            // ==== APPLY FILTER ====
            function applyComplexFilter(actor) {
                document.getElementById("filter-actor-label").value = currentCategory;
                document.getElementById("filter-actor-id").value = actor.id;

                complexLabel.textContent = actor.name;

                selectedActor = actor;

                if (window.fetchOrderData) {
                    window.fetchOrderData(1);
                } else {
                    console.error("Fungsi fetchOrderData tidak ditemukan!");
                }
            }

            function resetComplexFilter() {
                categoryBtns.forEach(b => b.classList.remove("active"));
                previewSection.classList.add("hidden");
                viewAllSection.classList.add("hidden");
                selectedActor = null;
            }

            function resetComplexFilterUI() {
                document.getElementById("filter-actor-label").value = '';
                document.getElementById("filter-actor-id").value = '';
                
                complexLabel.textContent = "Semua Partner";
                document.querySelectorAll('.preview-item, .full-data-item').forEach(item => {
                    item.classList.remove('selected', 'bg-red-50', 'border-red-300');
                });
                document.querySelectorAll('.bx-check').forEach(icon => {
                    icon.classList.add('hidden');
                });
                
                selectedActor = null;
                if (window.fetchOrderData) window.fetchOrderData(1);
            }

            // ==== HELPERS ====
            function getCategoryLabel(category) {
                return {
                    mitra: "Mitra",
                    distributor: "Distributor"
                }[category] || category;
            }

                    // ==== TAMBAHKAN RESET BUTTON ====
        // Tambahkan reset button ke dalam dropdown
        function addResetButton() {
            const existingResetBtn = document.getElementById('complexFilterResetBtn');
            if (existingResetBtn) existingResetBtn.remove();

            const resetBtn = document.createElement('button');
            resetBtn.id = 'complexFilterResetBtn';
            resetBtn.innerHTML = `
                <i class='bx bx-reset'></i>
                Reset Filter
            `;
            resetBtn.className = `w-full mt-2 px-3 py-2 text-[12px] text-gray-600 border border-gray-200 rounded-lg 
                                hover:bg-gray-50 transition font-medium flex items-center justify-center gap-2`;

            resetBtn.addEventListener('click', (e) => {
                e.stopPropagation();
                resetComplexFilterUI();
                complexMenu.classList.add('hidden');
            });

            // Tambahkan reset button sebelum tombol View All
            viewAllSection.parentNode.insertBefore(resetBtn, viewAllSection);
        }

        // Panggil fungsi untuk menambahkan reset button
        addResetButton();
        });

    </script>
@endpush