@extends('template.desktop.app')

@push('styles')
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
    <style>
        :root {
            --c-primary: #A52019;
            --c-primary-dark: #8B1510;
            --c-primary-soft: #fef2f1;
            --c-bg: #f8f9fb;
            --c-surface: #ffffff;
            --c-border: #e8eaed;
            --c-border-light: #f1f3f5;
            --c-text: #1a1d21;
            --c-text-sec: #5f6368;
            --c-text-muted: #9aa0a6;
            --c-success: #1e8e3e;
            --c-success-bg: #e6f4ea;
            --c-warning: #e37400;
            --c-warning-bg: #fef7e0;
            --c-danger: #d93025;
            --c-danger-bg: #fce8e6;
            --c-info: #1a73e8;
            --c-info-bg: #e8f0fe;
            --radius: 12px;
            --radius-lg: 16px;
            --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
            --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
            --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
            --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
        }

        .premium-dashboard-wrapper {
            font-family: 'Inter', -apple-system, system-ui, sans-serif;
            color: var(--c-text);
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;
        }

        /* Header */
        .glass-header {
            background: var(--c-text);
            border-radius: var(--radius-lg);
            padding: 1.75rem 2rem;
            margin-bottom: 1.5rem;
            color: #fff;
        }

        .glass-header h2,
        .glass-header h1 {
            color: #fff;
        }

        .glass-header p {
            color: rgba(255, 255, 255, 0.55);
        }

        @media (max-width: 991.98px) {
            .glass-header {
                padding: 1.5rem;
                text-align: center;
            }
        }

        /* Stats */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        @media (max-width: 991.98px) {
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 575.98px) {
            .stats-grid {
                grid-template-columns: 1fr;
            }
        }

        .p-stat-card {
            background: var(--c-surface);
            border-radius: var(--radius);
            padding: 1.25rem 1.5rem;
            border: 1px solid var(--c-border);
            display: flex;
            align-items: center;
            gap: 1rem;
            transition: box-shadow 0.2s, transform 0.2s;
        }

        .p-stat-card:hover {
            box-shadow: var(--shadow-md);
            transform: translateY(-2px);
        }

        .p-stat-icon {
            width: 48px;
            height: 48px;
            border-radius: var(--radius);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .p-stat-card .h3 {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--c-text);
        }

        /* Tabs */
        .p-tabs-container {
            background: var(--c-surface);
            padding: 4px;
            border-radius: var(--radius);
            display: inline-flex;
            flex-wrap: wrap;
            gap: 2px;
            border: 1px solid var(--c-border);
        }

        .p-tab {
            padding: 0.5rem 1rem;
            border-radius: 10px;
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--c-text-sec);
            cursor: pointer;
            transition: all 0.15s;
            border: none;
            background: transparent;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            white-space: nowrap;
        }

        .p-tab:hover {
            background: var(--c-bg);
            color: var(--c-text);
        }

        .p-tab.active {
            background: var(--c-primary);
            color: #fff;
        }

        .p-tab-count {
            background: var(--c-bg);
            color: var(--c-text-sec);
            padding: 1px 7px;
            border-radius: 999px;
            font-size: 0.7rem;
            font-weight: 700;
        }

        .p-tab.active .p-tab-count {
            background: rgba(255, 255, 255, 0.2);
            color: #fff;
        }

        /* Card */
        .p-card {
            background: var(--c-surface);
            border-radius: var(--radius-lg);
            border: 1px solid var(--c-border);
            box-shadow: var(--shadow-sm);
            overflow: hidden;
        }

        /* Table */
        .p-table {
            width: 100%;
            border-collapse: collapse;
        }

        .p-table thead th {
            background: var(--c-bg);
            padding: 0.75rem 1.25rem;
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--c-text-muted);
            border-bottom: 1px solid var(--c-border);
            text-align: left;
        }

        .p-table thead th:first-child {
            width: 48px;
            text-align: center;
        }

        .p-table tbody td {
            padding: 0.875rem 1.25rem;
            border-bottom: 1px solid var(--c-border-light);
            vertical-align: middle;
            font-size: 0.835rem;
        }

        .p-table tbody tr {
            transition: background 0.1s;
        }

        .p-table tbody tr:hover {
            background: var(--c-primary-soft);
        }

        .p-table tbody tr:last-child td {
            border-bottom: none;
        }

        /* AWB Badge */
        .awb-badge {
            background: var(--c-bg);
            color: var(--c-text-sec);
            padding: 0.35rem 0.7rem;
            border-radius: 6px;
            font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
            font-size: 0.72rem;
            font-weight: 600;
            border: 1px solid var(--c-border);
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            transition: all 0.15s;
        }

        .awb-badge.active {
            background: var(--c-primary-soft);
            color: var(--c-primary);
            border-color: var(--c-primary-soft);
            cursor: pointer;
        }

        .awb-badge.active:hover {
            background: var(--c-primary);
            color: #fff;
        }

        /* Badges */
        .p-badge {
            padding: 0.3rem 0.6rem;
            border-radius: 6px;
            font-weight: 700;
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.02em;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
        }

        .p-badge-pill {
            border-radius: 999px;
        }

        .p-badge-success {
            background: var(--c-success-bg);
            color: var(--c-success);
        }

        .p-badge-warning {
            background: var(--c-warning-bg);
            color: var(--c-warning);
        }

        .p-badge-danger {
            background: var(--c-danger-bg);
            color: var(--c-danger);
        }

        .p-badge-info {
            background: var(--c-info-bg);
            color: var(--c-info);
        }

        /* Search */
        .p-search-wrapper {
            position: relative;
            width: 100%;
            max-width: 360px;
        }

        .p-search-input {
            width: 100%;
            padding: 0.7rem 1rem 0.7rem 2.75rem;
            border-radius: 10px;
            border: 1px solid var(--c-border);
            background: var(--c-surface);
            font-size: 0.835rem;
            font-weight: 500;
            transition: border-color 0.15s, box-shadow 0.15s;
        }

        .p-search-input:focus {
            border-color: var(--c-primary);
            box-shadow: 0 0 0 3px var(--c-primary-soft);
            outline: none;
        }

        .p-search-icon {
            position: absolute;
            left: 0.9rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--c-text-muted);
            pointer-events: none;
            width: 16px;
        }

        /* Buttons */
        .p-btn {
            padding: 0.6rem 1.25rem;
            border-radius: 10px;
            font-weight: 600;
            font-size: 0.835rem;
            transition: all 0.15s;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            border: none;
            cursor: pointer;
        }

        .p-btn:hover {
            transform: translateY(-1px);
        }

        .p-btn:active {
            transform: translateY(0);
        }

        .p-btn-primary {
            background: var(--c-primary);
            color: #fff;
        }

        .p-btn-primary:hover {
            background: var(--c-primary-dark);
            color: #fff;
        }

        .p-btn-white {
            background: var(--c-surface);
            color: var(--c-text);
            border: 1px solid var(--c-border);
        }

        .p-btn-white:hover {
            background: var(--c-bg);
        }

        /* Modals */
        .modal-backdrop.show {
            background-color: rgba(0, 0, 0, 0.3);
        }

        .modal-content {
            border-radius: var(--radius-lg);
            border: 1px solid var(--c-border);
            box-shadow: var(--shadow-lg);
            overflow: hidden;
        }

        .modal-header {
            padding: 1.5rem 1.75rem;
            border-bottom: 1px solid var(--c-border-light);
            background: var(--c-surface);
        }

        .modal-body {
            padding: 1.75rem;
        }

        .modal-title {
            font-weight: 700;
            color: var(--c-text);
        }

        .p-form-label {
            font-weight: 600;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: var(--c-text-sec);
            margin-bottom: 0.5rem;
            display: block;
        }

        .p-input {
            background: var(--c-bg);
            border: 1px solid var(--c-border);
            padding: 0.7rem 1rem;
            border-radius: 10px;
            font-weight: 500;
            transition: border-color 0.15s;
        }

        .p-input:focus {
            background: var(--c-surface);
            border-color: var(--c-primary);
            box-shadow: 0 0 0 3px var(--c-primary-soft);
            outline: none;
        }

        /* Bulk Toolbar */
        .p-bulk-toolbar {
            position: fixed;
            bottom: 1.5rem;
            right: 1.5rem;
            background: var(--c-text);
            color: #fff;
            padding: 0.875rem 1.75rem;
            border-radius: var(--radius);
            display: flex;
            align-items: center;
            gap: 1.5rem;
            box-shadow: var(--shadow-lg);
            z-index: 1048;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            opacity: 0;
            visibility: hidden;
            transform: translateY(20px);
        }

        .p-bulk-toolbar.visible {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        /* Timeline */
        .p-timeline {
            position: relative;
            padding-left: 2rem;
            padding-top: 0.5rem;
        }

        .p-timeline::before {
            content: '';
            position: absolute;
            left: 0.75rem;
            top: 0;
            bottom: 0;
            width: 2px;
            background: var(--c-border);
        }

        .p-timeline-item {
            position: relative;
            padding-bottom: 1.5rem;
        }

        .p-timeline-item:last-child {
            padding-bottom: 0.5rem;
        }

        .p-timeline-dot {
            position: absolute;
            left: -1.25rem;
            top: 0.4rem;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--c-surface);
            border: 3px solid var(--c-primary);
            z-index: 1;
        }

        /* Pagination */
        .pagination-modern .page-item .page-link {
            border: none;
            color: var(--c-text-sec);
            font-weight: 600;
            font-size: 0.8rem;
            border-radius: 8px !important;
            min-width: 34px;
            text-align: center;
            padding: 6px 12px;
        }

        .pagination-modern .page-item .page-link:hover {
            background: var(--c-primary-soft);
            color: var(--c-primary);
        }

        .pagination-modern .page-item.active .page-link {
            background: var(--c-primary);
            color: #fff;
        }

        .pagination-modern .page-item.disabled .page-link {
            opacity: 0.35;
        }

        /* Checkbox */
        .form-check-input:checked {
            background-color: var(--c-primary);
            border-color: var(--c-primary);
        }

        .form-check-input:focus {
            box-shadow: 0 0 0 3px var(--c-primary-soft);
            border-color: var(--c-primary);
        }

        /* Filter Tags */
        .filter-tag {
            transition: all 0.15s;
        }

        .filter-tag:hover {
            border-color: var(--c-primary) !important;
            color: var(--c-primary);
        }

        .filter-tag.active {
            background: var(--c-primary) !important;
            color: #fff !important;
            border-color: var(--c-primary) !important;
        }

        /* Scrollbar */
        .table-responsive::-webkit-scrollbar {
            height: 5px;
        }

        .table-responsive::-webkit-scrollbar-track {
            background: var(--c-bg);
        }

        .table-responsive::-webkit-scrollbar-thumb {
            background: var(--c-border);
            border-radius: 10px;
        }

        /* Misc */
        .p-card .border-bottom {
            border-color: var(--c-border-light) !important;
        }

        .bg-gray-50 {
            background: var(--c-bg) !important;
        }
    </style>
