@extends('mobile.template.app')

@section('content')
    <style>
        .hidden-panel {
            max-height: 0;
            opacity: 0;
            transform: scaleY(0.95);
            overflow: hidden;
            transition: all .35s ease-in-out;
            margin: 0 !important;
            padding: 0 !important;
        }

        .show-panel {
            max-height: 500px;
            opacity: 1;
            transform: scaleY(1);
            margin-top: .5rem;
            padding: .75rem !important;
        }

        .skeleton {
            background: linear-gradient(90deg, #f3f3f3 25%, #e5e5e5 50%, #f3f3f3 75%);
            background-size: 400% 100%;
            animation: shimmer 1.2s ease-in-out infinite;
        }

        @keyframes shimmer {
            0% {
                background-position: -400px 0;
            }

            100% {
                background-position: 400px 0;
            }
        }

        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }

        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
    </style>
    <div class="p-4 space-y-4 view-transition">
        <div class="space-y-2">
            <div class="flex items-center justify-between rounded-xl bg-white shadow-sm px-4 py-3 border border-gray-100">
                <!-- Left Section -->
                <div>
                    <h1 class="text-lg font-semibold text-gray-900">Bonus & Pesanan</h1>
                    <p class="text-sm text-gray-500">Pantau performa bonus dan status pesananmu di sini</p>
                </div>

                <!-- Toggle Button -->
                <button id="toggle-summary"
                    class="flex items-center gap-2 px-4 py-2 rounded-full bg-rose-50 text-rose-700 text-sm font-medium hover:bg-rose-100 active:scale-95 transition-all duration-200 shadow-sm">
                    <svg id="summary-icon" xmlns="http://www.w3.org/2000/svg"
                        class="h-4 w-4 transition-transform duration-300 rotate-180" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                    </svg>
                    <span>Ringkasan</span>
                </button>
            </div>


            <div id="summary-section" class="transition-all duration-500 ease-in-out overflow-hidden max-h-0 opacity-0">
                <div class="flex gap-3 overflow-x-auto no-scrollbar pt-2 pb-1">
                    <div class="min-w-[130px] bg-white rounded-xl shadow-sm border p-3">
                        <p class="text-[11px] text-gray-500 mb-1">Total Semua</p>
                        <p id="total-all" class="text-lg font-bold text-[#B91C1C]">0</p>
                    </div>
                    <div class="min-w-[130px] bg-white rounded-xl shadow-sm border p-3">
                        <p class="text-[11px] text-gray-500 mb-1">Pending</p>
                        <p id="total-pending" class="text-lg font-bold text-yellow-500">0</p>
                    </div>
                    <div class="min-w-[130px] bg-white rounded-xl shadow-sm border p-3">
                        <p class="text-[11px] text-gray-500 mb-1">Disetujui</p>
                        <p id="total-approved" class="text-lg font-bold text-green-600">0</p>
                    </div>
                    <div class="min-w-[130px] bg-white rounded-xl shadow-sm border p-3">
                        <p class="text-[11px] text-gray-500 mb-1">Ditolak</p>
                        <p id="total-rejected" class="text-lg font-bold text-[#B91C1C]">0</p>
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-3 mt-2">
                    <div class="bg-white rounded-xl shadow-sm border p-3">
                        <p class="text-[11px] text-gray-500 mb-1">Bonus Pending</p>
                        <p id="bonus-pending" class="text-base font-bold text-yellow-500">Rp 0</p>
                    </div>
                    <div class="bg-white rounded-xl shadow-sm border p-3">
                        <p class="text-[11px] text-gray-500 mb-1">Total Bonus Diterima</p>
                        <p id="total-bonus" class="text-base font-bold text-[#B91C1C]">Rp 0</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="space-y-2">
            <div class="flex gap-2">
                <div class="flex items-center border rounded-xl px-3 bg-white flex-1 shadow-sm">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M21 21l-4.35-4.35m0 0A7.5 7.5 0 103.5 10.5a7.5 7.5 0 0013.15 6.15z" />
                    </svg>
                    <input id="search-input" type="text"
                        class="flex-1 p-2 text-sm text-gray-700 focus:outline-none border-0 focus:ring-0"
                        placeholder="Cari ID, nama penerima, status...">
                </div>
                <button id="toggle-filter"
                    class="p-2.5 bg-white border rounded-xl shadow-sm hover:bg-gray-50 flex items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-[#B91C1C]" fill="none"
                        viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M3 4h18M6 8h12m-9 4h6m-3 4h3" />
                    </svg>
                </button>
                <button id="toggle-sort"
                    class="p-2.5 bg-white border rounded-xl shadow-sm hover:bg-gray-50 flex items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-[#B91C1C]" fill="none"
                        viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M3 6h13M3 12h9m-9 6h5m7-6l3 3m0 0l3-3m-3 3V3" />
                    </svg>
                </button>
            </div>

            <div id="filter-panel"
                class="hidden-panel bg-white border rounded-xl p-3 shadow-sm space-y-3 transition-all duration-300 ease-in-out">
                <div class="space-y-2">
                    <label class="text-xs font-medium text-gray-600">Metode Pembayaran</label>
                    <select id="payment-filter"
                        class="w-full text-sm border border-gray-300 rounded-lg p-2 focus:ring-2 focus:ring-[#B91C1C] focus:outline-none">
                        <option value="">Semua Payment</option>
                        <option value="COD">COD</option>
                        <option value="TRANSFER">TRANSFER</option>
                    </select>
                </div>
                <div class="space-y-2">
                    <label class="text-xs font-medium text-gray-600">Rentang Tanggal</label>
                    <div class="flex items-center border rounded-lg px-3 bg-white">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400" fill="none"
                            viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M8 7V3m8 4V3m-9 8h10m-12 5h14m-14 5h14" />
                        </svg>
                        <input id="date-range" type="text"
                            class="p-2 text-sm text-gray-700 flex-1 cursor-pointer focus:outline-none border-0 focus:ring-0"
                            placeholder="Pilih tanggal">
                    </div>
                </div>
                <button id="apply-filter"
                    class="w-full bg-[#B91C1C] text-white py-2.5 rounded-lg text-sm font-medium hover:bg-[#991B1B] transition">
                    Terapkan Filter
                </button>
            </div>

            <div id="sort-panel"
                class="hidden-panel bg-white border rounded-xl p-3 shadow-sm space-y-2 transition-all duration-300 ease-in-out">
                <p class="text-xs font-semibold text-gray-700 uppercase tracking-wide">Urutkan berdasarkan</p>
                <div class="grid grid-cols-2 gap-2">
                    <button data-sort="order_date-desc"
                        class="sort-btn bg-gray-100 hover:bg-[#FFECEC] py-2 rounded-lg text-xs font-medium">
                        Tanggal Terbaru
                    </button>
                    <button data-sort="order_date-asc"
                        class="sort-btn bg-gray-100 hover:bg-[#FFECEC] py-2 rounded-lg text-xs font-medium">
                        Tanggal Terlama
                    </button>
                    <button data-sort="total_payment-desc"
                        class="sort-btn bg-gray-100 hover:bg-[#FFECEC] py-2 rounded-lg text-xs font-medium">
                        Total Tertinggi
                    </button>
                    <button data-sort="total_payment-asc"
                        class="sort-btn bg-gray-100 hover:bg-[#FFECEC] py-2 rounded-lg text-xs font-medium">
                        Total Terendah
                    </button>
                </div>
            </div>
        </div>

        <div class="space-y-2">
            <div class="flex items-center justify-between">
                <nav class="flex space-x-2 overflow-x-auto no-scrollbar" aria-label="Tabs">
                    <button data-status="all"
                        class="order-tab whitespace-nowrap py-1.5 px-4 rounded-full font-medium text-xs transition bg-[#B91C1C] text-white">
                        Semua
                    </button>
                    <button data-status="pending"
                        class="order-tab whitespace-nowrap py-1.5 px-4 rounded-full font-medium text-xs transition bg-gray-100 text-gray-600 hover:bg-gray-200">
                        Pending
                    </button>
                    <button data-status="approved"
                        class="order-tab whitespace-nowrap py-1.5 px-4 rounded-full font-medium text-xs transition bg-gray-100 text-gray-600 hover:bg-gray-200">
                        Disetujui
                    </button>
                    <button data-status="rejected"
                        class="order-tab whitespace-nowrap py-1.5 px-4 rounded-full font-medium text-xs transition bg-gray-100 text-gray-600 hover:bg-gray-200">
                        Ditolak
                    </button>
                </nav>
            </div>
        </div>

        <div id="orders-container" class="space-y-3 relative"></div>

        <div id="empty-state" class="hidden text-center py-10">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto text-gray-300 mb-4" fill="none"
                viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
            </svg>
            <p class="text-gray-600 font-medium text-sm">Belum ada pesanan yang sesuai</p>
            <p class="text-xs text-gray-400 mt-1">Coba ubah filter atau kata kunci pencarian</p>
        </div>
    </div>

    <div id="order-modal"
        class="fixed inset-0 bg-black bg-opacity-40 hidden z-50 flex justify-center items-end transition-opacity duration-300 ease-out">
        <div class="bg-white w-full max-w-md rounded-t-2xl p-5 transform translate-y-full transition-transform duration-300"
            id="order-modal-content">
            <div class="flex justify-between items-center mb-3">
                <div>
                    <h2 class="text-base font-bold text-gray-900">Detail Pesanan</h2>
                    <p class="text-[11px] text-gray-500">Ringkasan lengkap pesanan dan bonusmu</p>
                </div>
                <button id="close-modal" class="text-gray-400 hover:text-gray-700">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
            <div id="modal-body" class="text-sm space-y-2 max-h-[65vh] overflow-y-auto pr-1"></div>
        </div>
    </div>
    <div id="deleteModal" class="fixed inset-0 bg-black/40 z-[999] hidden justify-center items-center px-4">
        <div class="bg-white rounded-xl shadow-lg p-5 w-full max-w-sm">
            <h3 class="text-sm font-semibold text-gray-800">Hapus Order</h3>
            <p class="text-xs text-gray-500 mt-1">
                Apakah kamu yakin ingin menghapus order ini?<br>
                Tindakan ini tidak dapat dibatalkan.
            </p>

            <div class="flex justify-end gap-2 mt-4">
                <button onclick="closeDeleteModal()"
                    class="px-3 py-1.5 text-xs rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-100">
                    Batal
                </button>

                <button id="confirmDeleteBtn"
                    class="px-3 py-1.5 text-xs rounded-lg bg-red-600 text-white hover:bg-red-700">
                    Hapus
                </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/flatpickr"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

    <script>
        const ordersContainer = document.getElementById('orders-container');
        const emptyState = document.getElementById('empty-state');
        const filterPanel = document.getElementById('filter-panel');
        const sortPanel = document.getElementById('sort-panel');
        const toggleFilterBtn = document.getElementById('toggle-filter');
        const toggleSortBtn = document.getElementById('toggle-sort');
        const applyFilterBtn = document.getElementById('apply-filter');
        const modal = document.getElementById('order-modal');
        const modalBody = document.getElementById('modal-body');
        const modalContent = document.getElementById('order-modal-content');
        const closeModalBtn = document.getElementById('close-modal');
        const tabs = document.querySelectorAll('.order-tab');
        const toggleSummaryBtn = document.getElementById('toggle-summary');
        const summarySection = document.getElementById('summary-section');
        const summaryIcon = document.getElementById('summary-icon');

        let summaryVisible = false;
        let currentStatus = 'all';
        let searchQuery = '';
        let filters = {
            payment: '',
            dateRange: null,
            sortBy: 'order_date',
            sortOrder: 'desc'
        };
        let debounceTimer = null;

        let nextPageUrl = null;
        let isLoadingMore = false;

        flatpickr("#date-range", {
            mode: "range",
            dateFormat: "Y-m-d"
        });

        // FIX: Tambah fallback split date
        function splitDateRange(value) {
            if (!value) return [null, null];
            return value.includes(" to ") ? value.split(" to ") : value.split(" ");
        }

        toggleFilterBtn.addEventListener('click', () => {
            sortPanel.classList.remove('show-panel');
            sortPanel.classList.add('hidden-panel');
            filterPanel.classList.toggle('show-panel');
            if (!filterPanel.classList.contains('show-panel')) {
                filterPanel.classList.add('hidden-panel');
            } else {
                filterPanel.classList.remove('hidden-panel');
            }
        });

        toggleSortBtn.addEventListener('click', () => {
            filterPanel.classList.remove('show-panel');
            filterPanel.classList.add('hidden-panel');
            sortPanel.classList.toggle('show-panel');
            if (!sortPanel.classList.contains('show-panel')) {
                sortPanel.classList.add('hidden-panel');
            } else {
                sortPanel.classList.remove('hidden-panel');
            }
        });

        toggleSummaryBtn.addEventListener('click', () => {
            summaryVisible = !summaryVisible;
            summarySection.style.maxHeight = summaryVisible ? '500px' : '0';
            summarySection.style.opacity = summaryVisible ? '1' : '0';
            summaryIcon.style.transform = summaryVisible ? 'rotate(0deg)' : 'rotate(180deg)';
        });

        function showSkeleton() {
            const skeletonCards = Array.from({
                length: 4
            }).map(() => `
            <div class="bg-white rounded-2xl p-4 shadow-sm border border-gray-100">
                <div class="flex justify-between items-start mb-3">
                    <div class="flex-1 space-y-2">
                        <div class="skeleton h-3 w-24 rounded"></div>
                        <div class="skeleton h-2.5 w-32 rounded"></div>
                    </div>
                    <div class="flex flex-col items-end gap-2">
                        <div class="skeleton h-4 w-16 rounded-full"></div>
                        <div class="skeleton h-4 w-20 rounded-full"></div>
                    </div>
                </div>
                <div class="space-y-2 mb-2">
                    <div class="skeleton h-3 w-40 rounded"></div>
                    <div class="skeleton h-2.5 w-28 rounded"></div>
                    <div class="skeleton h-2.5 w-32 rounded"></div>
                </div>
                <div class="border-t pt-2 mt-1 flex justify-between items-center">
                    <div class="skeleton h-3 w-24 rounded"></div>
                    <div class="skeleton h-4 w-20 rounded"></div>
                </div>
            </div>
        `).join('');
            ordersContainer.innerHTML = skeletonCards;
        }

        function hideSkeleton() {
            ordersContainer.innerHTML = '';
        }

        function setActiveTab(status) {
            tabs.forEach(tab => {
                if (tab.dataset.status === status) {
                    tab.classList.add('bg-[#B91C1C]', 'text-white');
                    tab.classList.remove('bg-gray-100', 'text-gray-600');
                } else {
                    tab.classList.add('bg-gray-100', 'text-gray-600');
                    tab.classList.remove('bg-[#B91C1C]', 'text-white');
                }
            });
            currentStatus = status;

            nextPageUrl = null;

            loadOrders();
        }

        let deleteOrderId = null;

        function openDeleteModal(orderId, event) {
            event.stopPropagation();
            deleteOrderId = orderId;

            const modal = document.getElementById('deleteModal');
            modal.classList.remove('hidden');
            modal.classList.add('flex');
        }

        function closeDeleteModal() {
            deleteOrderId = null;

            const modal = document.getElementById('deleteModal');
            modal.classList.add('hidden');
            modal.classList.remove('flex');
        }

        document.getElementById('confirmDeleteBtn').addEventListener('click', async () => {
            if (!deleteOrderId) return;

            try {
                const res = await axios.delete(`/orders/delete/${deleteOrderId}`);

                if (res.data.success) {
                    closeDeleteModal();
                    alert('Order berhasil dihapus.');
                    ordersContainer.innerHTML = '';
                    loadOrders();
                } else {
                    alert(res.data.message || 'Gagal menghapus order.');
                }
            } catch (e) {
                console.error(e);
                alert('Terjadi kesalahan saat menghapus order.');
            }
        });

        async function loadOrders(isLoadMore = false) {
            if (!isLoadMore) {
                showSkeleton();
                emptyState.classList.add('hidden');
            }

            try {
                const params = new URLSearchParams({
                    status: currentStatus,
                    search: searchQuery,
                    payment_method: filters.payment,
                    sort_by: filters.sortBy,
                    sort_order: filters.sortOrder
                });

                if (filters.dateRange) {
                    const [from, to] = splitDateRange(filters.dateRange);
                    if (from) params.append('from', from);
                    if (to) params.append('to', to);
                }

                const url = isLoadMore && nextPageUrl ? nextPageUrl : `/orders/list?${params.toString()}`;
                const res = await axios.get(url);

                const summary = res.data.summary || {};
                const paginated = res.data.data || {};
                const orders = paginated.data || [];

                // FIX PAGINATION
                nextPageUrl = paginated.next_page_url;

                document.getElementById('total-all').textContent = summary.total || 0;
                document.getElementById('total-pending').textContent = summary.pending || 0;
                document.getElementById('total-approved').textContent = summary.approved || 0;
                document.getElementById('total-rejected').textContent = summary.rejected || 0;

                document.getElementById('bonus-pending').textContent =
                    `Rp ${(summary.bonus_pending || 0).toLocaleString('id-ID')}`;
                document.getElementById('total-bonus').textContent =
                    `Rp ${(summary.total_bonus || 0).toLocaleString('id-ID')}`;

                if (!orders.length && !isLoadMore) {
                    hideSkeleton();
                    emptyState.classList.remove('hidden');
                    ordersContainer.innerHTML = '';
                    return;
                }

                if (isLoadMore) {
                    appendOrders(orders);
                } else {
                    renderOrders(orders);
                }

            } catch (e) {
                if (!isLoadMore) {
                    hideSkeleton();
                    emptyState.classList.add('hidden');
                    ordersContainer.innerHTML = `
                <div class="text-center py-8">
                    <p class="text-[#B91C1C] font-medium text-sm">Gagal memuat data</p>
                    <p class="text-xs text-gray-400 mt-1">Periksa koneksi internet kamu lalu coba lagi.</p>
                    <button onclick="loadOrders()"
                        class="mt-3 inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-xs font-medium bg-[#FFECEC] text-[#B91C1C] hover:bg-[#FFDADA] transition">
                        Coba lagi
                    </button>
                </div>
                `;
                }
            }
        }

        function renderOrders(orders) {
            hideSkeleton();
            emptyState.classList.add('hidden');

            ordersContainer.innerHTML =
                orders.map(order => orderCard(order)).join('');

            bindOrderClick();
        }

        function appendOrders(orders) {
            ordersContainer.insertAdjacentHTML(
                'beforeend',
                orders.map(order => orderCard(order)).join('')
            );
            bindOrderClick();
        }

        function orderCard(order) {

            const statusColor =
                order.status === 'approved' ?
                'bg-green-100 text-green-700' :
                order.status === 'pending' ?
                'bg-yellow-100 text-yellow-700' :
                'bg-[#FFECEC] text-[#B91C1C]';

            const sourceColor =
                order.order_source === 'marketplace' ?
                'bg-orange-100 text-orange-700' :
                'bg-blue-100 text-blue-700';

            const sourceLabel =
                order.order_source === 'marketplace' ? 'Marketplace' : 'Everpro';

            const bonusColor =
                order.bonus_status === 'approved' ?
                'bg-green-100 text-green-700' :
                'bg-yellow-100 text-yellow-700';

            const mp = order.marketplace;

            const mpInfo = mp ? `
        <div class="text-[11px] text-gray-600 mt-1">
            <span class="font-semibold">${mp.platform}</span> • ${mp.shop_name}<br>
            No Pesanan: ${mp.order_no}<br>
            Ekspedisi: ${mp.logistic_name}<br>
            Ongkir: Rp ${Number(mp.shipping_cost).toLocaleString('id-ID')}
        </div>` : '';

            const productList =
                order.product?.map(p => `
            <div class="flex justify-between text-[11px] text-gray-700">
                <span class="truncate pr-2">${p.sku}</span>
                <span>x${p.qty} • ${p.price}</span>
            </div>
        `).join('') || '';

            const awbText = order.awb_number ?
                `<div class="text-[11px] text-gray-600 mt-1">Resi: <span class="font-semibold">${order.awb_number}</span></div>` :
                '';

            const safeData = encodeURIComponent(JSON.stringify(order));

            return `
                <div class="order-card bg-white rounded-2xl p-4 shadow-sm border border-gray-100 cursor-pointer hover:shadow-md transition"
                    data-order='${safeData}'>

                    <div class="flex justify-between items-start mb-3">
                        <div class="flex-1 min-w-0">
                            <p class="font-semibold text-gray-900 text-sm truncate">#${order.id}</p>
                            <p class="text-[11px] text-gray-400 mt-0.5">${order.date}</p>
                        </div>
                        <div class="flex flex-col items-end gap-1">
                            <span class="text-[10px] font-medium px-2.5 py-1 rounded-full ${sourceColor}">
                                ${sourceLabel}
                            </span>
                            <span class="text-[10px] font-medium px-2.5 py-1 rounded-full uppercase ${statusColor}">
                                ${order.status}
                            </span>
                        </div>
                    </div>

                    <div class="text-sm mb-2">
                        <p class="font-medium text-gray-900 text-xs">${order.receiver.name}</p>
                        <p class="text-[11px] text-gray-500">${order.receiver.phone}</p>
                        <p class="text-[11px] text-gray-400 truncate">${order.receiver.address}</p>

                        ${awbText}
                        ${mpInfo}
                    </div>

                    ${productList ? `
                                <div class="border-t pt-2 mt-1 space-y-1">
                                    <p class="text-[11px] text-gray-500 mb-1">Produk</p>
                                    ${productList}
                                </div>` : ''}

                    <div class="flex justify-between items-center text-[11px] border-t pt-2 mt-2">
                        <span class="text-gray-600">Metode: <span class="font-semibold">${order.payment}</span></span>
                        <span class="text-[#B91C1C] font-bold text-sm">${order.total}</span>
                    </div>

                    <div class="mt-2 flex justify-between items-center">
                        <span class="text-gray-600 text-[12px] font-semibold">Komisi:</span>

                        <div class="flex items-center gap-2">
                            <span class="text-green-600 font-bold text-sm">${order.estimated_bonus}</span>

                            <span class="px-2 py-0.5 rounded-full text-[10px] ${bonusColor}">
                                ${order.bonus_status}
                            </span>
                        </div>
                    </div>
                    ${
                        sourceLabel === 'Marketplace' && order.status === 'pending'
                            ? `
                                <div class="mt-3 flex items-center gap-2">

                                    ${
                                        sourceLabel === 'Marketplace'
                                            ? `
                                                <a 
                                                    onclick="event.stopPropagation(); window.location.href='/orders/marketplace/${order.id}/edit'"
                                                    class="flex-1 px-3 py-1.5 bg-yellow-50 text-yellow-600 text-[11px] font-semibold rounded-lg border border-yellow-200 hover:bg-yellow-100 transition text-center">
                                                    Edit
                                                </a>
                                            `
                                            : ''
                                    }

                                    ${
                                        order.status === 'pending'
                                            ? `
                                                <button 
                                                    onclick="event.stopPropagation(); openDeleteModal('${order.id}', event)"
                                                    class="flex-1 px-3 py-1.5 bg-red-50 text-red-600 text-[11px] font-semibold rounded-lg border border-red-200 hover:bg-red-100 transition">
                                                    Hapus
                                                </button>
                                            `
                                            : ''
                                    }

                                </div>
                            `
                            : ''
                    }

                     ${
                        order.status === 'pending' && sourceLabel === 'Everpro'
                            ? `
                                        <button 
                                            onclick="event.stopPropagation(); openDeleteModal('${order.id}', event)"
                                            class="mt-3 w-full px-3 py-1.5 bg-red-50 text-red-600 text-[11px] font-semibold rounded-lg border border-red-100 hover:bg-red-100 transition">
                                            Hapus Order
                                        </button>
                                    `
                            : ''
                    }


                </div>
                `;
        }



        function bindOrderClick() {
            document.querySelectorAll('.order-card').forEach(card => {
                card.addEventListener('click', () => {
                    const order = JSON.parse(decodeURIComponent(card.dataset.order));
                    openModal(order);
                });
            });
        }

        window.addEventListener('scroll', () => {
            if (isLoadingMore || !nextPageUrl) return;

            const scrollPosition = window.innerHeight + window.scrollY;
            const threshold = document.body.offsetHeight - 300;

            if (scrollPosition >= threshold) {
                isLoadingMore = true;
                loadOrders(true).then(() => (isLoadingMore = false));
            }
        });

        function closeModal() {
            modalContent.classList.add('translate-y-full');
            setTimeout(() => modal.classList.add('hidden'), 300);
        }

        closeModalBtn.addEventListener('click', closeModal);
        modal.addEventListener('click', e => {
            if (e.target === modal) closeModal();
        });

        document.getElementById('search-input').addEventListener('input', e => {
            clearTimeout(debounceTimer);
            debounceTimer = setTimeout(() => {
                searchQuery = e.target.value;
                nextPageUrl = null;
                loadOrders();
            }, 400);
        });

        applyFilterBtn.addEventListener('click', () => {
            filters.payment = document.getElementById('payment-filter').value;
            filters.dateRange = document.getElementById('date-range').value;

            filterPanel.classList.remove('show-panel');
            filterPanel.classList.add('hidden-panel');

            nextPageUrl = null;
            loadOrders();
        });

        document.querySelectorAll('.sort-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                const [sortBy, sortOrder] = btn.dataset.sort.split('-');
                filters.sortBy = sortBy;
                filters.sortOrder = sortOrder;

                sortPanel.classList.remove('show-panel');
                sortPanel.classList.add('hidden-panel');

                nextPageUrl = null;
                loadOrders();
            });
        });

        tabs.forEach(tab =>
            tab.addEventListener('click', () => setActiveTab(tab.dataset.status))
        );

        setActiveTab('all');

        function openModal(order) {
            modal.classList.remove('hidden');
            setTimeout(() => modalContent.classList.remove('translate-y-full'), 10);

            const mp = order.marketplace; // FIX TYPO

            const mpInfo = mp ? `
            <div>
                <p class="text-xs text-gray-500 mt-3 mb-1">Marketplace</p>
                <p class="text-sm"><b>${mp.platform}</b> - ${mp.shop_name}</p>
                <p class="text-xs text-gray-600">No Pesanan: ${mp.order_no}</p>
                <p class="text-xs text-gray-600">Ekspedisi: ${mp.logistic_name}</p>
                <p class="text-xs text-gray-600">Ongkir: Rp ${Number(mp.shipping_cost).toLocaleString('id-ID')}</p>
            </div>` :
                '';

            const productList = order.product?.map(p => `
            <li class="text-xs text-gray-700">
                ${p.name} (<span class="font-mono">${p.sku}</span>) - x${p.qty} - ${p.price}
            </li>
        `).join('') || '<li class="text-xs text-gray-400">Tidak ada data produk</li>';

            const awbInfo = order.awb_number ? `
            <div>
                <p class="text-xs text-gray-500 mt-3 mb-1">Nomor Resi</p>
                <p class="text-sm font-medium">${order.awb_number}</p>
            </div>` : '';

            const bonusInfo = `
            <div>
                <p class="text-xs text-gray-500 mt-3 mb-1">Bonus</p>
                <p class="text-xs">Status: <span class="font-medium">${order.bonus_status}</span></p>
                <p class="text-xs">Estimasi: ${order.estimated_bonus || '-'}</p>
                <p class="text-xs">Final: ${order.final_bonus || '-'}</p>
            </div>`;

            modalBody.innerHTML = `
            <div class="space-y-3">
                <div>
                    <p class="text-xs text-gray-500 mb-1">Order ID</p>
                    <p class="text-sm font-medium">#${order.id}</p>
                </div>
                <div>
                    <p class="text-xs text-gray-500 mb-1">Tanggal</p>
                    <p class="text-sm">${order.date}</p>
                </div>
                <div>
                    <p class="text-xs text-gray-500 mb-1">Sumber</p>
                    <p class="text-sm capitalize">${order.order_source}</p>
                </div>
                <div>
                    <p class="text-xs text-gray-500 mb-1">Penerima</p>
                    <p class="text-sm font-medium">${order.receiver.name}</p>
                    <p class="text-xs text-gray-500">${order.receiver.phone}</p>
                    <p class="text-xs text-gray-500">${order.receiver.address}</p>
                </div>

                ${awbInfo}

                <div>
                    <p class="text-xs text-gray-500 mt-3 mb-1">Metode Pembayaran</p>
                    <p class="text-sm font-medium">${order.payment}</p>
                </div>
                <div>
                    <p class="text-xs text-gray-500 mt-3 mb-1">Total Pembayaran</p>
                    <p class="text-sm font-bold text-[#B91C1C]">${order.total}</p>
                </div>

                ${bonusInfo}
                ${mpInfo}

                <div>
                    <p class="text-xs text-gray-500 mt-3 mb-1">Produk</p>
                    <ul class="list-disc pl-5 space-y-1">
                        ${productList}
                    </ul>
                </div>
            </div>
        `;
        }
    </script>
@endpush