@extends('template.desktop.app')

@push('styles')
    @include('_distributor.desktop.order_everpro.partials.style')
    <style>
        #main-filter-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: #ffffff;
            border-radius: 12px;
            padding: 15px 25px;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
            margin-bottom: 25px;
            border: 1px solid #e0e0e0;
            flex-wrap: wrap;
            gap: 15px;
        }

        #status-tabs {
            display: flex;
            gap: 5px;
            background-color: #f8f9fa;
            border-radius: 8px;
            padding: 5px;
            flex-shrink: 0;
            order: -1;
            /* Pindahkan ke paling kiri */
        }

        #status-tabs .nav-link {
            padding: 8px 15px;
            border-radius: 6px;
            font-weight: 500;
            color: #495057;
            transition: all 0.2s ease;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 6px;
            white-space: nowrap;
        }

        #status-tabs .nav-link:hover:not(.active) {
            background-color: #e9ecef;
            color: #343a40;
        }

        #status-tabs .nav-link.active {
            background-color: #007bff;
            color: #ffffff;
            box-shadow: 0 2px 6px rgba(0, 123, 255, 0.25);
            font-weight: 600;
        }

        #status-tabs .nav-link.active .badge {
            background-color: rgba(255, 255, 255, 0.3) !important;
            color: #ffffff !important;
            font-weight: 600;
        }

        #status-tabs .badge {
            background-color: #e9ecef;
            color: #6c757d;
            font-size: 0.7em;
            padding: 4px 8px;
            border-radius: 10px;
            min-width: 25px;
            text-align: center;
        }

        #search-input-group {
            flex-grow: 1;
            max-width: 350px;
            order: 0;
            /* Tetap di tengah */
        }

        #search-input-group .form-control {
            border-radius: 8px 0 0 8px;
            border: 1px solid #dcdcdc;
            padding: 10px 15px;
            font-size: 0.95rem;
            height: auto;
        }

        #search-input-group .btn {
            border-radius: 0 8px 8px 0;
            border: 1px solid #dcdcdc;
            border-left: none;
            background-color: #f0f0f0;
            color: #555;
            padding: 10px 15px;
        }

        #filter-actions {
            display: flex;
            gap: 10px;
            order: 1;
            /* Pindahkan ke paling kanan */
        }

        #btn-advanced-filter {
            background-color: #6c757d;
            border-color: #6c757d;
            color: #fff;
            border-radius: 8px;
            padding: 10px 15px;
            font-size: 0.9rem;
            font-weight: 500;
            transition: all 0.2s ease;
        }

        #btn-advanced-filter:hover {
            background-color: #5a6268;
            border-color: #545b62;
        }

        /* Modal Filter Styling */
        #filterModal .modal-content {
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            border: none;
        }

        #filterModal .modal-header {
            background-color: #007bff;
            color: #fff;
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
            padding: 15px 20px;
            border-bottom: none;
        }

        #filterModal .modal-header .btn-close {
            filter: invert(1);
            /* White close button */
        }

        #filterModal .modal-body {
            padding: 25px;
        }

        #filterModal .form-label {
            font-weight: 600;
            margin-bottom: 8px;
            color: #333;
        }

        #filterModal .form-select,
        #filterModal .form-control {
            border-radius: 8px;
            border: 1px solid #dcdcdc;
            padding: 10px 15px;
            font-size: 0.95rem;
            height: auto;
        }

        #filterModal .modal-footer {
            border-top: 1px solid #eee;
            padding: 15px 25px;
            justify-content: flex-end;
            gap: 10px;
        }

        #filterModal .modal-footer .btn {
            border-radius: 8px;
            padding: 10px 20px;
            font-size: 0.95rem;
            font-weight: 500;
        }

        /* Popover (Tooltip Mewah) */
        .popover {
            border: none;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
            padding: 0;
            overflow: hidden;
        }

        .popover-header {
            color: #333;
            font-weight: bold;
            border-bottom: none;
            padding: 15px 20px;
            font-size: 0.9rem;
        }

        .popover-body {
            padding: 18px 20px;
            font-size: 0.7rem;
            color: #343a40;
            background-color: #fdfdfd;
        }

        .popover-body .text-muted {
            font-size: 0.7rem;
        }

        .popover-body .border-bottom {
            border-bottom: 1px solid #f0f0f0 !important;
            padding-bottom: 10px !important;
            margin-bottom: 10px !important;
        }

        .popover .arrow::before,
        .popover .arrow::after {
            border-color: #007bff !important;
        }

        /* Table Styling */
        .table-responsive-custom {
            overflow-x: auto;
            border-radius: 12px;
            border: 1px solid #e0e0e0;
        }

        .card.shadow-md {
            border-radius: 12px;
        }

        .card-body {
            padding-bottom: 15px !important;
        }

        .table {
            margin-bottom: 0;
            border-collapse: separate;
            border-spacing: 0;
        }

        .table thead th {
            background-color: #f5f7fa;
            border-bottom: 2px solid #e0e0e0;
            color: #333;
            padding: 14px 18px;
            font-size: 0.9rem;
            font-weight: 600;
            white-space: nowrap;
        }

        .table tbody td {
            padding: 12px 18px;
            vertical-align: middle;
            font-size: 0.875rem;
            border-bottom: 1px solid #f0f0f0;
        }

        .table-hover tbody tr:hover {
            background-color: #fbfdff;
        }

        /* Buttons in table */
        .table .btn {
            font-size: 0.75rem;
            padding: 6px 12px;
            border-radius: 6px;
            font-weight: 500;
        }

        /* Pagination footer */
        .card-footer {
            background-color: #f8f9fa !important;
            border-top: 1px solid #e0e0e0;
            border-bottom-left-radius: 12px !important;
            border-bottom-right-radius: 12px !important;
            padding: 15px 25px !important;
        }

        .pagination-google .page-item .page-link {
            border-radius: 8px !important;
            margin: 0 3px;
            border: 1px solid #e0e0e0;
            color: #555;
            transition: all 0.2s ease;
        }

        .pagination-google .page-item.active .page-link {
            background-color: #007bff;
            border-color: #007bff;
            color: #fff;
            box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
        }

        .pagination-google .page-item .page-link:hover:not(.active) {
            background-color: #f0f0f0;
            border-color: #dcdcdc;
            color: #333;
        }

        @media (max-width: 768px) {
            #main-filter-bar {
                flex-direction: column;
                align-items: stretch;
            }

            #status-tabs {
                width: 100%;
                justify-content: center;
                margin-bottom: 15px;
                /* Add some space below tabs */
            }

            #search-input-group {
                width: 100%;
                max-width: none;
            }

            #filter-actions {
                width: 100%;
                justify-content: flex-end;
            }
        }
    </style>

    <style>
        .swal2-container {
            z-index: 99999 !important;
        }

        .print-option-radio {
            border: 2px solid transparent;
            transition: 0.2s ease;
            cursor: pointer;
        }

        input[type="radio"]:checked+.print-option-radio {
            border: 2px solid #0d6efd;
            box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
        }
    </style>
