@extends('mobile.template.app')

@section('content')
    <div class="p-4 space-y-4 view-transition">
        <div id="summary-section" class="grid grid-cols-2 gap-3">
            <div class="bg-white rounded-xl shadow-sm border p-3 text-center">
                <p class="text-gray-500 text-xs">Total Semua</p>
                <p id="total-all" class="text-lg font-bold text-indigo-600">0</p>
            </div>
            <div class="bg-white rounded-xl shadow-sm border p-3 text-center">
                <p class="text-gray-500 text-xs">Pending</p>
                <p id="total-pending" class="text-lg font-bold text-yellow-500">0</p>
            </div>
            <div class="bg-white rounded-xl shadow-sm border p-3 text-center">
                <p class="text-gray-500 text-xs">Disetujui</p>
                <p id="total-approved" class="text-lg font-bold text-green-600">0</p>
            </div>
            <div class="bg-white rounded-xl shadow-sm border p-3 text-center">
                <p class="text-gray-500 text-xs">Ditolak</p>
                <p id="total-rejected" class="text-lg font-bold text-red-500">0</p>
            </div>
        </div>

        <div class="grid grid-cols-2 gap-3">
            <div class="bg-white rounded-xl shadow-sm border p-3 text-center">
                <p class="text-gray-500 text-xs">Bonus Pending</p>
                <p id="bonus-pending" class="text-lg font-bold text-yellow-500">Rp 0</p>
            </div>
            <div class="bg-white rounded-xl shadow-sm border p-3 text-center">
                <p class="text-gray-500 text-xs">Total Bonus</p>
                <p id="total-bonus" class="text-lg font-bold text-green-600">Rp 0</p>
            </div>
        </div>

        <div class="flex gap-2">
            <div class="flex items-center border rounded-lg 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 order...">
            </div>
            <button id="toggle-filter" class="p-2 bg-white border rounded-lg shadow-sm hover:bg-gray-50">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-600" 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 bg-white border rounded-lg shadow-sm hover:bg-gray-50">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-600" 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 bg-white border rounded-lg p-3 shadow-sm space-y-3">
            <select id="payment-filter"
                class="w-full text-sm border border-gray-300 rounded-lg p-2 focus:ring-2 focus:ring-indigo-500">
                <option value="">Semua Payment</option>
                <option value="COD">COD</option>
                <option value="TRANSFER">TRANSFER</option>
            </select>
            <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="Filter tanggal">
            </div>
            <button id="apply-filter"
                class="w-full bg-indigo-600 text-white py-2 rounded-lg font-medium hover:bg-indigo-700 transition">Terapkan
                Filter</button>
        </div>

        <div id="sort-panel" class="hidden bg-white border rounded-lg p-3 shadow-sm space-y-2">
            <p class="text-sm font-semibold text-gray-700">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-indigo-50 py-2 rounded-lg text-sm">Terbaru</button>
                <button data-sort="order_date-asc"
                    class="sort-btn bg-gray-100 hover:bg-indigo-50 py-2 rounded-lg text-sm">Terlama</button>
                <button data-sort="total_payment-desc"
                    class="sort-btn bg-gray-100 hover:bg-indigo-50 py-2 rounded-lg text-sm">Total Tertinggi</button>
                <button data-sort="total_payment-asc"
                    class="sort-btn bg-gray-100 hover:bg-indigo-50 py-2 rounded-lg text-sm">Total Terendah</button>
            </div>
        </div>

        <div class="mb-2">
            <nav class="flex space-x-2 overflow-x-auto no-scrollbar" aria-label="Tabs">
                <button data-status="all"
                    class="order-tab whitespace-nowrap py-2 px-4 rounded-lg font-medium text-sm transition bg-indigo-600 text-white">Semua</button>
                <button data-status="pending"
                    class="order-tab whitespace-nowrap py-2 px-4 rounded-lg font-medium text-sm transition bg-gray-100 text-gray-600 hover:bg-gray-200">Pending</button>
                <button data-status="approved"
                    class="order-tab whitespace-nowrap py-2 px-4 rounded-lg font-medium text-sm transition bg-gray-100 text-gray-600 hover:bg-gray-200">Disetujui</button>
                <button data-status="rejected"
                    class="order-tab whitespace-nowrap py-2 px-4 rounded-lg font-medium text-sm transition bg-gray-100 text-gray-600 hover:bg-gray-200">Ditolak</button>
            </nav>
        </div>

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

        <div id="empty-state" class="hidden text-center py-12">
            <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-500 font-medium">Tidak ada pesanan</p>
            <p class="text-sm text-gray-400 mt-1">Belum ada data pesanan yang sesuai</p>
        </div>
    </div>

    <div id="order-modal" class="fixed inset-0 bg-black bg-opacity-40 hidden z-50 flex justify-center items-end">
        <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">
                <h2 class="text-lg font-bold text-gray-800">Detail Pesanan</h2>
                <button id="close-modal" class="text-gray-500 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"></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 tabs = document.querySelectorAll('.order-tab')
        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')
        let currentStatus = 'all',
            searchQuery = '',
            filters = {
                payment: '',
                dateRange: null,
                sortBy: 'order_date',
                sortOrder: 'desc'
            },
            debounceTimer = null

        flatpickr("#date-range", {
            mode: "range",
            dateFormat: "Y-m-d"
        })
        toggleFilterBtn.addEventListener('click', () => {
            sortPanel.classList.add('hidden');
            filterPanel.classList.toggle('hidden')
        })
        toggleSortBtn.addEventListener('click', () => {
            filterPanel.classList.add('hidden');
            sortPanel.classList.toggle('hidden')
        })

        function setActiveTab(status) {
            tabs.forEach(tab => {
                if (tab.dataset.status === status) {
                    tab.classList.add('bg-indigo-600', 'text-white');
                    tab.classList.remove('bg-gray-100', 'text-gray-600', 'hover:bg-gray-200')
                } else {
                    tab.classList.add('bg-gray-100', 'text-gray-600', 'hover:bg-gray-200');
                    tab.classList.remove('bg-indigo-600', 'text-white')
                }
            });
            currentStatus = status;
            loadOrders()
        }

        function renderSkeleton() {
            ordersContainer.innerHTML = Array(3).fill().map(() =>
                `<div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100 animate-pulse"><div class="flex justify-between items-start mb-3"><div class="flex-1"><div class="h-4 bg-gray-200 rounded w-1/3 mb-2"></div><div class="h-3 bg-gray-200 rounded w-1/4"></div></div><div class="h-6 bg-gray-200 rounded-full w-20"></div></div></div>`
                ).join('');
            emptyState.classList.add('hidden')
        }

        async function loadOrders() {
            renderSkeleton()
            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] = filters.dateRange.split(' to ');
                    if (from) params.append('from', from);
                    if (to) params.append('to', to)
                }
                const res = await axios.get(`/orders/list?${params}`)
                const summary = res.data.summary || {}
                const paginated = res.data.data || {}
                const orders = paginated.data || []
                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) {
                    ordersContainer.innerHTML = '';
                    emptyState.classList.remove('hidden');
                    return
                }
                emptyState.classList.add('hidden');
                renderOrders(orders)
            } catch {
                ordersContainer.innerHTML =
                    `<div class="text-center py-8"><p class="text-red-500 font-medium">Gagal memuat data</p><button onclick="loadOrders()" class="mt-2 text-indigo-600 hover:underline">Coba lagi</button></div>`
            }
        }

        function renderOrders(orders) {
            ordersContainer.innerHTML = orders.map(order => {
                const statusColor = order.status === 'approved' ? 'bg-green-100 text-green-700' : order.status ===
                    'pending' ? 'bg-yellow-100 text-yellow-700' : 'bg-red-100 text-red-700'
                const bonusText = order.bonus_status === 'pending' && order.estimated_bonus ?
                    `<div class="mt-2 text-xs bg-yellow-50 border border-yellow-100 rounded-lg px-2 py-1 text-yellow-700 font-medium inline-block">Estimasi Komisi: <span class="font-semibold">${order.estimated_bonus}</span></div>` :
                    order.final_bonus ?
                    `<div class="mt-2 text-xs bg-green-50 border border-green-100 rounded-lg px-2 py-1 text-green-700 font-medium inline-block">Bonus Diterima: <span class="font-semibold">${order.final_bonus}</span></div>` :
                    ''
                const awbText = order.awb_number ?
                    `<div class="text-xs text-gray-600 mt-1">Nomor Resi: <span class="font-semibold">${order.awb_number}</span></div>` :
                    ''
                return `<div class="order-card bg-white rounded-2xl p-4 shadow-sm border border-gray-100 cursor-pointer hover:shadow-md transition transform active:scale-[0.99]" data-order='${JSON.stringify(order)}'><div class="flex justify-between items-start mb-3"><div class="flex-1"><p class="font-semibold text-gray-800 text-sm">${order.id}</p><p class="text-xs text-gray-400 mt-0.5">${order.date}</p></div><span class="text-[10px] font-medium px-2.5 py-1 rounded-full uppercase ${statusColor}">${order.status}</span></div><div class="text-sm mb-2"><p class="font-medium text-gray-900">${order.receiver.name}</p><p class="text-xs text-gray-500">${order.receiver.phone}</p><p class="text-xs text-gray-400 truncate">${order.receiver.address}</p>${awbText}</div><div class="flex justify-between text-xs border-t pt-2"><span class="text-gray-600">Metode: <b>${order.payment}</b></span><span class="text-indigo-600 font-bold">${order.total}</span></div><div class="flex justify-between text-xs mt-2"><span class="text-gray-600">Bonus: <b class="capitalize">${order.bonus_status}</b></span></div>${bonusText}</div>`
            }).join('')
            document.querySelectorAll('.order-card').forEach(card => card.addEventListener('click', () => openModal(JSON
                .parse(card.dataset.order))))
        }

        function openModal(order) {
            modal.classList.remove('hidden')
            setTimeout(() => {
                modalContent.classList.remove('translate-y-full')
            }, 10)
            let bonusInfo = ''
            if (order.bonus_status === 'pending' && order.estimated_bonus) {
                bonusInfo =
                    `<p class="text-sm text-gray-500 mt-3 mb-1">Estimasi Komisi</p><p class="font-bold text-yellow-600">${order.estimated_bonus}</p>`
            } else if (order.final_bonus) {
                bonusInfo =
                    `<p class="text-sm text-gray-500 mt-3 mb-1">Bonus Akhir</p><p class="font-bold text-green-600">${order.final_bonus}</p>`
            }
            const awbInfo = order.awb_number ?
                `<div><p class="text-sm text-gray-500 mt-3 mb-1">Nomor Resi</p><p class="font-medium">${order.awb_number}</p></div>` :
                ''
            modalBody.innerHTML =
                `<div class="divide-y divide-gray-100 space-y-3"><div><p class="text-sm text-gray-500 mb-1">Order ID</p><p class="font-medium">${order.id}</p></div><div><p class="text-sm text-gray-500 mt-3 mb-1">Tanggal</p><p>${order.date}</p></div><div><p class="text-sm text-gray-500 mt-3 mb-1">Penerima</p><p>${order.receiver.name}</p><p class="text-xs text-gray-400">${order.receiver.phone}</p></div><div><p class="text-sm text-gray-500 mt-3 mb-1">Alamat</p><p>${order.receiver.address}</p></div>${awbInfo}<div><p class="text-sm text-gray-500 mt-3 mb-1">Metode Pembayaran</p><p>${order.payment}</p></div><div><p class="text-sm text-gray-500 mt-3 mb-1">Total Pembayaran</p><p class="font-bold text-indigo-600">${order.total}</p></div><div><p class="text-sm text-gray-500 mt-3 mb-1">Status Bonus</p><p class="font-medium capitalize">${order.bonus_status}</p></div>${bonusInfo}</div>`
        }

        closeModalBtn.addEventListener('click', () => {
            modalContent.classList.add('translate-y-full');
            setTimeout(() => modal.classList.add('hidden'), 300)
        })
        modal.addEventListener('click', e => {
            if (e.target === modal) {
                modalContent.classList.add('translate-y-full');
                setTimeout(() => modal.classList.add('hidden'), 300)
            }
        })
        document.getElementById('search-input').addEventListener('input', e => {
            clearTimeout(debounceTimer);
            debounceTimer = setTimeout(() => {
                searchQuery = e.target.value;
                loadOrders()
            }, 400)
        })
        applyFilterBtn.addEventListener('click', () => {
            filters.payment = document.getElementById('payment-filter').value;
            filters.dateRange = document.getElementById('date-range').value;
            filterPanel.classList.add('hidden');
            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.add('hidden');
                loadOrders()
            })
        })
        tabs.forEach(tab => tab.addEventListener('click', () => setActiveTab(tab.dataset.status)))
        setActiveTab('all')
    </script>
@endpush