@extends('mobile.template.app')

@section('content')
    <div class="p-4 space-y-4 view-transition">
        {{-- 🔹 Ringkasan Order --}}
        <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>

        {{-- 🔹 Bonus Info --}}
        <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>

        {{-- 🔹 Filter dan Sort --}}
        <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 / marketplace...">
            </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>

        {{-- 🔹 Filter Panel --}}
        <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>

            <select id="source-filter"
                class="w-full text-sm border border-gray-300 rounded-lg p-2 focus:ring-2 focus:ring-indigo-500">
                <option value="">Semua Sumber</option>
                <option value="everpro">Everpro</option>
                <option value="marketplace">Marketplace</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>

        {{-- 🔹 Sort Panel --}}
        <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>

        {{-- 🔹 Tab Status --}}
        <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>

        {{-- 🔹 Kontainer Orders --}}
        <div id="orders-container" class="space-y-3"></div>

        {{-- 🔹 Empty State --}}
        <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>

    {{-- 🔹 Modal Detail Order --}}
    <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: '',
                source: '',
                dateRange: null,
                sortBy: 'order_date',
                sortOrder: 'desc'
            },
            debounceTimer = null,
            selectedOrder = null

        // ⭐ DELETE MODAL ELEMENT
        let deleteModal = null

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

        toggleFilterBtn.onclick = () => {
            sortPanel.classList.add('hidden');
            filterPanel.classList.toggle('hidden')
        }
        toggleSortBtn.onclick = () => {
            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')
                } else {
                    tab.classList.add('bg-gray-100', 'text-gray-600')
                    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,
                    order_source: filters.source,
                    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/marketplace/list?${params}`)

                const summary = res.data.summary || {}
                const orders = res.data.data?.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 text-red-500 font-medium">
                Gagal memuat data
            </div>`
            }
        }

        function renderOrders(orders) {
            ordersContainer.innerHTML = orders.map(order => {

                // ⭐ TAMBAHKAN EDIT & DELETE BUTTON UNTUK PENDING
                const actionButtons = order.status === 'pending' ? `
            <div class="flex gap-2 mt-3">
                <button data-edit="${order.id}" 
                        class="text-indigo-600 text-xs font-semibold underline edit-btn">
                    Edit
                </button>
                <button data-del="${order.id}" 
                        class="text-red-600 text-xs font-semibold underline delete-btn">
                    Hapus
                </button>
            </div>
        ` : ''

                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='${JSON.stringify(order)}'>

            <div class="flex justify-between items-start">
                <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] px-2 py-1 rounded-full font-medium uppercase 
                    ${order.status === 'pending' ? 'bg-yellow-100 text-yellow-700'
                      : order.status === 'approved' ? 'bg-green-100 text-green-700'
                      : 'bg-red-100 text-red-700'}">
                    ${order.status}
                </span>
            </div>

            <div class="text-sm mt-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>
            </div>

            ${actionButtons}
        </div>`
            }).join('')

            // ⭐ EVENT HANDLER EDIT
            document.querySelectorAll('.edit-btn').forEach(btn => {
                btn.addEventListener('click', e => {
                    e.stopPropagation()
                    window.location.href = `/orders/marketplace/${btn.dataset.edit}/edit`
                })
            })

            // ⭐ EVENT HANDLER DELETE
            document.querySelectorAll('.delete-btn').forEach(btn => {
                btn.addEventListener('click', e => {
                    e.stopPropagation()
                    confirmDelete(btn.dataset.del)
                })
            })

            document.querySelectorAll('.order-card').forEach(card =>
                card.addEventListener('click', () => openModal(JSON.parse(card.dataset.order)))
            )
        }

        function confirmDelete(id) {
            if (deleteModal) deleteModal.remove()

            deleteModal = document.createElement("div")
            deleteModal.className = `
        fixed inset-0 bg-black/50 flex items-end justify-center z-50
    `
            deleteModal.innerHTML = `
        <div class="bg-white w-full p-5 rounded-t-2xl shadow-lg">
            <p class="text-center font-semibold text-gray-800 mb-4">
                Hapus order ini?
            </p>

            <div class="flex gap-3">
                <button class="w-1/2 py-2 rounded-xl bg-gray-200 font-medium"
                        onclick="this.closest('.fixed').remove()">
                    Batal
                </button>

                <button id="confirm-del" 
                        class="w-1/2 py-2 rounded-xl bg-red-600 text-white font-medium">
                    Hapus
                </button>
            </div>
        </div>
    `

            document.body.appendChild(deleteModal)

            deleteModal.querySelector('#confirm-del').onclick = async () => {
                try {
                    await axios.delete(`/orders/marketplace/${id}`)
                    deleteModal.remove()
                    loadOrders()
                } catch (err) {
                    alert("Gagal menghapus!")
                }
            }
        }

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

            modalBody.innerHTML = `
        <p class="text-sm text-gray-500 mb-1">Order ID</p>
        <p class="font-medium">${order.id}</p>

        <p class="text-sm text-gray-500 mt-3 mb-1">Tanggal</p>
        <p>${order.date}</p>

        <p class="text-sm text-gray-500 mt-3 mb-1">Penerima</p>
        <p>${order.receiver.name}</p>
        <p class="text-xs text-gray-500">${order.receiver.phone}</p>

        <p class="text-sm text-gray-500 mt-3 mb-1">Alamat</p>
        <p class="text-xs text-gray-500">${order.receiver.address}</p>
    `
        }

        closeModalBtn.onclick = () => {
            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.onclick = () => {
            filters.payment = document.getElementById('payment-filter').value
            filters.source = document.getElementById('source-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