@extends('template.desktop.app')

@push('styles')
    <script src="https://cdn.tailwindcss.com"></script>
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" 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 type="text/tailwindcss">
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f8fafc;
        }

        /* Modern Glassmorphism & Utilities */
        .glass-effect {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }

        /* Filter Row & Buttons */
        .filter-btn {
            @apply flex items-center gap-2 rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-[13px] font-semibold text-gray-600 hover:bg-gray-50 hover:border-red-300 hover:text-red-600 transition-all duration-300 shadow-sm;
        }

        .filter-btn.active {
            @apply border-red-200 bg-red-50 text-red-700 shadow-inner !important;
        }

        /* Date Filter Styles */
        .date-preset {
            @apply w-full text-left px-3 py-2 rounded-lg transition-all duration-200 font-medium text-[13px] flex justify-between items-center text-gray-600;
        }

        .date-preset:hover {
            @apply bg-red-50 text-red-600;
        }

        .date-preset.active {
            @apply bg-red-600 text-white !important;
        }

        /* Custom Calendar Styles */
        #customCalendar button {
            @apply flex items-center justify-center font-bold text-[11px] h-8 w-8 rounded-lg transition-all duration-200;
        }

        #customCalendar button:not(.bg-red-600):hover {
            @apply bg-red-50 text-red-600 !important;
        }

        /* Dropdown Containers - need position relative for absolute dropdowns */
        .cs-dropdown-container,
        .complex-dropdown-container {
            position: relative;
        }

        /* Dropdown Menus */
        .modern-dropdown {
            @apply absolute left-0 top-full mt-2 rounded-2xl border border-gray-100 bg-white shadow-2xl z-[150] block opacity-0 invisible scale-95 origin-top-left transition-all duration-200 border-t-4 border-t-red-600;
            transform: translateY(10px);
        }

        .cs-dropdown-menu {
            @apply modern-dropdown;
        }

        .cs-item {
            @apply flex items-center justify-between px-4 py-3 cursor-pointer transition-all duration-200 text-gray-600 font-medium hover:bg-red-50 hover:text-red-600 rounded-xl mx-1 my-0.5;
        }

        .cs-item.active {
            @apply bg-red-600 text-white font-bold !important;
        }

        .cs-item.active i {
            @apply text-white !important;
        }

        .modern-dropdown.show {
            @apply opacity-100 visible scale-100 translate-y-0 !important;
        }

        .cs-dropdown-container,
        .complex-dropdown-container,
        .relative {
            position: relative;
        }

        @keyframes dropdownFadeIn {
            from {
                opacity: 0;
                transform: translateY(10px) scale(0.98);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        /* Nav Tabs - Premium Look */
        .nav-tabs .nav-link {
            @apply border-0 border-b-2 border-transparent px-5 py-4 text-gray-500 font-bold text-[13px] transition-all relative overflow-hidden;
        }

        .nav-tabs .nav-link:hover {
            @apply text-red-600 bg-red-50/50;
        }

        .nav-tabs .nav-link.active {
            @apply border-red-600 text-red-600 bg-transparent !important;
        }

        .nav-link span {
            @apply inline-flex items-center justify-center min-w-[20px] h-[20px] px-1.5 ml-2 text-[10px] font-black rounded-lg bg-gray-100 text-gray-500 group-hover:bg-red-100 transition-colors;
        }

        .nav-link.active span {
            @apply bg-red-600 text-white !important;
        }

        /* Table Styling Refresh */
        #ordersTable {
            @apply border-separate border-spacing-0;
        }

        #ordersTable thead th {
            @apply bg-white text-gray-400 font-black text-[10px] uppercase tracking-[0.1em] py-5 px-4 border-b border-gray-100;
        }

        #ordersTable tbody tr {
            @apply transition-all duration-200;
        }

        #ordersTable tbody tr:hover {
            @apply bg-red-50/30 transform scale-[1.001];
        }

        #ordersTable tbody td {
            @apply py-5 px-4 border-b border-gray-50 align-middle;
        }

        /* Actor & Preview Items Styling */
        .preview-item,
        .full-data-item {
            @apply p-4 mx-1 rounded-xl transition-all duration-300 border border-transparent mb-1 cursor-pointer flex items-center justify-between text-gray-600 bg-white;
        }

        .preview-item:hover,
        .full-data-item:hover {
            @apply bg-red-50/50 border-red-100 text-red-700;
        }

        .preview-item.selected,
        .full-data-item.selected {
            @apply bg-red-600 text-white font-bold shadow-lg shadow-red-100 !important;
        }

        .preview-item.selected i {
            @apply text-white !important;
        }

        /* Actor Specific Dropdown */
        .complex-dropdown-menu {
            @apply modern-dropdown;
        }

        .category-btn {
            @apply flex-1 py-3 rounded-xl border border-gray-100 text-[11px] font-black uppercase tracking-widest text-gray-400 hover:bg-gray-50 hover:border-red-200 transition-all duration-300;
        }

        .category-btn.active {
            @apply bg-red-600 text-white border-red-600 shadow-xl shadow-red-100 !important;
        }

        /* Action Bar Elevation */
        #ordersMeta {
            @apply bg-gradient-to-r from-red-600 to-red-800 border-0 rounded-2xl p-4 my-6 flex items-center justify-between shadow-lg shadow-red-100;
            animation: slideUp 0.4s ease-out;
        }

        /* Checkbox Styling */
        .form-check-input {
            @apply rounded-md border-gray-300 w-5 h-5 cursor-pointer transition-all focus:ring-red-500 focus:ring-offset-0 !important;
        }

        .form-check-input:checked {
            @apply bg-red-600 border-red-600 shadow-md !important;
        }

        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .selection-active {
            @apply scale-100 opacity-100 visible !important;
        }

        /* Status Badges */
        .status-badge {
            @apply px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-wider border-2;
        }

        .status-pending {
            @apply bg-orange-50 text-orange-600 border-orange-100;
        }

        .status-approved {
            @apply bg-emerald-50 text-emerald-600 border-emerald-100;
        }

        .status-rejected {
            @apply bg-rose-50 text-rose-600 border-rose-100;
        }
    </style>
@endpush

