@extends('template.desktop.app')

@push('styles')
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <link rel="stylesheet" href="https://npmcdn.com/flatpickr/dist/themes/airbnb.css">

    <style>
        /* Date Filter Styles */
        .date-preset {
            transition: all 0.2s ease;
        }

        .date-preset:hover,
        .date-preset.active {
            background-color: #fef2f2 !important;
            color: #dc2626 !important;
            border-color: #fecaca !important;
        }

        /* Custom Calendar Styles */
        #customCalendar button {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            height: 1.75rem;
            width: 1.75rem;
            transition: all 0.2s ease;
        }

        #customCalendar button:hover {
            background-color: #fef2f2 !important;
            color: #dc2626 !important;
        }

        #customCalendar button.bg-red-600 {
            background-color: #dc2626 !important;
            color: white !important;
        }

        #customCalendar button.bg-red-100 {
            background-color: #fef2f2 !important;
            color: #dc2626 !important;
        }

        #customCalendar button.bg-red-50 {
            background-color: #fef2f2 !important;
            color: #dc2626 !important;
        }

        /* CS Dropdown Styles */
        .cs-dropdown-container {
            position: relative;
            display: inline-block;
        }

        .cs-dropdown-menu {
            position: absolute;
            left: 0;
            top: 100%;
            margin-top: 0.5rem;
            width: 16rem;
            border-radius: 0.75rem;
            border: 1px solid #e5e7eb;
            background-color: white;
            box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
            z-index: 50;
            display: none;
        }

        .cs-dropdown-menu.show {
            display: block;
        }

        /* Complex Actor Filter Styles */
        .complex-dropdown-container {
            position: relative;
            display: inline-block;
        }

        .complex-dropdown-menu {
            position: absolute;
            left: 0;
            top: 100%;
            margin-top: 0.5rem;
            width: 22rem;
            border-radius: 0.75rem;
            border: 1px solid #e5e7eb;
            background-color: white;
            box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
            z-index: 50;
            display: none;
        }

        .complex-dropdown-menu.show {
            display: block;
        }

        .preview-item, .full-data-item {
            transition: all 0.2s ease;
            border: 1px solid transparent;
        }

        .preview-item:hover, .full-data-item:hover {
            background-color: #f8fafc;
        }

        .preview-item.selected, .full-data-item.selected {
            background-color: #fef2f2;
            border-color: #fecaca;
        }

        .category-btn.active {
            background-color: #fef2f2;
            color: #dc2626;
            border-color: #fecaca;
        }

        .nav-link span {
            display: inline-block !important;
            min-width: 30px !important;
            color: #444 !important;
            font-weight: 500 !important;
        }

    </style>
@endpush

