@extends('template.desktop.app')
@push('styles')
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        #filterHighlight {
            transition: all 0.35s cubic-bezier(0.68, -0.55, 0.27, 1.55);
            /* bounce */
            height: 32px;
            /* samain dengan py-2 (2*8px padding + line-height) */
        }
    </style>
@endpush

@section('content')
    <main class="mx-auto max-w-12xl">
        <!-- ALERT -->
        <div class="rounded-lg bg-yellow-50 p-4 mb-6 border border-yellow-200">
            <div class="flex">
                <div class="flex-shrink-0">
                    <svg class="h-5 w-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                        fill="currentColor" aria-hidden="true">
                        <path fill-rule="evenodd"
                            d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
                            clip-rule="evenodd" />
                    </svg>
                </div>
                <div class="ml-3">
                    <h3 class="text-sm font-medium text-yellow-800">Perhatian</h3>
                    <div class="mt-2 text-sm text-yellow-700">
                        <p>Ketika orderan dicentang dan dikirim ke Everpro, statusnya akan
                            <strong>otomatis disetujui</strong> (approved). Pastikan Anda telah memeriksa
                            data sebelum melanjutkan.
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div id="processBox"></div>

        <!-- CARD -->
        <div class="bg-white shadow-sm rounded-lg">
            <div class="px-4 sm:px-6 py-4 border-b border-gray-200">
                <div class="flex flex-wrap items-center justify-between gap-4">
                    <div class="w-full md:w-auto">
                        <h1 class="text-lg font-semibold text-gray-900">Manajemen Order</h1>
                        <p class="mt-1 text-sm text-gray-500">Daftar semua order yang masuk.</p>
                    </div>
                    <div class="w-full md:w-auto flex items-center space-x-3">
                        <button
                            class="w-full md:w-auto flex items-center justify-center px-4 py-2 border border-gray-300 rounded-lg shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                            Export Data
                        </button>
                        <button id="inputEverproBtn"
                            class="w-full md:w-auto flex items-center justify-center px-4 py-2 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700">
                            Input Everpro
                        </button>

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

            <!-- FILTER & SEARCH -->
            <div class="px-4 sm:px-6 py-4">
                <div class="flex flex-wrap items-center justify-between gap-4">
                    <div class="relative flex space-x-2 p-1 bg-gray-100 rounded-full overflow-hidden" id="filterWrapper">
                        <!-- Highlight background pill -->
                        <span id="filterHighlight"
                            class="absolute top-1 left-1 rounded-full bg-indigo-200 transition-all duration-300 ease-out transform"></span>

                        <a href="#" onclick="filterOrders('')" id="filter-all"
                            class="filter-btn relative z-10 px-4 py-2 inline-flex items-center justify-center text-sm font-medium rounded-full text-indigo-800">Semua</a>
                        <a href="#" onclick="filterOrders('COD')" id="filter-cod"
                            class="filter-btn relative z-10 px-4 py-2 inline-flex items-center justify-center text-sm font-medium rounded-full text-gray-600">COD</a>
                        <a href="#" onclick="filterOrders('TRANSFER')" id="filter-transfer"
                            class="filter-btn relative z-10 px-4 py-2 inline-flex items-center justify-center text-sm font-medium rounded-full text-gray-600">Bank
                            Transfer</a>
                    </div>




                    <div class="relative w-full sm:w-64">
                        <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                            <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                                fill="currentColor">
                                <path fill-rule="evenodd"
                                    d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
                                    clip-rule="evenodd" />
                            </svg>
                        </div>
                        <input id="searchInput" type="text" placeholder="Search Order..."
                            class="block w-full rounded-full bg-gray-100 border-none pl-10 focus:outline-none focus:ring-0"
                            onkeyup="fetchOrders()" />
                    </div>
                </div>
            </div>

            <!-- TABLE -->
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-center w-12">
                                <input type="checkbox" id="selectAll"
                                    class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase cursor-pointer"
                                onclick="sortOrders('order_code')">Order ID / Tanggal</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase cursor-pointer"
                                onclick="sortOrders('receiver_name')">Customer</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase cursor-pointer"
                                onclick="sortOrders('package_price')">Detail Pembayaran</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase cursor-pointer"
                                onclick="sortOrders('generated_total')">Pembayaran EVP</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase cursor-pointer"
                                onclick="sortOrders('actor_code')">Warehouse</th>
                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Actions</th>
                        </tr>
                    </thead>
                    <tbody id="ordersTable" class="bg-white divide-y divide-gray-200"></tbody>
                </table>
            </div>

            <!-- TOTAL -->
            <div class="px-4 py-3 border-t border-gray-200 sm:px-6">
                <p class="text-sm text-gray-700" id="totalWrapper" style="display:none;">
                    Total data: <span id="total"></span>
                </p>
            </div>
        </div>

        <!-- Loading Overlay -->
        <div id="loadingOverlay"
            class="fixed inset-0 bg-white/70 backdrop-blur-sm hidden z-50 flex items-center justify-center">
            <div class="flex flex-col items-center">
                <svg class="animate-spin h-10 w-10 text-indigo-600 mb-2" xmlns="http://www.w3.org/2000/svg" fill="none"
                    viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4">
                    </circle>
                    <path class="opacity-75" fill="currentColor"
                        d="M4 12a8 8 0 018-8v4l3.5-3.5L12 0v4a8 8 0 000 16v4l3.5-3.5L12 20v-4a8 8 0 01-8-8z">
                    </path>
                </svg>
                <span class="text-sm text-gray-600 animate-pulse">Loading data...</span>
            </div>
        </div>

    </main>