@endpush

@section('content')
    <div id="main-filter-bar">
        <div id="status-tabs">
            <a href="#" class="nav-link fw-semibold active" data-status="all">
                Semua <span class="badge">{{ $statusCounts['all'] }}</span>
            </a>
            <a href="#" class="nav-link fw-semibold" data-status="unprocessed">
                Menunggu Konfirmasi <span class="badge">{{ $statusCounts['unprocessed'] }}</span>
            </a>
            <a href="#" class="nav-link fw-semibold" data-status="ongoing">
                Berlangsung <span class="badge">{{ $statusCounts['ongoing'] }}</span>
            </a>
            <a href="#" class="nav-link fw-semibold" data-status="completed">
                Selesai <span class="badge">{{ $statusCounts['completed'] }}</span>
            </a>
            <a href="#" class="nav-link fw-semibold" data-status="failed">
                Gagal <span class="badge">{{ $statusCounts['failed'] }}</span>
            </a>
            <a href="#" class="nav-link fw-semibold" data-status="waiting">
                Menunggu <span class="badge">{{ $statusCounts['waiting'] }}</span>
            </a>
            <a href="#" class="nav-link fw-semibold" data-status="canceled">
                Dibatalkan <span class="badge">{{ $statusCounts['canceled'] }}</span>
            </a>
        </div>
    </div>

    <div class="card shadow-md rounded-lg">
        <div class="card-body pb-0">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <div id="search-input-group" class="flex-grow-1 me-2">
                    <div class="input-group">
                        <input type="text" id="search" class="form-control form-control-sm"
                            placeholder="Cari no resi, order, tujuan, nama pelanggan" aria-label="Cari...">
                        <button class="btn btn-outline-secondary btn-sm" id="btn-search" type="button">
                            <i class="ti ti-search"></i>
                        </button>
                    </div>
                </div>

                <div id="filter-actions">
                    {{-- <button class="btn btn-secondary btn-sm" id="btn-advanced-filter" type="button" data-bs-toggle="modal"
                        data-bs-target="#filterModal">
                        <i class="ti ti-filter me-1"></i> Filter Lanjutan
                    </button> --}}
                    <button id="print-awb-button" disabled class="btn btn-primary" type="button">
                        <i class="ti ti-file me-1"></i> Filter Lanjutan
                    </button>
                </div>
            </div>

            <section class="table-responsive-custom">
                <table class="table table-hover align-middle">
                    <thead>
                        <tr>
                            <th scope="col" class="text-center">
                                <input type="checkbox" id="select-all-checkbox" class="form-check-input"
                                    aria-label="Select all orders">
                            </th>
                            <th scope="col" style="min-width: 160px;">
                                <a href="#" class="text-decoration-none text-dark fw-semibold">
                                    ORDER <i class="ti ti-chevron-down ms-1 text-sm"></i>
                                </a>
                            </th>
                            <th scope="col" style="min-width: 140px;">
                                <a href="#" class="text-decoration-none text-dark fw-semibold">
                                    STATUS <i class="ti ti-chevron-down ms-1 text-sm"></i>
                                </a>
                            </th>
                            <th scope="col" style="min-width: 280px;" class="fw-semibold text-dark">
                                PENGIRIM/PENERIMA</th>
                            <th scope="col" style="min-width: 200px;" class="fw-semibold text-dark">PAKET</th>
                            <th scope="col" style="min-width: 200px;" class="fw-semibold text-dark">KURIER</th>
                            <th scope="col" style="min-width: 200px;" class="fw-semibold text-dark">TOTAL</th>
                        </tr>
                    </thead>
                    <tbody id="order-table-body">

                    </tbody>
                </table>
            </section>
        </div>
        <div
            class="card-footer d-flex justify-content-between align-items-center flex-wrap gap-3 py-3 px-4 bg-light-subtle rounded-bottom-lg">
            <div class="d-flex align-items-center text-sm text-muted">
                <select class="form-select form-select-sm w-auto rounded" id="items-per-page" aria-label="Items per page">
                    <option value="10" selected>10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                </select>
                <span class="ms-2" id="pagination-info">Menampilkan 0-0 dari 0</span>
            </div>
            <nav aria-label="Page navigation">
                <ul class="pagination pagination-google mb-0" id="pagination">

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

    <div class="modal fade" id="filterModal" tabindex="-1" aria-labelledby="filterModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-md modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="filterModalLabel">Filter Lanjutan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="modal_shipment_type" class="form-label">Tipe Pengiriman</label>
                        <select id="modal_shipment_type" class="form-select">
                            <option value="">Semua Tipe</option>
                            <option value="DROP">DROP</option>
                            <option value="PICKUP">PICKUP</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="modal_is_cod" class="form-label">Metode Pembayaran</label>
                        <select id="modal_is_cod" class="form-select">
                            <option value="">Semua Metode</option>
                            <option value="1">COD</option>
                            <option value="0">TRANSFER</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" id="btn-reset-filters">Reset Filter</button>
                    <button type="button" class="btn btn-primary" id="btn-apply-filters"
                        data-bs-dismiss="modal">Terapkan Filter</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="trackModal" tabindex="-1" aria-labelledby="trackModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="trackModalLabel">Lacak Pengiriman Anda</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
                </div>
                <div class="modal-body" id="trackModalContent">
                    <div class="text-center py-5">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Memuat...</span>
                        </div>
                        <p class="mt-2">Memuat data pelacakan...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        .radio-card {
            position: relative;
            cursor: pointer;
            border: 2px solid #d8d6de;
            border-radius: 0.5rem;
            padding: 1rem;
            text-align: center;
            transition: all 0.2s ease, transform 0.15s ease;
            background-color: #fff;
        }

        .radio-card input[type="radio"] {
            display: none;
        }

        .radio-card.selected {
            border-color: #00cfe8;
            background-color: #e0f7fa;
        }

        .radio-card:hover {
            border-color: #00cfe8;
            transform: scale(1.01);
        }

        .radio-card.selected::after {
            content: "✔";
            position: absolute;
            top: 8px;
            right: 12px;
            font-size: 1.2rem;
            color: #00cfe8;
            font-weight: bold;
        }
    </style>

    <div class="modal fade" id="printModal" tabindex="-1" aria-labelledby="printModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content rounded-4 shadow">
                <div class="modal-header border-0">
                    <h5 class="modal-title fw-bold" id="printModalLabel">Pilih Jenis Cetak AWB</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-warning small rounded-3">
                        Beberapa pengaturan tidak dapat dipilih. Harap periksa kembali file PDF sebelum dicetak. Pastikan
                        ukuran, tata letak, dan kualitas cetak sudah sesuai agar tidak terjadi kesalahan.
                    </div>


                    <h6 class="fw-semibold mt-4">Pilih ukuran</h6>
                    <div class="row g-3">
                        <div class="col-md-12">
                            <small class="text-muted d-block mb-2">Rekomendasi: Kertas thermal</small>
                            <div class="row">
                                <div class="col-6 mt-3">
                                    <label class="radio-card w-100" onclick="selectCard(this)">
                                        <input type="radio" name="ukuranCetak" value="8x10">
                                        <div class="fw-semibold">8cm x 10cm</div>
                                        <small class="text-muted d-block">Cocok untuk printer kecil</small>
                                    </label>
                                </div>
                                <div class="col-6 mt-3">
                                    <label class="radio-card w-100" onclick="selectCard(this)">
                                        <input type="radio" name="ukuranCetak" value="8x15">
                                        <div class="fw-semibold">8cm x 15cm</div>
                                        <small class="text-muted d-block">Ukuran umum J&T</small>
                                    </label>
                                </div>
                                <div class="col-6 mt-3">
                                    <label class="radio-card w-100" onclick="selectCard(this)">
                                        <input type="radio" name="ukuranCetak" value="10x10">
                                        <div class="fw-semibold">10cm x 10cm</div>
                                        <small class="text-muted d-block">Label kotak</small>
                                    </label>
                                </div>
                                <div class="col-6 mt-3">
                                    <label class="radio-card w-100" onclick="selectCard(this)">
                                        <input type="radio" name="ukuranCetak" value="10x15">
                                        <div class="fw-semibold">10cm x 15cm</div>
                                        <small class="text-muted d-block">Lebih besar dan jelas</small>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="text-end mt-4">
                        <button class="btn btn-success px-4 py-2" onclick="printAWB()">Download</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        function selectCard(el) {
            document.querySelectorAll('.radio-card').forEach(card => card.classList.remove('selected'));
            el.classList.add('selected');
            el.querySelector('input[type="radio"]').checked = true;
        }

        window.addEventListener('DOMContentLoaded', () => {
            const checked = document.querySelector('.radio-card input[type="radio"]:checked');
            if (checked) checked.closest('.radio-card').classList.add('selected');
        });
    </script>