@section('content')
    <div class="alert alert-warning alert-dismissible d-flex" role="alert">
        <span class="alert-icon rounded">
            <i class="icon-base ti tabler-alert-hexagon icon-md w-px-30"></i>
        </span>
        <div class="d-flex flex-column ps-1">
            <h5 class="alert-heading mb-2 text-black">Perhatian</h5>
            <p class="mb-0 text-black">
                Ketika orderan dicentang dan dikirim ke <strong>Everpro</strong>, statusnya akan <strong>otomatis
                    disetujui</strong> (approved). Pastikan Anda telah memeriksa data sebelum melanjutkan.
            </p>
        </div>
        <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <div class="card">
        <div class="card-datatable">
            <div class="dt-container dt-bootstrap5 dt-empty-footer">
                <div class="row mx-3 my-0 justify-content-between">
                    <div class="d-md-flex justify-content-between align-items-center dt-layout-start col-md-auto me-auto">
                        <div class="dt-search">
                            <input type="search" class="form-control ms-0" id="orderSearch" placeholder="Search Order">
                        </div>

                        <div class="ms-3">
                            <button id="dateFilterBtn"
                                class="flex items-center gap-2 rounded-full border border-gray-200 bg-gray-50 px-4 py-2.5 text-[13px] font-semibold text-gray-700 hover:bg-white hover:shadow-sm transition-all whitespace-nowrap" style="border-radius: 900px;">
                                    <i class='bx bx-calendar text-[16px] text-gray-500'></i>
                                        <span id="dateFilterLabel">Filter Waktu</span>
                                <i class='bx bx-chevron-down text-gray-400'></i>
                            </button>

                            <div id="dateFilterDropdown" class="dropdown-menu p-3" style="width: 640px; display: none;">
                                <div class="row">
                                    <!-- Kiri: Quick Presets -->
                                    <div class="col-4">
                                        <div class="space-y-1 text-[14px]">
                                            <button onclick="applyDatePreset('today')" class="date-preset w-full text-left px-3 py-2 rounded-lg hover:bg-gray-50 font-medium text-gray-700 flex justify-between items-center">
                                                <span>Hari Ini</span>
                                            </button>
                                            <button onclick="applyDatePreset('yesterday')" class="date-preset w-full text-left px-3 py-2 rounded-lg hover:bg-gray-50 font-medium text-gray-700 flex justify-between items-center">
                                                <span>Kemarin</span>
                                            </button>
                                            <button onclick="applyDatePreset('last7')" class="date-preset w-full text-left px-3 py-2 rounded-lg hover:bg-gray-50 font-medium text-gray-700 flex justify-between items-center">
                                                <span>7 Hari Terakhir</span>
                                            </button>
                                            <button onclick="applyDatePreset('last30')" class="date-preset w-full text-left px-3 py-2 rounded-lg hover:bg-gray-50 font-medium text-gray-700 flex justify-between items-center">
                                                <span>30 Hari Terakhir</span>
                                            </button>
                                            <button onclick="applyDatePreset('this_month')" class="date-preset w-full text-left px-3 py-2 rounded-lg hover:bg-gray-50 font-medium text-gray-700 flex justify-between items-center">
                                                <span>Bulan Ini</span>
                                            </button>
                                            <button onclick="applyDatePreset('last_month')" class="date-preset w-full text-left px-3 py-2 rounded-lg hover:bg-gray-50 font-medium text-gray-700 flex justify-between items-center">
                                                <span>Bulan Lalu</span>
                                            </button>
                                            <button onclick="applyDatePreset('this_year')" class="date-preset w-full text-left px-3 py-2 rounded-lg hover:bg-gray-50 font-medium text-gray-700 flex justify-between items-center">
                                                <span>Tahun Ini</span>
                                            </button>
                                            <button onclick="applyDatePreset('max')" class="date-preset w-full text-left px-3 py-2 rounded-lg hover:bg-gray-50 font-medium text-gray-700 flex justify-between items-center">
                                                <span>Semua (Max)</span>
                                            </button>
                                        </div>
                                    </div>

                                    <!-- Kanan: Custom Range -->
                                    <div class="col-8">
                                        <!-- Date Display -->
                                        <div class="d-flex justify-content-between align-items-center mb-3 p-2 bg-gray-50 rounded">
                                            <div class="text-center">
                                                <small class="text-muted">Dari</small>
                                                <div id="customStartDate" class="fw-bold">-</div>
                                            </div>
                                            <i class="bx bx-right-arrow-alt text-muted"></i>
                                            <div class="text-center">
                                                <small class="text-muted">Sampai</small>
                                                <div id="customEndDate" class="fw-bold">-</div>
                                            </div>
                                        </div>

                                        <!-- Calendar Container -->
                                        <div id="customCalendar"></div>
                                    </div>
                                </div>

                                <!-- Clear Filter Button -->
                                <div class="mt-3 pt-3 border-top">
                                    <button onclick="clearDateFilter()" class="btn btn-outline-danger btn-sm w-100">
                                        Hapus Filter
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- CS DropdownContainer -->
                        <div class="ms-3 cs-dropdown-container">
                            <button id="csDropdownBtn"
                                class="flex items-center justify-between w-full rounded-full border border-gray-200 bg-gray-50 px-4 py-2.5
                                text-[13px] font-semibold text-gray-700 hover:bg-white hover:shadow-sm transition-all"
                                style="border-radius: 900px;">
                                <span id="csSelectedLabel">Semua CS</span>
                                <i class='bx bx-chevron-down'></i>
                            </button>

                            <input type="hidden" id="filter-cs" value="">

                            <!-- DropdownMenu -->
                            <div id="csDropdownMenu" class="cs-dropdown-menu">
                                <!-- Search Box -->
                                <div class="p-2 border-b border-gray-100">
                                    <input id="csSearchInput" type="text"
                                        class="w-full px-3 py-1.5 rounded-lg border border-gray-200 text-[13px] outline-none"
                                        placeholder="Cari CS...">
                                </div>

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

                                    @foreach ($customerServices as $cs)
                                        <div data-id="{{ $cs->id }}" data-name="{{ $cs->name }}"
                                            class="cs-item px-3 py-2 rounded-lg hover:bg-gray-50 cursor-pointer">
                                            {{ $cs->name }}
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>

                        <!-- Complex Actor Filter DropdownContainer -->
                        <div class="ms-3 complex-dropdown-container">
                            <!-- Compact Complex Filter Mitra & Distributor -->
                            <div class="relative w-44" id="complexActorDropdownContainer">

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

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

                                <!-- Dropdown -->
                                <div id="complexActorDropdownMenu" class="complex-dropdown-menu">
                                    <div class="dropdown-content-container">
                                        <div class="p-3 border-b border-gray-100">
                                            <h4 class="text-[12px] font-semibold text-gray-700 mb-2">Pilih Kategori</h4>
                                            <div class="flex gap-1">
                                                <button data-category="mitra"
                                                    class="category-btn flex-1 px-2 py-1.5 rounded-md border border-gray-200
                                                    text-[11px] font-medium text-gray-600 hover:bg-gray-50 transition">
                                                    <i class='bx bx-group mr-1 text-xs'></i>Mitra
                                                </button>
                                                <button data-category="distributor"
                                                    class="category-btn flex-1 px-2 py-1.5 rounded-md border border-gray-200
                                                    text-[11px] font-medium text-gray-600 hover:bg-gray-50 transition">
                                                    <i class='bx bx-package mr-1 text-xs'></i>Distributor
                                                </button>
                                            </div>
                                        </div>

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

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

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

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

                    </div>
                    <div
                        class="d-md-flex justify-content-between align-items-center dt-layout-end col-md-auto ms-auto gap-md-2 gap-0">
                        <div class="dt-buttons btn-group flex-wrap">
                            <div class="btn-group">
                                <button id="inputEverproBtn"
                                    class="btn buttons-collection btn-label-primary btn-label-primary" type="button">
                                    <span class="d-flex align-items-center gap-1">
                                        <i class="icon-base ti tabler-transfer-in icon-xs"></i>
                                        <span class="d-none d-sm-inline-block">Input Everpro</span>
                                    </span>
                                </button>

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

                <ul class="nav nav-tabs mt-3 mb-3" id="paymentTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" data-method="" type="button">Semua
                            <span id="ordersCountInfo" class="text-dark ms-2"></span>
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" data-method="COD" type="button">COD
                            <span id="codCountInfo" class="text-dark ms-2"></span>
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" data-method="TRANSFER" type="button">Transfer Bank
                            <span id="transferCountInfo" class="text-dark ms-2"></span>
                        </button>
                    </li>
                </ul>

                <div id="ordersMeta"
                    class="d-flex align-items-center justify-content-between px-3 py-3 mt-1 bg-white border rounded"
                    style="font-size: 15px; font-weight: 600;">
                    <span id="selectionInfo" class="text-secondary">
                        0 dari 0 dipilih
                    </span>
                </div>


                <div class="justify-content-between dt-layout-table">
                    <div class="d-md-flex justify-content-between align-items-center dt-layout-full table-responsive">
                        <table class="datatables-order table border-top dataTable" id="ordersTable" style="width: 100%;">
                            <thead>
                                <tr>
                                    <th><input class="form-check-input" type="checkbox"></th>
                                    <th>Order</th>
                                    <th>Tanggal</th>
                                    <th>Customer</th>
                                    <th>Payment</th>
                                    <th>Status</th>
                                    <th>Method</th>
                                    <th>Bukti Transfer</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody id="ordersBody">
                                <tr>
                                    <td colspan="9" class="text-center">Loading...</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="row mx-3 justify-content-between mt-3">
                    <div class="col-auto" id="paginationInfo"></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>