@endpush

@section('content')
    <div class="premium-dashboard-wrapper px-3 p-lg-0">
        <!-- Glassmorphism Header -->
        <header class="glass-header">
            <div class="row align-items-center">
                <div class="col-lg-7">
                    <div class="d-flex align-items-center gap-3 mb-2">
                        <div class="rounded-3 d-flex align-items-center justify-content-center"
                            style="width: 44px; height: 44px; background: rgba(255,255,255,0.1);">
                            <i data-lucide="shopping-bag" style="width: 22px; color: #fff;"></i>
                        </div>
                        <div>
                            <h2 class="fw-bold mb-0" style="font-size: 1.6rem; letter-spacing: -0.02em;">Marketplace Orders
                            </h2>
                            <p class="mb-0" style="font-size: 0.85rem;">Kelola pesanan dari semua platform marketplace</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-5 text-lg-end mt-3 mt-lg-0">
                    <div class="d-flex gap-2 justify-content-lg-end">
                        <button class="p-btn shadow-sm"
                            style="background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.2);"
                            data-bs-toggle="modal" data-bs-target="#filterModal">
                            <i data-lucide="filter" style="width: 16px;"></i> Filter
                        </button>
                        <button class="p-btn shadow-sm" id="btn-sync-tracking"
                            style="background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.2);"
                            onclick="syncTracking()">
                            <i data-lucide="refresh-cw" style="width: 16px;"></i> Sync Status
                        </button>
                        <button class="p-btn" style="background: #fff; color: var(--c-primary); font-weight: 700;"
                            data-bs-toggle="modal" data-bs-target="#importModal">
                            <i data-lucide="upload" style="width: 16px;"></i> Bulk Import
                        </button>
                    </div>
                </div>
            </div>
        </header>

        <!-- Stats Grid -->
        <section class="stats-grid">
            <div class="p-stat-card">
                <div class="p-stat-icon" style="background: var(--c-primary-soft); color: var(--c-primary);">
                    <i data-lucide="package"></i>
                </div>
                <div>
                    <div class="text-muted small fw-bold text-uppercase mb-1">Total Orders</div>
                    <div class="h3 fw-bold mb-0" id="stat-total-orders">0</div>
                </div>
            </div>
            <div class="p-stat-card">
                <div class="p-stat-icon" style="background: #fff7ed; color: #c2410c;">
                    <i data-lucide="clock"></i>
                </div>
                <div>
                    <div class="text-muted small fw-bold text-uppercase mb-1">Pending</div>
                    <div class="h3 fw-bold mb-0" id="stat-pending">0</div>
                </div>
            </div>
            <div class="p-stat-card">
                <div class="p-stat-icon" style="background: #f0fdf4; color: #15803d;">
                    <i data-lucide="check-circle-2"></i>
                </div>
                <div>
                    <div class="text-muted small fw-bold text-uppercase mb-1">Saldo Updated</div>
                    <div class="h3 fw-bold mb-0" id="stat-done_approve">0</div>
                </div>
            </div>
            <div class="p-stat-card">
                <div class="p-stat-icon" style="background: #f0f9ff; color: #0369a1;">
                    <i data-lucide="refresh-cw"></i>
                </div>
                <div>
                    <div class="text-muted small fw-bold text-uppercase mb-1">Returns</div>
                    <div class="h3 fw-bold mb-0" id="stat-returned">0</div>
                </div>
            </div>
            <div class="p-stat-card">
                <div class="p-stat-icon" style="background: #f3f4f6; color: #6b7280;">
                    <i data-lucide="ban"></i>
                </div>
                <div>
                    <div class="text-muted small fw-bold text-uppercase mb-1">Dibatalkan</div>
                    <div class="h3 fw-bold mb-0" id="stat-cancelled">0</div>
                </div>
            </div>
        </section>

        <!-- Charts Section -->
        <div class="row g-4 mb-5">
            <div class="col-xl-8">
                <div class="p-card h-100">
                    <div class="p-4 border-bottom d-flex justify-content-between align-items-center">
                        <h6 class="fw-bold mb-0">Order Performance</h6>
                        <div class="p-tabs-container mb-0 p-1" style="border-radius: 10px;">
                            <button class="p-tab active p-1 px-3 filter-period" data-range="weekly"
                                style="border-radius: 8px; font-size: 0.75rem;">Weekly</button>
                            <button class="p-tab p-1 px-3 filter-period" data-range="monthly"
                                style="border-radius: 8px; font-size: 0.75rem;">Monthly</button>
                        </div>
                    </div>
                    <div class="p-4">
                        <div id="ordersChart" style="min-height: 350px;"></div>
                    </div>
                </div>
            </div>
            <div class="col-xl-4">
                <div class="p-card h-100">
                    <div class="p-4 border-bottom">
                        <h6 class="fw-bold mb-0">Logistic Share</h6>
                    </div>
                    <div class="p-4 d-flex flex-column align-items-center justify-content-center">
                        <div id="logisticsChart"></div>
                        <div id="logisticsLegend" class="w-100 mt-4"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Content Area -->
        <div class="row g-4 mb-5">
            <div class="col-xl-12">
                <div class="d-flex flex-wrap justify-content-between align-items-center gap-4 mb-4">
                    <div class="p-tabs-container" id="status-tabs">
                        <button class="p-tab active" data-status="all">
                            Semua <span class="p-tab-count" id="count-all">0</span>
                        </button>
                        <button class="p-tab" data-status="pending">
                            Pending <span class="p-tab-count" id="count-pending">0</span>
                        </button>
                        <button class="p-tab" data-status="needs_update">
                            Update Saldo <span class="p-tab-count" id="count-needs_update">0</span>
                        </button>
                        <button class="p-tab" data-status="needs_deduct">
                            Potong Saldo <span class="p-tab-count" id="count-needs_deduct">0</span>
                        </button>
                        <button class="p-tab" data-status="returned">
                            Return <span class="p-tab-count" id="count-returned">0</span>
                        </button>
                        <button class="p-tab" data-status="rejected">
                            Ditolak <span class="p-tab-count" id="count-rejected">0</span>
                        </button>
                        <button class="p-tab" data-status="cancelled">
                            Dibatalkan <span class="p-tab-count" id="count-cancelled">0</span>
                        </button>
                        <button class="p-tab" data-status="done_approve">
                            Saldo Updated <span class="p-tab-count" id="count-done_approve">0</span>
                        </button>
                    </div>

                    <div class="p-search-wrapper">
                        <i data-lucide="search" class="p-search-icon" style="width: 20px;"></i>
                        <input type="text" id="search" class="p-search-input"
                            placeholder="Search by Order ID, AWB, or Shop...">
                    </div>
                </div>

                <div class="p-card">
                    <div class="table-responsive">
                        <table class="p-table">
                            <thead>
                                <tr>
                                    <th width="60" class="text-center">
                                        <input type="checkbox" id="check-all" class="form-check-input">
                                    </th>
                                    <th>Order Details</th>
                                    <th>Platform & Shop</th>
                                    <th>Logistic & AWB</th>
                                    <th class="text-end">Shipping Cost</th>
                                    <th class="text-end">Commission</th>
                                    <th class="text-end" width="160">Actions</th>
                                </tr>
                            </thead>
                            <tbody id="order-table-body">
                                <!-- Data injected via JavaScript -->
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination Precision -->
                    <div
                        class="p-4 bg-gray-50 border-top d-flex flex-wrap justify-content-between align-items-center gap-3">
                        <div class="d-flex align-items-center gap-3">
                            <span class="text-muted small fw-bold">Rows per page:</span>
                            <select class="form-select form-select-sm border-0 shadow-sm rounded-pill px-3"
                                id="items-per-page" style="width: 85px;">
                                <option value="10">10</option>
                                <option value="25">25</option>
                                <option value="50">50</option>
                                <option value="100">100</option>
                            </select>
                            <span class="text-muted small fw-bold" id="pagination-info">Showing 0-0 of 0</span>
                        </div>
                        <nav>
                            <ul class="pagination pagination-sm pagination-modern mb-0" id="pagination"></ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modals (Filter, Import, Tracking) -->
    <!-- Filter Modal -->
    <div class="modal fade" id="filterModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content" style="border:none;border-radius:20px;overflow:hidden;">
                {{-- Header --}}
                <div class="modal-header border-0 px-4 pt-4 pb-0" style="background:#fff;">
                    <div class="d-flex align-items-center gap-3">
                        <div class="d-flex align-items-center justify-content-center rounded-3"
                            style="width:44px;height:44px;background:var(--c-primary-soft);">
                            <i data-lucide="sliders-horizontal" style="width:20px;color:var(--c-primary);"></i>
                        </div>
                        <div>
                            <h5 class="modal-title fw-800 mb-0" style="font-size:1.1rem;letter-spacing:-0.02em;">Filter
                                Lanjutan</h5>
                            <p class="text-muted mb-0" style="font-size:0.75rem;">Saring data sesuai kebutuhan</p>
                        </div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body px-4 pt-4 pb-2">
                    {{-- Date Range --}}
                    <div class="mb-4">
                        <label class="d-flex align-items-center gap-2 mb-2"
                            style="font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;color:var(--c-text-sec);">
                            <i data-lucide="calendar-range" style="width:14px;color:var(--c-primary);"></i> Rentang
                            Tanggal
                        </label>
                        <div style="position:relative;">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                                fill="none" stroke="var(--c-text-muted)" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round"
                                style="position:absolute;left:12px;top:50%;transform:translateY(-50%);pointer-events:none;">
                                <rect width="18" height="18" x="3" y="4" rx="2" ry="2" />
                                <line x1="16" x2="16" y1="2" y2="6" />
                                <line x1="8" x2="8" y1="2" y2="6" />
                                <line x1="3" x2="21" y1="10" y2="10" />
                            </svg>
                            <input type="text" id="filter_date_range" placeholder="Pilih rentang tanggal..."
                                style="width:100%;padding:0.65rem 1rem 0.65rem 2.5rem;border:1.5px solid var(--c-border);border-radius:10px;font-size:0.835rem;font-weight:500;font-family:inherit;background:var(--c-bg);outline:none;transition:border-color 0.15s,box-shadow 0.15s;color:var(--c-text);"
                                onfocus="this.style.borderColor='var(--c-primary)';this.style.boxShadow='0 0 0 3px var(--c-primary-soft)';"
                                onblur="this.style.borderColor='var(--c-border)';this.style.boxShadow='none';">
                        </div>
                    </div>

                    {{-- Platform --}}
                    <div class="mb-4">
                        <label class="d-flex align-items-center gap-2 mb-2"
                            style="font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;color:var(--c-text-sec);">
                            <i data-lucide="store" style="width:14px;color:var(--c-primary);"></i> Platform Marketplace
                        </label>
                        <div class="d-flex flex-wrap gap-2 platform-filter-tags">
                            <button class="filter-tag active d-flex align-items-center gap-2" data-filter="platform"
                                data-value=""
                                style="padding:0.55rem 1rem;border-radius:10px;border:1.5px solid var(--c-border);background:#fff;font-size:0.8rem;font-weight:600;cursor:pointer;transition:all 0.15s;">
                                <i data-lucide="layers" style="width:14px;"></i> Semua
                            </button>
                            <button class="filter-tag d-flex align-items-center gap-2" data-filter="platform"
                                data-value="Shopee"
                                style="padding:0.55rem 1rem;border-radius:10px;border:1.5px solid var(--c-border);background:#fff;font-size:0.8rem;font-weight:600;cursor:pointer;transition:all 0.15s;">
                                <span style="font-size:1rem;">🛒</span> Shopee
                            </button>
                            <button class="filter-tag d-flex align-items-center gap-2" data-filter="platform"
                                data-value="Tokopedia"
                                style="padding:0.55rem 1rem;border-radius:10px;border:1.5px solid var(--c-border);background:#fff;font-size:0.8rem;font-weight:600;cursor:pointer;transition:all 0.15s;">
                                <span style="font-size:1rem;">🟢</span> Tokopedia
                            </button>
                            <button class="filter-tag d-flex align-items-center gap-2" data-filter="platform"
                                data-value="Lazada"
                                style="padding:0.55rem 1rem;border-radius:10px;border:1.5px solid var(--c-border);background:#fff;font-size:0.8rem;font-weight:600;cursor:pointer;transition:all 0.15s;">
                                <span style="font-size:1rem;">🔵</span> Lazada
                            </button>
                        </div>
                    </div>

                    {{-- AWB Status --}}
                    <div class="mb-2">
                        <label class="d-flex align-items-center gap-2 mb-2"
                            style="font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;color:var(--c-text-sec);">
                            <i data-lucide="scan-barcode" style="width:14px;color:var(--c-primary);"></i> Status Nomor
                            Resi
                        </label>
                        <div class="d-flex flex-wrap gap-2 awb-filter-tags">
                            <button class="filter-tag active d-flex align-items-center gap-2" data-filter="awb_status"
                                data-value=""
                                style="padding:0.55rem 1rem;border-radius:10px;border:1.5px solid var(--c-border);background:#fff;font-size:0.8rem;font-weight:600;cursor:pointer;transition:all 0.15s;">
                                <i data-lucide="layers" style="width:14px;"></i> Semua
                            </button>
                            <button class="filter-tag d-flex align-items-center gap-2" data-filter="awb_status"
                                data-value="has_awb"
                                style="padding:0.55rem 1rem;border-radius:10px;border:1.5px solid var(--c-border);background:#fff;font-size:0.8rem;font-weight:600;cursor:pointer;transition:all 0.15s;">
                                <i data-lucide="check-circle-2" style="width:14px;color:var(--c-success);"></i> Sudah Ada
                                Resi
                            </button>
                            <button class="filter-tag d-flex align-items-center gap-2" data-filter="awb_status"
                                data-value="no_awb"
                                style="padding:0.55rem 1rem;border-radius:10px;border:1.5px solid var(--c-border);background:#fff;font-size:0.8rem;font-weight:600;cursor:pointer;transition:all 0.15s;">
                                <i data-lucide="alert-circle" style="width:14px;color:var(--c-warning);"></i> Belum Ada
                                Resi
                            </button>
                        </div>
                    </div>
                </div>

                {{-- Footer --}}
                <div class="px-4 pb-4 pt-3 d-flex gap-3">
                    <button type="button" class="p-btn p-btn-white flex-grow-1 justify-content-center py-2"
                        id="btn-reset-filters" style="border-radius:12px;">
                        <i data-lucide="rotate-ccw" style="width:14px;"></i> Reset
                    </button>
                    <button type="button" class="p-btn p-btn-primary flex-grow-1 justify-content-center py-2"
                        id="btn-apply-filters" data-bs-dismiss="modal" style="border-radius:12px;">
                        <i data-lucide="check" style="width:14px;"></i> Terapkan Filter
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Import Modal -->
    <div class="modal fade" id="importModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content border-0 shadow-2xl overflow-hidden" style="border-radius: 24px;">
                <!-- Header -->
                <div class="modal-header border-0 p-4 pb-0 bg-white">
                    <div class="d-flex align-items-center gap-3">
                        <div class="bg-primary-light text-primary rounded-circle d-flex align-items-center justify-content-center shadow-sm"
                            style="width: 56px; height: 56px; background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);">
                            <i data-lucide="sheet" class="text-primary" style="width: 28px; height: 28px;"></i>
                        </div>
                        <div>
                            <h5 class="modal-title fw-800 text-dark mb-1"
                                style="letter-spacing: -0.02em; font-size: 1.25rem;">Batch Update Massal</h5>
                            <p class="text-muted small fw-600 mb-0 opacity-75">Update status dan nomor resi via Excel</p>
                        </div>
                    </div>
                    <button type="button" class="btn-close opacity-50 pe-4" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body p-4">
                    <!-- Step 1: Upload -->
                    <div id="import-step-1"
                        class="text-center py-5 border-2 border-dashed rounded-4 position-relative overflow-hidden group"
                        style="cursor: pointer; border-color: #e2e8f0; background: #f8fafc; transition: all 0.3s;"
                        onclick="document.getElementById('import-file-input').click()"
                        onmouseover="this.style.borderColor='var(--c-primary)'; this.style.background='#fff1f2';"
                        onmouseout="this.style.borderColor='#e2e8f0'; this.style.background='#f8fafc';">

                        <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center opacity-0 group-hover-opacity-100 transition-opacity"
                            style="background: rgba(131, 24, 67, 0.02); pointer-events: none;"></div>

                        <div class="bg-white shadow-sm rounded-circle d-flex align-items-center justify-content-center mx-auto mb-4 position-relative z-10"
                            style="width: 80px; height: 80px;">
                            <i data-lucide="upload-cloud" class="text-primary" style="width: 36px; height: 36px;"></i>
                        </div>
                        <h6 class="fw-800 mb-2 text-dark position-relative z-10">Unggah File Excel</h6>
                        <p class="text-muted small px-5 mb-0 position-relative z-10 mx-auto"
                            style="max-width: 400px; line-height: 1.6;">
                            Klik area ini untuk memilih file. Sistem akan membaca kolom: <br>
                            <span class="fw-bold text-dark">Reference No</span>, <span
                                class="fw-bold text-dark">Status</span>, dan <span
                                class="fw-bold text-dark">AWB/Resi</span>
                        </p>
                        <input type="file" id="import-file-input" accept=".xlsx, .xls" class="d-none">
                    </div>

                    <!-- Step 2: Preview & Process -->
                    <div id="import-step-2" class="d-none">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h6 class="fw-bold text-dark mb-0">Preview Data</h6>
                            <span class="badge bg-light text-primary border fw-bold px-3 py-2 rounded-pill small"
                                id="import-count-badge">Ready to process</span>
                        </div>

                        <div class="table-responsive rounded-4 border" style="max-height: 300px; scrollbar-width: thin;">
                            <table class="table table-sm table-striped mb-0 text-sm align-middle">
                                <thead class="bg-light sticky-top text-muted text-uppercase"
                                    style="font-size: 0.7rem; letter-spacing: 0.05em;">
                                    <tr>
                                        <th class="py-3 ps-3 border-0 fw-bold">Reference</th>
                                        <th class="py-3 border-0 fw-bold">AWB/Resi</th>
                                        <th class="py-3 border-0 fw-bold">Status Baru</th>
                                        <th class="py-3 pe-3 text-end border-0 fw-bold w-25">Hasil</th>
                                    </tr>
                                </thead>
                                <tbody id="import-tbody" class="fw-500">
                                    <!-- Rows -->
                                </tbody>
                            </table>
                        </div>

                        <!-- Progress Bar (Initially Hidden) -->
                        <div class="mt-4">
                            <div class="progress rounded-pill bg-gray-100 shadow-inner"
                                style="height: 10px; overflow: hidden;">
                                <div id="import-progress-bar" class="progress-bar bg-primary gradient-primary"
                                    role="progressbar" style="width: 0%; transition: width 0.3s ease;"></div>
                            </div>
                            <div class="d-flex justify-content-between mt-2">
                                <span class="text-xs text-muted fw-bold text-uppercase">Proses Upload</span>
                                <span class="text-xs fw-bold text-primary" id="import-percentage">0%</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer border-0 p-4 pt-0 d-flex gap-3 bg-white">
                    <button type="button" class="p-btn p-btn-white flex-grow-1 justify-content-center py-2.5"
                        data-bs-dismiss="modal" onclick="resetImportModal()">Batal</button>
                    <button type="button"
                        class="p-btn p-btn-primary flex-grow-1 justify-content-center py-2.5 shadow-lg shadow-primary-sm"
                        id="btn-process-import" disabled onclick="processImport()">
                        <i data-lucide="play" style="width: 16px; margin-right: 8px;"></i> Mulai Proses
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Tracking Modal -->
    <div class="modal fade" id="trackingModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="d-flex align-items-center gap-3">
                        <div class="bg-primary-light text-primary rounded-circle d-flex align-items-center justify-content-center"
                            style="width: 48px; height: 48px;">
                            <i data-lucide="truck" style="width: 24px;"></i>
                        </div>
                        <div>
                            <h5 class="modal-title">Status Pengiriman</h5>
                            <p class="text-muted small fw-600 mb-0" id="tracking-subtitle">AWB: -</p>
                        </div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-0">
                    <div id="tracking-content" class="p-4" style="max-height: 500px; overflow-y: auto;"></div>
                </div>
                <div class="modal-footer border-0 p-4 pt-0">
                    <button type="button" class="p-btn p-btn-white w-100 justify-content-center"
                        data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Floating Bulk Actions -->
    <div id="bulk-toolbar" class="p-bulk-toolbar">
        <div class="d-flex align-items-center gap-4">
            <div class="d-flex align-items-center gap-2 border-end pe-4">
                <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center"
                    style="width: 28px; height: 28px; font-size: 0.75rem; font-weight: 800;" id="selected-count">0</div>
                <span class="small fw-800 text-uppercase opacity-75"
                    style="letter-spacing: 0.05em; font-size: 0.7rem;">DIPILIH</span>
            </div>

            <div id="bulk-actions-pending" class="d-none items-center gap-2">
                <button class="p-btn p-btn-primary" onclick="bulkAction('approve')">
                    <i data-lucide="check" style="width: 16px;"></i> Setujui
                </button>
                <button class="p-btn p-btn-white text-danger" onclick="bulkAction('reject')">
                    <i data-lucide="x" style="width: 16px;"></i> Tolak
                </button>
            </div>

            <div id="bulk-actions-update" class="d-none">
                <button class="p-btn p-btn-primary" onclick="bulkAction('force-update')">
                    <i data-lucide="refresh-cw" style="width: 16px;"></i> Update Saldo Massal
                </button>
            </div>

            <div id="bulk-actions-deduct" class="d-none">
                <button class="p-btn" style="background: var(--c-danger); color: #fff; border: none;"
                    onclick="bulkAction('force-update')">
                    <i data-lucide="scissors" style="width: 16px;"></i> Potong Saldo Massal
                </button>
            </div>
        </div>
        <button class="btn btn-link text-white p-0 ms-3 opacity-50 hover-opacity-100" onclick="deselectAll()">
            <i data-lucide="x-circle" style="width: 24px;"></i>
        </button>
    </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 src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script src="https://unpkg.com/lucide@latest"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>

    <script>
        const state = {
            page: 1,
            limit: 10,
            status: 'all',
            search: '',
            platform: '',
            awb_status: '',
            startDate: null,
            endDate: null,
            counters: @json($statusCounts),
            analytics: {
                range: 'weekly'
            }
        };

        const formatCurrency = (v) => new Intl.NumberFormat('id-ID', {
            style: 'currency',
            currency: 'IDR',
            minimumFractionDigits: 0
        }).format(v || 0);
        const formatDate = (s) => s ? new Date(s).toLocaleDateString('id-ID', {
            day: 'numeric',
            month: 'short',
            year: 'numeric',
            hour: '2-digit',
            minute: '2-digit'
        }) : '-';

        function translateTrackingStatus(status) {
            const map = {
                'ReturnToSender': 'RETUR',
                'InTransit': 'TRANSIT',
                'Exception': 'KENDALA',
                'OutForDelivery': 'DIKIRIM',
                'InfoReceived': 'DIBUAT',
                'Delivered': 'SAMPAI'
            };
            return map[status] || status;
        }

        function getTrackingBadgeStyle(status) {
            const styles = {
                'delivered': 'background: #e6f4ea; color: #1e8e3e;',
                'in_transit': 'background: #e8f0fe; color: #1a73e8;',
                'returned': 'background: #fce8e6; color: #d93025;',
                'info_received': 'background: #f3f4f6; color: #6b7280;',
                'exception': 'background: #fef7e0; color: #e37400;',
            };
            return styles[status] || 'background: #f3f4f6; color: #6b7280;';
        }

        function translateTrackingLabel(status) {
            const labels = {
                'delivered': '✓ DITERIMA',
                'in_transit': '⟳ TRANSIT',
                'returned': '↩ RETURN',
                'info_received': '📋 DIBUAT',
                'exception': '⚠ KENDALA',
            };
            return labels[status] || status.toUpperCase();
        }

        function translateTrackingMessage(msg) {
            if (!msg) return '-';
            let output = msg;
            output = output.replace(/Your parcel has been returned/gi, 'Paket Anda telah dikembalikan');
            output = output.replace(/Your parcel is being returned to seller/gi, 'Paket sedang dikembalikan ke penjual');
            output = output.replace(/Your parcel has been received by pickup hub/gi, 'Paket diterima di hub penjemputan');
            output = output.replace(/Your parcel is being returned to the sorting center/gi,
                'Paket dikembalikan ke pusat sortir');
            output = output.replace(/Your parcel has been received by sorting center/gi, 'Paket diterima di pusat sortir');
            output = output.replace(/Your parcel has been received by delivery hub/gi, 'Paket diterima di hub pengiriman');
            output = output.replace(/Your parcel is on-hold\. Reason: \[Recipient reject\]/gi,
                'Paket ditangguhkan. Alasan: [Penerima menolak]');
            output = output.replace(/Your parcel is on-hold\. Reason: \[Recipient reschedule\]/gi,
                'Paket ditangguhkan. Alasan: [Jadwal ulang]');
            output = output.replace(/Your parcel is being delivered by courier/gi,
                'Paket sedang dibawa kurir untuk dikirim');
            output = output.replace(/Your parcel has been picked up/gi, 'Paket telah dijemput oleh kurir');
            output = output.replace(/Order has been created/gi, 'Pesanan telah dibuat');
            output = output.replace(/Parcel \[(.*?)\] transporting to \[(.*?)\]/gi, 'Paket [$1] sedang dikirim ke [$2]');
            return output;
        }

        async function fetchData() {
            const tableBody = document.getElementById('order-table-body');
            tableBody.innerHTML =
                `<tr><td colspan="6" class="text-center py-5"><div class="spinner-border text-primary"></div><p class="mt-2 small text-muted">Memuat data...</p></td></tr>`;

            try {
                const res = await axios.get('{{ route('marketplace.orders.data') }}', {
                    params: {
                        page: state.page,
                        limit: state.limit,
                        status: state.status,
                        search: state.search,
                        platform: state.platform,
                        awb_status: state.awb_status,
                        start_date: state.startDate,
                        end_date: state.endDate
                    }
                });

                const data = res.data;
                if (data.status_counts) updateCounters(data.status_counts);
                renderTable(data.data);
                renderPagination(data.current_page, data.last_page, data.total, data.from, data.to);
            } catch (err) {
                console.error(err);
                tableBody.innerHTML =
                    `<tr><td colspan="6" class="text-center py-5 text-danger"><i data-lucide="alert-circle" class="fs-4 mb-2"></i><br>Failed to load data. Please try again.</td></tr>`;
                lucide.createIcons();
            }
        }

        function renderTable(orders) {
            const tbody = document.getElementById('order-table-body');
            if (!orders || orders.length === 0) {
                tbody.innerHTML = `<tr><td colspan="6" class="text-center py-5">
                    <div class="mb-3 text-muted opacity-20"><i data-lucide="package-x" style="width: 64px; height: 64px;"></i></div>
                    <h6 class="text-muted fw-bold">Tidak ada pesanan ditemukan</h6>
                    <p class="text-xs text-muted">Coba ubah filter atau kata kunci pencarian Anda</p>
                </td></tr>`;
                lucide.createIcons();
                return;
            }

            tbody.innerHTML = orders.map(item => {
                const csName = item.order?.cs_bonus?.customer_service?.name || 'Unknown';
                const csInitials = csName.substring(0, 2).toUpperCase();

                // Status Badge Logic
                let statusBadge = '';
                const csBonusStatus = item.order?.cs_bonus?.status || '';
                if (item.status === 'pending') {
                    statusBadge = '<span class="p-badge p-badge-warning">PENDING</span>';
                } else if (item.status === 'approved' && csBonusStatus === 'confirmed') {
                    statusBadge = '<span class="p-badge p-badge-success">SELESAI</span>';
                } else if (item.status === 'approved') {
                    statusBadge = '<span class="p-badge p-badge-info">DIPROSES</span>';
                } else if (item.status === 'rejected') {
                    statusBadge = '<span class="p-badge p-badge-danger">DITOLAK</span>';
                } else if (item.status === 'cancelled') {
                    statusBadge =
                        '<span class="p-badge" style="background: #f3f4f6; color: #6b7280;">DIBATALKAN</span>';
                } else if (item.status === 'returned') {
                    statusBadge =
                        '<span class="p-badge" style="background: #ede9fe; color: #7c3aed;">RETURN</span>';
                } else {
                    statusBadge =
                        `<span class="p-badge" style="background: #f3f4f6;">${item.status.toUpperCase()}</span>`;
                }

                let actions = '';
                if (item.status === 'pending') {
                    actions = `<div class="d-flex justify-content-end gap-2">
                        <button class="btn btn-sm btn-light border p-2" onclick="updateOrder(${item.id}, 'reject')" title="Reject">
                            <i data-lucide="x" style="width:16px;"></i>
                        </button>
                        <button class="btn btn-sm btn-primary p-2" onclick="updateOrder(${item.id}, 'approve')" title="Approve">
                            <i data-lucide="check" style="width:16px;"></i>
                        </button>
                    </div>`;
                } else if (item.status === 'approved' && item.order?.cs_bonus?.status !== 'confirmed') {
                    actions =
                        `<button class="p-btn p-btn-primary btn-sm py-1 px-3 fs-tiny" style="font-size: 0.7rem;" onclick="forceDone(${item.id}, 'approved')">UPDATE BAL.</button>`;
                } else if (item.status === 'returned' && item.order?.cs_bonus?.status === 'pending') {
                    actions =
                        `<button class="p-btn btn-sm py-1 px-3 fs-tiny" style="font-size: 0.7rem; background: var(--c-danger); color: #fff; border: none; border-radius: 10px; font-weight: 600; cursor: pointer;" onclick="forceDone(${item.id}, 'returned')">POTONG BAL.</button>`;
                } else if (item.status === 'cancelled') {
                    actions =
                        `<div class="text-end text-muted d-flex align-items-center justify-content-end gap-1" style="font-size: 0.7rem;"><i data-lucide="ban" style="width: 16px;"></i> <span class="fw-bold">No Action</span></div>`;
                } else {
                    actions =
                        `<div class="text-end text-success"><i data-lucide="check-circle-2" style="width: 20px;"></i></div>`;
                }

                // Platform styling
                let platformIcon = '';
                if (item.platform.toLowerCase().includes('shopee')) platformIcon =
                    '<i data-lucide="shopping-bag" class="text-warning"></i>';
                else if (item.platform.toLowerCase().includes('tokopedia')) platformIcon =
                    '<i data-lucide="store" class="text-success"></i>';
                else if (item.platform.toLowerCase().includes('lazada')) platformIcon =
                    '<i data-lucide="package" class="text-primary"></i>';
                else platformIcon = '<i data-lucide="layout"></i>';

                return `<tr>
                    <td class="text-center">
                        <input type="checkbox" class="form-check-input row-checkbox" value="${item.id}" onchange="updateBulkState()">
                    </td>
                    <td>
                        <div class="fw-800 text-gray-900" style="font-size: 0.9rem; letter-spacing: -0.01em;">#${item.order_no || '-'}</div>
                        <div class="small text-muted mt-1 d-flex align-items-center gap-1">
                            <i data-lucide="calendar" style="width:12px;"></i> ${formatDate(item.created_at)}
                        </div>
                    </td>
                    <td>
                        <div class="d-flex flex-column gap-1">
                            <span class="fs-tiny fw-800 text-uppercase opacity-50" style="font-size: 0.65rem; letter-spacing: 0.05em;">${item.platform}</span>
                            <div class="fw-bold text-dark">${item.shop_name || '-'}</div>
                            <div class="text-primary fw-600" style="font-size: 0.75rem;"><i data-lucide="user" style="width:12px;" class="me-1"></i>${csName}</div>
                        </div>
                    </td>
                    <td>
                        <div class="small fw-bold text-gray-600 mb-2">${item.logistic_name || '-'}</div>
                        <div class="d-flex align-items-center gap-2">
                            <div class="awb-badge ${item.awb_number ? 'active' : ''}" 
                                 ${item.awb_number ? `onclick="trackOrder(${item.id}, '${item.awb_number}')"` : ''}>
                                <i data-lucide="truck" style="width:14px;"></i> 
                                ${item.awb_number || 'BELUM INPUT RESI'}
                            </div>
                            <button class="btn btn-sm btn-light p-1 rounded-circle border shadow-sm" style="width: 24px; height: 24px;" 
                                    onclick="editAWB(${item.id}, '${item.logistic_name || ''}', '${item.awb_number || ''}')">
                                <i data-lucide="edit-3" style="width:12px;"></i>
                            </button>
                        </div>
                        ${item.tracking_status ? `<div class="mt-1"><span class="p-badge p-badge-pill" style="${getTrackingBadgeStyle(item.tracking_status)}">${translateTrackingLabel(item.tracking_status)}</span></div>` : ''}
                    </td>
                    <td class="text-end">
                        <div class="fw-800 text-dark mb-2" style="font-size: 0.875rem;">${formatCurrency(item.shipping_cost)}</div>
                        <div class="d-flex justify-content-end">${statusBadge}</div>
                    </td>
                    <td class="text-end">
                        <div class="d-flex flex-column align-items-end">
                            ${(() => {
                                const isReturn = item.status === 'returned';
                                let amount;
                                if (isReturn) {
                                    amount = item.order?.cs_bonus?.return_deduction || 0;
                                    if (amount <= 0) amount = Math.round((item.order?.cs_bonus?.final_bonus || 0) * 0.5);
                                } else {
                                    amount = item.order?.cs_bonus?.final_bonus || 0;
                                }
                                const amountColor = isReturn ? 'color: var(--c-danger);' : 'color: var(--c-primary);';
                                const prefix = isReturn ? '- ' : '';
                                return '<div class="fw-800 mb-1" style="font-size: 0.875rem; ' + amountColor + '">' + prefix + formatCurrency(amount) + '</div>';
                            })()}
                            ${(() => {
                                const csBonusStatus = item.order?.cs_bonus?.status || '';
                                if (csBonusStatus === 'pending' && item.status === 'approved') {
                                    return '<span class="p-badge p-badge-success mb-1" style="font-size: 0.6rem;">+ BONUS</span>';
                                } else if (csBonusStatus === 'pending' && item.status === 'returned') {
                                    return '<span class="p-badge p-badge-danger mb-1" style="font-size: 0.6rem;">- POTONG</span>';
                                } else if (item.status === 'cancelled' || csBonusStatus === 'cancelled') {
                                    return '<span class="p-badge mb-1" style="background: #f3f4f6; color: #6b7280; font-size: 0.6rem;">✕ DIBATALKAN</span>';
                                } else if (csBonusStatus === 'confirmed') {
                                    return '<span class="p-badge" style="background: #e0f2fe; color: #0284c7; font-size: 0.6rem;">✓ SELESAI</span>';
                                }
                                return '';
                            })()}
                            <button class="btn btn-sm btn-light border p-1 rounded-pill px-2 d-flex align-items-center gap-1" 
                                    style="font-size: 0.65rem;"
                                    onclick="editCommission(${item.id}, ${item.order?.cs_bonus?.final_bonus || 0})">
                                <i data-lucide="edit-3" style="width:10px;"></i> Edit
                            </button>
                        </div>
                    </td>
                    <td class="text-end">
                        <div class="d-flex justify-content-end align-items-center">
                            ${actions}
                        </div>
                    </td>
                </tr>`;
            }).join('');
            lucide.createIcons();
        }

        function updateCounters(counts) {
            state.counters = {
                ...state.counters,
                ...counts
            };
            Object.keys(state.counters).forEach(key => {
                const badge = document.getElementById(`count-${key}`) || document.getElementById(`stat-${key}`);
                if (badge) badge.textContent = state.counters[key] || 0;
            });
            // Global total orders stat
            const totalStat = document.getElementById('stat-total-orders');
            if (totalStat) totalStat.textContent = state.counters.all;
        }

        function renderPagination(current, last, total, from, to) {
            document.getElementById('pagination-info').textContent =
                `Menampilkan ${from || 0}-${to || 0} dari ${total || 0}`;
            const pagination = document.getElementById('pagination');
            let html = '';

            const addPage = (p, text, active = false, disabled = false) => {
                html += `<li class="page-item ${active ? 'active' : ''} ${disabled ? 'disabled' : ''}">
                        <button class="page-link border-0 shadow-none" style="padding: 8px 16px;" onclick="changePage(${p})">${text}</button>
                    </li>`;
            };

            addPage(current - 1, '<i data-lucide="chevron-left"></i>', false, current === 1);

            let start = Math.max(1, current - 2);
            let end = Math.min(last, current + 2);
            if (start > 1) {
                addPage(1, '1');
                if (start > 2) html += '<li class="page-item disabled"><span class="page-link border-0">...</span></li>';
            }
            for (let i = start; i <= end; i++) addPage(i, i, i === current);
            if (end < last) {
                if (end < last - 1) html +=
                    '<li class="page-item disabled"><span class="page-link border-0">...</span></li>';
                addPage(last, last);
            }

            addPage(current + 1, '<i data-lucide="chevron-right"></i>', false, current === last);

            pagination.innerHTML = html;
            lucide.createIcons();
        }

        window.changePage = (p) => {
            if (p >= 1) {
                state.page = p;
                fetchData();
            }
        };

        window.updateOrder = (id, type) => {
            const isApprove = type === 'approve';
            Swal.fire({
                title: isApprove ? 'Setujui Pesanan?' : 'Tolak Pesanan?',
                text: isApprove ? 'Order akan diproses dan dilanjutkan ke pengiriman.' :
                    'Pastikan alasan penolakan sudah sesuai.',
                icon: isApprove ? 'question' : 'warning',
                showCancelButton: true,
                confirmButtonColor: isApprove ? 'var(--success)' : 'var(--danger)',
                confirmButtonText: isApprove ? 'Ya, Setujui' : 'Ya, Tolak',
                cancelButtonText: 'Batal',
                background: '#fff',
                customClass: {
                    popup: 'rounded-4 shadow-lg border-0',
                    confirmButton: 'px-4 py-2 fw-bold',
                    cancelButton: 'px-4 py-2 fw-bold'
                }
            }).then((r) => {
                if (r.isConfirmed) {
                    axios.post(isApprove ? '{{ route('marketplace.orders.approve') }}' :
                            '{{ route('marketplace.orders.reject') }}', {
                                order_marketplace_id: id
                            })
                        .then(res => {
                            Swal.fire({
                                title: 'Berhasil!',
                                text: res.data.message,
                                icon: 'success',
                                timer: 2000,
                                showConfirmButton: false
                            });
                            fetchData();
                        })
                        .catch(err => Swal.fire('Gagal', err.response?.data?.message || 'Terjadi kesalahan',
                            'error'));
                }
            });
        };

        window.forceDone = (id, orderStatus) => {
            const isReturn = orderStatus === 'returned';
            Swal.fire({
                html: `
                        <div style="padding: 0.5rem 0;">
                            <div style="width:64px;height:64px;border-radius:50%;margin:0 auto 1rem;display:flex;align-items:center;justify-content:center;
                                background:${isReturn ? 'linear-gradient(135deg,#fef2f2,#fee2e2)' : 'linear-gradient(135deg,#eff6ff,#dbeafe)'};">
                                <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" 
                                    stroke="${isReturn ? '#dc2626' : '#2563eb'}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    ${isReturn 
                                        ? '<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/>' 
                                        : '<path d="M21 12V7H5a2 2 0 0 1 0-4h14v4"/><path d="M3 5v14a2 2 0 0 0 2 2h16v-5"/><path d="M18 12a2 2 0 0 0 0 4h4v-4Z"/>'}
                                </svg>
                            </div>
                            <h4 style="font-weight:800;font-size:1.15rem;color:#111827;margin-bottom:0.5rem;letter-spacing:-0.02em;">
                                ${isReturn ? 'Potong Saldo CS?' : 'Update Saldo CS?'}
                            </h4>
                            <p style="font-size:0.85rem;color:#6b7280;line-height:1.6;margin:0;max-width:320px;margin:0 auto;">
                                ${isReturn 
                                    ? 'Order ini <strong style="color:#dc2626;">diretur</strong>. Saldo CS akan dipotong sesuai komisi yang sudah diberikan.' 
                                    : 'Pesanan akan diselesaikan dan <strong style="color:#2563eb;">saldo CS diperbarui</strong> sesuai bonus yang ditetapkan.'}
                            </p>
                        </div>
                    `,
                showCancelButton: true,
                confirmButtonText: isReturn ? '✂ Ya, Potong Saldo' : '✓ Ya, Update Saldo',
                cancelButtonText: 'Batal',
                buttonsStyling: false,
                customClass: {
                    popup: 'rounded-4 shadow-lg border-0',
                    confirmButton: `btn fw-bold px-4 py-2 rounded-3 text-white ${isReturn ? '' : ''}`,
                    cancelButton: 'btn fw-bold px-4 py-2 rounded-3 ms-2',
                    actions: 'mt-2'
                },
                didRender: () => {
                    const confirm = Swal.getConfirmButton();
                    const cancel = Swal.getCancelButton();
                    confirm.style.cssText =
                        `background:${isReturn ? '#dc2626' : '#2563eb'};color:#fff;font-size:0.85rem;border:none;`;
                    cancel.style.cssText =
                        'background:#f3f4f6;color:#374151;font-size:0.85rem;border:none;';
                }
            }).then(r => {
                if (r.isConfirmed) {
                    Swal.fire({
                        html: '<div class="text-center py-3"><div class="spinner-border text-primary mb-3"></div><p style="font-size:0.85rem;color:#6b7280;margin:0;">Memproses...</p></div>',
                        showConfirmButton: false,
                        allowOutsideClick: false,
                        customClass: {
                            popup: 'rounded-4 shadow-lg border-0'
                        }
                    });
                    axios.post('{{ route('marketplace.orders.force-update') }}', {
                            order_marketplace_id: id
                        })
                        .then(res => {
                            Swal.fire({
                                html: `
                                        <div style="padding:0.5rem 0;">
                                            <div style="width:56px;height:56px;border-radius:50%;margin:0 auto 1rem;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f0fdf4,#dcfce7);">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#16a34a" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                                            </div>
                                            <h4 style="font-weight:800;font-size:1.1rem;color:#111827;margin-bottom:0.25rem;">Berhasil!</h4>
                                            <p style="font-size:0.85rem;color:#6b7280;margin:0;">${res.data.message}</p>
                                        </div>
                                    `,
                                showConfirmButton: false,
                                timer: 2000,
                                customClass: {
                                    popup: 'rounded-4 shadow-lg border-0'
                                }
                            });
                            fetchData();
                        })
                        .catch(err => {
                            Swal.fire({
                                html: `
                                        <div style="padding:0.5rem 0;">
                                            <div style="width:56px;height:56px;border-radius:50%;margin:0 auto 1rem;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#fef2f2,#fee2e2);">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#dc2626" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
                                            </div>
                                            <h4 style="font-weight:800;font-size:1.1rem;color:#111827;margin-bottom:0.25rem;">Gagal</h4>
                                            <p style="font-size:0.85rem;color:#6b7280;margin:0;">${err.response?.data?.message || 'Terjadi kesalahan'}</p>
                                        </div>
                                    `,
                                confirmButtonText: 'Tutup',
                                buttonsStyling: false,
                                customClass: {
                                    popup: 'rounded-4 shadow-lg border-0',
                                    confirmButton: 'btn fw-bold px-4 py-2 rounded-3'
                                },
                                didRender: () => {
                                    Swal.getConfirmButton().style.cssText =
                                        'background:#f3f4f6;color:#374151;font-size:0.85rem;border:none;';
                                }
                            });
                        });
                }
            });
        };

        window.syncTracking = () => {
            const btn = document.getElementById('btn-sync-tracking');
            const originalHTML = btn.innerHTML;
            btn.disabled = true;
            btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span> Syncing...';

            axios.post('{{ route('marketplace.orders.sync-tracking') }}')
                .then(res => {
                    const d = res.data.data;
                    Swal.fire({
                        title: 'Sync Selesai!',
                        html: `
                                <div class="text-start">
                                    <div class="d-flex justify-content-between py-2 border-bottom"><span>Total dicek</span><strong>${d.total}</strong></div>
                                    <div class="d-flex justify-content-between py-2 border-bottom"><span class="text-success">✓ Delivered</span><strong>${d.delivered}</strong></div>
                                    <div class="d-flex justify-content-between py-2 border-bottom"><span class="text-info">⟳ Masih Transit</span><strong>${d.in_transit}</strong></div>
                                    <div class="d-flex justify-content-between py-2 border-bottom"><span class="text-danger">↩ Return</span><strong>${d.returned}</strong></div>
                                    <div class="d-flex justify-content-between py-2 border-bottom"><span class="text-warning">⚡ Status Diperbarui</span><strong>${d.status_updated || 0}</strong></div>
                                    <div class="d-flex justify-content-between py-2"><span class="text-muted">Error</span><strong>${d.errors}</strong></div>
                                </div>`,
                        icon: 'success',
                        confirmButtonColor: 'var(--c-primary)',
                        customClass: {
                            popup: 'rounded-4 shadow-lg border-0'
                        }
                    });
                    fetchData();
                })
                .catch(err => {
                    Swal.fire('Gagal', 'Terjadi kesalahan saat sync tracking.', 'error');
                })
                .finally(() => {
                    btn.disabled = false;
                    btn.innerHTML = originalHTML;
                    lucide.createIcons();
                });
        };

        window.trackOrder = (id, awb) => {
            const modal = new bootstrap.Modal(document.getElementById('trackingModal'));
            document.getElementById('tracking-content').innerHTML =
                `<div class="text-center py-5"><div class="spinner-border text-primary"></div></div>`;
            document.getElementById('tracking-subtitle').textContent = `AWB: ${awb}`;
            modal.show();
            axios.get('{{ route('marketplace.orders.track') }}', {
                    params: {
                        order_marketplace_id: id
                    }
                })
                .then(res => {
                    const data = res.data.data;
                    if (!data || !data.histories) {
                        document.getElementById('tracking-content').innerHTML =
                            `<p class="text-center py-5 text-muted">Belum ada riwayat update</p>`;
                        return;
                    }
                    document.getElementById('tracking-content').innerHTML = `
                            <div class="p-timeline mt-2">
                                ${data.histories.map(h => `
                                                                                                                                                                                                                                    <div class="p-timeline-item">
                                                                                                                                                                                                                                        <div class="p-timeline-dot"></div>
                                                                                                                                                                                                                                        <div class="p-card p-4 shadow-none border-0" style="background: #f8fafc; border-radius: 20px;">
                                                                                                                                                                                                                                            <div class="d-flex justify-content-between align-items-center mb-4">
                                                                                                                                                                                                                                                <span class="p-badge p-badge-info p-badge-pill">${translateTrackingStatus(h.status)}</span>
                                                                                                                                                                                                                                                <span class="fw-700 text-muted opacity-40" style="font-size: 0.65rem; letter-spacing: 0.05em;">${formatDate(h.date)}</span>
                                                                                                                                                                                                                                            </div>
                                                                                                                                                                                                                                            <div class="fw-bold text-dark mb-2" style="font-size: 0.875rem; line-height: 1.6; letter-spacing: -0.01em;">${translateTrackingMessage(h.message)}</div>
                                                                                                                                                                                                                                                    ${h.location ? `
                                                        <div class="d-flex align-items-center gap-3 mt-3 pt-3 border-top" style="border-color: rgba(0,0,0,0.05) !important;">
                                                            <div class="bg-white rounded-circle d-flex align-items-center justify-content-center shadow-sm flex-shrink-0" style="width: 28px; height: 28px; border: 1px solid var(--c-border-light);">
                                                                <i data-lucide="map-pin" style="width: 12px; height: 12px; color: var(--c-primary);"></i>
                                                            </div>
                                                            <span class="small fw-700 text-muted" style="font-size: 0.75rem;">${h.location}</span>
                                                        </div>
                                                    ` : ''}
                                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                                    </div>
                                                                                                                                                                                                                                `).join('')}
                            </div>
                        `;
                    lucide.createIcons();
                });
        };

        window.editAWB = (id, logistic, awb) => {
            Swal.fire({
                title: 'Update Resi & Logistik',
                html: `
                        <div class="text-start">
                            <div class="mb-3">
                                <label class="form-label small fw-bold">Nama Logistik</label>
                                <input id="swal-logistic" class="form-control" value="${logistic}" placeholder="Contoh: SPX, J&T, dll">
                            </div>
                            <div>
                                <label class="form-label small fw-bold">Nomor Resi (AWB)</label>
                                <input id="swal-awb" class="form-control" value="${awb}" placeholder="Masukkan nomor resi">
                            </div>
                        </div>
                    `,
                showCancelButton: true,
                confirmButtonText: 'Simpan Perubahan',
                cancelButtonText: 'Batal',
                focusConfirm: false,
                customClass: {
                    popup: 'rounded-4 shadow-lg border-0',
                    confirmButton: 'p-btn p-btn-primary px-4',
                    cancelButton: 'p-btn p-btn-white px-4'
                },
                preConfirm: () => {
                    return {
                        logistic: document.getElementById('swal-logistic').value,
                        awb: document.getElementById('swal-awb').value
                    }
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    axios.post('{{ route('marketplace.orders.update-awb-logistic') }}', {
                            id: id,
                            logistic_name: result.value.logistic,
                            awb_number: result.value.awb
                        })
                        .then(res => {
                            Swal.fire({
                                icon: 'success',
                                title: 'Berhasil',
                                text: res.data.message,
                                timer: 1500,
                                showConfirmButton: false
                            });
                            fetchData();
                        })
                        .catch(err => {
                            Swal.fire('Error', err.response?.data?.message || 'Gagal update data', 'error');
                        });
                }
            });
        };

        window.editCommission = (id, currentAmount) => {
            Swal.fire({
                title: 'Update Komisi CS',
                text: 'Masukkan nilai komisi baru untuk pesanan ini',
                input: 'number',
                inputLabel: 'Jumlah Komisi (Rp)',
                inputValue: currentAmount,
                inputAttributes: {
                    min: 0,
                    step: 1
                },
                showCancelButton: true,
                confirmButtonText: 'Simpan',
                cancelButtonText: 'Batal',
                confirmButtonColor: 'var(--c-primary)',
                customClass: {
                    popup: 'rounded-4 shadow-lg border-0',
                    confirmButton: 'px-4',
                    cancelButton: 'px-4'
                },
                inputValidator: (value) => {
                    if (!value || value < 0) {
                        return 'Jumlah tidak valid!'
                    }
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    axios.post('{{ route('marketplace.orders.update-commission') }}', {
                            order_marketplace_id: id,
                            amount: result.value
                        })
                        .then(res => {
                            Swal.fire({
                                icon: 'success',
                                title: 'Berhasil',
                                text: res.data.message,
                                timer: 1500,
                                showConfirmButton: false
                            });
                            fetchData();
                        })
                        .catch(err => {
                            Swal.fire('Error', err.response?.data?.message ||
                                'Gagal update komisi', 'error');
                        });
                }
            });
        };

        // Analytics
        function fetchAnalytics() {
            axios.get('{{ route('marketplace.orders.analytics') }}', {
                    params: {
                        range: state.analytics.range,
                        platform: state.platform
                    }
                })
                .then(res => {
                    if (res.data.success) {
                        const charts = res.data.charts;
                        renderOrdersChart(charts.daily);
                        renderLogisticsChart(charts.logistics);
                        // Update main statistics boxes
                        const stats = res.data.stats;
                        document.getElementById('stat-total-orders').textContent = stats.total_orders;
                        document.getElementById('stat-pending').textContent = stats.pending;
                        document.getElementById('stat-done_approve').textContent = stats.done_approve || 0;
                        document.getElementById('stat-returned').textContent = stats.returned;
                    }
                });
        }

        function renderOrdersChart(data) {
            const options = {
                series: [{
                    name: 'Orders',
                    data: data.data
                }],
                chart: {
                    type: 'area',
                    height: 320,
                    toolbar: {
                        show: false
                    },
                    animations: {
                        enabled: true,
                        easing: 'easeinout',
                        speed: 800
                    }
                },
                stroke: {
                    curve: 'smooth',
                    width: 4
                },
                xaxis: {
                    categories: data.labels,
                    axisBorder: {
                        show: false
                    },
                    axisTicks: {
                        show: false
                    }
                },
                yaxis: {
                    labels: {
                        show: true
                    }
                },
                grid: {
                    borderColor: '#f1f1f1',
                    strokeDashArray: 4
                },
                colors: ['#A52019'],
                fill: {
                    type: 'gradient',
                    gradient: {
                        shadeIntensity: 1,
                        opacityFrom: 0.45,
                        opacityTo: 0.05,
                        stops: [0, 100]
                    }
                },
                dataLabels: {
                    enabled: false
                },
                tooltip: {
                    theme: 'light',
                    x: {
                        show: true
                    }
                }
            };
            if (window.ordersChartInstance) window.ordersChartInstance.updateOptions(options);
            else {
                window.ordersChartInstance = new ApexCharts(document.querySelector("#ordersChart"),
                    options);
                window.ordersChartInstance.render();
            }
        }

        function renderLogisticsChart(data) {
            const options = {
                series: data.data,
                labels: data.labels,
                chart: {
                    type: 'donut',
                    height: 300
                },
                plotOptions: {
                    pie: {
                        donut: {
                            size: '75%',
                            labels: {
                                show: true,
                                total: {
                                    show: true,
                                    label: 'Total Resi',
                                    color: 'var(--gray-500)',
                                    formatter: function(w) {
                                        return w.globals.seriesTotals.reduce((a, b) => a + b, 0)
                                    }
                                }
                            }
                        }
                    }
                },
                legend: {
                    position: 'bottom',
                    horizontalAlign: 'center'
                },
                colors: ['#A52019', '#10B981', '#F59E0B', '#EF4444', '#3B82F6', '#8B5CF6']
            };
            if (window.logisticsChartInstance) window.logisticsChartInstance.updateOptions(options);
            else {
                window.logisticsChartInstance = new ApexCharts(document.querySelector("#logisticsChart"),
                    options);
                window.logisticsChartInstance.render();
            }
        }

        // Bulk Actions
        window.deselectAll = () => {
            document.querySelectorAll('.row-checkbox').forEach(c => c.checked = false);
            document.getElementById('check-all').checked = false;
            updateBulkState();
        };

        function updateBulkState() {
            const count = document.querySelectorAll('.row-checkbox:checked').length;
            const toolbar = document.getElementById('bulk-toolbar');
            const countSpan = document.getElementById('selected-count');
            if (countSpan) countSpan.textContent = count;

            if (count > 0) {
                toolbar.classList.add('visible');
                const isPendingTab = state.status === 'pending' || state.status === 'all';
                const isUpdateTab = state.status === 'needs_update';
                const isDeductTab = state.status === 'needs_deduct';

                const pendingActions = document.getElementById('bulk-actions-pending');
                const updateActions = document.getElementById('bulk-actions-update');
                const deductActions = document.getElementById('bulk-actions-deduct');

                if (pendingActions) {
                    pendingActions.classList.toggle('d-none', !isPendingTab);
                    pendingActions.classList.toggle('d-flex', isPendingTab);
                }
                if (updateActions) {
                    updateActions.classList.toggle('d-none', !isUpdateTab);
                }
                if (deductActions) {
                    deductActions.classList.toggle('d-none', !isDeductTab);
                }
            } else {
                toolbar.classList.remove('visible');
            }
        }

        function bulkAction(type) {
            const ids = Array.from(document.querySelectorAll('.row-checkbox:checked')).map(cb => cb.value);
            let url = '';
            let actionName = '';
            if (type === 'approve') {
                url = '{{ route('marketplace.orders.bulk-approve') }}';
                actionName = 'Setujui';
            } else if (type === 'reject') {
                url = '{{ route('marketplace.orders.bulk-reject') }}';
                actionName = 'Tolak';
            } else if (type === 'force-update') {
                url = '{{ route('marketplace.orders.bulk-force-update') }}';
                actionName = 'Update Saldo';
            }

            Swal.fire({
                    title: `${actionName} ${ids.length} Item?`,
                    text: 'Tindakan ini tidak dapat dibatalkan.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: type === 'reject' ? 'var(--danger)' : 'var(--primary)',
                    confirmButtonText: `Ya, ${actionName} Massal`,
                    cancelButtonText: 'Batal',
                    customClass: {
                        popup: 'rounded-4 shadow-lg border-0'
                    }
                })
                .then(r => {
                    if (r.isConfirmed) {
                        axios.post(url, {
                            ids
                        }).then(res => {
                            Swal.fire({
                                title: 'Berhasil!',
                                text: res.data.message,
                                icon: 'success',
                                timer: 2000,
                                showConfirmButton: false
                            });
                            fetchData();
                            document.getElementById('bulk-toolbar').classList.remove('visible');
                        });
                    }
                });
        }

        // Import
        let importData = [];
        document.getElementById('import-file-input').addEventListener('change', (
            e) => {
            const file = e.target.files[0];
            const reader = new FileReader();
            reader.onload = (e) => {
                const workbook = XLSX.read(new Uint8Array(e.target.result), {
                    type: 'array'
                });
                const jsonData = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]);
                importData = jsonData.map(row => {
                    const statusRaw = String(row['Status'] || row['Status Pesanan'] || '')
                        .trim()
                        .toLowerCase();
                    const awb = String(row['AWB'] || row['Resi'] || row['No Resi'] ||
                        row['Nomor Resi'] || '').trim();
                    let statusMapped = '';

                    // Mapping:
                    // "Menunggu Diproses" / "Menunggu Pickup" → pending
                    // "Sedang Diproses Marketplace" / "Sudah Dikirim" → approved (proses)
                    // "Dibatalkan" tanpa resi → cancelled (CS tidak dapat bonus/potongan)
                    // "Dibatalkan" ada resi → returned (return)
                    // "Selesai" → needs_update (update saldo)
                    if (statusRaw.includes('selesai')) {
                        statusMapped = 'needs_update';
                    } else if (statusRaw.includes('batal')) {
                        statusMapped = awb ? 'returned' : 'cancelled';
                    } else if (statusRaw.includes('sedang diproses') || statusRaw.includes(
                            'sudah dikirim')) {
                        statusMapped = 'approved';
                    } else if (statusRaw.includes('menunggu')) {
                        statusMapped = 'pending';
                    } else if (statusRaw.includes('pengembalian') || statusRaw.includes('retur')) {
                        statusMapped = 'returned';
                    }

                    return {
                        reference_no: String(row['Reference No'] || row['Order No'] || row[
                            'No Pesanan'] || row['Nomor Pesanan'] || '').trim(),
                        awb_number: awb,
                        status: statusMapped,
                        status_raw: statusRaw
                    };
                }).filter(i => i.reference_no && i.reference_no !== 'undefined');

                document.getElementById('import-step-1').classList.add('d-none');
                document.getElementById('import-step-2').classList.remove('d-none');
                document.getElementById('btn-process-import').disabled = false;
                const statusBadgeMap = {
                    'cancelled': 'background:#f3f4f6;color:#6b7280;',
                    'returned': 'background:#ede9fe;color:#7c3aed;',
                    'rejected': 'background:#fee2e2;color:#991b1b;',
                    'needs_update': 'background:#dcfce7;color:#166534;',
                    'approved': 'background:#dbeafe;color:#1d4ed8;',
                    'pending': 'background:#fef3c7;color:#92400e;',
                };
                const statusLabelMap = {
                    'cancelled': 'DIBATALKAN',
                    'returned': 'RETURN',
                    'rejected': 'DITOLAK',
                    'needs_update': 'SELESAI',
                    'approved': 'DIPROSES',
                    'pending': 'PENDING',
                };
                document.getElementById('import-tbody').innerHTML = importData.map((i, idx) => {
                    const badgeStyle = statusBadgeMap[i.status] || 'background:#f3f4f6;color:#6b7280;';
                    const badgeLabel = statusLabelMap[i.status] || i.status?.toUpperCase() || '-';
                    return `<tr>
                            <td>${i.reference_no}</td>
                            <td>${i.awb_number || '<span class="text-muted">-</span>'}</td>
                            <td>${i.status ? `<span class="badge" style="${badgeStyle};font-weight:700;font-size:0.65rem;padding:4px 8px;border-radius:6px;">${badgeLabel}</span>` : '<span class="text-muted">-</span>'}</td>
                            <td class="text-end text-muted" id="import-res-${idx}">Pending</td>
                        </tr>`;
                }).join('');
            };
            reader.readAsArrayBuffer(file);
        });

        async function processImport() {
            const btn = document.getElementById('btn-process-import');
            btn.disabled = true;
            const chunkSize = 10;
            const total = importData.length;

            for (let i = 0; i < total; i += chunkSize) {
                const chunk = importData.slice(i, i + chunkSize);

                // Show "Processing" in table rows
                chunk.forEach((_, idx) => {
                    const rowEl = document.getElementById(`import-res-${i + idx}`);
                    if (rowEl) rowEl.innerHTML =
                        '<span class="spinner-border spinner-border-sm text-primary"></span>';
                });

                try {
                    await axios.post('{{ route('marketplace.orders.bulk-update-awb') }}', {
                        data: chunk
                    });

                    // Show "Success" in table rows
                    chunk.forEach((_, idx) => {
                        const rowEl = document.getElementById(`import-res-${i + idx}`);
                        if (rowEl) rowEl.innerHTML = '<span class="text-success fw-bold">Success</span>';
                    });

                    const percent = Math.round((i + chunk.length) / total * 100);
                    document.getElementById('import-progress-bar').style.width = `${percent}%`;
                    document.getElementById('import-percentage').textContent = `${percent}%`;
                } catch (e) {
                    chunk.forEach((_, idx) => {
                        const rowEl = document.getElementById(`import-res-${i + idx}`);
                        if (rowEl) rowEl.innerHTML = '<span class="text-danger fw-bold">Failed</span>';
                    });
                }
            }

            Swal.fire({
                title: 'Selesai!',
                text: 'Update Resi Massal berhasil diproses.',
                icon: 'success',
                confirmButtonColor: 'var(--c-primary)'
            }).then(() => {
                location.reload();
            });
        }

        // Init
        document.addEventListener('DOMContentLoaded', () => {
            lucide.createIcons();
            fetchData();
            fetchAnalytics();

            document.querySelectorAll('#status-tabs .p-tab').forEach(tab => {
                tab.addEventListener('click', function() {
                    document.querySelectorAll('#status-tabs .p-tab').forEach(t => t.classList
                        .remove(
                            'active'));
                    this.classList.add('active');
                    state.status = this.dataset.status;
                    state.page = 1;
                    fetchData();
                });
            });

            document.getElementById('search').addEventListener('input', debounce(() => {
                state.search = document.getElementById('search').value;
                state.page = 1;
                fetchData();
            }, 500));

            document.getElementById('check-all').addEventListener('change', function() {
                document.querySelectorAll('.row-checkbox').forEach(cb => cb.checked = this
                    .checked);
                updateBulkState();
            });

            const fp = flatpickr("#filter_date_range", {
                mode: "range",
                onClose: (sd) => {
                    if (sd.length === 2) {
                        state.startDate = sd[0].toISOString().split('T')[0];
                        state.endDate = sd[1].toISOString().split('T')[0];
                    }
                }
            });

            document.querySelectorAll('.filter-tag').forEach(tag => {
                tag.addEventListener('click', function() {
                    const filterType = this.dataset.filter;
                    const container = this.parentElement;

                    container.querySelectorAll('.filter-tag').forEach(t => t.classList.remove(
                        'active'));
                    this.classList.add('active');

                    if (filterType === 'platform') {
                        state.platform = this.dataset.value;
                    } else if (filterType === 'awb_status') {
                        state.awb_status = this.dataset.value;
                    }
                });
            });

            document.getElementById('btn-apply-filters').addEventListener('click', () => {
                state.page = 1;
                fetchData();
                fetchAnalytics();
            });
            document.getElementById('btn-reset-filters').addEventListener('click', () => {
                state.startDate = state.endDate = state.platform = state.awb_status = null;
                document.querySelectorAll('.filter-tag').forEach(t => t.classList.remove('active'));
                document.querySelectorAll('.filter-tag[data-value=""]').forEach(t => t.classList.add(
                    'active'));
                fp.clear();
                fetchData();
                fetchAnalytics();
            });
            document.getElementById('items-per-page').addEventListener('change', function() {
                state.limit = this.value;
                state.page = 1;
                fetchData();
            });

            function debounce(f, d) {
                let t;
                return (...a) => {
                    clearTimeout(t);
                    t = setTimeout(() => f(...a), d);
                };
            }
        });
    </script>
@endpush