@extends('template.desktop.app')

@push('styles')
@include('order_marketplaces.partials.style')
<style>
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    max-width: 250px;
}

/* Main Filter Bar - Improved Layout & Shadow */
#main-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(to bottom, #ffffff, #fafbfc);
    border-radius: 16px;
    padding: 20px 28px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
    margin-bottom: 28px;
    border: 1px solid #e8eaed;
    flex-wrap: wrap;
    gap: 16px;
    transition: box-shadow 0.3s ease;
}

#main-filter-bar:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* Status Tabs - Modern Pills Design with Red Theme */
#status-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    background-color: #f1f3f5;
    border-radius: 12px;
    padding: 6px;
    flex-shrink: 0;
    order: -1;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 transparent;
}

#status-tabs::-webkit-scrollbar {
    height: 5px;
}

#status-tabs::-webkit-scrollbar-thumb {
    background: linear-gradient(to right, #fca5a5, #f87171);
    border-radius: 10px;
}

#status-tabs::-webkit-scrollbar-track {
    background: transparent;
}

#status-tabs .nav-link {
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 500;
    font-size: 0.9rem;
    color: #4a5568;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

#status-tabs .nav-link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
    opacity: 0;
    transition: opacity 0.3s ease;
}

#status-tabs .nav-link:hover:not(.active) {
    background-color: #fee2e2;
    color: #991b1b;
    transform: translateY(-1px);
}

#status-tabs .nav-link:hover::before {
    opacity: 1;
}

#status-tabs .nav-link.active {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35), 0 2px 4px rgba(239, 68, 68, 0.2);
    font-weight: 600;
    transform: translateY(-2px);
}

#status-tabs .nav-link.active .badge {
    background-color: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

#status-tabs .badge {
    background-color: #e2e8f0;
    color: #64748b;
    font-size: 0.7em;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 12px;
    min-width: 28px;
    text-align: center;
    transition: all 0.2s ease;
}

/* Search Input - Enhanced Design */
#search-input-group {
    flex-grow: 1;
    max-width: 380px;
    order: 0;
}

#search-input-group .form-control {
    border-radius: 10px 0 0 10px;
    border: 1px solid #e2e8f0;
    padding: 11px 16px;
    font-size: 0.95rem;
    height: auto;
    transition: all 0.3s ease;
    background-color: #ffffff;
}

#search-input-group .form-control:focus {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
    outline: none;
}

#search-input-group .btn {
    border-radius: 0 10px 10px 0;
    border: 1px solid #e2e8f0;
    border-left: none;
    background: linear-gradient(to bottom, #f8fafc, #f1f5f9);
    color: #64748b;
    padding: 11px 18px;
    transition: all 0.3s ease;
}

#search-input-group .btn:hover {
    background: linear-gradient(to bottom, #fee2e2, #fecaca);
    color: #991b1b;
    border-color: #fca5a5;
    transform: translateY(-1px);
}

/* Filter Actions */
#filter-actions {
    display: flex;
    gap: 10px;
    order: 1;
}

#btn-advanced-filter {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    border: none;
    color: #fff;
    border-radius: 10px;
    padding: 11px 20px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

#btn-advanced-filter:hover {
    background: linear-gradient(135deg, #b91c1c, #991b1b);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.4);
}