@section('content')
    <div class="mb-6">
        <div class="bg-red-50 border border-red-100 rounded-xl p-4 flex items-start gap-3">
            <div class="bg-red-600 rounded-lg p-2 text-white shadow-sm mt-0.5">
                <i class="ti tabler-info-circle text-[20px]"></i>
            </div>
            <div class="flex-1">
                <h5 class="text-[15px] font-bold text-red-900 mb-1">Informasi Penting</h5>
                <p class="text-[13.5px] text-red-800 leading-relaxed mb-0">
                    Orderan yang dicentang dan dikirim ke <strong>Everpro</strong> akan
                    <span class="font-bold underline decoration-red-300">otomatis disetujui (Approved)</span>.
                    Pastikan data pesanan sudah valid sebelum melanjutkan.
                </p>
            </div>
            <button type="button" class="text-red-400 hover:text-red-600 transition-colors" data-bs-dismiss="alert"
                aria-label="Close">
                <i class='bx bx-x text-xl'></i>
            </button>
        </div>
    </div>

    <div class="card border-0 shadow-sm rounded-xl !overflow-visible">
        <div class="card-datatable">
            <div class="dt-container dt-bootstrap5 dt-empty-footer">

                <!-- Main Header & Filter Bar -->
                <div class="px-6 py-5 border-b border-gray-100">
                    <div class="flex flex-wrap items-center justify-between gap-4">

                        <!-- Left Side: Search & Core Filters -->
                        <div class="flex flex-wrap items-center gap-3">
                            <div class="relative w-64">
                                <i class='bx bx-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-lg'></i>
                                <input type="search" id="orderSearch"
                                    class="w-full pl-10 pr-4 py-2 bg-gray-50 border border-gray-200 rounded-xl text-[13.5px] focus:bg-white focus:ring-2 focus:ring-red-100 transition-all outline-none"
                                    placeholder="Cari Pesanan...">
                            </div>

                            <!-- Date Filter -->
                            <div class="relative">
                                <button id="dateFilterBtn" class="filter-btn group">
                                    <i
                                        class='bx bx-calendar text-lg text-red-500 group-hover:scale-110 transition-transform'></i>
                                    <span id="dateFilterLabel">Filter Waktu</span>
                                    <i
                                        class='bx bx-chevron-down text-gray-400 group-hover:text-red-500 transition-colors'></i>
                                </button>

                                <div id="dateFilterDropdown" class="modern-dropdown p-6 w-[620px]">
                                    <!-- Dropdown Header -->
                                    <div class="flex items-center gap-3 mb-5 px-1">
                                        <div class="w-8 h-8 rounded-lg bg-red-50 flex items-center justify-center">
                                            <i class='bx bxs-calendar-event text-red-600 text-lg'></i>
                                        </div>
                                        <div>
                                            <h4
                                                class="text-[11px] font-black text-gray-800 uppercase tracking-widest leading-none mb-1">
                                                Rentang Waktu</h4>
                                            <p class="text-[10px] text-gray-400 font-medium tracking-tight">Pilih periode
                                                laporan atau custom</p>
                                        </div>
                                    </div>

                                    <div class="grid grid-cols-12 gap-6">
                                        <!-- Quick Presets -->
                                        <div class="col-span-4 border-r border-gray-100 pr-4 space-y-1.5">
                                            <h5
                                                class="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-3 px-2">
                                                Cepat</h5>
                                            <button onclick="applyDatePreset('today')" class="date-preset group">
                                                <span>Hari Ini</span>
                                                <i
                                                    class='bx bx-chevron-right opacity-0 group-hover:opacity-100 transition-opacity'></i>
                                            </button>
                                            <button onclick="applyDatePreset('yesterday')" class="date-preset group">
                                                <span>Kemarin</span>
                                                <i
                                                    class='bx bx-chevron-right opacity-0 group-hover:opacity-100 transition-opacity'></i>
                                            </button>
                                            <button onclick="applyDatePreset('last7')" class="date-preset group">
                                                <span>7 Hari Terakhir</span>
                                                <i
                                                    class='bx bx-chevron-right opacity-0 group-hover:opacity-100 transition-opacity'></i>
                                            </button>
                                            <button onclick="applyDatePreset('last30')" class="date-preset group">
                                                <span>30 Hari Terakhir</span>
                                                <i
                                                    class='bx bx-chevron-right opacity-0 group-hover:opacity-100 transition-opacity'></i>
                                            </button>
                                            <button onclick="applyDatePreset('this_month')" class="date-preset group">
                                                <span>Bulan Ini</span>
                                                <i
                                                    class='bx bx-chevron-right opacity-0 group-hover:opacity-100 transition-opacity'></i>
                                            </button>
                                            <button onclick="applyDatePreset('last_month')" class="date-preset group">
                                                <span>Bulan Lalu</span>
                                                <i
                                                    class='bx bx-chevron-right opacity-0 group-hover:opacity-100 transition-opacity'></i>
                                            </button>
                                            <button onclick="applyDatePreset('max')"
                                                class="date-preset group font-black text-red-600">
                                                <span>Semua Waktu</span>
                                                <i class='bx bx-infinite text-lg opacity-40'></i>
                                            </button>
                                        </div>

                                        <!-- Custom Calendar -->
                                        <div class="col-span-8">
                                            <h5
                                                class="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-3 px-1">
                                                Custom Range</h5>
                                            <div
                                                class="flex justify-between items-center mb-4 p-3 bg-gray-50 rounded-xl border border-gray-100">
                                                <div class="text-center flex-1">
                                                    <div
                                                        class="text-[9px] uppercase text-gray-400 font-black tracking-tighter mb-0.5">
                                                        Mulai</div>
                                                    <div id="customStartDate"
                                                        class="text-[12px] font-black text-gray-700 tracking-tight">-</div>
                                                </div>
                                                <div
                                                    class="w-8 h-8 rounded-full bg-white shadow-sm flex items-center justify-center mx-2 border border-gray-100">
                                                    <i class="bx bx-right-arrow-alt text-red-500 text-lg"></i>
                                                </div>
                                                <div class="text-center flex-1">
                                                    <div
                                                        class="text-[9px] uppercase text-gray-400 font-black tracking-tighter mb-0.5">
                                                        Hingga</div>
                                                    <div id="customEndDate"
                                                        class="text-[12px] font-black text-gray-700 tracking-tight">-</div>
                                                </div>
                                            </div>
                                            <div id="customCalendar" class="premium-calendar"></div>
                                        </div>
                                    </div>

                                    <div class="mt-6 pt-4 border-t border-gray-100 flex justify-between items-center">
                                        <p class="text-[10px] text-gray-400 italic font-medium">* Klik dua kali pada tanggal
                                            untuk memilih rentang</p>
                                        <button onclick="clearDateFilter()"
                                            class="text-[11px] text-gray-400 hover:text-rose-500 font-black uppercase tracking-widest transition-all py-2 px-4 rounded-xl hover:bg-rose-50 flex items-center gap-2">
                                            <i class='bx bx-trash-alt text-lg'></i>
                                            Hapus Filter
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- CS Filter -->
                            <div class="cs-dropdown-container">
                                <button id="csDropdownBtn" class="filter-btn min-w-[140px]">
                                    <i class='bx bx-user-circle text-lg text-red-500'></i>
                                    <span id="csSelectedLabel" class="truncate max-w-[100px]">Semua CS</span>
                                    <i class='bx bx-chevron-down text-gray-400'></i>
                                </button>
                                <input type="hidden" id="filter-cs" value="">

                                <div id="csDropdownMenu" class="cs-dropdown-menu w-64">
                                    <div class="p-2 border-b border-gray-100 bg-gray-50">
                                        <input id="csSearchInput" type="text"
                                            class="w-full px-3 py-2 rounded-lg border border-gray-200 text-[12.5px] outline-none focus:ring-2 focus:ring-red-100"
                                            placeholder="Cari CS...">
                                    </div>
                                    <div id="csList" class="max-h-64 overflow-y-auto p-2 text-[13px] space-y-0.5">
                                        <div data-id="" data-name="Semua CS" class="cs-item active">
                                            <div class="flex items-center gap-2">
                                                <i class='bx bx-group text-lg opacity-70'></i>
                                                <span>Semua CS</span>
                                            </div>
                                            <i class='bx bx-check text-lg hidden active-check'></i>
                                        </div>
                                        @foreach ($customerServices as $cs)
                                            <div data-id="{{ $cs->id }}" data-name="{{ $cs->name }}"
                                                class="cs-item group">
                                                <div class="flex items-center gap-2">
                                                    <i
                                                        class='bx bx-user-circle text-lg opacity-50 group-hover:opacity-100'></i>
                                                    <span class="truncate">{{ $cs->name }}</span>
                                                </div>
                                                <i class='bx bx-check text-lg hidden active-check'></i>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>

                            <!-- Actor Filter -->
                            <div class="complex-dropdown-container">
                                <button id="complexActorDropdownBtn" class="filter-btn min-w-[140px]">
                                    <i class='bx bx-buildings text-lg text-red-500'></i>
                                    <span id="complexActorSelectedLabel" class="truncate max-w-[100px]">Semua
                                        Partner</span>
                                    <i class='bx bx-chevron-down text-gray-400'></i>
                                </button>
                                <input type="hidden" id="filter-actor-label" value="">
                                <input type="hidden" id="filter-actor-id" value="">

                                <div id="complexActorDropdownMenu" class="complex-dropdown-menu w-80">
                                    <div class="p-5">
                                        <div class="flex items-center gap-2 mb-4">
                                            <i class='bx bxs-category text-red-600 text-xl'></i>
                                            <h4 class="text-[11px] font-black text-gray-800 uppercase tracking-widest">
                                                Pilih Kategori Partner</h4>
                                        </div>

                                        <div class="flex gap-2 mb-6">
                                            <button data-category="mitra" class="category-btn group">
                                                <span class="flex items-center justify-center gap-2">
                                                    <i
                                                        class='bx bx-store-alt text-base opacity-40 group-hover:opacity-100'></i>
                                                    Mitra
                                                </span>
                                            </button>
                                            <button data-category="distributor" class="category-btn group">
                                                <span class="flex items-center justify-center gap-2">
                                                    <i
                                                        class='bx bx-buildings text-base opacity-40 group-hover:opacity-100'></i>
                                                    Distributor
                                                </span>
                                            </button>
                                        </div>

                                        <div id="previewSection" class="hidden">
                                            <div
                                                class="flex justify-between items-center mb-3 px-1 border-b border-gray-100 pb-2">
                                                <h4 class="text-[10px] font-black text-gray-400 uppercase tracking-widest"
                                                    id="previewTitle">Data</h4>
                                                <span
                                                    class="px-2 py-0.5 bg-red-50 text-red-600 text-[9px] font-black rounded-lg uppercase tracking-tight"
                                                    id="previewCount">Top 5 Aktif</span>
                                            </div>

                                            <div id="previewList" class="max-h-52 overflow-y-auto px-1 space-y-1"></div>

                                            <!-- Tombol Terapkan untuk Multiple Selection -->
                                            <div id="applyPreviewSection" class="mt-3 hidden">
                                                <button id="applyPreviewBtn"
                                                    class="w-full py-2.5 bg-green-600 text-[11px] text-white font-black uppercase tracking-widest rounded-xl hover:bg-green-700 transition-all duration-300 border border-green-600 flex items-center justify-center gap-2 shadow-lg">
                                                    <i class='bx bx-check-circle text-base'></i>
                                                    <span id="applyPreviewLabel">Terapkan Filter</span>
                                                </button>
                                            </div>

                                            <!-- Bug Fix #3: Tombol untuk filter semua actor dalam kategori -->
                                            <div id="filterAllCategorySection" class="mt-3 hidden">
                                                <button id="filterAllCategoryBtn"
                                                    class="w-full py-2.5 bg-red-50 text-[11px] text-red-600 font-black uppercase tracking-widest rounded-xl hover:bg-red-600 hover:text-white transition-all duration-300 border border-red-100 hover:border-red-600 flex items-center justify-center gap-2">
                                                    <i class='bx bx-filter text-base'></i>
                                                    <span id="filterAllCategoryLabel">Tampilkan Semua Mitra</span>
                                                </button>
                                            </div>

                                            <div id="viewAllSection" class="mt-2 hidden">
                                                <button id="viewAllBtn"
                                                    class="w-full py-2.5 bg-gray-50 text-[11px] text-gray-600 font-bold uppercase tracking-widest rounded-xl hover:bg-gray-100 transition-all duration-300 border border-gray-100 flex items-center justify-center gap-2">
                                                    <i class='bx bx-list-ul text-base'></i>
                                                    Pilih Actor Spesifik
                                                </button>
                                            </div>

                                            <!-- Bug Fix #5: Reset button akan di-handle sepenuhnya via JS -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Right Side: Action Buttons -->
                        <div class="flex items-center gap-2">
                            <button id="inputEverproBtn"
                                class="bg-red-600 hover:bg-red-700 text-white px-5 py-2 rounded-xl text-[13.5px] font-bold shadow-sm transition-all flex items-center gap-2 active:scale-95">
                                <i class='bx bx-plus-circle text-lg'></i>
                                Input Everpro
                            </button>
                            <button id="payEverproBtn"
                                class="bg-red-600 hover:bg-red-700 text-white px-5 py-2 rounded-xl text-[13.5px] font-bold shadow-sm transition-all flex items-center gap-2 active:scale-95">
                                <i class='bx bx-wallet text-lg'></i>
                                Bayar Everpro
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Tabs & Selection Info -->
                <div class="bg-white px-6">
                    <div class="flex flex-wrap items-center justify-between border-b border-gray-100">
                        <ul class="nav nav-tabs border-0" id="paymentTab" role="tablist">
                            <li class="nav-item">
                                <button class="nav-link active" data-method="" type="button">Semua <span
                                        id="ordersCountInfo"></span></button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link" data-method="COD" type="button">COD <span
                                        id="codCountInfo"></span></button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link" data-method="TRANSFER" type="button">Transfer <span
                                        id="transferCountInfo"></span></button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link" data-method="HISTORY" type="button">History <span
                                        id="historyCountInfo"></span></button>
                            </li>
                        </ul>

                        <div id="ordersMeta" class="mt-0 py-2 border-0 shadow-none !my-0">
                            <span id="selectionInfo"
                                class="text-[13px] font-bold text-red-600 px-3 py-1 bg-red-50 rounded-full">
                                0 terpilih
                            </span>
                        </div>
                    </div>
                </div>


                <div class="dt-layout-table">
                    <div class="table-responsive">
                        <table class="datatables-order table m-0 w-full" id="ordersTable">
                            <thead>
                                <tr>
                                    <th width="40"><input class="form-check-input" type="checkbox"></th>
                                    <th>Pesanan</th>
                                    <th>Customer Service</th>
                                    <th>Customer</th>
                                    <th>Notes</th>
                                    <th>Total & Status</th>
                                    <th>Warehouse</th>
                                    <th>Bukti Transfer</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody id="ordersBody" class="text-[13.5px]">
                                <tr>
                                    <td colspan="9" class="text-center py-20">
                                        <div class="flex flex-col items-center">
                                            <div
                                                class="h-10 w-10 animate-spin rounded-full border-4 border-gray-100 border-t-red-600 mb-2">
                                            </div>
                                            <span class="text-gray-400 font-medium tracking-tight">Memuat data
                                                pesanan...</span>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="px-6 py-4 bg-gray-50 border-t border-gray-100 flex justify-between items-center rounded-b-xl">
                    <div id="paginationInfo" class="text-[12.5px] text-gray-500 font-medium"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal untuk Complex Actor Filter -->
    <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>
    <!-- Loading Modal -->
    <div class="modal fade" id="batchProcessLoadingModal" tabindex="-1" data-bs-backdrop="static" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-sm">
            <div class="modal-content border-0 rounded-2xl shadow-2xl overflow-hidden">
                <div class="modal-body text-center p-8">
                    <div class="relative w-20 h-20 mx-auto mb-6">
                        <div class="absolute inset-0 rounded-full border-4 border-gray-100"></div>
                        <div
                            class="absolute inset-0 rounded-full border-4 border-red-600 border-t-transparent animate-spin">
                        </div>
                        <div class="absolute inset-0 flex items-center justify-center">
                            <i class='bx bx-loader-alt text-3xl text-red-600 animate-pulse'></i>
                        </div>
                    </div>
                    <h5 class="text-[17px] font-bold text-gray-800 mb-2" id="loadingTitle">Memproses...</h5>
                    <p class="text-[13.5px] text-gray-500 leading-relaxed mb-0" id="loadingText">Mohon tunggu sebentar,
                        sistem sedang bekerja untuk Anda.</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Result Modal -->
    <div class="modal fade" id="batchProcessResultModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 rounded-2xl shadow-2xl overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-100 flex justify-between items-center bg-gray-50/50">
                    <h5 class="text-[15px] font-bold text-gray-800 m-0" id="resultModalTitle">Hasil Proses</h5>
                    <button type="button" class="text-gray-400 hover:text-gray-800 transition-colors"
                        data-bs-dismiss="modal"><i class='bx bx-x text-2xl'></i></button>
                </div>
                <div class="modal-body p-0" id="resultModalBody">
                    <!-- Dynamic Content -->
                </div>
                <div class="px-6 py-4 border-t border-gray-100 flex justify-end bg-gray-50/30">
                    <button type="button"
                        class="bg-red-600 hover:bg-red-700 text-white px-6 py-2.5 rounded-xl text-[14px] font-bold transition-all"
                        data-bs-dismiss="modal">Selesai</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Confirmation Modal -->
    <div class="modal fade" id="confirmModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-sm">
            <div class="modal-content border-0 rounded-2xl shadow-2xl overflow-hidden">
                <div class="p-8 text-center">
                    <div
                        class="w-16 h-16 bg-red-50 text-red-600 rounded-full flex items-center justify-center mx-auto mb-6">
                        <i class='bx bx-help-circle text-4xl'></i>
                    </div>
                    <h5 class="text-[18px] font-bold text-gray-800 mb-3" id="confirmTitle">Konfirmasi</h5>
                    <p id="confirmText" class="text-[14px] text-gray-500 leading-relaxed mb-8"></p>
                    <div class="flex flex-col gap-2">
                        <button type="button"
                            class="w-full py-3 bg-red-600 hover:bg-red-700 text-white font-bold rounded-xl text-[14px] transition-all shadow-lg active:scale-95"
                            id="confirmActionBtn">Lanjutkan</button>
                        <button type="button"
                            class="w-full py-3 bg-white text-gray-500 font-bold rounded-xl text-[14px] hover:bg-gray-50 transition-all font-semibold"
                            data-bs-dismiss="modal">Batal</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Rejection Modal -->
    <div class="modal fade" id="rejectModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 rounded-2xl shadow-2xl overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-100 flex justify-between items-center bg-rose-50/50">
                    <h5 class="text-[15px] font-bold text-rose-900 m-0">Tolak Pesanan</h5>
                    <button type="button" class="text-rose-400 hover:text-rose-600" data-bs-dismiss="modal"><i
                            class='bx bx-x text-2xl'></i></button>
                </div>
                <div class="p-6">
                    <div class="mb-5">
                        <label class="block text-[13px] font-bold text-gray-700 mb-2 uppercase tracking-tight">Alasan
                            Penolakan</label>
                        <textarea id="rejectionReason"
                            class="w-full px-4 py-3 rounded-xl border border-gray-200 text-[14px] focus:ring-2 focus:ring-rose-100 focus:border-rose-400 outline-none transition-all placeholder:text-gray-300"
                            rows="4" placeholder="Tuliskan alasan kenapa order ini ditolak..."></textarea>
                        <div class="hidden text-[11px] text-rose-500 font-bold mt-2 flex items-center gap-1"
                            id="rejectionFeedback">
                            <i class='bx bx-error-circle'></i> Mohon isi alasan penolakan!
                        </div>
                    </div>
                    <div class="flex flex-col gap-2">
                        <button type="button"
                            class="w-full py-3 bg-rose-600 hover:bg-rose-700 text-white font-bold rounded-xl text-[14px] transition-all shadow-lg shadow-rose-100 active:scale-95"
                            id="confirmRejectBtn">Ya, Tolak Sekarang!</button>
                        <button type="button"
                            class="w-full py-3 bg-white text-gray-500 font-bold rounded-xl text-[14px] hover:bg-gray-50 transition-all font-semibold"
                            data-bs-dismiss="modal">Batalkan</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <!-- Meta-style Toast Container -->
    <div id="toast-container" class="fixed top-5 right-5 z-[9999] flex flex-col gap-2 pointer-events-none"></div>

    <!-- Global Base URL for AJAX requests -->
    <script>
        // Fix: Set base URL untuk semua AJAX request
        const BASE_URL = '{{ url('/') }}';
        
        // Configure axios base URL
        axios.defaults.baseURL = BASE_URL;
    </script>

    <script>
        // --- UX HELPER: TOAST ---
        function showToast(title, message, type = 'primary') {
            const container = document.getElementById('toast-container');
            const id = 'toast-' + Math.random().toString(36).substr(2, 9);

            const colorMap = {
                primary: {
                    bg: 'bg-red-600',
                    border: 'border-red-700',
                    icon: 'bx-info-circle'
                },
                green: {
                    bg: 'bg-emerald-600',
                    border: 'border-emerald-700',
                    icon: 'bx-check-circle'
                },
                red: {
                    bg: 'bg-rose-600',
                    border: 'border-rose-700',
                    icon: 'bx-error-circle'
                },
                orange: {
                    bg: 'bg-orange-500',
                    border: 'border-orange-600',
                    icon: 'bx-info-circle'
                }
            };

            const theme = colorMap[type] || colorMap.primary;

            const toast = document.createElement('div');
            toast.id = id;
            toast.className =
                `flex items-center gap-3 py-3 px-4 rounded-xl shadow-2xl text-white pointer-events-auto border-l-4 ${theme.bg} ${theme.border} transform translate-x-full transition-all duration-300 ease-out`;
            toast.innerHTML = `
                <div class="text-xl opacity-90"><i class='bx ${theme.icon}'></i></div>
                <div class="flex-1">
                    <div class="text-[12px] font-bold uppercase tracking-widest opacity-70">${title}</div>
                    <div class="text-[13.5px] font-medium leading-tight">${message}</div>
                </div>
                <button onclick="this.parentElement.remove()" class="opacity-50 hover:opacity-100 transition-opacity"><i class='bx bx-x text-lg'></i></button>
            `;

            container.appendChild(toast);

            // Animate In
            requestAnimationFrame(() => {
                toast.classList.remove('translate-x-full');
            });

            // Auto Remove
            setTimeout(() => {
                toast.classList.add('translate-x-full');
                setTimeout(() => toast.remove(), 300);
            }, 5000);
        }

        let selectedMethod = '';
        let lastMetaData = {
            all: 0,
            cod: 0,
            transfer: 0
        };

        // Global Modal Instances
        let batchLoadingModal = null;
        let batchResultModal = null;
        let batchConfirmModal = null;

        function showLoading(title, text) {
            const titleEl = document.getElementById('loadingTitle');
            const textEl = document.getElementById('loadingText');
            if (titleEl) titleEl.innerText = title;
            if (textEl) textEl.innerText = text;

            if (!batchLoadingModal) {
                batchLoadingModal = new bootstrap.Modal(document.getElementById('batchProcessLoadingModal'));
            }
            batchLoadingModal.show();
        }

        function updateLoadingText(text) {
            const el = document.getElementById('loadingText');
            if (el) el.innerText = text;
        }

        function hideLoading() {
            if (batchLoadingModal) {
                try {
                    batchLoadingModal.hide();
                } catch (e) {}
            }
            const modalEl = document.getElementById('batchProcessLoadingModal');
            if (modalEl) {
                modalEl.classList.remove('show');
                modalEl.style.display = 'none';
                modalEl.setAttribute('aria-hidden', 'true');
            }
            document.querySelectorAll('.modal-backdrop').forEach(el => el.remove());
            document.body.classList.remove('modal-open');
            document.body.style.overflow = '';
            document.body.style.paddingRight = '';
        }

        const sleep = ms => new Promise(res => setTimeout(res, ms));

        function updateHeaderCounts(meta) {
            document.getElementById("ordersCountInfo").textContent = `(${meta.all})`;
            document.getElementById("codCountInfo").textContent = `(${meta.cod})`;
            document.getElementById("transferCountInfo").textContent = `(${meta.transfer})`;

            if (meta.history !== undefined) {
                document.getElementById("historyCountInfo").textContent = `(${meta.history})`;
            }
        }

        function updateSelectionInfo(meta = null) {
            if (meta) {
                lastMetaData = meta;
            }

            if (selectedMethod === 'HISTORY') {
                document.getElementById("selectionInfo").textContent = '';
                return;
            }

            const checked = document.querySelectorAll('.rowCheckbox:checked').length;
            document.getElementById("selectionInfo").textContent = `${checked} dipilih`;

            const metaContainer = document.getElementById("ordersMeta");
            if (checked > 0) {
                metaContainer.classList.add('selection-active');
            } else {
                metaContainer.classList.remove('selection-active');
            }
        }

        function renderTable(orders) {
            const tbody = document.getElementById("ordersBody");
            const thead = document.querySelector("#ordersTable thead tr");
            tbody.innerHTML = '';

            const isHistoryTab = (selectedMethod === 'HISTORY');
            const showBuktiTransfer = (selectedMethod !== 'COD');

            let headers = `<th><input type="checkbox" class="form-check-input" id="selectAllCheckbox"></th>`;
            if (isHistoryTab) headers = ""; // No checkbox in history

            headers += `
                <th>Pesanan</th>
                <th>Channel / CS</th>
                <th>Penerima</th>
                <th>Notes</th>
                <th>Total & Status</th>
                <th>Warehouse</th>
            `;

            if (isHistoryTab) {
                headers += `<th>Review Status</th>`;
                headers += `<th>Bukti</th>`;
                headers += `<th>Actions</th>`;
            } else {
                if (showBuktiTransfer) headers += `<th>Bukti</th>`;
                headers += `<th width="150">Aksi</th>`;
            }

            thead.innerHTML = headers;

            if (orders.length === 0) {
                const colSpan = 10;
                tbody.innerHTML = `<tr><td colspan="${colSpan}" class="text-center py-32">
                    <div class="flex flex-col items-center opacity-40">
                        <i class='bx bx-file-blank text-7xl mb-4'></i>
                        <div class="text-[15px] font-bold">Tidak ada data ditemukan</div>
                        <div class="text-[13px]">Coba sesuaikan filter pencarian Anda</div>
                    </div>
                </td></tr>`;
                return;
            }

            orders.forEach(order => {
                const modalId = `modalBuktiTransfer-${order.id}`;
                const imageUrl = order.transfer_proof || null;
                const isCod = order.payment_method.toUpperCase() === 'COD';
                const isApproved = order.transfer_status_acc === true;

                let payBadge = isCod ?
                    '<span class="px-2.5 py-1 rounded-lg bg-emerald-50 text-emerald-600 text-[10px] font-black border border-emerald-100 uppercase tracking-wider">COD</span>' :
                    '<span class="px-2.5 py-1 rounded-lg bg-red-50 text-red-600 text-[10px] font-black border border-red-100 uppercase tracking-wider">TRANSFER</span>';

                let statusBadge = '';
                if (order.status === 'rejected') {
                    statusBadge = '<span class="status-badge status-rejected">Rejected</span>';
                } else if (order.status === 'approved') {
                    statusBadge = '<span class="status-badge status-approved">Approved</span>';
                } else {
                    statusBadge = '<span class="status-badge status-pending">Pending</span>';
                }

                const approveButton = (!isHistoryTab && !isCod && !isApproved) ?
                    `<button class="w-full py-3 bg-emerald-600 text-white font-bold rounded-xl text-[13px] hover:bg-emerald-700 transition shadow-lg shadow-emerald-100" onclick="approveTransferOrder(${order.id})">Setujui Pembayaran</button>` :
                    '';

                let buktiTransferButton = `<span class="text-gray-300 font-bold">-</span>`;
                if (imageUrl) {
                    const btnClass = isApproved || order.is_input ?
                        'text-emerald-500 bg-emerald-50 hover:bg-emerald-100 border-emerald-200' :
                        'text-orange-500 bg-orange-50 hover:bg-orange-100 border-orange-200';
                    buktiTransferButton =
                        `<button class="px-3 py-1.5 rounded-xl text-[10px] font-black transition-all border ${btnClass}" data-bs-toggle="modal" data-bs-target="#${modalId}">VIEW PROOF</button>`;
                } else if (!isCod) {
                    buktiTransferButton =
                        `<span class="px-3 py-1.5 rounded-xl bg-gray-50 text-gray-400 text-[10px] font-black border border-gray-100">MISSING</span>`;
                }

                const modal = (imageUrl) ? `
                    <div class="modal fade" id="${modalId}" tabindex="-1" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered modal-sm">
                            <div class="modal-content border-0 rounded-3xl shadow-2xl overflow-hidden">
                                <div class="px-6 py-4 border-b border-gray-100 flex justify-between items-center bg-white">
                                    <h5 class="text-[14px] font-black text-gray-800 m-0 uppercase tracking-tight">Proof #${order.order_code}</h5>
                                    <button type="button" class="text-gray-400 hover:text-gray-800 transition-colors" data-bs-dismiss="modal"><i class='bx bx-x text-2xl'></i></button>
                                </div>
                                <div class="p-6">
                                    <div class="relative group mb-4">
                                        <img src="${imageUrl}" class="w-full rounded-2xl shadow-inner border border-gray-100 cursor-zoom-in transition-transform duration-500 group-hover:scale-[1.02]" onclick="window.open(this.src)">
                                        <div class="absolute inset-0 bg-black/5 rounded-2xl pointer-events-none"></div>
                                    </div>
                                    <div class="flex flex-col gap-2">
                                        <a href="${imageUrl}" target="_blank" class="w-full h-12 flex items-center justify-center bg-gray-50 text-gray-700 font-black rounded-xl text-[13px] hover:bg-gray-100 transition uppercase tracking-tight">Full View</a>
                                        ${approveButton}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>` : '';

                let historyColumns = '';
                if (isHistoryTab) {
                    if (order.status === 'rejected') {
                        historyColumns += `<td>
                            <div class="text-[11px] font-black text-rose-600 mb-1 tracking-tighter uppercase">REASON REJECTED</div>
                            <div class="text-[12px] text-gray-500 font-medium leading-relaxed italic border-l-2 border-rose-100 pl-2">"${order.rejection_reason}"</div>
                        </td>`;
                    } else {
                        historyColumns +=
                            `<td><span class="text-emerald-500 font-black text-[11px] uppercase tracking-widest bg-emerald-50 px-2 py-1 rounded">PROCESSED</span></td>`;
                    }
                }

                let actions = `
                    <div class="flex items-center gap-2">
                        <a href="${BASE_URL}/draft-orders/detail/${order.id}" class="h-10 w-10 flex items-center justify-center bg-white border border-gray-100 text-gray-400 rounded-xl hover:bg-red-600 hover:text-white hover:border-red-600 transition-all shadow-sm" title="View Detail"><i class='bx bx-show text-[20px]'></i></a>
                        ${!isHistoryTab ? `<button class="h-10 w-10 flex items-center justify-center bg-white border border-gray-100 text-gray-400 rounded-xl hover:bg-rose-600 hover:text-white hover:border-rose-600 transition-all shadow-sm" onclick="rejectOrder(${order.id})" title="Cancel Order"><i class='bx bx-trash text-[20px]'></i></button>` : ''}
                    </div>
                `;

                let row = `<tr class="group">`;

                if (!isHistoryTab) {
                    const canSelect = (isCod || isApproved);
                    row +=
                        `<td><input type="checkbox" class="form-check-input rowCheckbox" value="${order.id}" data-code="${order.order_code}" ${!canSelect ? 'disabled' : ''}></td>`;
                }

                row += `
                    <td>
                        <div class="font-black text-gray-900 tracking-tight text-[14px]">#${order.order_code}</div>
                        <div class="text-[11px] text-gray-400 font-bold uppercase tracking-widest mt-0.5">${order.created_at}</div>
                    </td>
                    <td>
                        <div class="text-[13px] font-bold text-gray-700">${order.customer_service?.name ?? '-'}</div>
                        <div class="inline-flex items-center gap-1 mt-1">
                            <span class="w-1.5 h-1.5 rounded-full bg-red-400"></span>
                            <span class="text-[10px] font-black text-red-500 uppercase tracking-widest">${order.order_source || 'DEFAULT'}</span>
                        </div>
                    </td>
                    <td>
                        <div class="font-black text-gray-800 text-[13px]">${order.receiver_name}</div>
                        <div class="text-[11px] text-gray-400 font-medium truncate max-w-[200px] mt-0.5"><i class="bx bx-map-pin text-[10px]"></i> ${order.receiver_address}</div>
                    </td>
                    <td><div class="text-[11px] text-gray-400 font-medium italic max-w-[120px] truncate">${order.notes ? order.notes : '-'}</div></td>
                    <td>
                        <div class="font-black text-gray-900 text-[14px]">Rp ${order.original_total}</div>
                        <div class="flex items-center gap-2 mt-2">
                            ${payBadge}
                            ${statusBadge}
                        </div>
                    </td>
                    <td>
                        <div class="inline-flex items-center gap-2 px-3 py-1.5 bg-gray-50 rounded-xl border border-gray-100">
                            <i class='bx bx-store-alt text-gray-400'></i>
                            <span class="text-[11px] font-black text-gray-600 uppercase tracking-tight">${order.warehouse?.name?.replace(/Gudang/i, '').trim() ?? 'N/A'}</span>
                        </div>
                    </td>
                `;

                if (isHistoryTab) {
                    row += historyColumns;
                    row += `<td>${buktiTransferButton}</td>`;
                } else if (showBuktiTransfer) {
                    row += `<td>${buktiTransferButton}</td>`;
                }

                row += `<td>${actions}</td></tr>`;

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

            setTimeout(() => {
                if (!isHistoryTab) {
                    document.querySelectorAll('.rowCheckbox').forEach(cb => {
                        cb.addEventListener('change', () => updateSelectionInfo());
                    });
                    const selectAll = document.getElementById("selectAllCheckbox");
                    if (selectAll) selectAll.addEventListener("change", handleSelectAll);
                }

                const inputBtn = document.getElementById('inputEverproBtn');
                const payBtn = document.getElementById('payEverproBtn');
                if (inputBtn) inputBtn.style.display = isHistoryTab ? 'none' : 'flex';
                if (payBtn) payBtn.style.display = isHistoryTab ? 'none' : 'flex';

                // Refresh Tooltips if any
                const tooltips = document.querySelectorAll('[title]');
                tooltips.forEach(t => {
                    /* Optional: init bootstrap tooltips */
                });
            }, 50);
        }

        function approveTransferOrder(orderId) {
            const modalEl = document.getElementById(`modalBuktiTransfer-${orderId}`);
            const modalInstance = bootstrap.Modal.getInstance(modalEl);
            if (modalInstance) modalInstance.hide();

            document.getElementById('confirmTitle').innerText = 'Setujui Pembayaran?';
            document.getElementById('confirmText').innerText =
                'Apakah Anda yakin ingin menyetujui bukti transfer ini? Order akan dapat diproses ke Everpro.';

            const actionBtn = document.getElementById('confirmActionBtn');
            actionBtn.className = 'btn bg-emerald-600 hover:bg-emerald-700 text-white font-bold px-6';
            actionBtn.innerText = 'Ya, Setujui!';

            actionBtn.onclick = () => {
                batchConfirmModal.hide();
                showLoading('Memproses...', 'Sedang memverifikasi bukti transfer.');

                axios.post(`/draft-orders/approved-transfer/${orderId}`)
                    .then(response => {
                        hideLoading();
                        showToast('Berhasil', 'Bukti transfer disetujui.', 'green');
                        fetchOrdersFromAPI();
                    })
                    .catch(error => {
                        hideLoading();
                        showToast('Gagal', error.response?.data?.message || 'Gagal menyetujui.', 'red');
                        if (modalInstance) modalInstance.show();
                    });
            };

            batchConfirmModal.show();
        }

        function handleSelectAll(e) {
            const checked = e.target.checked;
            const eligibleCheckboxes = document.querySelectorAll('.rowCheckbox:not(:disabled)');
            eligibleCheckboxes.forEach(cb => cb.checked = checked);
            updateSelectionInfo();
        }


        function fetchOrdersFromAPI() {
            const searchValue = document.getElementById('orderSearch').value;
            const csFilter = document.getElementById('filter-cs').value;
            const actorLabel = document.getElementById('filter-actor-label').value;
            const actorId = document.getElementById('filter-actor-id').value;
            const startDate = window.dateFilterState?.startDate || null;
            const endDate = window.dateFilterState?.endDate || null;

            axios.get('/draft-orders/data', {
                params: {
                    search: searchValue,
                    method: selectedMethod,
                    start_date: startDate,
                    end_date: endDate,
                    customer_service_id: csFilter,
                    actor_label: actorLabel,
                    actor_id: actorId
                }
            }).then(response => {
                renderTable(response.data.orders);
                if (response.data.meta) updateHeaderCounts(response.data.meta);
                updateSelectionInfo(response.data.meta);
            }).catch(error => {
                console.error('API Error:', error);
                showToast('API Error', 'Gagal mengambil data dari server.', 'red');
            });
        }

        function rejectOrder(orderId) {
            const reasonInput = document.getElementById('rejectionReason');
            const feedback = document.getElementById('rejectionFeedback');
            const confirmBtn = document.getElementById('confirmRejectBtn');
            const rejectModalEl = document.getElementById('rejectModal');
            const rejectModalInstance = bootstrap.Modal.getOrCreateInstance(rejectModalEl);

            reasonInput.value = '';
            reasonInput.classList.remove('is-invalid');
            feedback.classList.add('hidden');

            confirmBtn.onclick = () => {
                const reason = reasonInput.value.trim();

                if (!reason) {
                    reasonInput.classList.add('is-invalid');
                    feedback.classList.remove('hidden');
                    return;
                }

                rejectModalInstance.hide();
                showLoading('Menolak Order', 'Sedang memproses pembatalan pesanan...');

                axios.post(`/draft-orders/${orderId}/reject`, {
                        reason: reason
                    })
                    .then(() => {
                        hideLoading();
                        showToast('Ditolak', 'Pesanan telah berhasil ditolak.', 'orange');
                        fetchOrdersFromAPI();
                    })
                    .catch((error) => {
                        hideLoading();
                        showToast('Gagal', error.response?.data?.message || 'Error pembatalan.', 'red');
                    });
            };

            rejectModalInstance.show();
        }

        document.addEventListener('DOMContentLoaded', () => {
            fetchOrdersFromAPI();

            document.querySelectorAll('#paymentTab .nav-link').forEach(tab => {
                tab.addEventListener('click', function() {
                    document.querySelectorAll('#paymentTab .nav-link').forEach(t => t.classList
                        .remove('active'));
                    this.classList.add('active');
                    selectedMethod = this.getAttribute('data-method');
                    fetchOrdersFromAPI();
                });
            });

            // Initialize modals
            batchLoadingModal = new bootstrap.Modal(document.getElementById('batchProcessLoadingModal'));
            batchResultModal = new bootstrap.Modal(document.getElementById('batchProcessResultModal'));
            batchConfirmModal = new bootstrap.Modal(document.getElementById('confirmModal'));

            // --- INPUT EVERPRO HANDLER ---
            document.getElementById('inputEverproBtn').addEventListener('click', async function() {
                const selectedIds = Array.from(document.querySelectorAll('.rowCheckbox:checked')).map(
                    cb => ({
                        id: cb.value,
                        code: cb.closest('tr').querySelector('.font-black').innerText.replace(
                            '#', '')
                    })
                );

                if (selectedIds.length === 0) {
                    showToast('Pilih Order', 'Pilih minimal 1 pesanan untuk diproses.', 'primary');
                    return;
                }

                showLoading('Input Order Everpro', `Menyiapkan ${selectedIds.length} data pesanan...`);

                let success = [];
                let failed = [];

                try {
                    for (let i = 0; i < selectedIds.length; i++) {
                        const item = selectedIds[i];
                        updateLoadingText(
                            `Memproses [${i + 1}/${selectedIds.length}]: ${item.code}...`);

                        try {
                            const response = await axios.post('/draft-orders/store/everpro', {
                                order_id: item.id
                            }, {
                                timeout: 30000
                            });
                            if (response.data.status === 'success') {
                                success.push(item.code);
                            } else {
                                failed.push({
                                    code: item.code,
                                    msg: response.data.message
                                });
                            }
                        } catch (err) {
                            const errData = err.response?.data;
                            let msg = errData?.message || err.message || 'Error Sistem';
                            failed.push({
                                code: item.code,
                                msg: msg
                            });
                        }
                        if (selectedIds.length > 1) await sleep(300);
                    }
                } finally {
                    hideLoading();
                }

                await sleep(400);

                let html = `
                    <div class="px-6 py-4">
                        <div class="flex items-center justify-between p-4 bg-emerald-50 border border-emerald-100 rounded-xl mb-4">
                            <div class="flex items-center gap-3">
                                <i class='bx bx-check-circle text-2xl text-emerald-600'></i>
                                <div>
                                    <div class="text-[14px] font-bold text-emerald-900">Input Berhasil</div>
                                    <div class="text-[12px] text-emerald-700 font-medium">${success.length} pesanan diproses sukses</div>
                                </div>
                            </div>
                        </div>
                `;

                if (failed.length > 0) {
                    html += `
                        <div class="p-4 bg-rose-50 border border-rose-100 rounded-xl mb-4">
                            <div class="flex items-center gap-3 mb-3">
                                <i class='bx bx-x-circle text-2xl text-rose-600'></i>
                                <div class="text-[14px] font-bold text-rose-900">Gagal Diproses (${failed.length})</div>
                            </div>
                            <div class="max-h-[250px] overflow-y-auto border border-rose-100 bg-white rounded-lg">
                                <table class="table table-sm text-[12px] m-0">
                                    <thead class="bg-gray-50 uppercase text-[10px] font-bold text-gray-500">
                                        <tr><th class="ps-3">Code</th><th class="pe-3">Error</th></tr>
                                    </thead>
                                    <tbody>
                                        ${failed.map(f => `<tr><td class="ps-3 font-bold">${f.code}</td><td class="pe-3 text-rose-600">${f.msg}</td></tr>`).join('')}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    `;
                }

                document.getElementById('resultModalTitle').innerText = 'Hasil Input Everpro';
                document.getElementById('resultModalBody').innerHTML = html;
                batchResultModal.show();

                fetchOrdersFromAPI();
            });

            // --- PAY EVERPRO HANDLER ---
            document.getElementById('payEverproBtn').addEventListener('click', async function() {
                const checkboxes = Array.from(document.querySelectorAll('.rowCheckbox:checked'));
                const selectedItems = checkboxes.map(cb => ({
                    id: cb.value,
                    code: cb.closest('tr').querySelector('.font-black').innerText.replace(
                        '#', '')
                }));

                if (selectedItems.length === 0) {
                    showToast('Pilih Order', 'Pilih pesanan yang ingin dibayar.', 'primary');
                    return;
                }

                document.getElementById('confirmTitle').innerText = 'Bayar via Wallet?';
                document.getElementById('confirmText').innerText =
                    `Konfirmasi pembayaran saldo wallet Everpro untuk ${selectedItems.length} pesanan.`;

                const actionBtn = document.getElementById('confirmActionBtn');
                actionBtn.className = 'btn bg-red-600 hover:bg-red-700 text-white font-bold px-6';
                actionBtn.innerText = 'Ya, Bayar Sekarang';

                actionBtn.onclick = async () => {
                    batchConfirmModal.hide();
                    showLoading('Pembayaran Wallet', `Menghubungkan ke Everpro...`);

                    let success = [];
                    let failed = [];

                    try {
                        for (let i = 0; i < selectedItems.length; i++) {
                            const item = selectedItems[i];
                            updateLoadingText(
                                `Membayar [${i + 1}/${selectedItems.length}]: ${item.code}...`
                            );

                            try {
                                const response = await axios.post('/draft-orders/pay/everpro', {
                                    order_id: item.id
                                });
                                if (response.data.status === 'success') {
                                    success.push(item.code);
                                } else {
                                    failed.push({
                                        code: item.code,
                                        msg: response.data.message
                                    });
                                }
                            } catch (err) {
                                let msg = err.response?.data?.message || 'Error Sistem';
                                failed.push({
                                    code: item.code,
                                    msg: msg
                                });
                            }
                            if (selectedItems.length > 1) await sleep(500);
                        }
                    } finally {
                        hideLoading();
                    }

                    await sleep(400);

                    let html = `
                        <div class="px-6 py-4">
                            <div class="flex items-center justify-between p-4 bg-emerald-50 border border-emerald-100 rounded-xl mb-4">
                                <div class="flex items-center gap-3">
                                    <i class='bx bx-wallet text-2xl text-emerald-600'></i>
                                    <div>
                                        <div class="text-[14px] font-bold text-emerald-900">Pembayaran Sukses</div>
                                        <div class="text-[12px] text-emerald-700 font-medium">${success.length} pesanan berhasil dibayar</div>
                                    </div>
                                </div>
                            </div>
                    `;

                    if (failed.length > 0) {
                        html += `
                            <div class="p-4 bg-rose-50 border border-rose-100 rounded-xl mb-4">
                                <div class="flex items-center gap-3 mb-3">
                                    <i class='bx bx-error text-2xl text-rose-600'></i>
                                    <div class="text-[14px] font-bold text-rose-900">Pembayaran Gagal (${failed.length})</div>
                                </div>
                                <div class="max-h-[250px] overflow-y-auto border border-rose-100 bg-white rounded-lg">
                                    <table class="table table-sm text-[12px] m-0">
                                        <thead class="bg-gray-50 uppercase text-[10px] font-bold text-gray-500">
                                            <tr><th class="ps-3">Code</th><th class="pe-3">Masalah</th></tr>
                                        </thead>
                                        <tbody>
                                            ${failed.map(f => `<tr><td class="ps-3 font-bold">${f.code}</td><td class="pe-3 text-rose-600">${f.msg}</td></tr>`).join('')}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        `;
                    }
                    html += `</div>`;

                    document.getElementById('resultModalTitle').innerText =
                        'Laporan Pembayaran Wallet';
                    document.getElementById('resultModalBody').innerHTML = html;
                    batchResultModal.show();
                    fetchOrdersFromAPI();
                };
                batchConfirmModal.show();
            });
        });

        // Debounce Search
        let searchTimeout;
        document.getElementById('orderSearch').addEventListener('input', () => {
            clearTimeout(searchTimeout);
            searchTimeout = setTimeout(fetchOrdersFromAPI, 400);
        });
    </script>

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

            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");
            
            // Bug Fix #3: Referensi untuk tombol filter semua kategori
            const filterAllCategorySection = document.getElementById("filterAllCategorySection");
            const filterAllCategoryBtn = document.getElementById("filterAllCategoryBtn");
            const filterAllCategoryLabel = document.getElementById("filterAllCategoryLabel");

            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 = [];
            // Multiple selection: ubah dari single object ke array
            let selectedActors = [];

            // ==== OPEN DROPDOWN ====
            // Bug Fix: Jangan reset filter values saat menutup dropdown
            // Hanya reset UI state (active buttons, preview visibility)
            complexBtn.addEventListener("click", (e) => {
                e.stopPropagation();
                complexMenu.classList.toggle("show");

                if (!complexMenu.classList.contains("show")) {
                    // Hanya reset tampilan UI, BUKAN filter values
                    resetDropdownUIOnly();
                }
            });

            // ========== GLOBAL CLICK FIX (PENTING) ==========
            document.addEventListener("click", (e) => {
                const dropdownContainer = document.querySelector('.complex-dropdown-container');

                if (complexBtn.contains(e.target)) return;
                if (complexMenu.contains(e.target)) return;
                if (viewAllSection.contains(e.target)) return;
                if (viewAllBtn.contains(e.target)) return;
                if (fullDataModal.contains(e.target)) return;
                // Bug Fix: Tambahkan exception untuk tombol filter semua kategori
                if (filterAllCategorySection && filterAllCategorySection.contains(e.target)) return;
                if (filterAllCategoryBtn && filterAllCategoryBtn.contains(e.target)) return;
                complexMenu.classList.remove("show");
            });

            // ==== 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-600"></div>
                            <span class="ml-2 text-[12px] text-gray-500">Memuat data...</span>
                        </div>
                    `;

                    previewSection.classList.remove("hidden");

                    const res = await axios.get("/draft-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");
                        filterAllCategorySection.classList.add("hidden");
                        return;
                    }

                    renderPreviewList(currentPreviewData);
                    previewTitle.textContent = `Preview ${getCategoryLabel(category)}`;
                    
                    // Bug Fix #3: Tampilkan tombol filter semua kategori
                    filterAllCategoryLabel.textContent = `Tampilkan Semua ${getCategoryLabel(category)}`;
                    filterAllCategorySection.classList.remove("hidden");
                    viewAllSection.classList.remove("hidden");

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

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

                data.forEach(actor => {
                    const isSelected = selectedActors.some(a => a.id === actor.id);
                    const item = document.createElement("div");
                    item.className = `preview-item group ${isSelected ? 'selected bg-red-50 border-red-300' : ''}`;
                    item.dataset.actorId = actor.id;
                    item.innerHTML = `
                        <div class="flex items-center gap-3">
                            <div class="checkbox-preview flex-shrink-0 w-5 h-5 rounded border-2 flex items-center justify-center transition-all ${
                                isSelected ? 'bg-red-600 border-red-600' : 'border-gray-300 group-hover:border-red-400'
                            }">
                                <i class='bx bx-check text-white text-sm ${isSelected ? '' : 'hidden'}'></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-center gap-2">
                                    <span class="font-medium text-[13px]">${actor.name}</span>
                                    <span class="px-1.5 py-0.5 bg-blue-50 text-blue-600 text-[9px] font-bold rounded-full">${actor.orders_count || 0} order</span>
                                </div>
                                <div class="text-[11px] text-gray-500">${actor.code} • ${actor.phone_number || '-'}</div>
                            </div>
                        </div>
                    `;

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

                    previewList.appendChild(item);
                });
                
                updateSelectionCount();
            }

            // Toggle selection untuk preview list (multiple choice)
            function togglePreviewActor(actor, element) {
                const existingIndex = selectedActors.findIndex(a => a.id === actor.id);
                const checkbox = element.querySelector('.checkbox-preview');
                
                if (!checkbox) {
                    console.error('Checkbox not found for actor:', actor.name);
                    return;
                }
                
                const checkIcon = checkbox.querySelector('.bx-check');
                
                if (existingIndex > -1) {
                    // Deselect
                    selectedActors.splice(existingIndex, 1);
                    element.classList.remove('selected', 'bg-red-50', 'border-red-300');
                    checkbox.classList.remove('bg-red-600', 'border-red-600');
                    checkbox.classList.add('border-gray-300');
                    if (checkIcon) checkIcon.classList.add('hidden');
                } else {
                    // Select
                    selectedActors.push(actor);
                    element.classList.add('selected', 'bg-red-50', 'border-red-300');
                    checkbox.classList.add('bg-red-600', 'border-red-600');
                    checkbox.classList.remove('border-gray-300');
                    if (checkIcon) checkIcon.classList.remove('hidden');
                }
                
                console.log('Selected actors:', selectedActors.map(a => a.name));
                updateSelectionCount();
            }
            
            // Update selection count display and show/hide apply button
            function updateSelectionCount() {
                const countEl = document.getElementById('previewCount');
                const applySection = document.getElementById('applyPreviewSection');
                const applyLabel = document.getElementById('applyPreviewLabel');
                
                if (countEl) {
                    if (selectedActors.length > 0) {
                        countEl.textContent = `${selectedActors.length} dipilih`;
                        countEl.classList.remove('bg-red-50', 'text-red-600');
                        countEl.classList.add('bg-green-50', 'text-green-600');
                        
                        // Tampilkan tombol terapkan
                        if (applySection) {
                            applySection.classList.remove('hidden');
                            if (applyLabel) {
                                applyLabel.textContent = `Terapkan ${selectedActors.length} Filter`;
                            }
                        }
                    } else {
                        countEl.textContent = 'Top 5 Aktif';
                        countEl.classList.add('bg-red-50', 'text-red-600');
                        countEl.classList.remove('bg-green-50', 'text-green-600');
                        
                        // Sembunyikan tombol terapkan
                        if (applySection) {
                            applySection.classList.add('hidden');
                        }
                    }
                }
            }
            
            // Handler untuk tombol Terapkan Filter (Preview)
            const applyPreviewBtn = document.getElementById('applyPreviewBtn');
            if (applyPreviewBtn) {
                applyPreviewBtn.addEventListener('click', (e) => {
                    e.stopPropagation();
                    if (selectedActors.length > 0) {
                        applyMultipleActorsFilter();
                    }
                });
            }

            viewAllBtn.addEventListener("click", (e) => {
                e.stopPropagation();
                e.stopImmediatePropagation();
                loadFullData(currentCategory);
            });

            // Bug Fix #3: Handler untuk filter semua actor dalam kategori
            filterAllCategoryBtn.addEventListener("click", (e) => {
                e.stopPropagation();
                e.stopImmediatePropagation();
                console.log('[Actor Filter] Tombol diklik, currentCategory:', currentCategory);
                applyCategoryFilter(currentCategory);
                complexMenu.classList.remove("show");
            });

            // Bug Fix #3: Fungsi untuk apply filter berdasarkan kategori saja (tanpa actor spesifik)
            function applyCategoryFilter(category) {
                console.log('[Actor Filter] applyCategoryFilter dipanggil dengan kategori:', category);
                
                // Bug Fix #4: Hanya set actor_label, TIDAK set actor_id
                document.getElementById("filter-actor-label").value = category;
                document.getElementById("filter-actor-id").value = ''; // Kosongkan actor_id
                complexLabel.textContent = `Semua ${getCategoryLabel(category)}`;

                complexBtn.classList.add('active');

                window.dateFilterState.actorLabel = category;
                window.dateFilterState.actorId = null;
                selectedActor = null;

                console.log('[Actor Filter] Memanggil fetchOrdersFromAPI...');
                if (typeof fetchOrdersFromAPI === 'function') {
                    fetchOrdersFromAPI();
                } else {
                    console.error('[Actor Filter] fetchOrdersFromAPI tidak ditemukan!');
                }
            }

            // ==== 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-600"></div>
                            <span class="ml-2 text-[13px] text-gray-500">Memuat data...</span>
                        </div>
                    `;

                    const res = await axios.get("/draft-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");

                } 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 = selectedActors.some(a => a.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.dataset.actorId = actor.id;
                    item.innerHTML = `
                        <div class="flex items-center gap-3">
                            <div class="checkbox-indicator flex-shrink-0 w-5 h-5 rounded border-2 flex items-center justify-center transition-all ${
                                isSelected ? 'bg-red-600 border-red-600' : 'border-gray-300 hover:border-red-400'
                            }">
                                <i class='bx bx-check text-white text-sm ${isSelected ? '' : 'hidden'}'></i>
                            </div>
                            <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>
                        </div>
                    `;

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

                    fullDataList.appendChild(item);
                });

                fullDataCount.textContent = `${filtered.length} data | ${selectedActors.length} dipilih`;
            }

            // ==== TOGGLE ACTOR IN MODAL (Multiple Selection) ====
            function toggleFullDataActor(actor, item) {
                const existingIndex = selectedActors.findIndex(a => a.id === actor.id);
                const checkbox = item.querySelector('.checkbox-indicator');
                const checkIcon = checkbox.querySelector('.bx-check');
                
                if (existingIndex > -1) {
                    // Deselect
                    selectedActors.splice(existingIndex, 1);
                    item.classList.remove('selected', 'bg-red-50', 'border-red-300');
                    checkbox.classList.remove('bg-red-600', 'border-red-600');
                    checkbox.classList.add('border-gray-300');
                    checkIcon.classList.add('hidden');
                } else {
                    // Select
                    selectedActors.push(actor);
                    item.classList.add('selected', 'bg-red-50', 'border-red-300');
                    checkbox.classList.add('bg-red-600', 'border-red-600');
                    checkbox.classList.remove('border-gray-300');
                    checkIcon.classList.remove('hidden');
                }
                
                // Update counter
                fullDataCount.textContent = `${currentFullData.length} data | ${selectedActors.length} dipilih`;
            }

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

            // ==== SELECT ALL / DESELECT ALL ====
            selectAllBtn.addEventListener("click", () => {
                const visibleItems = document.querySelectorAll('.full-data-item');
                
                // Jika semua sudah terpilih, deselect semua
                // Jika tidak, select semua yang visible
                const allSelected = Array.from(visibleItems).every(item => 
                    item.classList.contains('selected')
                );
                
                if (allSelected) {
                    // Deselect all
                    selectedActors = [];
                    visibleItems.forEach(item => {
                        item.classList.remove('selected', 'bg-red-50', 'border-red-300');
                        const checkbox = item.querySelector('.checkbox-indicator');
                        if (checkbox) {
                            checkbox.classList.remove('bg-red-600', 'border-red-600');
                            checkbox.classList.add('border-gray-300');
                            checkbox.querySelector('.bx-check')?.classList.add('hidden');
                        }
                    });
                    selectAllBtn.textContent = 'Pilih Semua';
                } else {
                    // Select all visible items
                    visibleItems.forEach(item => {
                        const actorId = parseInt(item.dataset.actorId);
                        const actor = currentFullData.find(a => a.id === actorId);
                        if (actor && !selectedActors.some(a => a.id === actorId)) {
                            selectedActors.push(actor);
                        }
                        item.classList.add('selected', 'bg-red-50', 'border-red-300');
                        const checkbox = item.querySelector('.checkbox-indicator');
                        if (checkbox) {
                            checkbox.classList.add('bg-red-600', 'border-red-600');
                            checkbox.classList.remove('border-gray-300');
                            checkbox.querySelector('.bx-check')?.classList.remove('hidden');
                        }
                    });
                    selectAllBtn.textContent = 'Hapus Semua';
                }
                
                fullDataCount.textContent = `${currentFullData.length} data | ${selectedActors.length} dipilih`;
            });

            // ==== MODAL STOP PROPAGATION ====
            fullDataModal.addEventListener("click", (e) => e.stopPropagation());

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

            applyFullDataBtn.addEventListener("click", () => {
                if (selectedActors.length > 0) {
                    applyMultipleActorsFilter();
                } else {
                    resetComplexFilterUI();
                }
                fullDataModal.classList.add("hidden");
            });

            // ==== APPLY FILTER (Multiple Actors) ====
            function applyMultipleActorsFilter() {
                // Set multiple actor IDs as comma-separated
                const actorIds = selectedActors.map(a => a.id).join(',');
                const actorNames = selectedActors.length <= 2 
                    ? selectedActors.map(a => a.name).join(', ') 
                    : `${selectedActors.length} Partner`;
                
                document.getElementById("filter-actor-label").value = '';
                document.getElementById("filter-actor-id").value = actorIds;
                complexLabel.textContent = actorNames;

                complexBtn.classList.add('active');

                window.dateFilterState.actorLabel = null;
                window.dateFilterState.actorIds = actorIds;

                if (typeof fetchOrdersFromAPI === 'function') {
                    fetchOrdersFromAPI();
                }
                
                // Close dropdown
                complexMenu.classList.remove("show");
            }
            
            // Legacy function for single actor (from preview click)
            function applyComplexFilter(actor) {
                document.getElementById("filter-actor-label").value = '';
                document.getElementById("filter-actor-id").value = actor.id;
                complexLabel.textContent = actor.name;

                complexBtn.classList.add('active');

                window.dateFilterState.actorLabel = null;
                window.dateFilterState.actorId = actor.id;

                if (typeof fetchOrdersFromAPI === 'function') {
                    fetchOrdersFromAPI();
                }
            }

            // ==== RESET FUNCTIONS ====
            
            // Fungsi untuk reset UI dropdown saja (saat menutup dropdown)
            // TIDAK menghapus filter values, hanya reset tampilan visual
            function resetDropdownUIOnly() {
                categoryBtns.forEach(b => b.classList.remove("active"));
                previewSection.classList.add("hidden");
                viewAllSection.classList.add("hidden");
                filterAllCategorySection.classList.add("hidden");
                
                // Sembunyikan tombol terapkan preview
                const applyPreviewSection = document.getElementById('applyPreviewSection');
                if (applyPreviewSection) applyPreviewSection.classList.add("hidden");
                
                // Reset visual selection markers tanpa menghapus filter values
                document.querySelectorAll('.preview-item').forEach(item => {
                    item.classList.remove('selected', 'bg-red-50', 'border-red-300');
                });
                
                // Reset internal UI state tapi JANGAN reset filter values
                selectedActors = [];
                currentCategory = null;
            }
            
            // Fungsi untuk reset filter secara eksplisit (saat user klik tombol Reset)
            // Ini akan menghapus filter values DAN memanggil API
            function resetComplexFilterUI() {
                // Reset hidden inputs (filter values)
                document.getElementById("filter-actor-label").value = '';
                document.getElementById("filter-actor-id").value = '';
                
                // Reset label tombol
                complexLabel.textContent = "Semua Partner";
                complexBtn.classList.remove('active');
                
                // Reset UI elements
                categoryBtns.forEach(b => b.classList.remove("active"));
                previewSection.classList.add("hidden");
                viewAllSection.classList.add("hidden");
                filterAllCategorySection.classList.add("hidden");
                
                // Sembunyikan tombol terapkan preview
                const applyPreviewSection = document.getElementById('applyPreviewSection');
                if (applyPreviewSection) applyPreviewSection.classList.add("hidden");

                // Reset selection markers
                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');
                });

                // Reset internal state (multiple selection)
                selectedActors = [];
                currentCategory = null;

                // Sinkronkan dengan window.dateFilterState
                window.dateFilterState.actorLabel = null;
                window.dateFilterState.actorId = null;
                
                // Panggil API untuk refresh data tanpa filter actor
                if (typeof fetchOrdersFromAPI === 'function') {
                    fetchOrdersFromAPI();
                }
            }
            
            // Alias untuk backward compatibility
            function resetComplexFilter() {
                resetDropdownUIOnly();
            }

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

            // Bug Fix #5: Fungsi untuk menambahkan reset button dengan benar (tanpa duplikasi)
            function addResetButton() {
                // Cek jika sudah ada reset button di DOM
                let existingResetBtn = document.getElementById('complexFilterResetBtn');
                if (existingResetBtn) {
                    // Jika sudah ada, hanya update event listener
                    existingResetBtn.onclick = (e) => {
                        e.stopPropagation();
                        resetComplexFilterUI();
                        complexMenu.classList.remove('show');
                    };
                    return;
                }

                // Jika belum ada, buat baru
                const resetBtn = document.createElement('button');
                resetBtn.id = 'complexFilterResetBtn';
                resetBtn.innerHTML = `
                    <i class='bx bx-refresh text-base'></i>
                    Reset Filter
                `;
                resetBtn.className = `w-full mt-3 py-2.5 text-[11px] text-gray-500 font-bold uppercase tracking-widest 
                                    rounded-xl hover:bg-rose-50 hover:text-rose-600 transition-all duration-300 
                                    flex items-center justify-center gap-2 border border-gray-100 hover:border-rose-200`;

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

                // Tambahkan ke akhir previewSection
                previewSection.appendChild(resetBtn);
            }
            addResetButton();
        });
    </script>

    <script>
        let dateFilterStartDate = null;
        let dateFilterEndDate = null;
        let dateFilterCurrentPreset = null;
        let dateFilterCustomStart = null;
        let dateFilterCustomEnd = null;


        let dateFilterLeftMonth = new Date().getMonth();
        let dateFilterLeftYear = new Date().getFullYear();
        let dateFilterRightMonth = new Date().getMonth() + 1;
        let dateFilterRightYear = new Date().getFullYear();

        window.dateFilterState = {
            startDate: null,
            endDate: null
        };

        function initializeDateFilter() {
            bindDateFilterEvents();
            updateDateFilterIndicator(null);
            updateCustomDateDisplay();
        }

        // ===== EVENT BINDING =====
        function bindDateFilterEvents() {
            const dateFilterBtn = document.getElementById('dateFilterBtn');
            const dateFilterDropdown = document.getElementById('dateFilterDropdown');

            if (dateFilterBtn && dateFilterDropdown) {
                dateFilterBtn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    dateFilterDropdown.classList.toggle('show');

                    if (dateFilterDropdown.classList.contains('show')) {
                        initializeDualCalendar();
                    }
                });

                document.addEventListener('click', function(e) {
                    if (!dateFilterBtn.contains(e.target) && !dateFilterDropdown.contains(e.target)) {
                        dateFilterDropdown.classList.remove('show');
                    }
                });

                dateFilterDropdown.addEventListener('click', function(e) {
                    e.stopPropagation();
                });
            }
        }

        // ===== DATE FORMATTING =====
        function formatDateApi(date) {
            const offset = date.getTimezoneOffset();
            const adjustedDate = new Date(date.getTime() - (offset * 60 * 1000));
            return adjustedDate.toISOString().split('T')[0];
        }

        function formatDateDisplay(date) {
            return date.toLocaleDateString('id-ID', {
                day: 'numeric',
                month: 'short',
                year: 'numeric'
            });
        }

        // ===== PRESET INDICATOR =====
        function updateDateFilterIndicator(activePreset = null) {
            const presetButtons = document.querySelectorAll('.date-preset');

            presetButtons.forEach(btn => {
                btn.classList.remove('active', 'bg-red-50', 'text-red-700', 'border-red-200');
                btn.classList.add('text-gray-700', 'border-transparent');
            });

            if (activePreset) {
                const activeButtons = document.querySelectorAll(`[onclick*="${activePreset}"]`);
                activeButtons.forEach(btn => {
                    btn.classList.add('active', 'bg-red-50', 'text-red-700', 'border-red-200');
                    btn.classList.remove('text-gray-700', 'border-transparent');
                });
            }
        }

        // ===== DUAL CALENDAR FUNCTIONS =====
        function initializeDualCalendar() {
            const calendarContainer = document.getElementById('customCalendar');
            if (!calendarContainer) return;

            calendarContainer.innerHTML = '';

            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="navigateDateMonth('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(dateFilterLeftYear, dateFilterLeftMonth).toLocaleDateString('id-ID', { month: 'long', year: 'numeric' })}
                                </div>
                                <div class="w-6"></div>
                            </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(dateFilterLeftYear, dateFilterLeftMonth, '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>
                                <div class="text-[13px] font-semibold text-gray-700">
                                    ${new Date(dateFilterRightYear, dateFilterRightMonth).toLocaleDateString('id-ID', { month: 'long', year: 'numeric' })}
                                </div>
                                <button type="button" onclick="navigateDateMonth('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(dateFilterRightYear, dateFilterRightMonth, 'right')}
                            </div>
                        </div>
                    </div>
                </div>
            `;

            calendarContainer.innerHTML = calendarHTML;
        }

        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 = '';

            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-50 text-red-700' :
                            isToday ? 'bg-red-50 text-red-600' :
                            'hover:bg-gray-100 text-gray-700'
                        } ${isToday ? 'font-semibold' : ''}">
                        ${day}
                    </button>
                `;
            }

            return daysHTML;
        }

        // ===== DATE UTILITY FUNCTIONS =====
        function isTodayDate(date) {
            const today = new Date();
            return date.toDateString() === today.toDateString();
        }

        function isDateInRange(date) {
            if (!dateFilterCustomStart && !dateFilterCustomEnd) return false;

            const dateStr = date.toISOString().split('T')[0];
            const startStr = dateFilterCustomStart ? dateFilterCustomStart.toISOString().split('T')[0] : null;
            const endStr = dateFilterCustomEnd ? dateFilterCustomEnd.toISOString().split('T')[0] : null;

            if (dateFilterCustomStart && !dateFilterCustomEnd) {
                return dateStr === startStr;
            }

            if (dateFilterCustomStart && dateFilterCustomEnd) {
                return dateStr === startStr || dateStr === endStr;
            }

            return false;
        }

        function isDateInSelectedRange(date) {
            if (!dateFilterCustomStart || !dateFilterCustomEnd) return false;

            const dateStr = date.toISOString().split('T')[0];
            const startStr = dateFilterCustomStart.toISOString().split('T')[0];
            const endStr = dateFilterCustomEnd.toISOString().split('T')[0];

            return dateStr > startStr && dateStr < endStr;
        }

        // ===== DATE SELECTION FUNCTIONS =====
        function selectCustomDate(dateString) {
            const date = new Date(dateString);

            if (!dateFilterCustomStart || (dateFilterCustomStart && dateFilterCustomEnd)) {
                dateFilterCustomStart = date;
                dateFilterCustomEnd = null;
            } else if (dateFilterCustomStart && !dateFilterCustomEnd) {
                if (date < dateFilterCustomStart) {
                    dateFilterCustomEnd = new Date(dateFilterCustomStart);
                    dateFilterCustomStart = date;
                } else {
                    dateFilterCustomEnd = date;
                }

                setTimeout(() => {
                    applyCustomDate();
                }, 300);
            }

            updateCustomDateDisplay();
            initializeDualCalendar();
        }

        function navigateDateMonth(side, direction) {
            if (side === 'left') {
                dateFilterLeftMonth += direction;
                if (dateFilterLeftMonth < 0) {
                    dateFilterLeftMonth = 11;
                    dateFilterLeftYear--;
                } else if (dateFilterLeftMonth > 11) {
                    dateFilterLeftMonth = 0;
                    dateFilterLeftYear++;
                }

                dateFilterRightMonth = dateFilterLeftMonth + 1;
                dateFilterRightYear = dateFilterLeftYear;
                if (dateFilterRightMonth > 11) {
                    dateFilterRightMonth = 0;
                    dateFilterRightYear++;
                }
            } else {
                dateFilterRightMonth += direction;
                if (dateFilterRightMonth < 0) {
                    dateFilterRightMonth = 11;
                    dateFilterRightYear--;
                } else if (dateFilterRightMonth > 11) {
                    dateFilterRightMonth = 0;
                    dateFilterRightYear++;
                }

                dateFilterLeftMonth = dateFilterRightMonth - 1;
                dateFilterRightYear = dateFilterRightYear;
                if (dateFilterLeftMonth < 0) {
                    dateFilterLeftMonth = 11;
                    dateFilterLeftYear--;
                }
            }

            initializeDualCalendar();
        }

        function updateCustomDateDisplay() {
            const customStartDateEl = document.getElementById('customStartDate');
            const customEndDateEl = document.getElementById('customEndDate');

            if (customStartDateEl) {
                customStartDateEl.textContent = dateFilterCustomStart ? formatDateDisplay(dateFilterCustomStart) : '-';
            }
            if (customEndDateEl) {
                customEndDateEl.textContent = dateFilterCustomEnd ? formatDateDisplay(dateFilterCustomEnd) : '-';
            }
        }

        // ===== APPLY CUSTOM DATE =====
        function applyCustomDate() {
            if (!dateFilterCustomStart || !dateFilterCustomEnd) return;

            dateFilterStartDate = formatDateApi(dateFilterCustomStart);
            dateFilterEndDate = formatDateApi(dateFilterCustomEnd);

            window.dateFilterState.startDate = dateFilterStartDate;
            window.dateFilterState.endDate = dateFilterEndDate;
            document.getElementById('dateFilterLabel').textContent =
                `${formatDateDisplay(dateFilterCustomStart)} - ${formatDateDisplay(dateFilterCustomEnd)}`;

            dateFilterCurrentPreset = null;
            updateDateFilterIndicator(null);
            document.getElementById('dateFilterDropdown').classList.remove('show');
            triggerDateFilterChange();
        }

        // ===== DATE PRESET FUNCTIONS =====
        function applyDatePreset(preset) {
            const today = new Date();
            let start = new Date();
            let end = new Date();
            let label = "";

            dateFilterCustomStart = null;
            dateFilterCustomEnd = null;
            updateCustomDateDisplay();

            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':
                    dateFilterStartDate = null;
                    dateFilterEndDate = null;
                    label = "Semua (Max)";
                    dateFilterCurrentPreset = 'max';
                    updateDateFilterIndicator('max');
                    document.getElementById('dateFilterLabel').textContent = label;
                    document.getElementById('dateFilterDropdown').classList.remove('show');
                    window.dateFilterState.startDate = null;
                    window.dateFilterState.endDate = null;
                    triggerDateFilterChange();
                    return;
            }

            if (preset !== 'max') {
                dateFilterStartDate = formatDateApi(start);
                dateFilterEndDate = formatDateApi(end);

                window.dateFilterState.startDate = dateFilterStartDate;
                window.dateFilterState.endDate = dateFilterEndDate;
            }

            dateFilterCurrentPreset = preset;
            updateDateFilterIndicator(preset);
            document.getElementById('dateFilterLabel').textContent = label;
            document.getElementById('dateFilterDropdown').classList.remove('show');

            triggerDateFilterChange();
        }

        // ===== CLEAR FILTER =====
        function clearDateFilter() {
            dateFilterStartDate = null;
            dateFilterEndDate = null;
            dateFilterCurrentPreset = null;
            dateFilterCustomStart = null;
            dateFilterCustomEnd = null;

            window.dateFilterState.startDate = null;
            window.dateFilterState.endDate = null;

            document.getElementById('dateFilterLabel').textContent = "Filter Tanggal";
            document.getElementById('dateFilterDropdown').classList.remove('show');
            updateDateFilterIndicator(null);
            updateCustomDateDisplay();

            triggerDateFilterChange();
        }

        // ===== TRIGGER FILTER CHANGE =====
        function triggerDateFilterChange() {
            const event = new CustomEvent('dateFilterChanged', {
                detail: {
                    startDate: window.dateFilterState.startDate,
                    endDate: window.dateFilterState.endDate
                }
            });
            document.dispatchEvent(event);

            const dateFilterBtn = document.getElementById('dateFilterBtn');
            if (dateFilterBtn) {
                if (window.dateFilterState.startDate || window.dateFilterState.endDate) {
                    dateFilterBtn.classList.add('active');
                } else {
                    dateFilterBtn.classList.remove('active');
                }
            }

            if (window.onDateFilterChange) {
                window.onDateFilterChange(window.dateFilterState.startDate, window.dateFilterState.endDate);
            }

            if (typeof fetchOrdersFromAPI === 'function') {
                fetchOrdersFromAPI();
            }
        }

        // ===== INITIALIZE ON DOM LOAD =====
        document.addEventListener('DOMContentLoaded', function() {
            initializeDateFilter();

            document.addEventListener('dateFilterChanged', function() {
                if (typeof fetchOrdersFromAPI === 'function') {
                    fetchOrdersFromAPI();
                }
            });
        });
    </script>

    <!-- CS Filter Script -->
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const csContainer = document.querySelector('.cs-dropdown-container');
            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");
            const csFilterInput = document.getElementById("filter-cs");

            console.log('CS Filter Elements:', {
                container: csContainer,
                btn: csBtn,
                menu: csMenu,
                search: csSearchInput,
                list: csList,
                label: csLabel,
                filter: csFilterInput
            });

            if (csBtn && csMenu) {
                csBtn.addEventListener("click", function(e) {
                    e.stopPropagation();
                    csMenu.classList.toggle("show");

                    if (csSearchInput && csMenu.classList.contains("show")) {
                        csSearchInput.value = "";
                        filterCsList("");
                        csSearchInput.focus();
                    }
                });
            }

            document.addEventListener("click", function(e) {
                if (csContainer && !csContainer.contains(e.target)) {
                    csMenu.classList.remove("show");
                }
            });

            // Search filtering
            if (csSearchInput) {
                csSearchInput.addEventListener("input", function(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";
                    }
                });
            }

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

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

                    console.log('CS Selected:', {
                        id,
                        name
                    });

                    if (csLabel) {
                        csLabel.textContent = name;
                    }
                    if (csFilterInput) {
                        csFilterInput.value = id;
                    }

                    document.querySelectorAll('.cs-item').forEach(i => i.classList.remove('active'));
                    item.classList.add('active');

                    if (id) {
                        csBtn.classList.add('active');
                    } else {
                        csBtn.classList.remove('active');
                    }

                    csMenu.classList.remove("show");

                    if (typeof fetchOrdersFromAPI === 'function') {
                        console.log('Triggering fetchOrdersFromAPI with CS filter:', id);
                        fetchOrdersFromAPI();
                    }
                });
            }

            if (csMenu) {
                csMenu.addEventListener("click", function(e) {
                    e.stopPropagation();
                });
            }
        });
    </script>
@endpush