@endsection
@push('scripts')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script type="module"
        src="https://demos.pixinvent.com/vuexy-html-laravel-admin-template/demo/build/assets/select2-DK6uvkYz.js"></script>
    <link href="https://demos.pixinvent.com/vuexy-html-laravel-admin-template/demo/build/assets/select2-CuifWFC1.css" />
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const selectAll = document.getElementById("select-all-checkbox");
            const printButton = document.getElementById("print-awb-button");

            if (selectAll) {
                selectAll.addEventListener("change", function() {
                    const isChecked = this.checked;
                    document.querySelectorAll(".order-checkbox").forEach(cb => cb.checked = isChecked);
                    togglePrintButton();
                });
            }

            document.addEventListener("change", function(e) {
                if (e.target.classList.contains("order-checkbox")) {
                    const allCheckboxes = document.querySelectorAll(".order-checkbox");
                    const checked = document.querySelectorAll(".order-checkbox:checked");
                    if (selectAll) selectAll.checked = checked.length === allCheckboxes.length;
                    togglePrintButton();
                }
            });

            function togglePrintButton() {
                const checked = document.querySelectorAll(".order-checkbox:checked");
                printButton.disabled = checked.length === 0;
            }

            printButton.addEventListener("click", function() {
                const modal = new bootstrap.Modal(document.getElementById("printModal"));
                modal.show();
            });

            document.querySelectorAll(".print-option").forEach(button => {
                button.addEventListener("click", function() {
                    const type = this.dataset.type;
                    const selectedIds = Array.from(document.querySelectorAll(
                        ".order-checkbox:checked")).map(cb => cb.value);
                    bootstrap.Modal.getInstance(document.getElementById("printModal")).hide();
                });
            });
        });
    </script>

    <script>
        function printAWB() {
            const ukuran = document.querySelector('input[name="ukuranCetak"]:checked');
            if (!ukuran) {
                alert("Pilih ukuran cetak terlebih dahulu.");
                return;
            }

            let idsToPrint = [];

            if (selectedPrintIds.length > 0) {
                idsToPrint = [...selectedPrintIds]; // ambil dari tombol individual
            } else {
                idsToPrint = Array.from(document.querySelectorAll(".order-checkbox:checked")).map(cb => cb.value);
            }

            if (idsToPrint.length === 0) {
                alert("Pilih setidaknya satu order untuk dicetak.");
                return;
            }

            const url = "/print-awb";

            const form = document.createElement('form');
            form.method = 'POST';
            form.action = url;
            form.target = '_blank';

            const csrf = document.querySelector('meta[name="csrf-token"]');
            if (csrf) {
                const csrfInput = document.createElement('input');
                csrfInput.type = 'hidden';
                csrfInput.name = '_token';
                csrfInput.value = csrf.content;
                form.appendChild(csrfInput);
            }

            idsToPrint.forEach(id => {
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = 'ids[]';
                input.value = id;
                form.appendChild(input);
            });

            const ukuranInput = document.createElement('input');
            ukuranInput.type = 'hidden';
            ukuranInput.name = 'ukuran';
            ukuranInput.value = ukuran.value;
            form.appendChild(ukuranInput);

            document.body.appendChild(form);
            form.submit();
            form.remove();

            selectedPrintIds = []; // Reset setelah submit
            bootstrap.Modal.getInstance(document.getElementById("printModal")).hide();
        }
    </script>

    <script>
        let selectedPrintIds = [];

        document.addEventListener("click", function(e) {
            if (e.target.closest(".print-label-button")) {
                const btn = e.target.closest(".print-label-button");
                const id = btn.getAttribute("data-id");

                // Tambahkan ke array jika belum ada
                if (!selectedPrintIds.includes(id)) {
                    selectedPrintIds.push(id);
                }

                const modal = new bootstrap.Modal(document.getElementById("printModal"));
                modal.show();
            }
        });
    </script>


    <script>
        const statusMap = {
            "WAITING": "MENUNGGU KONFIRMASI PENGIRIM",
            "DROPOFF": "SEDANG DIANTAR KE GERAI",
            "WAITING FOR DROP OFF": "MENUNGGU DIANTAR KE GERAI",
            "IN PROCESS": "SEDANG DIKIRIM",
            "ARRIVED AT DESTINATION CITY": "TIBA DI KOTA TUJUAN",
            "ONGOING TO RECEIVER": "DIKIRIM KE PENERIMA",
            "WITH DELIVERY COURIER": "DALAM PERJALANAN OLEH KURIR",
            "DELIVERED": "TELAH DITERIMA",
            "REJECTED": "PAKET BERMASALAH",
            "COMPLETED": "SELESAI",
            "IN PROCESS RETURN": "SEDANG DIKEMBALIKAN",
            "CANCELLED": "DIBATALKAN",
        };

        function trackShipment(awbNumber) {
            const modalContent = document.getElementById('trackModalContent');
            const trackModal = new bootstrap.Modal(document.getElementById('trackModal'));
            trackModal.show();

            modalContent.innerHTML = `
                <div class="text-center py-5">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Memuat...</span>
                    </div>
                    <p class="mt-2">Memuat data pelacakan...</p>
                </div>
            `;

            axios.post('https://client-api.everpro.id/auth/v1/token', {
                    client_key: "{{ $cred->client_key }}",
                    client_secret: "{{ $cred->client_secret }}"
                }, {
                    headers: {
                        'Content-Type': 'application/json'
                    }
                })
                .then(tokenRes => {
                    const token = tokenRes.data.data.token;
                    return axios.get(`https://client-api.everpro.id/shipment/v1/orders/${awbNumber}/track`, {
                        headers: {
                            Authorization: 'Bearer ' + token
                        }
                    });
                })
                .then(trackRes => {
                    const data = trackRes.data.data;
                    const events = data.tracking_history ?? [];

                    let timelineHtml = events.map((e, idx) => {
                        const active = idx === 0 ? 'active-step' : '';
                        const statusTranslated = statusMap[e.status] || e.status;
                        const dateFormatted = new Date(e.date).toLocaleString('id-ID', {
                            year: 'numeric',
                            month: 'long',
                            day: 'numeric',
                            hour: '2-digit',
                            minute: '2-digit'
                        });

                        const imageLink = e.image_urls && e.image_urls.length ?
                            `<a href="${e.image_urls[0]}" target="_blank" rel="noopener noreferrer" class="btn btn-outline-primary btn-sm btn-view-images mt-2">Lihat Gambar (${e.image_urls.length})</a>` :
                            '';

                        return `
                        <div class="tracking-step ${active}">
                            <div class="tracking-dot"></div>
                            <div class="tracking-info">
                                <div class="fw-bold text-dark">${statusTranslated}</div>
                                <div class="text-muted">${e.description || 'Tidak ada deskripsi.'}</div>
                                <div class="text-sm text-secondary">${dateFormatted}</div>
                                ${imageLink}
                            </div>
                        </div>`;
                    }).join('');

                    if (!timelineHtml) {
                        timelineHtml =
                            '<div class="text-muted text-center py-3">Tidak ada data pelacakan untuk nomor resi ini.</div>';
                    }

                    modalContent.innerHTML = `
                        <div class="shipment-details mb-4 p-3 bg-light rounded">
                            <div class="row">
                                <div class="col-md-6">
                                    <div><strong>Nomor Resi:</strong> ${data.awb_number || '-'}</div>
                                    <div><strong>Berat:</strong> ${data.weight || '-'} kg</div>
                                    <div><strong>Asal:</strong> ${data.origin || '-'}</div>
                                </div>
                                <div class="col-md-6">
                                    <div><strong>Tujuan:</strong> ${data.destination || '-'}</div>
                                    <div><strong>Status Terakhir:</strong> <span class="badge bg-primary">${statusMap[data.tracking_code] || data.tracking_code || '-'}</span></div>
                                    <div><strong>Waktu Pengiriman (Dispatch):</strong> ${data.dispatch_at ? new Date(data.dispatch_at).toLocaleString('id-ID', { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' }) : '-'}</div>
                                </div>
                            </div>
                        </div>
                        <h6 class="mb-3 text-secondary">Riwayat Pelacakan:</h6>
                        <div class="tracking-timeline">
                            ${timelineHtml}
                        </div>
                    `;
                })
                .catch(err => {
                    console.error("Error fetching tracking data:", err);
                    modalContent.innerHTML = `
                        <div class="text-danger text-center py-5">
                            <i class="ti ti-exclamation-triangle fs-3 mb-2"></i>
                            <p>Gagal mengambil data pelacakan. Pastikan nomor resi benar dan coba lagi nanti.</p>
                            <p class="small text-muted">${err.message || 'Terjadi kesalahan tidak dikenal.'}</p>
                        </div>
                    `;
                });
        }

        document.addEventListener('DOMContentLoaded', function() {
            const tableBody = document.getElementById('order-table-body');
            const pagination = document.getElementById('pagination');
            const searchInput = document.getElementById('search');
            const searchButton = document.getElementById('btn-search');
            const statusTabs = document.getElementById('status-tabs');
            const itemsPerPageSelect = document.getElementById('items-per-page');
            const paginationInfoSpan = document.getElementById('pagination-info');

            const modalShipmentType = document.getElementById('modal_shipment_type');
            const modalIsCod = document.getElementById('modal_is_cod');
            const btnApplyFilters = document.getElementById('btn-apply-filters');
            const btnResetFilters = document.getElementById('btn-reset-filters');

            let currentPage = 1;
            let currentStatus = 'all';
            let itemsPerPage = parseInt(itemsPerPageSelect.value);
            let currentShipmentType = '';
            let currentIsCod = '';

            function debounce(func, delay) {
                let timeoutId;
                return function(...args) {
                    clearTimeout(timeoutId);
                    timeoutId = setTimeout(() => {
                        func.apply(this, args);
                    }, delay);
                };
            }

            statusTabs.querySelectorAll('a').forEach(item => {
                item.addEventListener('click', function(e) {
                    e.preventDefault();
                    statusTabs.querySelectorAll('a').forEach(el => el.classList.remove('active'));
                    this.classList.add('active');
                    currentStatus = this.getAttribute('data-status');
                    fetchData(1);
                });
            });

            btnApplyFilters.addEventListener('click', function() {
                currentShipmentType = modalShipmentType.value;
                currentIsCod = modalIsCod.value;
                fetchData(1);
            });

            btnResetFilters.addEventListener('click', function() {
                modalShipmentType.value = '';
                modalIsCod.value = '';
                currentShipmentType = '';
                currentIsCod = '';
                fetchData(1);
            });

            function fetchData(page = 1) {
                currentPage = page;
                const search = searchInput.value.trim();

                let statusParam = '';
                if (['ongoing','unprocessed', 'completed', 'failed', 'waiting', 'canceled'].includes(currentStatus)) {
                    statusParam = currentStatus;
                }

                tableBody.innerHTML = `<tr><td colspan="6" class="text-center py-5">
                                            <div class="spinner-border text-primary" role="status">
                                                <span class="visually-hidden">Memuat...</span>
                                            </div>
                                            <p class="mt-2">Memuat data...</p>
                                        </td></tr>`;
                paginationInfoSpan.textContent = 'Memuat...';
                pagination.innerHTML = '';

                axios.get('/distributor/orders/everpro/list', {
                    params: {
                        page: currentPage,
                        limit: itemsPerPage,
                        shipment_type: currentShipmentType,
                        is_cod: currentIsCod,
                        search: search,
                        status: statusParam
                    }
                }).then(response => {
                    const res = response.data;
                    renderTable(res.data);
                    renderPagination(res.current_page, res.last_page, res.total, res.from, res.to);
                }).catch(error => {
                    console.error("Error fetching data:", error);
                    tableBody.innerHTML =
                        '<tr><td colspan="6" class="text-center text-danger py-4">Gagal memuat data. Silakan coba lagi.</td></tr>';
                    paginationInfoSpan.textContent = 'Gagal memuat data.';
                    pagination.innerHTML = '';
                });
            }


            function renderTable(data) {
                tableBody.innerHTML = '';

                if (!data || data.length === 0) {
                    tableBody.innerHTML =
                        '<tr><td colspan="6" class="text-center py-4 text-muted">Data tidak ditemukan</td></tr>';
                    return;
                }

                data.forEach(item => {
                    const codBadge = item.is_cod === 1 ?
                        '<span class="badge bg-danger text-white text-xs">COD</span>' :
                        '<span class="badge bg-success text-white text-xs">TRANSFER</span>';

                    const currentStatusText = item.status || 'UNKNOWN';
                    const statusBadgeClass = getStatusBadgeClass(currentStatusText);
                    const statusTranslated = statusMap[currentStatusText] || currentStatusText;

                    const createdAtFormatted = formatDate(item.created_at);
                    const weightDisplay = item.volume_weight ?
                        `${item.weight} kg / ${item.volume_weight} vol` :
                        `${item.weight} kg`;

                    const packagePrice = item.package_price || 0;
                    const shipmentPrice = item.shipment_price || 0;
                    const totalCOD = item.total_cod || 0;
                    const totalCODDisbursement = item.total_cod_disbursement || 0;
                    const cashback = item.cashback || 0;

                    const codFee = Math.max(0, Math.ceil((packagePrice * 0.01) / 100) * 100);
                    const codTax = Math.max(0, Math.ceil((packagePrice * 0.003) / 100) * 100);
                    const cancelButton = currentStatusText === 'WAITING FOR DROP OFF' ||
                        currentStatusText === 'PAID' ? `
                        <div class="mt-2">
                            <button class="btn btn-danger btn-sm" onclick="showCancelModal('${item.shipment_order_no}', '${item.awb_number ?? ''}')">
                                <i class="ti ti-x"></i> Batalkan
                            </button>
                        </div>
                    ` : '';

                    const row = `
                        <tr>
                            <td>
                                <input type="checkbox" class="order-checkbox" value="${item.id}" aria-label="Select order ${item.shipment_order_no}">
                            </td>
                            <td>
                                <div class="fw-semibold text-sm">${item.shipment_order_no ?? '-'}</div>
                                <div class="d-flex justify-content-between text-muted text-xs mt-1">
                                    <span>${createdAtFormatted}</span>
                                </div>
                                <div class="text-muted text-xs mb-3" style="margin-top: 15px;">
                                    ${codBadge}
                                </div>
                            </td>
                            <td>
                                <div class="badge fw-bold text-xs ${statusBadgeClass}">${statusTranslated}</div>
                                <div class="text-muted text-xs mt-3 ">
                                    ${item.shipment_type ?? '-'}
                                    ${cancelButton}
                                </div>
                            </td>
                            <td class="text-xs" style="max-width: 300px; white-space: normal;">
                                <div class="text-nowrap text-truncate" style="max-width: 280px;" title="${item.shipper_name ?? '-'} • ${item.shipper_phone_number ?? '-'}">
                                    <span class="fw-semibold text-sm">${item.shipper_name ?? '-'}</span> • ${item.shipper_phone_number ?? '-'}
                                </div>

                                <div class="text-muted text-truncate mt-1" style="max-width: 280px;" title="${item.shipper_address ?? ''}">
                                    ${item.shipper_address ?? '-'}
                                </div>

                                <div class="text-nowrap text-truncate mt-2" style="max-width: 280px;" title="${item.receiver_name ?? '-'} • ${item.receiver_phone_number ?? '-'}">
                                    <span class="fw-semibold text-sm">${item.receiver_name ?? '-'}</span> •
                                    <a href="https://wa.me/${item.receiver_phone_number?.replace(/\+/g, '')}" target="_blank" rel="noopener noreferrer" class="badge bg-success text-white text-xs">
                                    ${item.receiver_phone_number ?? '-'}
                                    </a>
                                </div>

                                <div class="text-muted text-truncate" style="max-width: 280px;" title="${item.receiver_address ?? ''}">
                                    ${item.receiver_address ?? '-'}
                                </div>
                            </td>

                            <td class="text-xs">
                                <div class="fw-semibold text-sm">${item.package_desc ?? '-'}</div>
                                <div class="text-muted">${weightDisplay}</div>
                                <div class="text-muted">Harga Paket: ${formatRupiah(packagePrice)}</div>
                            </td>
                            <td class="text-xs">
                                <div class="fw-semibold text-sm">${item.courier_detail ?? '-'}</div>
                                <div class="text-muted text-xs">Resi: ${item.awb_number ?? '-'}</div>
                                <div class="d-flex gap-1 mt-2">
                                    <button class="btn btn-secondary btn-sm" onclick="trackShipment('${item.awb_number}')" ${!item.awb_number ? 'disabled' : ''}>
                                        <i class="ti ti-map-pin me-1"></i>Lacak
                                    </button>
                                    <button type="button"
                                            class="btn btn-success btn-sm print-label-button"
                                            data-id="${item.id}">
                                        <i class="ti ti-printer"></i> Cetak Label
                                    </button>
                                </div>
                            </td>
                            <td class="text-xs">
                                <div class="d-flex flex-column gap-2">
                                    <div>
                                        <span class="text-muted">Total COD:</span>
                                        <span class="fw-semibold text-sm">${formatRupiah(totalCOD)}</span>
                                    </div>
                                    <div>
                                        <span class="text-muted">Ongkir:</span>
                                        <span class="fw-semibold text-sm">${formatRupiah(shipmentPrice)}</span>
                                    </div>
                                    <div class="mt-1 d-flex align-items-center">
                                        <span class="text-muted me-1">Cair (COD):</span>
                                        <span class="fw-semibold badge bg-success text-sm">${formatRupiah(totalCODDisbursement)}</span>
                                        <i
                                            class="ti ti-info-circle cursor-pointer ms-2 text-primary"
                                            tabindex="0"
                                            role="button"
                                            data-bs-toggle="popover"
                                            data-bs-placement="left"
                                            data-bs-html="true"
                                            data-bs-title="Rincian Pencairan"
                                            data-bs-content='
                                                <div class="text-start small" style="min-width: 220px; font-size: 12px;">
                                                    <div class="d-flex justify-content-between align-items-center pb-2 mb-1 border-bottom">
                                                        <div class="text-muted">Harga Barang</div>
                                                        <div class="fw-semibold text-end">${formatRupiah(packagePrice)}</div>
                                                    </div>
                                                    <div class="d-flex justify-content-between align-items-center pb-2 mb-1 border-bottom">
                                                        <div class="text-muted">Biaya COD</div>
                                                        <div class="fw-semibold text-end text-danger">- ${formatRupiah(codFee)}</div>
                                                    </div>
                                                    <div class="d-flex justify-content-between align-items-center pb-2 mb-1 border-bottom">
                                                        <div class="text-muted">Pajak COD</div>
                                                        <div class="fw-semibold text-end text-danger">- ${formatRupiah(codTax)}</div>
                                                    </div>
                                                    <div class="d-flex justify-content-between align-items-center pt-2 mt-2 border-top fw-bold">
                                                        <div>Total Cair</div>
                                                        <div class="text-end">${formatRupiah(totalCODDisbursement)}</div>
                                                    </div>
                                                </div>'

                                        ></i>
                                    </div>
                                    <div>
                                        <span class="text-muted">Cashback:</span>
                                        <span class="fw-semibold text-sm" style="color: #f39c12">${formatRupiah(cashback)}</span>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    `;
                    tableBody.insertAdjacentHTML('beforeend', row);
                });

                const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
                popoverTriggerList.forEach(function(el) {
                    new bootstrap.Popover(el, {
                        html: true,
                        trigger: 'focus',
                        placement: 'left',
                        container: 'body',
                    });
                });

            }


            function renderPagination(current, totalPages, totalItems, fromItem, toItem) {
                pagination.innerHTML = '';
                paginationInfoSpan.textContent = `Menampilkan ${fromItem}-${toItem} dari ${totalItems}`;

                const prevDisabled = current === 1 ? 'disabled' : '';
                const nextDisabled = current === totalPages ? 'disabled' : '';

                pagination.innerHTML += `
                    <li class="page-item ${prevDisabled}">
                        <a class="page-link" href="#" data-page="${current - 1}">&lt;</a>
                    </li>
                `;

                let startPage = Math.max(1, current - 2);
                let endPage = Math.min(totalPages, current + 2);

                if (current <= 3) {
                    endPage = Math.min(totalPages, 5);
                } else if (current + 2 >= totalPages) {
                    startPage = Math.max(1, totalPages - 4);
                }

                for (let i = startPage; i <= endPage; i++) {
                    const active = i === current ? 'active' : '';
                    pagination.innerHTML += `
                        <li class="page-item ${active}">
                            <a class="page-link" href="#" data-page="${i}">${i}</a>
                        </li>
                    `;
                }

                pagination.innerHTML += `
                    <li class="page-item ${nextDisabled}">
                        <a class="page-link" href="#" data-page="${current + 1}">&gt;</a>
                    </li>
                `;

                pagination.querySelectorAll('a[data-page]').forEach(link => {
                    link.addEventListener('click', function(e) {
                        e.preventDefault();
                        const targetPage = parseInt(this.getAttribute('data-page'));
                        if (!isNaN(targetPage) && targetPage > 0 && targetPage <= totalPages) {
                            fetchData(targetPage);
                        }
                    });
                });
            }

            function formatDate(dateStr, includeTime = true) {
                if (!dateStr) return '-';
                const date = new Date(dateStr);
                const options = {
                    day: '2-digit',
                    month: 'short',
                    year: 'numeric',
                };
                if (includeTime) {
                    options.hour = '2-digit';
                    options.minute = '2-digit';
                }
                return date.toLocaleString('id-ID', options);
            }

            function formatRupiah(value) {
                if (value === null || value === undefined || isNaN(value)) return 'Rp 0';
                return new Intl.NumberFormat('id-ID', {
                    style: 'currency',
                    currency: 'IDR',
                    minimumFractionDigits: 0,
                    maximumFractionDigits: 0,
                }).format(value);
            }

            function getStatusBadgeClass(status) {
                switch (status) {
                    case 'WAITING FOR DROP OFF':
                    case 'IN PROCESS':
                    case 'ONGOING TO RECEIVER':
                    case 'WITH DELIVERY COURIER':
                    case 'ARRIVED AT DESTINATION CITY':
                        return 'bg-warning text-dark';
                    case 'DELIVERED':
                    case 'COMPLETED':
                        return 'bg-success';
                    case 'REJECTED':
                    case 'CANCELED':
                    case 'IN PROCESS RETURN':
                        return 'bg-danger';
                    default:
                        return 'bg-secondary';
                }
            }

            itemsPerPageSelect.addEventListener('change', function() {
                itemsPerPage = parseInt(this.value);
                fetchData(1);
            });
            searchInput.addEventListener('input', debounce(() => fetchData(1), 500));
            searchButton.addEventListener('click', () => fetchData(1));

            fetchData();
        });
    </script>

    <script>
        let currentOrderToCancel = null;
        let currentAwbNumber = null;

        function showCancelModal(orderId, awbNumber = null) {
            currentOrderToCancel = orderId;
            currentAwbNumber = awbNumber;

            $('#distributorSelect').val('').trigger('change'); // Kosongkan dan reset Select2
            const modal = new bootstrap.Modal(document.getElementById("cancelModal"));
            modal.show();
        }

        function cancelOrder() {
            if (!currentOrderToCancel) return;
            Swal.fire({
                title: 'Memproses...',
                text: 'Silakan tunggu, sedang membatalkan pesanan...',
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            axios.post('/admin/order-everpro/cancel', {
                    order_id: currentOrderToCancel,
                    awb_number: currentAwbNumber
                })
                .then(response => {
                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil',
                        text: response.data.message || 'Pesanan berhasil dibatalkan.',
                        timer: 2000,
                        showConfirmButton: true
                    });
                })
                .catch(error => {
                    const msg = error.response?.data?.message || 'Gagal membatalkan pesanan.';
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal',
                        text: msg,
                    });
                })
                .finally(() => {
                    currentOrderToCancel = null;
                    currentAwbNumber = null;
                    bootstrap.Modal.getInstance(document.getElementById("cancelModal")).hide();
                });
        }

        function redirectOrder() {
            const distributor = $('#distributorSelect').val();
            if (!currentOrderToCancel || !distributor) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Peringatan',
                    text: 'Silakan pilih distributor terlebih dahulu.'
                });
                return;
            }

            Swal.fire({
                title: 'Mengalihkan...',
                text: 'Sedang mengalihkan pesanan...',
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            axios.post('/admin/order-everpro/redirect', {
                    order_id: currentOrderToCancel,
                    distributor_id: distributor
                })
                .then(response => {
                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil',
                        text: response.data.message || 'Pesanan berhasil dialihkan.',
                        timer: 2000,
                        showConfirmButton: false
                    });
                })
                .catch(error => {
                    const msg = error.response?.data?.message || 'Gagal mengalihkan pesanan.';
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal',
                        text: msg
                    });
                })
                .finally(() => {
                    currentOrderToCancel = null;
                    bootstrap.Modal.getInstance(document.getElementById("cancelModal")).hide();
                });
        }

        $(document).ready(function() {
            $('#distributorSelect').select2({
                dropdownParent: $('#cancelModal'),
                placeholder: 'Pilih distributor',
                width: '100%',
                allowClear: true
            });
        });
    </script>
@endpush