@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 currentMethod = '';
        let searchQuery = '';
        let sortField = '';
        let sortDirection = 'asc';
        const baseUrl = "/admin/temp/orders/fetch";
        let selectedOrders = new Set();
        let orderMap = {};

        function showLoading() {
            document.getElementById("loadingOverlay").classList.remove("hidden");
        }

        function hideLoading() {
            document.getElementById("loadingOverlay").classList.add("hidden");
        }

        async function fetchOrders() {
            searchQuery = document.getElementById("searchInput").value;
            try {
                showLoading();
                const res = await axios.get(baseUrl, {
                    params: {
                        search: searchQuery,
                        method: currentMethod,
                        sort_field: sortField,
                        sort_direction: sortDirection
                    }
                });
                const {
                    orders,
                    total
                } = res.data;
                orders.forEach(o => orderMap[o.id] = o);
                renderOrders(orders);
                renderTotal(total);
            } catch (err) {
                console.error(err);
            } finally {
                hideLoading();
            }
        }

        function renderOrders(orders) {
            const tbody = document.getElementById("ordersTable");
            tbody.innerHTML = "";
            orders.forEach(order => {
                tbody.innerHTML += `
                <tr>
                    <td class="px-6 py-4 text-center">
                        <input 
                            type="checkbox" 
                            class="order-checkbox h-4 w-4 rounded border-gray-300 text-indigo-600"
                            data-id="${order.id}"
                            ${selectedOrders.has(order.id) ? "checked" : ""}>
                    </td>
                    <td class="px-6 py-4">
                        <div class="text-sm font-medium text-gray-900">#${order.order_code}</div>
                        <div class="text-sm text-gray-500">${order.created_at}</div>
                    </td>
                    <td class="px-6 py-4">
                        <div class="text-sm font-medium text-gray-900">${order.receiver_name}</div>
                        <div class="text-sm text-gray-500">${order.customer_service.full_name}</div>
                    </td>
                    <td class="px-6 py-4">
                        <div class="text-sm font-medium text-gray-900">Rp ${order.package_price}</div>
                        <div class="mt-1">
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium 
                                ${order.payment_method === 'COD' ? 'bg-green-100 text-green-800' : 'bg-blue-100 text-blue-800'}">
                                ${order.payment_method}
                            </span>
                        </div>
                    </td>
                    <td class="px-6 py-4">
                        <div class="text-sm text-gray-900">
                            <div class="text-sm font-medium text-gray-900">
                            Rp ${order.generated_total}
                            </div>
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                    ${order.difference >= 0 ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}">
                                ${order.difference}
                            </span>
                        </div>
                    </td>

                    <td class="px-6 py-4 text-sm text-gray-500">${order.actor.code}</td>
                    <td class="px-6 py-4 text-right space-x-2">
                        <a href="/admin/temp/orders/${order.id}/detail" class="text-gray-600 hover:text-gray-900 font-medium py-1 px-3 rounded-lg border border-gray-300 bg-white hover:bg-gray-50">Detail</a>
                        <button class="text-red-600 hover:text-red-900 font-medium py-1 px-3 rounded-lg border border-red-300 bg-white hover:bg-red-50" onclick="rejectOrder(${order.id})">Tolak</button>
                    </td>
                </tr>
            `;
            });
            attachCheckboxEvents();
        }

        function renderTotal(total) {
            const wrapper = document.getElementById("totalWrapper");
            if (total !== undefined && total !== null) {
                wrapper.style.display = "block";
                document.getElementById("total").innerText = total;
            } else {
                wrapper.style.display = "none";
            }
        }

        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(`/admin/temp/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');
                        });
                }
            });
        }

        function moveHighlight(target) {
            const highlight = document.getElementById("filterHighlight");
            const wrapper = document.getElementById("filterWrapper");
            const rect = target.getBoundingClientRect();
            const wrapperRect = wrapper.getBoundingClientRect();
            highlight.style.width = `${rect.width}px`;
            highlight.style.height = `${rect.height}px`;
            highlight.style.transform = `translateX(${rect.left - wrapperRect.left}px)`;
        }

        function filterOrders(method) {
            currentMethod = method;
            fetchOrders();
            document.querySelectorAll('.filter-btn').forEach(btn => {
                btn.classList.remove("text-indigo-800");
                btn.classList.add("text-gray-600");
            });
            let activeBtn = null;
            if (method === '') activeBtn = document.getElementById("filter-all");
            if (method === 'COD') activeBtn = document.getElementById("filter-cod");
            if (method === 'TRANSFER') activeBtn = document.getElementById("filter-transfer");
            if (activeBtn) {
                activeBtn.classList.add("text-indigo-800");
                activeBtn.classList.remove("text-gray-600");
                moveHighlight(activeBtn);
            }
        }

        window.addEventListener("DOMContentLoaded", () => {
            moveHighlight(document.getElementById("filter-all"));
        });

        function sortOrders(field) {
            if (sortField === field) {
                sortDirection = sortDirection === 'asc' ? 'desc' : 'asc';
            } else {
                sortField = field;
                sortDirection = 'asc';
            }
            fetchOrders();
        }

        function attachCheckboxEvents() {
            const selectAll = document.getElementById("selectAll");
            const checkboxes = document.querySelectorAll(".order-checkbox");
            selectAll.onchange = () => {
                if (selectAll.checked) {
                    checkboxes.forEach(cb => {
                        cb.checked = true;
                        selectedOrders.add(parseInt(cb.dataset.id));
                    });
                } else {
                    checkboxes.forEach(cb => {
                        cb.checked = false;
                        selectedOrders.delete(parseInt(cb.dataset.id));
                    });
                }
                updateSelectAllState();
            };
            checkboxes.forEach(cb => {
                cb.onchange = () => {
                    const id = parseInt(cb.dataset.id);
                    if (cb.checked) {
                        selectedOrders.add(id);
                    } else {
                        selectedOrders.delete(id);
                    }
                    updateSelectAllState();
                };
            });
            updateSelectAllState();
        }

        function updateSelectAllState() {
            const selectAll = document.getElementById("selectAll");
            const checkboxes = document.querySelectorAll(".order-checkbox");
            const checked = document.querySelectorAll(".order-checkbox:checked").length;
            if (checked === 0) {
                selectAll.checked = false;
                selectAll.indeterminate = false;
            } else if (checked === checkboxes.length) {
                selectAll.checked = true;
                selectAll.indeterminate = false;
            } else {
                selectAll.checked = false;
                selectAll.indeterminate = true;
            }
        }

        document.getElementById('inputEverproBtn').addEventListener('click', async function() {
            const selectedIds = Array.from(selectedOrders);
            if (selectedIds.length === 0) {
                return Swal.fire('Peringatan', 'Silakan pilih minimal 1 order.', 'warning');
            }

            const total = selectedIds.length;
            const estSeconds = total * 1;
            const box = document.getElementById('processBox');
            box.innerHTML = `
        <div class="container-main mb-6 p-4 bg-white rounded-lg shadow-md border border-gray-200">
            <div class="w-full h-8 bg-gray-200 rounded-full mb-4 relative overflow-hidden">
                <div id="progressBar" class="h-full bg-green-500 rounded-full flex items-center justify-center transition-all duration-300" style="width: 0%;">
                    <span id="progressText" class="text-xs font-semibold text-white">0%</span>
                </div>
            </div>
            <div class="flex justify-between text-sm text-gray-600 mb-4">
                <span>Total: ${total}</span>
                <span id="processedText">Processed: 0</span>
                <span>Estimasi: ${estSeconds} detik</span>
            </div>
            <div class="overflow-x-auto max-h-72 border rounded-lg">
                <table class="min-w-full divide-y divide-gray-200 text-sm">
                    <thead class="bg-gray-100 sticky top-0">
                        <tr>
                            <th class="px-4 py-2 text-left">ORDER CODE</th>
                            <th class="px-4 py-2 text-left">CUSTOMER</th>
                            <th class="px-4 py-2 text-left">CS</th>
                            <th class="px-4 py-2 text-left">MESSAGE</th>
                            <th class="px-4 py-2 text-left">STATUS</th>
                        </tr>
                    </thead>
                    <tbody id="resultTable" class="divide-y divide-gray-200"></tbody>
                </table>
            </div>
            <div id="summaryBox" class="mt-4 text-sm text-gray-700 hidden"></div>
        </div>
    `;

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

            for (let i = 0; i < total; i++) {
                const orderId = selectedIds[i];
                const order = orderMap[orderId];
                let statusHtml = '';
                let messageText = '';

                try {
                    const response = await axios.post('/admin/temp/orders/store/everpro', {
                        order_id: orderId
                    });
                    messageText = response.data.message || '-';
                    if (response.data.status === 'success') {
                        success.push(orderId);
                        statusHtml =
                            `<span class="px-2 py-1 rounded-full text-xs bg-green-500 text-white">Input</span>`;
                    } else {
                        failed.push(orderId);
                        statusHtml =
                            `<span class="px-2 py-1 rounded-full text-xs bg-red-500 text-white">Error</span>`;
                    }
                } catch (err) {
                    failed.push(orderId);
                    messageText = err.response?.data?.message || 'Error sistem';
                    statusHtml =
                        `<span class="px-2 py-1 rounded-full text-xs bg-red-500 text-white">Error</span>`;
                }

                document.getElementById('resultTable').innerHTML += `
        <tr class="bg-white">
            <td class="px-4 py-2 text-gray-800">#${order.order_code}</td>
            <td class="px-4 py-2 text-gray-800">${order.receiver_name}</td>
            <td class="px-4 py-2 text-gray-800">${order.customer_service?.full_name || '-'}</td>
            <td class="px-4 py-2 ${statusHtml.includes('red') ? 'text-red-600' : 'text-gray-600'}">${messageText}</td>
            <td class="px-4 py-2">${statusHtml}</td>
        </tr>
    `;

                const processed = i + 1;
                const percent = Math.round((processed / total) * 100);
                document.getElementById('progressBar').style.width = percent + '%';
                document.getElementById('progressText').innerText = percent + '%';
                document.getElementById('processedText').innerText = `Processed: ${processed}`;
            }

            // setelah loop selesai, pastikan progress bar 100% fix
            document.getElementById('progressBar').style.width = '100%';
            document.getElementById('progressText').innerText = '100%';
            document.getElementById('processedText').innerText = `Processed: ${total}`;


            const summaryBox = document.getElementById('summaryBox');
            summaryBox.classList.remove('hidden');
            summaryBox.innerHTML = `
        <p><strong>Total:</strong> ${total}</p>
        <p><strong>Berhasil:</strong> ${success.length}</p>
        <p><strong>Gagal:</strong> ${failed.length}</p>
        <div class="flex justify-end gap-2 mt-4">
            <button id="resetBtn" class="px-4 py-2 bg-gray-400 hover:bg-gray-500 text-white font-medium rounded-lg shadow-md">Reset</button>
            <button id="downloadBtn" class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white font-medium rounded-lg shadow-md">Download Hasil</button>
        </div>
    `;

            document.getElementById('downloadBtn').addEventListener('click', () => {
                const data = {
                    success,
                    failed
                };
                const blob = new Blob([JSON.stringify(data, null, 2)], {
                    type: 'application/json'
                });
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = 'hasil-import.json';
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
            });

            document.getElementById('resetBtn').addEventListener('click', () => {
                document.getElementById('processBox').innerHTML = '';
            });

            fetchOrders();
        });

        fetchOrders();
    </script>
@endpush