/* Table Styling - Enhanced (Neutral Color) */
/* HAPUS TABLE-RESPONSIVE-CUSTOM DAN GANTI DENGAN TABLE BIASA */
.card.shadow-md {
    border-radius: 16px;
    border: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

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

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

.table thead th {
    background: linear-gradient(to bottom, #f8fafc, #f1f5f9);
    border-bottom: 2px solid #e2e8f0;
    color: #1e293b;
    padding: 16px 20px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.table tbody td {
    padding: 16px 20px;
    vertical-align: middle;
    font-size: 0.9rem;
    border-bottom: 1px solid #f1f3f5;
    transition: background-color 0.2s ease;
}

.table-hover tbody tr {
    transition: all 0.2s ease;
}

.table-hover tbody tr:hover {
    background-color: #f8fafc;
    transform: scale(1.002);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.table .btn {
    font-size: 0.8rem;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
}

/* Pagination Footer - Improved with Red Theme */
.card-footer {
    background: linear-gradient(to bottom, #fafbfc, #ffffff) !important;
    border-top: 1px solid #e8eaed;
    border-bottom-left-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
    padding: 18px 28px !important;
}

.pagination-google .page-item .page-link {
    border-radius: 10px !important;
    margin: 0 4px;
    border: 1px solid #e2e8f0;
    color: #4a5568;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 500;
    padding: 8px 14px;
}

.pagination-google .page-item.active .page-link {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
    transform: translateY(-1px);
}

.pagination-google .page-item .page-link:hover:not(.active) {
    background-color: #fee2e2;
    border-color: #fca5a5;
    color: #991b1b;
    transform: translateY(-1px);
}

/* Button Styles - Enhanced */
.btn-approve {
    background: linear-gradient(135deg, #10b981, #059669);
    border: none;
    color: white;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    transition: all 0.3s ease;
}

.btn-approve:hover {
    background: linear-gradient(135deg, #059669, #047857);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
}

.btn-reject {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border: none;
    color: white;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
    transition: all 0.3s ease;
}

.btn-reject:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
}

/* Badge Styles - Modern Look */
.marketplace-badge {
    background: linear-gradient(135deg, #f65c5cff, #ed3a3aff);
    color: white;
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.75rem;
    box-shadow: 0 2px 6px rgba(139, 92, 246, 0.3);
}

.status-pending {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #000;
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(251, 191, 36, 0.3);
}

.status-approved {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}

.status-rejected {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
}

/* Responsive Design - Optimized */
@media (max-width: 768px) {
    #main-filter-bar {
        flex-direction: column;
        align-items: stretch;
        padding: 16px 20px;
    }

    #status-tabs {
        width: 100%;
        justify-content: flex-start;
        margin-bottom: 16px;
    }

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

    #filter-actions {
        width: 100%;
        justify-content: flex-end;
    }
    
    .table thead th {
        padding: 12px 16px;
        font-size: 0.8rem;
    }
    
    .table tbody td {
        padding: 12px 16px;
        font-size: 0.85rem;
    }
}

/* Smooth Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.table tbody tr {
    animation: fadeIn 0.3s ease;
}
</style>
@endpush

@section('content')
    <div id="main-filter-bar" class="border-bottom py-2">
        <div id="status-tabs" class="d-flex flex-nowrap overflow-auto">
            <a href="#" class="nav-link fw-semibold active me-2" data-status="all">
                Semua <span class="badge bg-secondary text-white">{{ $statusCounts['all'] ?? 0 }}</span>
            </a>
            <a href="#" class="nav-link fw-semibold me-2" data-status="pending">
                Pending <span class="badge bg-warning text-dark">{{ $statusCounts['pending'] ?? 0 }}</span>
            </a>
            <a href="#" class="nav-link fw-semibold me-2" data-status="approved">
                Disetujui <span class="badge bg-success text-white">{{ $statusCounts['approved'] ?? 0 }}</span>
            </a>
            <a href="#" class="nav-link fw-semibold me-2" data-status="rejected">
                Ditolak <span class="badge bg-danger text-white">{{ $statusCounts['rejected'] ?? 0 }}</span>
            </a>
        </div>

        <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 order, marketplace, shop name..." aria-label="Cari...">
                <button class="btn btn-outline-secondary btn-sm" id="btn-search" type="button">
                    <i class="icon-base ti tabler-search"></i>
                </button>
            </div>
        </div>

        <div id="filter-actions">
            <button class="btn btn-sm" id="btn-advanced-filter" data-bs-toggle="modal" data-bs-target="#filterModal">
                <i class="icon-base ti tabler-filter me-1"></i> Filter
            </button>
        </div>
    </div>

    <div class="card shadow-md rounded-lg">
        <div class="card-body pb-0">
            <!-- HAPUS TABLE-RESPONSIVE-CUSTOM DAN GUNAKAN TABLE BIASA -->
            <table class="table table-hover align-middle">
                <thead>
                    <tr>
                        <th scope="col" style="min-width: 160px;">
                            <a href="#" class="text-decoration-none text-dark fw-semibold">
                                ORDER MARKETPLACE</i>
                            </a>
                        </th>
                        <th scope="col" style="min-width: 140px;">
                            <a href="#" class="text-decoration-none text-dark fw-semibold">
                                STATUS</i>
                            </a>
                        </th>
                        <th scope="col" style="min-width: 200px;" class="fw-semibold text-dark">PLATFORM & SHOP</th>
                        <th scope="col" style="min-width: 200px;" class="fw-semibold text-dark">LOGISTIC</th>
                        <th scope="col" style="min-width: 150px;" class="fw-semibold text-dark">SHIPPING COST</th>
                        <th scope="col" style="min-width: 200px;" class="fw-semibold text-dark">AKSI</th>
                    </tr>
                </thead>
                <tbody id="order-table-body">
                </tbody>
            </table>
        </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>

<!-- Modal Filter - Dioptimasi UI -->
<div class="modal fade" id="filterModal" tabindex="-1" aria-labelledby="filterModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content" style="padding: 4px 6px;">
            <div class="modal-header pb-2" style="padding-top: 14px; padding-bottom: 10px;">
                <h5 class="modal-title" id="filterModalLabel">Filter Platform</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
            </div>

            <div class="modal-body" style="padding-top: 10px; padding-bottom: 6px;">
                <div class="mb-3">
                    <label for="modal_platform" class="form-label">Pilih Platform</label>
                    <select id="modal_platform" class="form-select">
                        <option value="">Semua Platform</option>
                        <option value="Shopee">Shopee</option>
                        <option value="Tokopedia">Tokopedia</option>
                        <option value="Lazada">Lazada</option>
                    </select>
                </div>
            </div>

            <div class="modal-footer pt-2" style="padding-bottom: 12px;">
                <button type="button" class="btn btn-outline-secondary" id="btn-reset-filters">Reset</button>
                <button type="button" class="btn btn-primary" id="btn-apply-filters" data-bs-dismiss="modal">
                    Terapkan
                </button>
            </div>
        </div>
    </div>
</div>

@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 src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script>
const marketplaceStatusMap = {
    'pending': 'Menunggu Approval',
    'approved': 'Disetujui',
    'rejected': 'Ditolak'
};

let currentPage = 1;
let currentStatus = 'all';
let itemsPerPage = 10;
let currentPlatform = '';

let statusCounters = {
    all: 0,
    pending: 0,
    approved: 0,
    rejected: 0
};

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 initStatusCountersFromDOM() {
    const allBadge = document.querySelector('[data-status="all"] .badge');
    const pendingBadge = document.querySelector('[data-status="pending"] .badge');
    const approvedBadge = document.querySelector('[data-status="approved"] .badge');
    const rejectedBadge = document.querySelector('[data-status="rejected"] .badge');

    statusCounters.all = allBadge ? parseInt(allBadge.textContent.trim()) || 0 : 0;
    statusCounters.pending = pendingBadge ? parseInt(pendingBadge.textContent.trim()) || 0 : 0;
    statusCounters.approved = approvedBadge ? parseInt(approvedBadge.textContent.trim()) || 0 : 0;
    statusCounters.rejected = rejectedBadge ? parseInt(rejectedBadge.textContent.trim()) || 0 : 0;
}

function updateStatusBadgesFromCounters() {
    const allBadge = document.querySelector('[data-status="all"] .badge');
    const pendingBadge = document.querySelector('[data-status="pending"] .badge');
    const approvedBadge = document.querySelector('[data-status="approved"] .badge');
    const rejectedBadge = document.querySelector('[data-status="rejected"] .badge');

    if (allBadge) allBadge.textContent = statusCounters.all;
    if (pendingBadge) pendingBadge.textContent = statusCounters.pending;
    if (approvedBadge) approvedBadge.textContent = statusCounters.approved;
    if (rejectedBadge) rejectedBadge.textContent = statusCounters.rejected;
}

function updateRowStatus(orderId, newStatus, serverStatusCounts = null) {
    if (serverStatusCounts && typeof serverStatusCounts === 'object') {
        if (serverStatusCounts.all !== undefined) statusCounters.all = parseInt(serverStatusCounts.all) || 0;
        if (serverStatusCounts.pending !== undefined) statusCounters.pending = parseInt(serverStatusCounts.pending) || 0;
        if (serverStatusCounts.approved !== undefined) statusCounters.approved = parseInt(serverStatusCounts.approved) || 0;
        if (serverStatusCounts.rejected !== undefined) statusCounters.rejected = parseInt(serverStatusCounts.rejected) || 0;
        updateStatusBadgesFromCounters();
    }

    const rows = document.querySelectorAll('#order-table-body tr');
    let found = false;

    for (const row of rows) {
        const rowOrderId = row.getAttribute('data-order-id');
        if (!rowOrderId) continue;

        if (String(rowOrderId) === String(orderId)) {
            found = true;

            const statusBadge = row.querySelector('.badge.fw-bold');
            const prevStatusText = statusBadge ? statusBadge.textContent.trim() : null;

            let prevStatus = null;
            if (prevStatusText === marketplaceStatusMap.pending) prevStatus = 'pending';
            else if (prevStatusText === marketplaceStatusMap.approved) prevStatus = 'approved';
            else if (prevStatusText === marketplaceStatusMap.rejected) prevStatus = 'rejected';

            if (statusBadge) {
                statusBadge.className = `badge fw-bold text-xs status-${newStatus}`;
                statusBadge.textContent = marketplaceStatusMap[newStatus] || newStatus;
            }

            const actionCell = row.querySelector('td:last-child');
            if (actionCell) actionCell.innerHTML = `<span class="text-muted">Tidak ada aksi</span>`;

            if (newStatus === 'approved') {
                const awbInfo = row.querySelector('.text-muted.text-xs.mt-3');
                if (awbInfo) {
                    const newAwb =
                        'AWB' +
                        new Date().toISOString().slice(0, 10).replace(/-/g, '') +
                        Math.floor(100000 + Math.random() * 900000);
                    awbInfo.textContent = `AWB: ${newAwb}`;
                }
            }

            if (prevStatus && statusCounters[prevStatus] !== undefined && statusCounters[newStatus] !== undefined) {
                statusCounters[prevStatus] = Math.max(0, statusCounters[prevStatus] - 1);
                statusCounters[newStatus] = statusCounters[newStatus] + 1;
            } else {
                recalcCountersFromDOM();
            }

            if (currentStatus !== 'all') {
                if (newStatus !== currentStatus) row.remove();
            }

            updateStatusBadgesFromCounters();
            break;
        }
    }
}

function recalcCountersFromDOM() {
    const rows = document.querySelectorAll('#order-table-body tr');
    let pendingCount = 0;
    let approvedCount = 0;
    let rejectedCount = 0;
    let allCount = 0;

    rows.forEach(row => {
        const statusBadge = row.querySelector('.badge.fw-bold');
        if (statusBadge) {
            const statusText = statusBadge.textContent.trim();
            allCount++;
            if (statusText === marketplaceStatusMap.pending) pendingCount++;
            else if (statusText === marketplaceStatusMap.approved) approvedCount++;
            else if (statusText === marketplaceStatusMap.rejected) rejectedCount++;
        }
    });

    statusCounters.all = allCount;
    statusCounters.pending = pendingCount;
    statusCounters.approved = approvedCount;
    statusCounters.rejected = rejectedCount;

    updateStatusBadgesFromCounters();
}

function approveMarketplaceOrder(orderId) {
    Swal.fire({
        title: 'Setujui Order Marketplace?',
        text: 'Order marketplace akan disetujui dan diproses.',
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#28a745',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Ya, Setujui!',
        cancelButtonText: 'Batal'
    }).then(result => {
        if (result.isConfirmed) {
            Swal.fire({
                title: 'Memproses...',
                text: 'Sedang menyetujui order...',
                allowOutsideClick: false,
                didOpen: () => Swal.showLoading()
            });

            axios
                .post('{{ route("marketplace.orders.approve") }}', {
                    order_marketplace_id: orderId
                })
                .then(response => {
                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil!',
                        text: response.data.message || 'Order disetujui',
                        timer: 1500,
                        showConfirmButton: false
                    });

                    const serverCounts = response.data?.status_counts || null;
                    updateRowStatus(orderId, 'approved', serverCounts);
                })
                .catch(error => {
                    const msg = error.response?.data?.message || 'Gagal menyetujui order.';
                    Swal.fire({ icon: 'error', title: 'Gagal', text: msg });
                });
        }
    });
}

function rejectMarketplaceOrder(orderId) {
    Swal.fire({
        title: 'Tolak Order Marketplace?',
        text: 'Order marketplace akan ditolak dan tidak diproses.',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#dc3545',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Ya, Tolak!',
        cancelButtonText: 'Batal'
    }).then(result => {
        if (result.isConfirmed) {
            Swal.fire({
                title: 'Memproses...',
                text: 'Sedang menolak order...',
                allowOutsideClick: false,
                didOpen: () => Swal.showLoading()
            });

            axios
                .post('{{ route("marketplace.orders.reject") }}', {
                    order_marketplace_id: orderId
                })
                .then(response => {
                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil!',
                        text: response.data.message || 'Order ditolak',
                        timer: 1500,
                        showConfirmButton: false
                    });

                    const serverCounts = response.data?.status_counts || null;
                    updateRowStatus(orderId, 'rejected', serverCounts);
                })
                .catch(error => {
                    const msg = error.response?.data?.message || 'Gagal menolak order.';
                    Swal.fire({ icon: 'error', title: 'Gagal', text: msg });
                });
        }
    });
}

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

function fetchData(page = 1) {
    currentPage = page;
    const tableBody = document.getElementById('order-table-body');
    const paginationInfoSpan = document.getElementById('pagination-info');
    const pagination = document.getElementById('pagination');
    const searchInput = document.getElementById('search');
    const search = searchInput ? searchInput.value.trim() : '';

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

    axios
        .get('{{ route("marketplace.orders.data") }}', {
            params: {
                page: currentPage,
                limit: itemsPerPage,
                platform: currentPlatform,
                search: search,
                status: currentStatus
            }
        })
        .then(response => {
            const res = response.data;

            if (res?.status_counts) {
                const sc = res.status_counts;
                statusCounters.all = sc.all !== undefined ? parseInt(sc.all) || 0 : statusCounters.all;
                statusCounters.pending = sc.pending !== undefined ? parseInt(sc.pending) || 0 : statusCounters.pending;
                statusCounters.approved = sc.approved !== undefined ? parseInt(sc.approved) || 0 : statusCounters.approved;
                statusCounters.rejected = sc.rejected !== undefined ? parseInt(sc.rejected) || 0 : statusCounters.rejected;
                updateStatusBadgesFromCounters();
            }

            renderTable(res.data || []);
            renderPagination(res.current_page || 1, res.last_page || 1, res.total || 0, res.from || 0, res.to || 0);
        })
        .catch(error => {
            let errorMessage = 'Gagal memuat data. Silakan coba lagi.';
            if (error.response) {
                errorMessage = error.response.data.message || `Error ${error.response.status}`;
            } else if (error.request) {
                errorMessage = 'Tidak ada response dari server.';
            }

            tableBody.innerHTML = `<tr><td colspan="6" class="text-center text-danger py-4">${errorMessage}</td></tr>`;
            paginationInfoSpan.textContent = 'Gagal memuat data.';
            pagination.innerHTML = '';
        });
}

function renderTable(data) {
    const tableBody = document.getElementById('order-table-body');
    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 statusClass = `status-${item.status}`;
        const statusText = marketplaceStatusMap[item.status] || item.status;
        const createdAtFormatted = formatDate(item.created_at);

        const actionButtons =
            item.status === 'pending'
                ? `<div class="d-flex gap-1">
                    <button class="btn btn-approve btn-sm" onclick="approveMarketplaceOrder(${item.id})">Approve</button>
                    <button class="btn btn-reject btn-sm" onclick="rejectMarketplaceOrder(${item.id})">Reject</button>
                </div>`
                : `<span class="text-muted">Tidak ada aksi</span>`;

        const row = `
            <tr data-order-id="${item.id}">
                <td>
                    <div class="fw-semibold text-sm">${item.order_no || '-'}</div>
                    <div class="d-flex justify-content-between text-muted text-xs mt-1"><span>${createdAtFormatted}</span></div>
                    ${item.order?.shipment_order_no ? `<div class="text-muted text-xs mt-1">Order: ${item.order.shipment_order_no}</div>` : ''}
                </td>
                <td>
                    <div class="badge fw-bold text-xs ${statusClass}">${statusText}</div>
                    <div class="text-muted text-xs mt-3">
                        ${item.awb_number ? `AWB: ${item.awb_number}` : 'Belum ada AWB'}
                    </div>
                </td>
                <td class="text-xs">
                    <div><span class="badge marketplace-badge me-1">${item.platform || '-'}</span></div>
                    <div class="fw-semibold text-sm mt-1">${item.shop_name || '-'}</div>
                    <div class="text-muted text-truncate-2">${item.order_no || 'Tidak ada info'}</div>
                </td>
                <td class="text-xs">
                    <div class="fw-semibold text-sm">${item.logistic_name || '-'}</div>
                    <div class="text-muted">${item.rate_name || '-'}</div>
                    <div class="text-muted">${item.rate_code || '-'}</div>
                </td>
                <td class="text-xs"><div class="fw-semibold text-sm">${formatRupiah(item.shipping_cost || 0)}</div></td>
                <td>${actionButtons}</td>
            </tr>
        `;

        tableBody.insertAdjacentHTML('beforeend', row);
    });
}

function renderPagination(current, totalPages, totalItems, fromItem, toItem) {
    const pagination = document.getElementById('pagination');
    const paginationInfoSpan = document.getElementById('pagination-info');

    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);
            }
        });
    });
}

document.addEventListener('DOMContentLoaded', function () {
    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 modalPlatform = document.getElementById('modal_platform');
    const btnApplyFilters = document.getElementById('btn-apply-filters');
    const btnResetFilters = document.getElementById('btn-reset-filters');

    itemsPerPage = parseInt(itemsPerPageSelect.value || 10);

    initStatusCountersFromDOM();
    updateStatusBadgesFromCounters();

    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 () {
        currentPlatform = modalPlatform.value;
        fetchData(1);
    });

    btnResetFilters.addEventListener('click', function () {
        modalPlatform.value = '';
        currentPlatform = '';
        fetchData(1);
    });

    itemsPerPageSelect.addEventListener('change', function () {
        itemsPerPage = parseInt(this.value);
        fetchData(1);
    });

    searchInput.addEventListener('input', debounce(() => fetchData(1), 500));
    searchButton.addEventListener('click', () => fetchData(1));

    fetchData();
});

window.approveMarketplaceOrder = approveMarketplaceOrder;
window.rejectMarketplaceOrder = rejectMarketplaceOrder;
</script>

@endpush