@endsection

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

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

        function updateHeaderCounts(meta) {
            // meta berisi: { all: X, cod: Y, transfer: Z }

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

        function updateSelectionInfo(meta = null) {

            if (meta){
                lastMetaData = meta;
            }

            const checked = document.querySelectorAll('.rowCheckbox:checked').length;

            let totalInTab = 0;

            if (selectedMethod === 'COD') {
                totalInTab = lastMetaData.cod;
            } else if (selectedMethod === 'TRANSFER') {
                totalInTab = lastMetaData.transfer;
            } else {
                totalInTab = lastMetaData.all;
            }

            document.getElementById("selectionInfo").textContent =
                `${checked} dari ${totalInTab}`;
        }
        function renderTable(orders) {
            const tbody = document.getElementById("ordersBody");
            const thead = document.querySelector("#ordersTable thead tr");
            tbody.innerHTML = '';

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

            // Header Table
            const headers = `
                <th><input type="checkbox" class="form-check-input" id="selectAllCheckbox"></th>
                <th>Order ID / Tanggal</th>
                <th>Deal Maker (CS)</th>
                <th>Customer</th>
                <th>Alamat</th>
                <th>Notes</th>
                <th>Total Pembayaran</th>
                <th>Total Generate EVP</th>
                <th>Warehouse</th>
                ${showBuktiTransfer ? '<th>Bukti Transfer</th>' : ''}
                <th>Actions</th>
            `;
            thead.innerHTML = headers;

            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;
                const canSelect = isCod || isApproved;

                const paymentBadgeClass = isCod ? 'bg-success' : 'bg-info';

                const approveButton = (!isCod && !isApproved)
                    ? `<button class="btn btn-success" onclick="approveTransferOrder(${order.id})">
                            <i class='bx bx-check-circle me-1'></i> Setujui Transfer
                        </button>`
                    : '';
                let buktiTransferButton = `<span class="text-muted">-</span>`;

                if (imageUrl && !isCod) {
                    const btnClass = isApproved ? 'btn-outline-success' : 'btn-outline-warning';
                    const btnText = isApproved ? 'Approved' : 'Cek Bukti';

                    buktiTransferButton = `
                        <button class="btn btn-sm ${btnClass}" data-bs-toggle="modal" data-bs-target="#${modalId}">
                            ${btnText}
                        </button>
                    `;
                } else if (!isCod && !imageUrl) {
                    buktiTransferButton = `<span class="badge bg-danger">Belum Upload</span>`;
                }

                // Modal HTML
                const modal = (imageUrl && showBuktiTransfer) ? `
                    <div class="modal fade" id="${modalId}" tabindex="-1" aria-labelledby="${modalId}Label" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">
                                        Bukti Transfer - #${order.order_code}
                                        ${isApproved ? '<span class="badge bg-success ms-2">Disetujui</span>' : '<span class="badge bg-warning ms-2">Menunggu Approval</span>'}
                                    </h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                </div>
                                <div class="modal-body text-center">
                                    <img src="${imageUrl}" alt="Bukti Transfer" class="img-fluid rounded mb-3" style="max-height: 500px;">
                                </div>
                                <div class="modal-footer justify-content-between">
                                    <div>
                                        <a href="${imageUrl}" class="btn btn-secondary btn-sm" target="_blank"><i class='bx bx-link-external'></i> Tab Baru</a>
                                    </div>
                                    <div class="d-flex gap-2">
                                        ${approveButton}
                                        <button class="btn btn-light" data-bs-dismiss="modal">Tutup</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                ` : '';

                // Perhitungan selisih harga
                const originalTotal = parseInt(String(order.original_total).replace(/\./g, '')) || 0;
                const generatedTotal = parseInt(String(order.generated_total).replace(/\./g, '')) || 0;
                const difference = originalTotal - generatedTotal;

                const diffBadge = `
                    <span class="badge bg-${difference >= 0 ? 'success' : 'danger'}">
                        ${difference >= 0 ? '+' : '-'} Rp ${Math.abs(difference).toLocaleString('id-ID')}
                    </span>
                `;

                // Render Row
                const row = `
                    <tr>
                        <td>
                            <input type="checkbox" class="form-check-input rowCheckbox"
                                value="${order.id}"
                                ${!canSelect ? 'disabled' : ''}>
                        </td>

                        <td>
                            <strong>#${order.order_code}</strong><br>
                            <small>${order.created_at}</small>
                        </td>

                        <td>
                            ${order.customer_service?.name ?? '-'}<br>
                            <small>${order.customer_service?.phone ?? '-'}</small>
                        </td>

                        <td>
                            <b>${order.receiver_name}</b><br>
                            ${order.receiver_address}<br>
                            <small>${order.receiver_phone}</small>
                        </td>
                        <td>
                            ${order.receiver_address ?? '-'}
                        </td>
                        <td>${order.notes ? order.notes : '-'}</td>

                        <td>
                            Rp ${order.original_total}<br>
                            <small class="badge ${paymentBadgeClass}">${order.payment_method}</small>
                        </td>

                        <td>
                            Rp ${order.generated_total}<br>
                            ${diffBadge}
                        </td>

                        <td>
                            (${order.warehouse?.actor?.code ?? ''})
                            ${order.warehouse?.name?.replace(/Gudang/i, '').trim() ?? '-'}
                        </td>

                        ${showBuktiTransfer ? `<td>${buktiTransferButton}</td>` : ''}

                        <td>
                            <div class="d-flex gap-2">
                                <a href="/draft-orders/detail/${order.id}" class="btn btn-sm btn-primary">Detail</a>
                                <button class="btn btn-sm btn-danger" onclick="rejectOrder(${order.id})">Tolak</button>
                            </div>
                        </td>
                    </tr>
                    ${modal}
                `;

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

            // Re-attach Event Listeners
            setTimeout(() => {
                document.querySelectorAll('.rowCheckbox').forEach(cb => {
                    // Panggil tanpa parameter, fungsi akan memakai 'currentMeta' global
                    cb.addEventListener('change', () => updateSelectionInfo());
                });

                const selectAll = document.getElementById("selectAllCheckbox");
                if (selectAll) {
                    selectAll.addEventListener("change", handleSelectAll);
                }
            }, 0);
        }

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

            Swal.fire({
                title: 'Setujui Bukti Transfer?',
                text: "Order ini akan bisa diproses ke Everpro setelah disetujui.",
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#198754', // Warna hijau
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Ya, Setujui!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        title: 'Memproses...',
                        didOpen: () => Swal.showLoading()
                    });

                    axios.post(`/draft-orders/approved-transfer/${orderId}`, {}, {
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        }
                    })
                    .then(response => {
                        Swal.fire('Berhasil!', 'Bukti transfer telah disetujui.', 'success');
                        fetchOrdersFromAPI();
                    })
                    .catch(error => {
                        console.error(error);
                        Swal.fire('Gagal!', error.response?.data?.message || 'Terjadi kesalahan.', 'error');
                        if(modalInstance) modalInstance.show();
                    });
                } else {
                    if(modalInstance) modalInstance.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;

            console.log('Fetching orders with params:', {
                search: searchValue,
                method: selectedMethod,
                start_date: startDate,
                end_date: endDate,
                customer_service_id: csFilter,
                actor_label: actorLabel,
                actor_id: actorId
            });

            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('Error fetching orders:', error);
            });
        }

        function rejectOrder(orderId) {
            Swal.fire({
                title: 'Yakin?',
                text: "Pesanan akan ditolak!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Ya, tolak!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    axios.post(`/draft-orders/${orderId}/reject`, {}, {
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        }
                    })
                    .then(() => {
                        Swal.fire('Ditolak!', 'Pesanan berhasil ditolak.', 'success');
                        fetchOrdersFromAPI();
                    })
                    .catch(() => {
                        Swal.fire('Gagal!', 'Terjadi kesalahan saat menolak pesanan.', 'error');
                    });
                }
            });
        }

        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();
                    updateSelectionInfo();
                });
            });

            document.getElementById('inputEverproBtn').addEventListener('click', async function() {
                const selectedIds = Array.from(document.querySelectorAll('.rowCheckbox:checked')).map(cb => cb.value);

                if (selectedIds.length === 0) {
                    return Swal.fire('Peringatan', 'Silakan pilih minimal 1 order.', 'warning');
                }

                Swal.fire({
                    title: 'Memproses Order...',
                    html: 'Sedang mengirim ke Everpro.<br><b>Mohon tunggu tanpa menutup halaman ini.</b>',
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    didOpen: () => Swal.showLoading()
                });

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

                for (let i = 0; i < selectedIds.length; i++) {
                    const orderId = selectedIds[i];
                    try {
                        const response = await axios.post('/draft-orders/store/everpro', {
                            order_id: orderId
                        });

                        if (response.data.status === 'success') {
                            success.push(`#${orderId}`);
                        } else {
                            failed.push(`#${orderId}: ${response.data.message || 'Gagal tanpa pesan'}`);
                        }
                    } catch (err) {
                        failed.push(`#${orderId}: ${err.message || 'Request error'}`);
                    }
                }

                Swal.close();

                let html = `<p><strong>Berhasil:</strong> ${success.length}</p>`;
                if (failed.length > 0) {
                    html += `<p class="text-danger"><strong>Gagal:</strong> ${failed.length}</p><ul class="text-start">`;
                    failed.forEach(msg => html += `<li>${msg}</li>`);
                    html += '</ul>';
                }

                Swal.fire({
                    icon: failed.length ? 'warning' : 'success',
                    title: 'Selesai',
                    html: html,
                    width: 600
                });

                fetchOrdersFromAPI();
            });
        });

        // Debounce
        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");

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

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

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

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

            // ========== 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;
                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-500"></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");
                        return;
                    }

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

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

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

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

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

                    previewList.appendChild(item);
                });
            }

            function selectPreviewActor(actor, element) {
                document.querySelectorAll('.preview-item').forEach(item => {
                    item.classList.remove('selected', 'bg-red-50', 'border-red-300');
                });
                element.classList.add('selected', 'bg-red-50', 'border-red-300');

                selectedActor = actor;
                applyComplexFilter(actor);
                complexMenu.classList.remove("show");
            }

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

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

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

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

                    fullDataList.appendChild(item);
                });

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

            // ==== SELECT ACTOR IN MODAL ====
            function selectFullDataActor(actor, item) {
                selectedActor = actor;
                document.querySelectorAll(".full-data-item").forEach(el => {
                    el.classList.remove('selected', 'bg-red-50', 'border-red-300');
                });

                document.querySelectorAll(".full-data-item .bx-check").forEach(el => {
                    el.classList.add("hidden");
                });

                item.classList.add('selected', 'bg-red-50', 'border-red-300');
                item.querySelector(".bx-check").classList.remove("hidden");
            }

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

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

            // ==== 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 (selectedActor) applyComplexFilter(selectedActor);
                else resetComplexFilterUI();
                fullDataModal.classList.add("hidden");
            });

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

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

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

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

            function resetComplexFilterUI() {
                document.getElementById("filter-actor-label").value = '';
                document.getElementById("filter-actor-id").value = '';
                complexLabel.textContent = "Semua Partner";

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

                selectedActor = null;

                window.dateFilterState.actorLabel = null;
                window.dateFilterState.actorId = null;
                if (typeof fetchOrdersFromAPI === 'function') {
                    fetchOrdersFromAPI();
                }
            }

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

            function addResetButton() {
                const existingResetBtn = document.getElementById('complexFilterResetBtn');
                if (existingResetBtn) existingResetBtn.remove();

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

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

                viewAllSection.parentNode.insertBefore(resetBtn, viewAllSection);
            }
            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.style.display = dateFilterDropdown.style.display === 'block' ? 'none' : 'block';

                    if (dateFilterDropdown.style.display === 'block') {
                        initializeDualCalendar();
                    }
                });

                document.addEventListener('click', function(e) {
                    if (!dateFilterBtn.contains(e.target) && !dateFilterDropdown.contains(e.target)) {
                        dateFilterDropdown.style.display = 'none';
                    }
                });

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

            return daysHTML;
        }

        // ===== 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').style.display = 'none';
            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').style.display = 'none';
                    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').style.display = 'none';

            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').style.display = 'none';
            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);

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

                    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