@extends('template.desktop.app')

@push('styles')
    @include('_admin.temp_orders.partials.css')
@endpush
@section('content')
    <div class="card">
        <div class="card-header pb-2">
            <div class="row w-100 align-items-center">
                <div class="col-md-6 col-12 mb-1 mb-md-0">
                    <h4 class="card-title mb-0">Orderan Baru Everpro</h4>
                </div>

                <div class="col-md-6 col-12 d-flex justify-content-md-end">
                    <button id="input-everpro-btn" class="btn btn-primary w-md-auto">
                        Input ke Everpro
                    </button>
                </div>
            </div>
        </div>

        <div class="card-body">
            <div class="row mb-2 align-items-end mt-3">
                <div class="col-md-6 col-12 mb-1">
                    <label for="searchInput" class="form-label">Cari Pesanan</label>
                    <input type="text" id="searchInput" class="form-control"
                        placeholder="Nomor order, nama, atau alamat...">
                </div>
                <div class="col-md-4 col-12 mb-1">
                    <label for="paymentFilter" class="form-label">Metode Pembayaran</label>
                    <select class="form-select" id="paymentFilter">
                        <option value="">Semua Pembayaran</option>
                        <option value="COD">COD</option>
                        <option value="TRANSFER">TRANSFER</option>
                    </select>
                </div>

                <div class="col-md-2 col-12 mb-1 d-flex align-items-end">
                    <button class="btn btn-outline-secondary w-100" id="resetFilterBtn">
                        Reset
                    </button>
                </div>
            </div>

            <div class="table-responsive order-table-responsive">
                <table class="table order-table">
                    <thead>
                        <tr>
                            <th><input type="checkbox" id="select-all-checkbox" aria-label="Select all orders"></th>
                            <th>ORDER</th>
                            <th>PENGIRIM/PENERIMA</th>
                            <th>PAKET</th>
                            <th>TOTAL</th>
                            <th>AKSI</th>
                        </tr>
                    </thead>
                    <tbody id="order-table-body">

                    </tbody>

                </table>
            </div>

            <nav aria-label="Order Pagination" class="pagination-controls">
                <ul class="pagination" id="pagination-controls-list">

                </ul>
            </nav>
        </div>
    </div>

    <div id="everpro-modal-overlay"
        style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:9998;">
    </div>

    <div id="everpro-modal"
        style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); background:#fff; border-radius:8px; box-shadow:0 4px 15px rgba(0,0,0,0.2); padding:30px; z-index:9999; max-width:550px; width:90%; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">

        <h3 style="text-align:center; color:#333; margin-bottom:25px;">Proses Input Data Everpro</h3>
        <hr style="border:0; border-top:1px solid #eee; margin-bottom:25px;">

        <div id="everpro-progress-section" style="text-align:center;">
            <p id="everpro-progress-text" style="font-size:1.1em; color:#555; margin-bottom:15px;">Memulai proses...</p>
            <div style="background:#e0e0e0; border-radius:10px; height:20px; overflow:hidden;">
                <div id="everpro-progress-bar"
                    style="width:0%; height:100%; background:#4CAF50; border-radius:10px; transition:width 0.3s ease-in-out;">
                </div>
            </div>
            <p id="everpro-percentage" style="font-size:0.9em; color:#777; margin-top:10px;">0% Selesai</p>
        </div>

        <div id="everpro-result-section" style="margin-top:30px; display:none;">
            <h4 style="color:#333; margin-bottom:15px; text-align:center;">Hasil Proses</h4>
            <div style="display:flex; justify-content:space-around; text-align:center; margin-bottom:20px;">
                <div>
                    <p style="font-size:1em; color:#666;">Total Order:</p>
                    <p id="result-total" style="font-size:1.4em; font-weight:bold; color:#007bff;">0</p>
                </div>
                <div>
                    <p style="font-size:1em; color:#666;">Berhasil:</p>
                    <p id="result-success" style="font-size:1.4em; font-weight:bold; color:#28a745;">0</p>
                </div>
                <div>
                    <p style="font-size:1em; color:#666;">Gagal:</p>
                    <p id="result-failed" style="font-size:1.4em; font-weight:bold; color:#dc3545;">0</p>
                </div>
            </div>

            <div id="everpro-failed-details"
                style="display:none; background:#f8d7da; border:1px solid #f5c6cb; border-radius:5px; padding:15px; margin-top:15px;">
                <p style="font-weight:bold; color:#721c24; margin-bottom:10px;">Detail Kegagalan:</p>
                <ul id="failed-list" style="max-height:150px; overflow-y:auto; list-style-type:none; padding:0;"></ul>
            </div>
        </div>

        <div style="text-align:center; margin-top:30px;">
            <button id="everpro-close-btn"
                style="background:#007bff; color:white; border:none; padding:10px 25px; border-radius:5px; cursor:pointer; font-size:1em; display:none;"
                onmouseover="this.style.backgroundColor='#0056b3'"
                onmouseout="this.style.backgroundColor='#007bff'">Tutup</button>
        </div>
    </div>



    <div class="modal fade" id="editOrderModal" tabindex="-1" aria-labelledby="editOrderLabel" aria-hidden="true"
        role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <form id="editOrderForm">
                    <div class="modal-header">
                        <h5 class="modal-title" id="editOrderLabel">Edit Order</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
                    </div>

                    <div class="modal-body row g-3">
                        <div class="col-md-6 mb-2">
                            <label for="edit-reference" class="form-label"><strong>Reference</strong></label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="edit-reference" name="reference_number"
                                    readonly aria-label="Nomor Referensi">
                            </div>

                            <br>
                            <p>
                                <strong>Customer:</strong> <span id="edit-customer">-</span><br>
                                <strong>Customer Service:</strong> <span id="edit-customer-service">-</span>
                            </p>
                        </div>

                        <div class="col-md-6">
                            <label for="edit-agent" class="form-label">Agen (Distributor)</label>
                            <input type="text" class="form-control" id="edit-distributor" name="distributor_code"
                                readonly>
                        </div>

                        <input type="hidden" id="edit-order-id" name="order_id" />

                        <div class="col-md-6">
                            <label for="edit-total-payment" class="form-label">Total Pembayaran</label>
                            <input type="number" class="form-control" id="edit-total-payment" name="total_payment"
                                min="0">
                        </div>

                        <div class="col-md-6">
                            <label for="edit-shipping-cost" class="form-label">Ongkir</label>
                            <input type="number" class="form-control" id="edit-shipping-cost" name="shipping_cost"
                                min="0">
                        </div>

                        <div class="col-md-12">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="edit-using-generate"
                                    name="using_generate">
                                <label class="form-check-label" for="edit-using-generate">
                                    Gunakan Harga Generate (dari sistem)
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Simpan Perubahan</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="{{ asset('vuexy/assets/vendor/libs/select2/select2.css') }}" />
    <script src="{{ asset('vuexy/assets/vendor/libs/select2/select2.js') }}"></script>

    <script>
        function fetchOrders() {
            axios.get("/admin/temp/orders/fetch")
                .then(function(response) {
                    const orders = response.data.orders;
                    const tbody = document.getElementById("order-table-body");
                    tbody.innerHTML = "";

                    orders.forEach((order) => {
                        const row = `
                            <tr class="order-item" data-order-id="${order.id}" data-payment-method="${order.payment_method}">
                                <td>
                                    <input type="checkbox" class="order-checkbox" value="${order.id}" aria-label="Select order ${order.order_code}">
                                </td>
                                <td>
                                    <p class="fw-semibold mb-0">${order.order_code}</p>
                                    <p class="text-sm text-muted mb-0">${order.created_at}</p>
                                    <p class="text-sm mb-0">Agen: <span class="badge bg-info fw-bold">${order.agent}</span></p>
                                </td>
                                <td class="wrap-content">
                                    <p class="fw-semibold mb-0">
                                        ${order.sender_name} <span>(${order.sender_phone})</span>
                                    </p>
                                    <p class="text-sm mb-0">
                                      ${order.sender_area}, ${order.sender_address} <span class="badge bg-light fw-bold">${order.sender_postal}</span>
                                    </p>
                                    <p class="text-sm mb-0">${order.sender_area} hehehehe</p>
                                    <p class="fw-semibold mt-3 mb-0">
                                        ${order.receiver_name} <span>(${order.receiver_phone})</span>
                                    </p>
                                    <p class="text-sm mb-0">
                                        ${order.receiver_address} hmms <span class="badge bg-light fw-bold">${order.receiver_postal}</span>
                                    </p>
                                    <p class="text-sm mb-0">${order.receiver_area} hehehehe</p>
                                </td>
                                <td>
                                    <p class="mb-0">${order.package_code}</p>
                                    <p class="text-sm mb-0">Harga paket: Rp ${order.package_price}</p>
                                    <p class="text-sm mb-0">(Catatan: ${order.notes})</p>
                                </td>
                                <td>
                                    <div class="total-detail-group">
                                        <p class="total-label">Pembayaran:</p>
                                        <div class="total-value-line">
                                            <span class="badge bg-primary total-value-badge">
                                                Inputan: <span class="fw-bold">Rp ${order.original_total}</span>
                                            </span>
                                            <span class="badge bg-secondary total-value-badge">
                                                System: <span class="fw-bold">Rp ${order.generated_total}</span>
                                            </span>
                                        </div>
                                        <p>
                                            Selisih:
                                            <span class="badge bg-danger-subtle fw-bold total-diff-badge">Rp ${order.difference}</span>
                                        </p>
                                    </div>
                                    <div class="total-detail-group">
                                        <p class="total-label">Ongkos Kirim:</p>
                                        <div class="total-value-line">
                                            <span class="badge bg-primary total-value-badge">
                                                Inputan: <span class="fw-bold">Rp ${order.original_shipping}</span>
                                            </span>
                                            <span class="badge bg-secondary total-value-badge">
                                                System: <span class="fw-bold">Rp ${order.generated_shipping}</span>
                                            </span>
                                        </div>
                                        <p>
                                            Selisih:
                                            <span class="badge bg-secondary-subtle fw-bold total-diff-badge">Rp ${order.shipping_diff}</span>
                                        </p>
                                    </div>
                                </td>
                                <td>
                                    <select class="form-select form-select-sm action-select" data-order-id="${order.id}">
                                        <option value="">Pilih Aksi</option>
                                        <option value="edit">Edit Pesanan</option>
                                        <option value="cancel">Batalkan Pesanan</option>
                                    </select>
                                </td>
                            </tr>
                        `;
                        tbody.insertAdjacentHTML("beforeend", row);
                    });

                    document.querySelectorAll(".action-select").forEach(select => {
                        select.addEventListener("change", function() {
                            const orderId = this.dataset.orderId;
                            if (this.value === "edit") {
                                fetchOrderDataAndShowModal(orderId);
                            } else if (this.value === "cancel") {
                                alert("Fitur pembatalan belum diimplementasikan.");
                            }
                        });
                    });


                }).catch(error => console.error("Gagal mengambil data:", error));
        }

        async function fetchOrderDataAndShowModal(orderId) {
            try {
                const response = await axios.get(`/admin/temp/orders/${orderId}/detail`);
                const order = response.data;

                const totalPayment = Math.round(Number(order.total_payment ?? 0));
                const shippingCost = Math.round(Number(order.shipping_cost ?? 0));

                const generatedTotalPayment = Math.round(Number(order.shipping?.total_payment ?? 0));
                const generatedShippingCost = Math.round(Number(order.shipping?.shipping_cost ?? 0));

                document.getElementById('edit-order-id').value = order.id;
                document.getElementById('edit-total-payment').value = totalPayment;
                document.getElementById('edit-shipping-cost').value = shippingCost;

                document.getElementById('edit-reference').value = order.reference_number ?? '';
                document.getElementById('edit-customer').textContent = order.customer_name ?? '-';
                document.getElementById('edit-customer-service').textContent = order.customer_service?.customer_service
                    ?.full_name ?? '-';

                if (document.getElementById('edit-distributor')) {
                    document.getElementById('edit-distributor').value = order.distributor?.full_name ?? '-';
                }

                const useGenerateCheckbox = document.getElementById('edit-using-generate');
                const newCheckbox = useGenerateCheckbox.cloneNode(true);
                useGenerateCheckbox.parentNode.replaceChild(newCheckbox, useGenerateCheckbox);

                newCheckbox.checked = false;

                newCheckbox.addEventListener('change', function() {
                    if (this.checked) {
                        document.getElementById('edit-total-payment').value = generatedTotalPayment;
                        document.getElementById('edit-shipping-cost').value = generatedShippingCost;
                    } else {
                        document.getElementById('edit-total-payment').value = totalPayment;
                        document.getElementById('edit-shipping-cost').value = shippingCost;
                    }
                });

                ['edit-total-payment', 'edit-shipping-cost'].forEach(id => {
                    const input = document.getElementById(id);
                    input.addEventListener('input', () => {
                        if (newCheckbox.checked) {
                            newCheckbox.checked = false;
                        }
                    });
                });
                const modal = new bootstrap.Modal(document.getElementById('editOrderModal'));
                modal.show();

            } catch (err) {
                console.error("Gagal mengambil data order atau wilayah:", err);
                alert("Gagal memuat data pesanan untuk diedit.");
            }
        }


        function formatRupiah(angka) {
            return parseFloat(angka || 0).toLocaleString('id-ID', {
                style: 'currency',
                currency: 'IDR'
            });
        }

        document.getElementById('editOrderForm').addEventListener('submit', function(e) {
            e.preventDefault();

            const id = document.getElementById('edit-order-id').value;
            const payload = {
                total_payment: document.getElementById('edit-total-payment').value,
                shipping_cost: document.getElementById('edit-shipping-cost').value,
                using_generate: document.getElementById('edit-using-generate').checked,
            };

            console.log("Sending PUT request for ID:", id);
            console.log("Payload:", payload);

            axios.put(`/admin/temp/orders/${id}/update`, payload)
                .then((response) => {
                    console.log("API Success Response:", response
                        .data);
                    console.log("Attempting to hide modal...");
                    const modalInstance = bootstrap.Modal.getInstance(document.getElementById(
                        'editOrderModal'));
                    if (modalInstance) {
                        modalInstance.hide();
                        console.log("Modal hidden successfully.");
                    } else {
                        console.warn("Modal instance not found. Is the modal opened correctly via JS?");
                    }

                    console.log("Attempting to refresh orders...");
                    if (typeof fetchOrders === 'function') {
                        fetchOrders();
                        console.log("loadOrders() called.");
                    } else {
                        console.error("loadOrders() function is not defined or accessible.");
                    }
                })
                .catch(err => {
                    console.error("Error updating order:", err.response ? err.response.data : err
                        .message); // Log full error
                    alert("Gagal update data. Lihat konsol untuk detail.");
                });
        });

        fetchOrders();
        const closeButton = document.getElementById('everpro-close-btn');
        closeButton.onclick = function() {
            document.getElementById('everpro-modal').style.display = 'none';
            document.getElementById('everpro-modal-overlay').style.display = 'none';
            document.querySelectorAll('tr.bg-success').forEach(row => row.remove());
            fetchOrders();
        };
    </script>


    <script>
        document.getElementById('input-everpro-btn').addEventListener('click', async function() {
            const selectedOrders = [];

            document.querySelectorAll('.order-checkbox:checked').forEach(cb => {
                const row = cb.closest('tr');
                const id = cb.value;
                const referenceNumber = row.children[1].querySelector('p')?.textContent.trim();
                selectedOrders.push({
                    id,
                    referenceNumber
                });
                row.classList.remove('bg-success', 'bg-danger', 'text-white');
            });

            if (selectedOrders.length === 0) {
                alert("Pilih minimal satu order.");
                return;
            }

            const modal = document.getElementById('everpro-modal');
            const modalOverlay = document.getElementById('everpro-modal-overlay');

            const progressSection = document.getElementById('everpro-progress-section');
            const progressText = document.getElementById('everpro-progress-text');
            const progressBar = document.getElementById('everpro-progress-bar');
            const progressPercentage = document.getElementById('everpro-percentage');
            const resultSection = document.getElementById('everpro-result-section');
            const resultTotal = document.getElementById('result-total');
            const resultSuccess = document.getElementById('result-success');
            const resultFailed = document.getElementById('result-failed');
            const failedDetailsBox = document.getElementById('everpro-failed-details');
            const failedListUl = document.getElementById('failed-list');
            const closeButton = document.getElementById('everpro-close-btn');

            modal.style.display = 'block';
            modalOverlay.style.display = 'block';

            progressSection.style.display = 'block';
            resultSection.style.display = 'none';
            failedDetailsBox.style.display = 'none';
            closeButton.style.display = 'none';
            progressBar.style.width = '0%';
            progressText.innerText = 'Memulai proses...';
            progressPercentage.innerText = '0% Selesai';
            failedListUl.innerHTML = '';

            let success = 0;
            let failed = 0;
            let failedList = [];

            for (let i = 0; i < selectedOrders.length; i++) {
                const {
                    id,
                    referenceNumber
                } = selectedOrders[i];
                const row = document.querySelector(`.order-checkbox[value="${id}"]`)?.closest('tr');

                const percentage = ((i + 1) / selectedOrders.length) * 100;
                progressText.innerText =
                    `Memproses Order ${referenceNumber} (${i + 1} dari ${selectedOrders.length})`;
                progressBar.style.width = `${percentage}%`;
                progressPercentage.innerText = `${Math.round(percentage)}% Selesai`;

                try {
                    const response = await axios.post('/admin/temp/orders/store/everpro', {
                        order_ids: [id]
                    });

                    if (response.data.successful_orders > 0) {
                        success++;
                        row?.classList.add('bg-success', 'text-white');
                    } else {
                        failed++;
                        const failDetails = response.data.details?.failed?.[0];
                        failedList.push(
                            `Ref ${referenceNumber}: ${failDetails?.reason || 'Gagal (tidak diketahui)'}`);
                        row?.classList.add('bg-danger', 'text-white');
                    }
                } catch (err) {
                    failed++;
                    failedList.push(`Ref ${referenceNumber}: Gagal dikirim (error jaringan/server)`);
                    row?.classList.add('bg-danger', 'text-white');
                }

                await new Promise(resolve => setTimeout(resolve, 500));
            }

            progressSection.style.display = 'none';
            resultSection.style.display = 'block';
            closeButton.style.display = 'block';

            resultTotal.innerText = selectedOrders.length;
            resultSuccess.innerText = success;
            resultFailed.innerText = failed;

            if (failedList.length > 0) {
                failedDetailsBox.style.display = 'block';
                failedList.forEach(f => {
                    const li = document.createElement('li');
                    li.style.padding = '5px 0';
                    li.style.borderBottom = '1px dashed #f5c6cb';
                    li.style.color = '#721c24';
                    li.innerText = f;
                    failedListUl.appendChild(li);
                });
            }

            closeButton.onclick = function() {
                modal.style.display = 'none';
                modalOverlay.style.display = 'none';
            };

            modalOverlay.onclick = function() {
                if (closeButton.style.display === 'block') {
                    modal.style.display = 'none';
                    modalOverlay.style.display = 'none';
                }
            };
        });
    </script>
@endpush