@extends('template.desktop.app')

@section('title', 'SPX Orders')

@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">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/litepicker/dist/css/litepicker.css">
    <style>
        /* =====================================================
                                                                                                                                                                   SPX ORDERS - PREMIUM DESIGN SYSTEM
                                                                                                                                                                   ===================================================== */
        :root {
            --s-primary: #EE4D2D;
            --s-primary-dark: #D63A1E;
            --s-primary-soft: #fff5f2;
            --s-accent: #FF6633;
            --s-bg: #f8f9fb;
            --s-surface: #ffffff;
            --s-border: #e8eaed;
            --s-border-light: #f1f3f5;
            --s-text: #1a1d21;
            --s-text-sec: #5f6368;
            --s-text-muted: #9aa0a6;
            --s-success: #1e8e3e;
            --s-success-bg: #e6f4ea;
            --s-warning: #e37400;
            --s-warning-bg: #fef7e0;
            --s-danger: #d93025;
            --s-danger-bg: #fce8e6;
            --s-info: #1a73e8;
            --s-info-bg: #e8f0fe;
            --s-purple: #7c3aed;
            --s-purple-bg: #f3f0ff;
            --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);
        }

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

        /* ============ HEADER ============ */
        .spx-header {
            background: linear-gradient(135deg, #1a1d21 0%, #2d3239 50%, #EE4D2D 150%);
            border-radius: var(--radius-lg);
            padding: 2rem 2.25rem;
            margin-bottom: 1.5rem;
            color: #fff;
            position: relative;
            overflow: hidden;
        }

        .spx-header::before {
            content: '';
            position: absolute;
            top: -60px;
            right: -40px;
            width: 200px;
            height: 200px;
            background: var(--s-primary);
            border-radius: 50%;
            opacity: 0.08;
        }

        .spx-header::after {
            content: '';
            position: absolute;
            bottom: -80px;
            right: 60px;
            width: 160px;
            height: 160px;
            background: var(--s-accent);
            border-radius: 50%;
            opacity: 0.05;
        }

        .spx-header h2 {
            color: #fff;
            font-weight: 800;
            letter-spacing: -0.02em;
            margin: 0;
        }

        .spx-header p {
            color: rgba(255, 255, 255, 0.5);
            font-size: 0.85rem;
            margin: 0.25rem 0 0;
        }

        .spx-header-actions {
            display: flex;
            gap: 0.75rem;
            align-items: center;
            flex-wrap: wrap;
        }

        .spx-btn {
            padding: 0.6rem 1.25rem;
            border-radius: 10px;
            font-weight: 600;
            font-size: 0.835rem;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            border: none;
            cursor: pointer;
            text-decoration: none;
        }

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

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

        .spx-btn-primary {
            background: var(--s-primary);
            color: #fff;
        }

        .spx-btn-primary:hover {
            background: var(--s-primary-dark);
            color: #fff;
            box-shadow: 0 4px 14px rgba(238, 77, 45, 0.35);
        }

        .spx-btn-glass {
            background: rgba(255, 255, 255, 0.12);
            color: #fff;
            border: 1px solid rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(4px);
        }

        .spx-btn-glass:hover {
            background: rgba(255, 255, 255, 0.2);
            color: #fff;
        }

        .spx-btn-outline {
            background: var(--s-surface);
            color: var(--s-text);
            border: 1px solid var(--s-border);
        }

        .spx-btn-outline:hover {
            background: var(--s-bg);
        }

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

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

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

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

        .spx-stat {
            background: var(--s-surface);
            border-radius: var(--radius);
            padding: 1.25rem 1.5rem;
            border: 1px solid var(--s-border);
            display: flex;
            align-items: center;
            gap: 1rem;
            transition: all 0.2s;
        }

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

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

        .spx-stat h3 {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--s-text);
            margin: 0;
            line-height: 1.1;
        }

        .spx-stat span {
            font-size: 0.75rem;
            color: var(--s-text-muted);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.03em;
        }

        /* ============ CHARTS ============ */
        .spx-charts {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.25rem;
            margin-bottom: 1.5rem;
        }

        .spx-charts-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.25rem;
            margin-bottom: 1.5rem;
        }

        @media (max-width: 991.98px) {
            .spx-charts-row {
                grid-template-columns: 1fr;
            }
        }

        .spx-card {
            background: var(--s-surface);
            border-radius: var(--radius-lg);
            border: 1px solid var(--s-border);
            box-shadow: var(--shadow-sm);
            overflow: hidden;
        }

        .spx-card-header {
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid var(--s-border-light);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .spx-card-header h6 {
            font-weight: 700;
            color: var(--s-text);
            margin: 0;
            font-size: 0.95rem;
        }

        .spx-card-body {
            padding: 1.5rem;
        }

        /* ============ FILTER BAR ============ */
        .spx-filter-bar {
            background: var(--s-surface);
            border-radius: var(--radius-lg);
            padding: 1rem 1.5rem;
            border: 1px solid var(--s-border);
            margin-bottom: 1.25rem;
            display: flex;
            align-items: center;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .spx-search-wrapper {
            position: relative;
            flex: 1;
            min-width: 250px;
        }

        .spx-search-wrapper i {
            position: absolute;
            left: 0.9rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--s-text-muted);
            font-size: 1rem;
        }

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

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

        .spx-date-wrapper {
            position: relative;
            display: inline-flex;
            align-items: center;
            min-width: 240px;
        }

        .spx-date-wrapper .spx-date-icon {
            position: absolute;
            left: 0.85rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--s-primary);
            font-size: 1.05rem;
            pointer-events: none;
            z-index: 1;
        }

        .spx-date-wrapper .spx-date-sep {
            position: absolute;
            right: 0.85rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--s-text-muted);
            font-size: 0.75rem;
            font-weight: 600;
            pointer-events: none;
        }

        .spx-date-input {
            padding: 0.65rem 1rem 0.65rem 2.75rem;
            border-radius: 10px;
            border: 1.5px solid var(--s-border);
            background: var(--s-bg);
            font-size: 0.82rem;
            font-weight: 600;
            font-family: 'Inter', -apple-system, sans-serif;
            width: 100%;
            cursor: pointer;
            transition: all 0.2s;
            color: var(--s-text);
            letter-spacing: 0.01em;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
        }

        .spx-date-input:hover {
            border-color: rgba(115, 103, 240, 0.4);
            background: var(--s-surface);
        }

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

        /* ============ STATUS TABS ============ */
        .spx-tabs {
            background: var(--s-surface);
            padding: 4px;
            border-radius: var(--radius);
            display: inline-flex;
            flex-wrap: wrap;
            gap: 2px;
            border: 1px solid var(--s-border);
        }

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

        .spx-tab:hover {
            background: var(--s-bg);
            color: var(--s-text);
        }

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

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

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

        /* ============ TABLE ============ */
        .spx-table {
            width: 100%;
            border-collapse: collapse;
        }

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

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

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

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

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

        /* ============ BADGES ============ */
        .spx-badge {
            padding: 0.3rem 0.65rem;
            border-radius: 6px;
            font-weight: 700;
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.02em;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            line-height: 1;
        }

        .spx-badge .dot {
            width: 5px;
            height: 5px;
            border-radius: 50%;
        }

        .spx-badge-pending {
            background: var(--s-warning-bg);
            color: var(--s-warning);
        }

        .spx-badge-pending .dot {
            background: var(--s-warning);
        }

        .spx-badge-process {
            background: var(--s-info-bg);
            color: var(--s-info);
        }

        .spx-badge-process .dot {
            background: var(--s-info);
        }

        .spx-badge-delivered {
            background: var(--s-success-bg);
            color: var(--s-success);
        }

        .spx-badge-delivered .dot {
            background: var(--s-success);
        }

        .spx-badge-return {
            background: var(--s-danger-bg);
            color: var(--s-danger);
        }

        .spx-badge-return .dot {
            background: var(--s-danger);
        }

        .spx-badge-cancelled {
            background: #f3f4f6;
            color: #6b7280;
        }

        .spx-badge-cancelled .dot {
            background: #6b7280;
        }

        .spx-badge-cod {
            background: var(--s-primary-soft);
            color: var(--s-primary);
        }

        .spx-mono {
            font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--s-text-sec);
            background: var(--s-bg);
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
        }

        /* ============ CELL LAYOUTS ============ */
        .spx-order-cell {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .spx-order-cell .spx-tn {
            font-weight: 700;
            color: var(--s-primary);
            font-size: 0.82rem;
        }

        .spx-order-cell .inv {
            font-size: 0.72rem;
            color: var(--s-text-muted);
        }

        .spx-receiver-cell {
            display: flex;
            flex-direction: column;
            gap: 0.15rem;
        }

        .spx-receiver-cell .name {
            font-weight: 600;
            color: var(--s-text);
            font-size: 0.85rem;
        }

        .spx-receiver-cell .addr {
            font-size: 0.72rem;
            color: var(--s-text-muted);
            max-width: 220px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .spx-amount {
            font-weight: 700;
            font-size: 0.88rem;
        }

        .spx-amount.cod {
            color: var(--s-primary);
        }

        /* ============ PAGINATION ============ */
        .spx-pagination {
            padding: 1rem 1.5rem;
            background: var(--s-bg);
            border-top: 1px solid var(--s-border-light);
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 1rem;
        }

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

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

        .spx-pagination .page-link:hover {
            background: var(--s-primary-soft);
            color: var(--s-primary);
        }

        /* ============ EMPTY STATE ============ */
        .spx-empty {
            padding: 4rem 2rem;
            text-align: center;
        }

        .spx-empty i {
            font-size: 3.5rem;
            color: var(--s-text-muted);
            opacity: 0.3;
            margin-bottom: 1rem;
            display: block;
        }

        .spx-empty h5 {
            font-weight: 700;
            color: var(--s-text);
            margin-bottom: 0.5rem;
        }

        .spx-empty p {
            color: var(--s-text-muted);
            font-size: 0.85rem;
        }

        /* ============ STATUS LEGEND ============ */
        .spx-legend-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 0;
            border-bottom: 1px solid var(--s-border-light);
        }

        .spx-legend-item:last-child {
            border-bottom: none;
        }

        .spx-legend-dot {
            width: 10px;
            height: 10px;
            border-radius: 3px;
            flex-shrink: 0;
        }

        .spx-legend-name {
            flex: 1;
            font-size: 0.82rem;
            font-weight: 500;
            color: var(--s-text-sec);
        }

        .spx-legend-count {
            font-size: 0.85rem;
            font-weight: 700;
            color: var(--s-text);
        }

        /* ============ LOADING ============ */
        .spx-loading {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 3rem;
        }

        .spx-spinner {
            width: 32px;
            height: 32px;
            border: 3px solid var(--s-border);
            border-top-color: var(--s-primary);
            border-radius: 50%;
            animation: spx-spin 0.6s linear infinite;
        }

        @keyframes spx-spin {
            to {
                transform: rotate(360deg);
            }
        }

        /* ============ LITEPICKER PREMIUM ============ */
        .litepicker {
            font-family: 'Inter', sans-serif !important;
            z-index: 9999 !important;
        }

        .litepicker .container__main {
            display: flex !important;
            flex-direction: row !important;
        }

        .litepicker .container__months {
            border-radius: 16px !important;
            box-shadow: 0 25px 65px rgba(0, 0, 0, 0.1), 0 8px 20px rgba(0, 0, 0, 0.06) !important;
            border: 1px solid rgba(0, 0, 0, 0.06) !important;
            background: #fff !important;
            overflow: visible !important;
            display: flex !important;
            flex-wrap: nowrap !important;
        }

        .litepicker .container__months .month-item {
            padding: 6px 8px !important;
        }

        .litepicker .container__months .month-item-header {
            padding: 10px 4px 8px !important;
            font-family: 'Inter', sans-serif !important;
        }

        .litepicker .container__months .month-item-header div>.month-item-name,
        .litepicker .container__months .month-item-header div>.month-item-year {
            font-weight: 700 !important;
            font-size: 0.88rem !important;
            color: var(--s-text) !important;
            border: none !important;
            padding: 4px 8px !important;
            border-radius: 6px !important;
            cursor: pointer !important;
            transition: background 0.15s !important;
        }

        .litepicker .container__months .month-item-header div>.month-item-name:hover,
        .litepicker .container__months .month-item-header div>.month-item-year:hover {
            background: var(--s-primary-soft) !important;
            color: var(--s-primary) !important;
        }

        .litepicker .container__months .month-item-header .button-previous-month,
        .litepicker .container__months .month-item-header .button-next-month {
            width: 30px !important;
            height: 30px !important;
            border-radius: 50% !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            transition: all 0.15s !important;
            cursor: pointer !important;
            background: var(--s-bg) !important;
            border: 1px solid var(--s-border) !important;
        }

        .litepicker .container__months .month-item-header .button-previous-month:hover,
        .litepicker .container__months .month-item-header .button-next-month:hover {
            background: var(--s-primary) !important;
            border-color: var(--s-primary) !important;
        }

        .litepicker .container__months .month-item-header .button-previous-month:hover>svg,
        .litepicker .container__months .month-item-header .button-next-month:hover>svg {
            fill: #fff !important;
        }

        .litepicker .container__months .month-item-header .button-previous-month>svg,
        .litepicker .container__months .month-item-header .button-next-month>svg {
            fill: var(--s-text-sec) !important;
            width: 10px !important;
            height: 10px !important;
        }

        .litepicker .container__months .month-item-weekdays-row>div {
            font-weight: 700 !important;
            font-size: 0.65rem !important;
            color: var(--s-text-muted) !important;
            text-transform: uppercase !important;
            letter-spacing: 0.06em !important;
            padding: 10px 0 6px !important;
        }

        .litepicker .container__days .day-item {
            border-radius: 10px !important;
            font-weight: 500 !important;
            font-size: 0.78rem !important;
            height: 34px !important;
            width: 34px !important;
            transition: all 0.12s ease !important;
            cursor: pointer !important;
            position: relative !important;
        }

        .litepicker .container__days .day-item:hover {
            background: var(--s-primary-soft) !important;
            color: var(--s-primary) !important;
            box-shadow: none !important;
            transform: scale(1.05) !important;
        }

        .litepicker .container__days .day-item.is-today {
            color: var(--s-primary) !important;
            font-weight: 800 !important;
            background: var(--s-primary-soft) !important;
        }

        .litepicker .container__days .day-item.is-start-date,
        .litepicker .container__days .day-item.is-end-date {
            background: var(--s-primary) !important;
            color: #fff !important;
            font-weight: 700 !important;
            border-radius: 10px !important;
            box-shadow: 0 3px 10px rgba(238, 77, 45, 0.35) !important;
            transform: scale(1.05) !important;
        }

        .litepicker .container__days .day-item.is-in-range {
            background: rgba(238, 77, 45, 0.08) !important;
            color: var(--s-primary) !important;
            border-radius: 0 !important;
            font-weight: 600 !important;
        }

        .litepicker .container__days .day-item.is-start-date {
            border-radius: 10px 0 0 10px !important;
        }

        .litepicker .container__days .day-item.is-end-date {
            border-radius: 0 10px 10px 0 !important;
        }

        .litepicker .container__days .day-item.is-start-date.is-end-date {
            border-radius: 10px !important;
        }

        .litepicker .container__days .day-item.is-locked {
            color: #d0d5dd !important;
            opacity: 0.5 !important;
        }

        .litepicker .container__tooltip {
            background: var(--s-text) !important;
            color: #fff !important;
            border-radius: 8px !important;
            font-size: 0.72rem !important;
            font-weight: 600 !important;
            padding: 5px 12px !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
        }

        .litepicker .container__preset {
            border-top: 1px solid var(--s-border-light) !important;
            padding: 12px 16px !important;
            display: flex !important;
            flex-wrap: wrap !important;
            gap: 6px !important;
            background: var(--s-bg) !important;
            border-radius: 0 0 18px 18px !important;
        }

        .litepicker .container__preset button {
            border: 1.5px solid var(--s-border) !important;
            background: #fff !important;
            color: var(--s-text-sec) !important;
            border-radius: 20px !important;
            padding: 6px 14px !important;
            font-size: 0.72rem !important;
            font-weight: 600 !important;
            font-family: 'Inter', sans-serif !important;
            cursor: pointer !important;
            transition: all 0.15s !important;
            white-space: nowrap !important;
        }

        .litepicker .container__preset button:hover {
            background: var(--s-primary) !important;
            border-color: var(--s-primary) !important;
            color: #fff !important;
            box-shadow: 0 2px 8px rgba(238, 77, 45, 0.25) !important;
            transform: translateY(-1px) !important;
        }

        /* ============ RESPONSIVE ============ */
        @media (max-width: 768px) {
            .spx-header {
                padding: 1.5rem;
                text-align: center;
            }

            .spx-header-actions {
                justify-content: center;
            }

            .spx-filter-bar {
                flex-direction: column;
                align-items: stretch;
            }

            .spx-search-wrapper {
                min-width: 100%;
            }

            .spx-date-input {
                width: 100%;
            }

            .spx-charts {
                grid-template-columns: 1fr;
            }
        }

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

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

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

        /* ============ MULTI-SELECT DROPDOWN ============ */
        .spx-multiselect {
            position: relative;
            min-width: 200px;
        }

        .spx-ms-trigger {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 0.55rem 1rem;
            border-radius: 10px;
            border: 1.5px solid var(--s-border);
            background: var(--s-bg);
            cursor: pointer;
            transition: all 0.15s;
            font-family: 'Inter', sans-serif;
            min-height: 40px;
        }

        .spx-ms-trigger:hover {
            border-color: rgba(238, 77, 45, 0.3);
            background: var(--s-surface);
        }

        .spx-ms-trigger.open {
            border-color: var(--s-primary);
            box-shadow: 0 0 0 3px var(--s-primary-soft);
            background: var(--s-surface);
        }

        .spx-ms-trigger .ms-icon {
            font-size: 1rem;
            color: var(--s-primary);
            flex-shrink: 0;
        }

        .spx-ms-trigger .ms-label {
            flex: 1;
            font-size: 0.82rem;
            font-weight: 600;
            color: var(--s-text-sec);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .spx-ms-trigger .ms-count {
            background: var(--s-primary);
            color: #fff;
            font-size: 0.65rem;
            font-weight: 700;
            padding: 2px 7px;
            border-radius: 100px;
            flex-shrink: 0;
        }

        .spx-ms-trigger .ms-chevron {
            font-size: 0.85rem;
            color: var(--s-text-muted);
            transition: transform 0.2s;
            flex-shrink: 0;
        }

        .spx-ms-trigger.open .ms-chevron {
            transform: rotate(180deg);
        }

        .spx-ms-dropdown {
            position: absolute;
            top: calc(100% + 6px);
            left: 0;
            right: 0;
            min-width: 260px;
            background: var(--s-surface);
            border: 1.5px solid var(--s-border);
            border-radius: var(--radius);
            box-shadow: var(--shadow-lg);
            z-index: 999;
            display: none;
            overflow: hidden;
        }

        .spx-ms-dropdown.show {
            display: block;
        }

        .spx-ms-search {
            padding: 8px 12px;
            border-bottom: 1px solid var(--s-border-light);
        }

        .spx-ms-search input {
            width: 100%;
            padding: 6px 10px;
            border: 1.5px solid var(--s-border);
            border-radius: 8px;
            font-size: 0.78rem;
            font-family: 'Inter', sans-serif;
            font-weight: 500;
            color: var(--s-text);
        }

        .spx-ms-search input:focus {
            outline: none;
            border-color: var(--s-primary);
        }

        .spx-ms-search input::placeholder {
            color: var(--s-text-muted);
        }

        .spx-ms-actions {
            display: flex;
            gap: 6px;
            padding: 6px 12px;
            border-bottom: 1px solid var(--s-border-light);
        }

        .spx-ms-actions button {
            flex: 1;
            padding: 4px 8px;
            border: 1px solid var(--s-border);
            border-radius: 6px;
            background: var(--s-bg);
            font-size: 0.7rem;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            color: var(--s-text-sec);
            cursor: pointer;
            transition: all 0.15s;
        }

        .spx-ms-actions button:hover {
            background: var(--s-primary-soft);
            color: var(--s-primary);
        }

        .spx-ms-list {
            max-height: 240px;
            overflow-y: auto;
            padding: 4px 0;
        }

        .spx-ms-list::-webkit-scrollbar {
            width: 5px;
        }

        .spx-ms-list::-webkit-scrollbar-track {
            background: transparent;
        }

        .spx-ms-list::-webkit-scrollbar-thumb {
            background: var(--s-border);
            border-radius: 10px;
        }

        .spx-ms-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 7px 12px;
            cursor: pointer;
            transition: background 0.1s;
            font-size: 0.8rem;
            font-weight: 500;
            color: var(--s-text-sec);
        }

        .spx-ms-item:hover {
            background: var(--s-primary-soft);
        }

        .spx-ms-item.hidden {
            display: none;
        }

        .spx-ms-item input[type=checkbox] {
            width: 16px;
            height: 16px;
            border-radius: 4px;
            accent-color: var(--s-primary);
            cursor: pointer;
            flex-shrink: 0;
        }

        .spx-ms-item label {
            flex: 1;
            cursor: pointer;
            font-size: 0.78rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .spx-ms-empty {
            padding: 1.25rem;
            text-align: center;
            font-size: 0.75rem;
            color: var(--s-text-muted);
        }

        /* ============ PAGE TOGGLE ============ */
        .spx-page-toggle {
            display: flex;
            gap: 4px;
            background: var(--s-bg);
            border: 1.5px solid var(--s-border);
            border-radius: 12px;
            padding: 4px;
            margin-bottom: 1.5rem;
            width: fit-content;
        }

        .spx-page-toggle button {
            border: none;
            background: transparent;
            padding: 8px 20px;
            border-radius: 9px;
            font-size: 0.82rem;
            font-weight: 600;
            color: var(--s-text-sec);
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .spx-page-toggle button.active {
            background: var(--s-primary);
            color: #fff;
            box-shadow: 0 2px 8px rgba(238, 77, 45, 0.25);
        }

        .spx-page-toggle button:not(.active):hover {
            background: var(--s-primary-soft);
            color: var(--s-primary);
        }

        /* ============ FINANCE SECTION ============ */
        .spx-finance-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.25rem;
            margin-bottom: 1.5rem;
        }

        @media (max-width: 768px) {
            .spx-finance-grid {
                grid-template-columns: 1fr;
            }
        }

        .spx-finance-card {
            background: var(--s-surface);
            border-radius: var(--radius);
            border: 1px solid var(--s-border);
            padding: 1.5rem;
            transition: all 0.2s;
        }

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

        .spx-finance-card .fin-label {
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--s-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.04em;
            margin-bottom: 0.5rem;
        }

        .spx-finance-card .fin-value {
            font-size: 1.6rem;
            font-weight: 800;
            color: var(--s-text);
            line-height: 1.2;
        }

        .spx-finance-card .fin-value.positive {
            color: #059669;
        }

        .spx-finance-card .fin-value.negative {
            color: #dc2626;
        }

        .spx-finance-card .fin-sub {
            font-size: 0.78rem;
            color: var(--s-text-sec);
            margin-top: 0.4rem;
        }

        .spx-finance-detail {
            background: var(--s-surface);
            border-radius: var(--radius);
            border: 1px solid var(--s-border);
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .spx-finance-detail h6 {
            font-size: 0.88rem;
            font-weight: 700;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .spx-fin-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.6rem 0;
            border-bottom: 1px solid var(--s-border-light);
        }

        .spx-fin-row:last-child {
            border-bottom: none;
        }

        .spx-fin-row .fin-key {
            font-size: 0.82rem;
            color: var(--s-text-sec);
            font-weight: 500;
        }

        .spx-fin-row .fin-val {
            font-size: 0.85rem;
            font-weight: 700;
            color: var(--s-text);
        }

        /* ============ TICKET DETAIL MODAL ============ */
        .spx-modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
            backdrop-filter: blur(4px);
        }

        .spx-modal {
            background: var(--s-surface);
            border-radius: var(--radius-lg);
            width: 100%;
            max-width: 680px;
            max-height: 90vh;
            display: flex;
            flex-direction: column;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            border: 1px solid var(--s-border);
        }

        .spx-modal-header {
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid var(--s-border);
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }

        .spx-modal-close {
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: var(--s-text-muted);
            line-height: 1;
            padding: 0 0.25rem;
        }

        .spx-modal-close:hover {
            color: var(--s-danger);
        }

        .spx-modal-body {
            padding: 1.25rem 1.5rem;
            overflow-y: auto;
        }

        .spx-info-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.75rem 1.5rem;
            margin-bottom: 1.25rem;
        }

        @media(max-width:576px) {
            .spx-info-grid {
                grid-template-columns: 1fr;
            }
        }

        .spx-info-item label {
            display: block;
            font-size: 0.65rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--s-text-muted);
            margin-bottom: 2px;
        }

        .spx-info-item span {
            font-size: 0.82rem;
            font-weight: 600;
            color: var(--s-text);
            word-break: break-word;
        }

        .spx-timeline {
            position: relative;
            padding-left: 1.25rem;
        }

        .spx-timeline::before {
            content: '';
            position: absolute;
            left: 5px;
            top: 4px;
            bottom: 4px;
            width: 2px;
            background: var(--s-border);
        }

        .spx-tl-item {
            position: relative;
            padding-bottom: 1rem;
        }

        .spx-tl-item:last-child {
            padding-bottom: 0;
        }

        .spx-tl-dot {
            position: absolute;
            left: -1.25rem;
            top: 4px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            border: 2px solid var(--s-primary);
            background: var(--s-surface);
        }

        .spx-tl-item:first-child .spx-tl-dot {
            background: var(--s-primary);
        }
    </style>
@endpush

@section('content')
    <div class="spx-wrapper">
        <!-- ============ HEADER ============ -->
        <header class="spx-header">
            <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                <div class="d-flex align-items-center gap-3">
                    <div class="rounded-3 d-flex align-items-center justify-content-center"
                        style="width: 42px; height: 42px; background: rgba(238,77,45,0.2);">
                        <i class="ti tabler-brand-shopee" style="font-size: 1.3rem; color: var(--s-primary);"></i>
                    </div>
                    <div>
                        <h2 style="font-size: 1.35rem; margin: 0;">Pesanan SPX Express</h2>
                        <p style="margin: 0;">Monitoring & analitik pengiriman</p>
                    </div>
                </div>
                <div class="spx-header-actions" style="gap: 0.4rem; flex-wrap: nowrap;">
                    <a href="{{ route('spx-orders.finance') }}" class="spx-btn spx-btn-glass" title="Keuangan"
                        style="padding: 0.4rem 0.65rem;">
                        <i class="ti tabler-wallet"></i> <span class="d-none d-xl-inline">Keuangan</span>
                    </a>
                    <a href="{{ route('spx-orders.addresses') }}" class="spx-btn spx-btn-glass" title="Alamat"
                        style="padding: 0.4rem 0.65rem;">
                        <i class="ti tabler-map-pin"></i> <span class="d-none d-xl-inline">Alamat</span>
                    </a>
                    <a href="{{ route('spx-orders.tickets') }}" class="spx-btn spx-btn-glass" title="Bermasalah"
                        style="padding: 0.4rem 0.65rem;">
                        <i class="ti tabler-alert-triangle"></i> <span class="d-none d-xl-inline">Bermasalah</span>
                    </a>
                    <span style="width:1px;height:20px;background:rgba(255,255,255,0.15);margin:0 0.15rem;"></span>
                    <button class="spx-btn spx-btn-glass" onclick="window.exportExcel()" id="btnExport" title="Export Excel"
                        style="padding: 0.4rem 0.65rem;">
                        <i class="ti tabler-file-spreadsheet"></i> <span class="d-none d-xl-inline">Export</span>
                    </button>
                    <button class="spx-btn spx-btn-glass" onclick="syncFromApi()" id="btnSync" title="Sinkronisasi"
                        style="padding: 0.4rem 0.65rem;">
                        <i class="ti tabler-refresh"></i> <span class="d-none d-xl-inline">Sync</span>
                    </button>
                </div>
            </div>
            <div class="text-end" style="margin-top: 0.5rem;">
                <span class="text-white small opacity-50" id="lastSync" style="font-size:0.7rem;">
                    Database: <span id="dbCount">0</span> pesanan
                </span>
            </div>
        </header>

        <!-- ============ STATS ============ -->
        <section class="spx-stats" id="statsContainer">
            <div class="spx-stat">
                <div class="spx-stat-icon" style="background: var(--s-primary-soft); color: var(--s-primary);">
                    <i class="ti tabler-package"></i>
                </div>
                <div>
                    <span>Total Pesanan</span>
                    <h3 id="statTotal">0</h3>
                </div>
            </div>
            <div class="spx-stat">
                <div class="spx-stat-icon" style="background: var(--s-warning-bg); color: var(--s-warning);">
                    <i class="ti tabler-cash-banknote"></i>
                </div>
                <div>
                    <span>Pesanan COD</span>
                    <h3 id="statCod">0</h3>
                </div>
            </div>
            <div class="spx-stat">
                <div class="spx-stat-icon" style="background: #fff0f6; color: #c2255c;">
                    <i class="ti tabler-cash"></i>
                </div>
                <div>
                    <span>Total Nilai COD</span>
                    <h3 id="statCodAmount" style="font-size: 1.2rem;">Rp 0</h3>
                </div>
            </div>
            <div class="spx-stat">
                <div class="spx-stat-icon" style="background: var(--s-info-bg); color: var(--s-info);">
                    <i class="ti tabler-truck"></i>
                </div>
                <div>
                    <span>Total Ongkir</span>
                    <h3 id="statShipping" style="font-size: 1.2rem;">Rp 0</h3>
                </div>
            </div>
            <div class="spx-stat">
                <div class="spx-stat-icon" style="background: var(--s-purple-bg); color: var(--s-purple);">
                    <i class="ti tabler-receipt-tax"></i>
                </div>
                <div>
                    <span>Biaya Layanan COD</span>
                    <h3 id="statCodFee" style="font-size: 1.2rem;">Rp 0</h3>
                </div>
            </div>
            <div class="spx-stat">
                <div class="spx-stat-icon" style="background: var(--s-success-bg); color: var(--s-success);">
                    <i class="ti tabler-circle-check"></i>
                </div>
                <div>
                    <span>Pesanan Non-COD</span>
                    <h3 id="statNonCod">0</h3>
                </div>
            </div>
            <div class="spx-stat">
                <div class="spx-stat-icon" style="background: #ecfdf5; color: #059669;">
                    <i class="ti tabler-moneybag"></i>
                </div>
                <div>
                    <span>Estimasi Pendapatan COD</span>
                    <h3 id="statRevenue" style="font-size: 1.2rem; color: #059669;">Rp 0</h3>
                </div>
            </div>
        </section>

        <!-- ============ CHARTS ============ -->
        <div class="spx-charts">
            <div class="spx-card">
                <div class="spx-card-header">
                    <h6><i class="ti tabler-chart-line me-2" style="color: var(--s-primary);"></i>Tren Harian</h6>
                </div>
                <div class="spx-card-body">
                    <div id="trendChart" style="min-height: 320px;"></div>
                </div>
            </div>
        </div>
        <div class="spx-charts-row">
            <div class="spx-card">
                <div class="spx-card-header">
                    <h6><i class="ti tabler-chart-donut me-2" style="color: var(--s-primary);"></i>Distribusi Status
                    </h6>
                </div>
                <div class="spx-card-body d-flex align-items-center gap-4 flex-wrap justify-content-center">
                    <div id="statusChart" style="min-width: 200px;"></div>
                    <div id="statusLegend" style="flex: 1; min-width: 180px;"></div>
                </div>
            </div>
            <div class="spx-card">
                <div class="spx-card-header">
                    <h6><i class="ti tabler-map-pin me-2" style="color: var(--s-primary);"></i>Kota Tujuan Teratas</h6>
                </div>
                <div class="spx-card-body">
                    <div id="citiesChart" style="min-height: 280px;"></div>
                </div>
            </div>
        </div>

        <!-- ============ FILTER BAR ============ -->
        <div class="spx-filter-bar" style="flex-wrap: wrap;">
            <div class="spx-search-wrapper">
                <i class="ti tabler-search"></i>
                <input type="text" class="spx-search-input" id="searchInput"
                    placeholder="Cari no. resi, invoice, nama penerima...">
            </div>
            <div class="spx-date-wrapper">
                <i class="ti tabler-calendar-event spx-date-icon"></i>
                <input type="text" class="spx-date-input" id="dateRange" placeholder="Pilih rentang tanggal"
                    readonly>
            </div>
            {{-- Sender Multi-Select --}}
            <div class="spx-multiselect" id="msWrapper_sender">
                <div class="spx-ms-trigger" onclick="window.toggleMS('sender')">
                    <i class="ti tabler-building-warehouse ms-icon"></i>
                    <span class="ms-label" id="msLabel_sender">Semua Pengirim</span>
                    <span class="ms-count" id="msCount_sender" style="display:none;"></span>
                    <i class="ti tabler-chevron-down ms-chevron"></i>
                </div>
                <div class="spx-ms-dropdown" id="msDropdown_sender">
                    <div class="spx-ms-search">
                        <input type="text" placeholder="Cari pengirim..."
                            oninput="window.filterMSItems('sender', this.value)">
                    </div>
                    <div class="spx-ms-actions">
                        <button onclick="window.selectAllMS('sender')">Pilih Semua</button>
                        <button onclick="window.clearAllMS('sender')">Hapus Semua</button>
                    </div>
                    <div class="spx-ms-list" id="msList_sender">
                        <div class="spx-ms-empty">Memuat...</div>
                    </div>
                </div>
            </div>
            {{-- Province Multi-Select --}}
            <div class="spx-multiselect" id="msWrapper_province">
                <div class="spx-ms-trigger" onclick="window.toggleMS('province')">
                    <i class="ti tabler-map-pin ms-icon"></i>
                    <span class="ms-label" id="msLabel_province">Semua Provinsi</span>
                    <span class="ms-count" id="msCount_province" style="display:none;"></span>
                    <i class="ti tabler-chevron-down ms-chevron"></i>
                </div>
                <div class="spx-ms-dropdown" id="msDropdown_province">
                    <div class="spx-ms-search">
                        <input type="text" placeholder="Cari provinsi..."
                            oninput="window.filterMSItems('province', this.value)">
                    </div>
                    <div class="spx-ms-actions">
                        <button onclick="window.selectAllMS('province')">Pilih Semua</button>
                        <button onclick="window.clearAllMS('province')">Hapus Semua</button>
                    </div>
                    <div class="spx-ms-list" id="msList_province">
                        <div class="spx-ms-empty">Memuat...</div>
                    </div>
                </div>
            </div>
            <select class="form-select" id="limitSelect"
                style="width: 100px; border-radius: 10px; font-size: 0.835rem; border: 1px solid var(--s-border);">
                <option value="10">10</option>
                <option value="25">25</option>
                <option value="50">50</option>
                <option value="100">100</option>
            </select>
        </div>

        <!-- ============ STATUS TABS ============ -->
        <div class="d-flex flex-wrap justify-content-between align-items-center gap-3 mb-3">
            <div class="spx-tabs" id="statusTabs">
                <button class="spx-tab active" data-group="all">
                    Semua <span class="spx-tab-count" id="tabAll">0</span>
                </button>
                <!-- Tabs will be dynamically populated -->
            </div>
        </div>

        <!-- ============ DATA TABLE ============ -->
        <div class="spx-card">
            <div class="table-responsive">
                <table class="spx-table">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>No. Resi</th>
                            <th>No. Invoice</th>
                            <th>Produk</th>
                            <th>Penerima</th>
                            <th>Tujuan</th>
                            <th>Status</th>
                            <th class="text-end">Nilai COD</th>
                            <th class="text-end">Ongkir</th>
                            <th>Tanggal</th>
                        </tr>
                    </thead>
                    <tbody id="orderTableBody">
                        <tr>
                            <td colspan="10">
                                <div class="spx-loading">
                                    <div class="spx-spinner"></div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- Pagination -->
            <div class="spx-pagination">
                <div class="d-flex align-items-center gap-3">
                    <span class="text-muted small fw-bold" id="paginationInfo">Menampilkan 0-0 dari 0</span>
                </div>
                <nav>
                    <ul class="pagination pagination-sm mb-0" id="pagination"></ul>
                </nav>
            </div>
        </div>
    </div>

    <!-- ============ TICKET DETAIL MODAL ============ -->
    <div class="spx-modal-overlay" id="ticketModalOverlay" style="display:none;" onclick="window.closeTicketModal()">
        <div class="spx-modal" onclick="event.stopPropagation()">
            <div class="spx-modal-header">
                <div>
                    <h3 id="modalTicketId" style="margin:0;font-size:1.1rem;font-weight:800;">-</h3>
                    <p id="modalTicketReason" style="margin:0.2rem 0 0;font-size:0.78rem;color:var(--s-text-muted);">-</p>
                </div>
                <button class="spx-modal-close" onclick="window.closeTicketModal()">&times;</button>
            </div>
            <div class="spx-modal-body" id="modalBody">
                <div style="padding:2rem;text-align:center;color:var(--s-text-muted);font-size:0.85rem;">Klik resi untuk
                    melihat detail tiket</div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/litepicker/dist/litepicker.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/litepicker/dist/plugins/preset-plugin.js"></script>
    <script>
        (function() {
            const DATA_URL = '{{ url('/spx-orders/data') }}';
            const ANALYTICS_URL = '{{ url('/spx-orders/analytics') }}';
            const SYNC_URL = '{{ url('/api/spx/orders') }}';
            const EXPORT_URL = '{{ url('/spx-orders/export') }}';
            const BALANCE_URL = '{{ url('/api/spx/balance') }}';
            const CSRF = document.querySelector('meta[name="csrf-token"]').content;

            // ============ PAGE SWITCH ============
            let financeLoaded = false;

            window.switchPage = function(page) {
                document.getElementById('sectionOrders').style.display = page === 'orders' ? '' : 'none';
                document.getElementById('sectionFinance').style.display = page === 'finance' ? '' : 'none';
                document.getElementById('tabOrders').classList.toggle('active', page === 'orders');
                document.getElementById('tabFinance').classList.toggle('active', page === 'finance');

                if (page === 'finance' && !financeLoaded) {
                    financeLoaded = true;
                    loadBalance();
                }
            };

            function loadBalance() {
                fetch(BALANCE_URL, {
                        headers: {
                            'Accept': 'application/json'
                        }
                    })
                    .then(function(r) {
                        return r.json();
                    })
                    .then(function(res) {
                        if (!res.success) {
                            document.getElementById('finDetailRows').innerHTML = '<div class="spx-empty"><p>' + (res
                                .message || 'Gagal memuat data') + '</p></div>';
                            return;
                        }

                        var d = res.data && res.data.data ? res.data.data : res.data;
                        if (!d) {
                            document.getElementById('finDetailRows').innerHTML =
                                '<div class="spx-empty"><p>Data kosong</p></div>';
                            return;
                        }

                        // Main balance cards
                        var available = d.available_balance || d.withdrawable_balance || 0;
                        var total = d.total_balance || d.balance || 0;
                        var hold = d.hold_balance || d.frozen_balance || 0;

                        document.getElementById('finAvailable').textContent = 'Rp ' + formatNumber(available);
                        document.getElementById('finTotal').textContent = 'Rp ' + formatNumber(total);
                        document.getElementById('finHold').textContent = 'Rp ' + formatNumber(hold);

                        // Detail rows
                        var detailHtml = '';
                        var fields = [
                            ['total_balance', 'Total Saldo'],
                            ['available_balance', 'Saldo Tersedia'],
                            ['withdrawable_balance', 'Saldo Bisa Ditarik'],
                            ['hold_balance', 'Saldo Tertahan'],
                            ['frozen_balance', 'Saldo Beku'],
                            ['cod_balance', 'Saldo COD'],
                            ['non_cod_balance', 'Saldo Non-COD'],
                            ['shipping_fee_balance', 'Saldo Ongkir'],
                            ['compensation_balance', 'Saldo Kompensasi'],
                            ['adjustment_balance', 'Saldo Penyesuaian'],
                            ['insurance_balance', 'Saldo Asuransi'],
                        ];

                        fields.forEach(function(f) {
                            if (d[f[0]] !== undefined && d[f[0]] !== null) {
                                detailHtml += '<div class="spx-fin-row">' +
                                    '<span class="fin-key">' + f[1] + '</span>' +
                                    '<span class="fin-val">Rp ' + formatNumber(d[f[0]]) + '</span>' +
                                    '</div>';
                            }
                        });

                        // Also display any remaining keys
                        var shown = fields.map(function(f) {
                            return f[0];
                        });
                        var skipKeys = ['biz_account_id', 'business_entity', 'product_line', 'seller_id',
                            'account_name', 'bank_name', 'bank_account', 'account_status'
                        ];
                        Object.keys(d).forEach(function(key) {
                            if (shown.indexOf(key) === -1 && skipKeys.indexOf(key) === -1 && typeof d[
                                    key] === 'number') {
                                var label = key.replace(/_/g, ' ').replace(/\b\w/g, function(c) {
                                    return c.toUpperCase();
                                });
                                detailHtml += '<div class="spx-fin-row">' +
                                    '<span class="fin-key">' + label + '</span>' +
                                    '<span class="fin-val">Rp ' + formatNumber(d[key]) + '</span>' +
                                    '</div>';
                            }
                        });

                        document.getElementById('finDetailRows').innerHTML = detailHtml ||
                            '<div class="spx-empty"><p>Tidak ada rincian</p></div>';

                        // Account info
                        var acctHtml = '';
                        var acctFields = [
                            ['biz_account_id', 'ID Akun Bisnis'],
                            ['seller_id', 'ID Seller'],
                            ['account_name', 'Nama Akun'],
                            ['bank_name', 'Nama Bank'],
                            ['bank_account', 'No. Rekening'],
                            ['account_status', 'Status Akun'],
                            ['business_entity', 'Business Entity'],
                            ['product_line', 'Product Line'],
                        ];

                        acctFields.forEach(function(f) {
                            if (d[f[0]] !== undefined && d[f[0]] !== null) {
                                acctHtml += '<div class="spx-fin-row">' +
                                    '<span class="fin-key">' + f[1] + '</span>' +
                                    '<span class="fin-val">' + d[f[0]] + '</span>' +
                                    '</div>';
                            }
                        });

                        document.getElementById('finAccountInfo').innerHTML = acctHtml ||
                            '<div class="spx-empty"><p>Tidak ada info akun</p></div>';
                    })
                    .catch(function(err) {
                        console.error('Balance error:', err);
                        document.getElementById('finDetailRows').innerHTML =
                            '<div class="spx-empty"><p>Gagal memuat data keuangan</p></div>';
                    });
            }

            // ============ EXPORT EXCEL ============
            window.exportExcel = function() {
                var params = new URLSearchParams();
                if (startDate) params.set('start_date', startDate);
                if (endDate) params.set('end_date', endDate);
                if (currentStatusGroup && currentStatusGroup !== 'all') params.set('status_group',
                    currentStatusGroup);
                if (currentSearch) params.set('search', currentSearch);

                var url = EXPORT_URL + '?' + params.toString();

                Swal.fire({
                    title: 'Export Excel',
                    html: '<div style="text-align:left;font-size:0.88rem;color:#5f6368;">' +
                        '<p style="margin-bottom:0.75rem;">Data yang akan diekspor:</p>' +
                        '<div style="background:#f8f9fb;border-radius:10px;padding:0.75rem 1rem;font-size:0.82rem;">' +
                        '<div><strong>Tanggal:</strong> ' + (startDate || '-') + ' s/d ' + (endDate ||
                            '-') + '</div>' +
                        '<div><strong>Status:</strong> ' + (currentStatusGroup === 'all' ? 'Semua' :
                            currentStatusGroup) + '</div>' +
                        (currentSearch ? '<div><strong>Pencarian:</strong> ' + currentSearch + '</div>' :
                            '') +
                        '</div></div>',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#1e8e3e',
                    cancelButtonText: 'Batal',
                    confirmButtonText: '<i class="ti tabler-file-spreadsheet"></i> Download Excel',
                }).then(function(result) {
                    if (result.isConfirmed) {
                        window.location.href = url;
                        Toastify({
                            text: '📥 Mengunduh file Excel...',
                            backgroundColor: '#1e8e3e',
                            duration: 3000,
                        }).showToast();
                    }
                });
            };

            let currentPage = 1;
            let currentLimit = 10;
            let currentSearch = '';
            let currentStatusGroup = 'all';
            let currentSenders = [];
            let currentProvinces = [];
            let startDate = '';

            // Translation map for SPX status names
            const statusTranslation = {
                'Pending Pickup': 'Menunggu Pickup',
                'In Transit': 'Dalam Pengiriman',
                'Delivered': 'Terkirim',
                'Return': 'Retur',
                'Cancelled': 'Dibatalkan',
                'On Hold': 'Ditahan',
                'Delivery Exception': 'Pengiriman Bermasalah',
                'Pickup On Hold': 'Pickup Ditahan',
                'Out for Delivery': 'Sedang Diantar',
                'Pickup Failed': 'Gagal Pickup',
                'Delivery Failed': 'Gagal Diantar',
                'Returning': 'Proses Retur',
                'Returned': 'Dikembalikan',
                'Lost': 'Hilang',
                'Damaged': 'Rusak',
            };

            function tl(name) {
                return statusTranslation[name] || name;
            }
            let endDate = '';
            let statusTrendChart = null;
            let statusDonutChart = null;
            let searchTimeout = null;

            // ============ INIT ============
            document.addEventListener('DOMContentLoaded', () => {
                initDatePicker();
                initSearch();
                initLimitSelect();
                initSenderFilter();
                loadAnalytics();
                loadOrders();
            });

            // ============ LITEPICKER ============
            function initDatePicker() {
                var now = new Date();
                var monthAgo = new Date(now);
                monthAgo.setMonth(monthAgo.getMonth() - 1);
                startDate = formatDate(monthAgo);
                endDate = formatDate(now);

                var picker = new Litepicker({
                    element: document.getElementById('dateRange'),
                    singleMode: false,
                    numberOfMonths: 2,
                    numberOfColumns: 2,
                    format: 'DD MMM YYYY',
                    separator: '  →  ',
                    startDate: monthAgo,
                    endDate: now,
                    showTooltip: true,
                    tooltipNumber: function(totalDays) {
                        return totalDays - 1;
                    },
                    tooltipText: {
                        one: 'hari',
                        other: 'hari'
                    },
                    buttonText: {
                        previousMonth: '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>',
                        nextMonth: '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>',
                        apply: 'Terapkan',
                        cancel: 'Batal',
                    },
                    lang: 'id-ID',
                    autoApply: true,
                    showWeekNumbers: false,
                    dropdowns: {
                        minYear: 2024,
                        maxYear: null,
                        months: true,
                        years: true,
                    },
                    plugins: ['preset'],
                    preset: {
                        button: {
                            label: 'Pilih Cepat',
                        },
                        ranges: {
                            '7 Hari Terakhir': [new Date(new Date().setDate(new Date().getDate() - 7)),
                                new Date()
                            ],
                            '14 Hari Terakhir': [new Date(new Date().setDate(new Date().getDate() - 14)),
                                new Date()
                            ],
                            '30 Hari Terakhir': [new Date(new Date().setDate(new Date().getDate() - 30)),
                                new Date()
                            ],
                            'Bulan Ini': [new Date(new Date().getFullYear(), new Date().getMonth(), 1),
                                new Date()
                            ],
                            'Bulan Lalu': [new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1),
                                new Date(new Date().getFullYear(), new Date().getMonth(), 0)
                            ],
                            '3 Bulan Terakhir': [new Date(new Date().setMonth(new Date().getMonth() - 3)),
                                new Date()
                            ],
                        }
                    },
                    setup: function(picker) {
                        picker.on('selected', function(d1, d2) {
                            startDate = formatDate(d1.dateInstance);
                            endDate = formatDate(d2.dateInstance);
                            currentPage = 1;
                            loadOrders();
                            loadAnalytics();
                        });
                    },
                });
            }

            function formatDate(d) {
                return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate())
                    .padStart(2, '0');
            }

            // ============ SEARCH ============
            function initSearch() {
                document.getElementById('searchInput').addEventListener('input', function() {
                    clearTimeout(searchTimeout);
                    searchTimeout = setTimeout(() => {
                        currentSearch = this.value;
                        currentPage = 1;
                        loadOrders();
                    }, 400);
                });
            }

            // ============ LIMIT ============
            function initLimitSelect() {
                document.getElementById('limitSelect').addEventListener('change', function() {
                    currentLimit = parseInt(this.value);
                    currentPage = 1;
                    loadOrders();
                });
            }

            // ============ MULTI-SELECT FILTER ============
            function initSenderFilter() {
                // Load senders from spx_addresses (type=1)
                fetch('{{ url('/spx-orders/senders') }}', {
                        headers: {
                            Accept: 'application/json'
                        }
                    })
                    .then(r => r.json())
                    .then(res => {
                        if (res.success && res.data && res.data.length) {
                            buildMSItems('sender', res.data);
                        } else {
                            document.getElementById('msList_sender').innerHTML =
                                '<div class="spx-ms-empty">Belum ada data — sync alamat dulu</div>';
                        }
                    }).catch(() => {
                        document.getElementById('msList_sender').innerHTML =
                            '<div class="spx-ms-empty">Gagal memuat</div>';
                    });

                // Load provinces from distinct receiver_state
                fetch('{{ url('/spx-orders/provinces') }}', {
                        headers: {
                            Accept: 'application/json'
                        }
                    })
                    .then(r => r.json())
                    .then(res => {
                        if (res.success && res.data && res.data.length) {
                            buildMSItems('province', res.data);
                        } else {
                            document.getElementById('msList_province').innerHTML =
                                '<div class="spx-ms-empty">Belum ada data</div>';
                        }
                    }).catch(() => {
                        document.getElementById('msList_province').innerHTML =
                            '<div class="spx-ms-empty">Gagal memuat</div>';
                    });
            }

            function buildMSItems(key, items) {
                var list = document.getElementById('msList_' + key);
                var html = '';
                items.forEach(function(name, i) {
                    html += '<div class="spx-ms-item" data-val="' + esc(name) + '">' +
                        '<input type="checkbox" id="ms_' + key + '_' + i + '" onchange="window.onMSChange(\'' +
                        key + '\')">' +
                        '<label for="ms_' + key + '_' + i + '">' + esc(name) + '</label>' +
                        '</div>';
                });
                list.innerHTML = html;
            }

            window.toggleMS = function(key) {
                var dd = document.getElementById('msDropdown_' + key);
                var trigger = dd.previousElementSibling;
                var isOpen = dd.classList.contains('show');

                // Close all others first
                document.querySelectorAll('.spx-ms-dropdown.show').forEach(function(d) {
                    d.classList.remove('show');
                    d.previousElementSibling.classList.remove('open');
                });

                if (!isOpen) {
                    dd.classList.add('show');
                    trigger.classList.add('open');
                    var searchInput = dd.querySelector('.spx-ms-search input');
                    if (searchInput) setTimeout(function() {
                        searchInput.focus();
                    }, 50);
                }
            };

            window.filterMSItems = function(key, q) {
                var items = document.querySelectorAll('#msList_' + key + ' .spx-ms-item');
                var lower = q.toLowerCase();
                items.forEach(function(item) {
                    var val = item.dataset.val.toLowerCase();
                    item.classList.toggle('hidden', lower && val.indexOf(lower) === -1);
                });
            };

            window.selectAllMS = function(key) {
                document.querySelectorAll('#msList_' + key + ' .spx-ms-item:not(.hidden) input[type=checkbox]')
                    .forEach(function(cb) {
                        cb.checked = true;
                    });
                window.onMSChange(key);
            };

            window.clearAllMS = function(key) {
                document.querySelectorAll('#msList_' + key + ' input[type=checkbox]').forEach(function(cb) {
                    cb.checked = false;
                });
                window.onMSChange(key);
            };

            window.onMSChange = function(key) {
                var checked = [];
                document.querySelectorAll('#msList_' + key + ' input[type=checkbox]:checked').forEach(function(cb) {
                    checked.push(cb.closest('.spx-ms-item').dataset.val);
                });

                var label = document.getElementById('msLabel_' + key);
                var count = document.getElementById('msCount_' + key);

                if (key === 'sender') {
                    currentSenders = checked;
                    label.textContent = checked.length ? checked.slice(0, 2).join(', ') + (checked.length > 2 ?
                        '...' : '') : 'Semua Pengirim';
                } else {
                    currentProvinces = checked;
                    label.textContent = checked.length ? checked.slice(0, 2).join(', ') + (checked.length > 2 ?
                        '...' : '') : 'Semua Provinsi';
                }

                if (checked.length) {
                    count.textContent = checked.length;
                    count.style.display = '';
                } else {
                    count.style.display = 'none';
                }

                currentPage = 1;
                loadOrders();
            };

            // Close dropdowns when clicking outside
            document.addEventListener('click', function(e) {
                if (!e.target.closest('.spx-multiselect')) {
                    document.querySelectorAll('.spx-ms-dropdown.show').forEach(function(d) {
                        d.classList.remove('show');
                        d.previousElementSibling.classList.remove('open');
                    });
                }
            });

            // ============ LOAD ORDERS ============
            function loadOrders() {
                const body = document.getElementById('orderTableBody');
                body.innerHTML =
                    '<tr><td colspan="10"><div class="spx-loading"><div class="spx-spinner"></div></div></td></tr>';

                let url = `${DATA_URL}?page=${currentPage}&limit=${currentLimit}`;
                if (currentSearch) url += `&search=${encodeURIComponent(currentSearch)}`;
                if (startDate) url += `&start_date=${startDate}`;
                if (endDate) url += `&end_date=${endDate}`;
                if (currentStatusGroup !== 'all') url += `&status_group=${currentStatusGroup}`;
                if (currentSenders.length) currentSenders.forEach(s => url +=
                    `&sender_name[]=${encodeURIComponent(s)}`);
                if (currentProvinces.length) currentProvinces.forEach(p => url +=
                    `&receiver_state[]=${encodeURIComponent(p)}`);

                fetch(url, {
                        headers: {
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': CSRF
                        }
                    })
                    .then(r => r.json())
                    .then(res => {
                        if (res.success) {
                            renderTable(res.data, res.pagination);
                        }
                    })
                    .catch(err => {
                        body.innerHTML =
                            '<tr><td colspan="10"><div class="spx-empty"><i class="ti tabler-alert-circle"></i><h5>Gagal memuat data</h5></div></td></tr>';
                    });
            }

            // ============ RENDER TABLE ============
            function renderTable(data, pagination) {
                const body = document.getElementById('orderTableBody');
                document.getElementById('dbCount').textContent = pagination.total;

                if (data.length === 0) {
                    body.innerHTML =
                        '<tr><td colspan="10"><div class="spx-empty"><i class="ti tabler-package-off"></i><h5>Tidak ada data</h5><p>Order SPX belum tersedia untuk filter ini</p></div></td></tr>';
                    document.getElementById('paginationInfo').textContent = 'Menampilkan 0 dari 0';
                    document.getElementById('pagination').innerHTML = '';
                    return;
                }

                const startIdx = (pagination.page - 1) * pagination.limit;
                body.innerHTML = data.map((item, i) => {
                    const statusBadge = getStatusBadge(item.tracking_code_group, item.tracking_code_group_name);
                    const codLabel = item.cod_collection === 1 ?
                        `<span class="spx-amount cod">Rp ${formatNumber(item.cod_amount)}</span>` :
                        '<span class="text-muted small">Non-COD</span>';
                    const date = item.spx_created_at ?
                        new Date(item.spx_created_at * 1000).toLocaleDateString('id-ID', {
                            day: '2-digit',
                            month: 'short',
                            year: 'numeric'
                        }) :
                        '-';
                    const time = item.spx_created_at ?
                        new Date(item.spx_created_at * 1000).toLocaleTimeString('id-ID', {
                            hour: '2-digit',
                            minute: '2-digit'
                        }) :
                        '';

                    return `<tr>
                <td class="text-muted small">${startIdx + i + 1}</td>
                <td>
                    <div class="spx-order-cell">
                        <a href="#" onclick="window.showTicketDetail('${esc(item.spx_tn)}');return false;" class="spx-tn" style="color:var(--s-primary);text-decoration:none;cursor:pointer;">${esc(item.spx_tn || '-')}</a>
                        <span class="inv">${esc(item.sls_tn || '')}</span>
                    </div>
                </td>
                <td><span class="spx-mono">${esc(item.customer_tracking_no || '-')}</span></td>
                <td>
                    <div style="max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"
                         title="${esc(item.parcel_item_name || '')}">
                        ${esc(item.parcel_item_name || '-')}
                    </div>
                    <small class="text-muted">${item.parcel_weight || 0} kg</small>
                </td>
                <td>
                    <div class="spx-receiver-cell">
                        <span class="name">${esc(item.receiver_name || '-')}</span>
                        <span class="addr">${esc(item.receiver_city || '')}${item.receiver_district ? ', ' + esc(item.receiver_district) : ''}</span>
                    </div>
                </td>
                <td>
                    <span class="small">${esc(item.receiver_state || '-')}</span>
                </td>
                <td>${statusBadge}</td>
                <td class="text-end">${codLabel}</td>
                <td class="text-end">
                    <span class="small fw-semibold">Rp ${formatNumber(item.estimated_shipping_fee || 0)}</span>
                </td>
                <td>
                    <div class="small text-nowrap">${date}</div>
                    <div class="small text-muted">${time}</div>
                </td>
            </tr>`;
                }).join('');

                // Pagination info
                const from = startIdx + 1;
                const to = Math.min(startIdx + pagination.limit, pagination.total);
                document.getElementById('paginationInfo').textContent =
                    `Menampilkan ${from}-${to} dari ${pagination.total}`;

                // Pagination
                renderPagination(pagination);
            }

            function getStatusBadge(group, name) {
                const map = {
                    1: 'pending',
                    2: 'process',
                    3: 'delivered',
                    4: 'return',
                    5: 'cancelled'
                };
                const cls = map[group] || 'process';
                const displayName = name || 'Tidak Diketahui';
                return `<span class="spx-badge spx-badge-${cls}">${esc(tl(displayName))}</span>`;
            }

            // ============ PAGINATION ============
            function renderPagination(p) {
                const pag = document.getElementById('pagination');
                if (p.total_pages <= 1) {
                    pag.innerHTML = '';
                    return;
                }

                let html = '';
                html +=
                    `<li class="page-item ${p.page <= 1 ? 'disabled' : ''}"><a class="page-link" href="#" onclick="window.spxGoPage(${p.page - 1});return false;">‹</a></li>`;

                const maxVisible = 5;
                let start = Math.max(1, p.page - Math.floor(maxVisible / 2));
                let end = Math.min(p.total_pages, start + maxVisible - 1);
                if (end - start < maxVisible - 1) start = Math.max(1, end - maxVisible + 1);

                if (start > 1) {
                    html +=
                        `<li class="page-item"><a class="page-link" href="#" onclick="window.spxGoPage(1);return false;">1</a></li>`;
                    if (start > 2) html += `<li class="page-item disabled"><span class="page-link">…</span></li>`;
                }

                for (let i = start; i <= end; i++) {
                    html +=
                        `<li class="page-item ${i === p.page ? 'active' : ''}"><a class="page-link" href="#" onclick="window.spxGoPage(${i});return false;">${i}</a></li>`;
                }

                if (end < p.total_pages) {
                    if (end < p.total_pages - 1) html +=
                        `<li class="page-item disabled"><span class="page-link">…</span></li>`;
                    html +=
                        `<li class="page-item"><a class="page-link" href="#" onclick="window.spxGoPage(${p.total_pages});return false;">${p.total_pages}</a></li>`;
                }

                html +=
                    `<li class="page-item ${p.page >= p.total_pages ? 'disabled' : ''}"><a class="page-link" href="#" onclick="window.spxGoPage(${p.page + 1});return false;">›</a></li>`;
                pag.innerHTML = html;
            }

            window.spxGoPage = function(page) {
                currentPage = page;
                loadOrders();
                document.querySelector('.spx-card .table-responsive').scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            };

            // ============ ANALYTICS ============
            function loadAnalytics() {
                let url = `${ANALYTICS_URL}?`;
                if (startDate) url += `start_date=${startDate}&`;
                if (endDate) url += `end_date=${endDate}&`;

                fetch(url, {
                        headers: {
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': CSRF
                        }
                    })
                    .then(r => r.json())
                    .then(res => {
                        if (res.success) {
                            renderStats(res.data.summary);
                            renderStatusTabs(res.data.status_distribution);
                            renderTrendChart(res.data.daily_trend);
                            renderStatusChart(res.data.status_distribution);
                            renderCitiesChart(res.data.top_cities);
                        }
                    }).catch(console.error);
            }

            function renderStats(s) {
                document.getElementById('statTotal').textContent = formatNumber(s.total);
                document.getElementById('statCod').textContent = formatNumber(s.total_cod);
                document.getElementById('statNonCod').textContent = formatNumber(s.total_non_cod);
                document.getElementById('statCodAmount').textContent = 'Rp ' + formatNumber(s.total_cod_amount);
                document.getElementById('statShipping').textContent = 'Rp ' + formatNumber(s.total_shipping_fee);
                document.getElementById('statCodFee').textContent = 'Rp ' + formatNumber(s.total_cod_service_fee);
                document.getElementById('statRevenue').textContent = 'Rp ' + formatNumber(s.estimasi_pendapatan);
            }

            // ============ STATUS TABS ============
            function renderStatusTabs(distribution) {
                const container = document.getElementById('statusTabs');
                const total = distribution.reduce((sum, d) => sum + d.count, 0);
                document.getElementById('tabAll').textContent = total;

                let html = `<button class="spx-tab ${currentStatusGroup === 'all' ? 'active' : ''}" data-group="all" onclick="window.spxFilterStatus('all')">
            Semua <span class="spx-tab-count">${total}</span>
        </button>`;

                distribution.forEach(d => {
                    const active = currentStatusGroup == d.tracking_code_group ? 'active' : '';
                    html += `<button class="spx-tab ${active}" data-group="${d.tracking_code_group}" onclick="window.spxFilterStatus('${d.tracking_code_group}')">
                ${esc(tl(d.tracking_code_group_name))} <span class="spx-tab-count">${d.count}</span>
            </button>`;
                });

                container.innerHTML = html;
            }

            window.spxFilterStatus = function(group) {
                currentStatusGroup = group;
                currentPage = 1;
                loadOrders();
                // Update active tab
                document.querySelectorAll('.spx-tab').forEach(t => {
                    t.classList.toggle('active', t.dataset.group == group);
                });
            };

            // ============ TREND CHART ============
            function renderTrendChart(data) {
                if (statusTrendChart) statusTrendChart.destroy();

                var categories = data.map(function(d) {
                    var dt = new Date(d.date);
                    return dt.toLocaleDateString('id-ID', {
                        day: '2-digit',
                        month: 'short'
                    });
                });
                var counts = data.map(function(d) {
                    return d.count;
                });
                var codTotals = data.map(function(d) {
                    return Math.round((d.cod_total || 0) / 1000);
                });
                var shippingTotals = data.map(function(d) {
                    return Math.round((d.shipping_total || 0) / 1000);
                });

                statusTrendChart = new ApexCharts(document.getElementById('trendChart'), {
                    chart: {
                        type: 'line',
                        height: 320,
                        fontFamily: 'Inter, sans-serif',
                        toolbar: {
                            show: false
                        },
                        zoom: {
                            enabled: false
                        },
                    },
                    series: [{
                            name: 'Jumlah Pesanan',
                            type: 'column',
                            data: counts
                        },
                        {
                            name: 'Nilai COD (Rp ribu)',
                            type: 'line',
                            data: codTotals
                        },
                        {
                            name: 'Ongkir (Rp ribu)',
                            type: 'line',
                            data: shippingTotals
                        },
                    ],
                    colors: ['#EE4D2D', '#7c3aed', '#1a73e8'],
                    fill: {
                        opacity: [0.85, 1, 1],
                    },
                    stroke: {
                        curve: 'smooth',
                        width: [0, 2.5, 2.5]
                    },
                    plotOptions: {
                        bar: {
                            borderRadius: 4,
                            columnWidth: '45%'
                        }
                    },
                    xaxis: {
                        categories: categories,
                        labels: {
                            style: {
                                fontSize: '10px',
                                fontWeight: 600,
                                colors: '#9aa0a6'
                            }
                        },
                        axisBorder: {
                            show: false
                        },
                        axisTicks: {
                            show: false
                        },
                    },
                    yaxis: [{
                            title: {
                                text: 'Pesanan',
                                style: {
                                    fontSize: '11px',
                                    fontWeight: 600,
                                    color: '#9aa0a6'
                                }
                            },
                            labels: {
                                style: {
                                    fontSize: '11px',
                                    fontWeight: 600,
                                    colors: '#9aa0a6'
                                }
                            },
                        },
                        {
                            opposite: true,
                            title: {
                                text: 'Rupiah (ribu)',
                                style: {
                                    fontSize: '11px',
                                    fontWeight: 600,
                                    color: '#9aa0a6'
                                }
                            },
                            labels: {
                                style: {
                                    fontSize: '11px',
                                    fontWeight: 600,
                                    colors: '#9aa0a6'
                                },
                                formatter: function(v) {
                                    return 'Rp ' + formatNumber(v);
                                }
                            },
                        },
                    ],
                    grid: {
                        borderColor: '#f1f3f5',
                        strokeDashArray: 4
                    },
                    dataLabels: {
                        enabled: false
                    },
                    tooltip: {
                        y: {
                            formatter: function(val, opts) {
                                if (opts.seriesIndex === 0) return val + ' pesanan';
                                return 'Rp ' + formatNumber(val * 1000);
                            }
                        }
                    },
                    legend: {
                        position: 'top',
                        horizontalAlign: 'right',
                        fontSize: '12px',
                        fontWeight: 600,
                        markers: {
                            radius: 4
                        },
                    },
                });
                statusTrendChart.render();
            }

            // ============ STATUS DONUT ============
            function renderStatusChart(data) {
                if (statusDonutChart) statusDonutChart.destroy();

                const colors = ['#EE4D2D', '#1a73e8', '#1e8e3e', '#d93025', '#6b7280', '#e37400', '#7c3aed', '#0ea5e9'];

                statusDonutChart = new ApexCharts(document.getElementById('statusChart'), {
                    chart: {
                        type: 'donut',
                        height: 220,
                        fontFamily: 'Inter, sans-serif',
                    },
                    series: data.map(d => d.count),
                    labels: data.map(d => tl(d.tracking_code_group_name)),
                    colors: colors.slice(0, data.length),
                    plotOptions: {
                        pie: {
                            donut: {
                                size: '70%',
                                labels: {
                                    show: true,
                                    total: {
                                        show: true,
                                        label: 'Total',
                                        fontSize: '13px',
                                        fontWeight: 700,
                                        color: '#1a1d21',
                                    }
                                }
                            }
                        }
                    },
                    dataLabels: {
                        enabled: false
                    },
                    legend: {
                        show: false
                    },
                    stroke: {
                        width: 2,
                        colors: ['#fff']
                    },
                });
                statusDonutChart.render();

                // Legend
                const legend = document.getElementById('statusLegend');
                legend.innerHTML = data.map((d, i) => `
            <div class="spx-legend-item">
                <div class="spx-legend-dot" style="background: ${colors[i % colors.length]};"></div>
                <span class="spx-legend-name">${esc(tl(d.tracking_code_group_name))}</span>
                <span class="spx-legend-count">${d.count}</span>
            </div>
        `).join('');
            }

            // ============ CITIES CHART ============
            var citiesChart = null;

            function renderCitiesChart(data) {
                if (citiesChart) citiesChart.destroy();
                if (!data || data.length === 0) {
                    document.getElementById('citiesChart').innerHTML =
                        '<div class="spx-empty" style="padding:2rem;"><p>Belum ada data kota</p></div>';
                    return;
                }

                citiesChart = new ApexCharts(document.getElementById('citiesChart'), {
                    chart: {
                        type: 'bar',
                        height: 280,
                        fontFamily: 'Inter, sans-serif',
                        toolbar: {
                            show: false
                        },
                    },
                    series: [{
                        name: 'Pesanan',
                        data: data.map(function(d) {
                            return d.count;
                        })
                    }],
                    xaxis: {
                        categories: data.map(function(d) {
                            return d.receiver_city || 'Tidak Diketahui';
                        }),
                        labels: {
                            style: {
                                fontSize: '11px',
                                fontWeight: 600,
                                colors: '#5f6368'
                            }
                        },
                    },
                    yaxis: {
                        labels: {
                            style: {
                                fontSize: '11px',
                                fontWeight: 600,
                                colors: '#9aa0a6'
                            }
                        },
                    },
                    plotOptions: {
                        bar: {
                            horizontal: true,
                            borderRadius: 4,
                            barHeight: '60%'
                        }
                    },
                    colors: ['#EE4D2D'],
                    fill: {
                        type: 'gradient',
                        gradient: {
                            shade: 'light',
                            type: 'horizontal',
                            opacityFrom: 0.85,
                            opacityTo: 1,
                            stops: [0, 100]
                        }
                    },
                    grid: {
                        borderColor: '#f1f3f5',
                        strokeDashArray: 4
                    },
                    dataLabels: {
                        enabled: true,
                        style: {
                            fontSize: '11px',
                            fontWeight: 700
                        }
                    },
                    tooltip: {
                        y: {
                            formatter: function(v) {
                                return v + ' pesanan';
                            }
                        }
                    },
                });
                citiesChart.render();
            }

            // ============ SYNC ============
            let syncAborted = false;

            window.syncFromApi = async function() {
                const syncStart = startDate || formatDate(new Date(new Date().setMonth(new Date().getMonth() -
                    1)));
                const syncEnd = endDate || formatDate(new Date());

                const confirm = await Swal.fire({
                    title: 'Sync Data SPX',
                    html: '<div style="text-align:left;font-size:0.9rem;">' +
                        '<p style="margin-bottom:1rem;color:#5f6368;">Sinkronisasi semua order dari SPX API:</p>' +
                        '<div style="display:flex;gap:0.75rem;margin-bottom:1rem;">' +
                        '<div style="flex:1;"><label style="font-size:0.75rem;font-weight:600;color:#9aa0a6;text-transform:uppercase;">Dari</label>' +
                        '<input type="date" id="syncStartDate" class="swal2-input" value="' +
                        syncStart +
                        '" style="margin:0.25rem 0 0;font-size:0.85rem;width:100%;"></div>' +
                        '<div style="flex:1;"><label style="font-size:0.75rem;font-weight:600;color:#9aa0a6;text-transform:uppercase;">Sampai</label>' +
                        '<input type="date" id="syncEndDate" class="swal2-input" value="' + syncEnd +
                        '" style="margin:0.25rem 0 0;font-size:0.85rem;width:100%;"></div>' +
                        '</div>' +
                        '<div style="display:flex;gap:0.75rem;">' +
                        '<div style="flex:1;"><label style="font-size:0.75rem;font-weight:600;color:#9aa0a6;text-transform:uppercase;">Per Halaman</label>' +
                        '<select id="syncPageSize" class="swal2-input" style="margin:0.25rem 0 0;font-size:0.85rem;width:100%;"><option value="50">50</option><option value="100" selected>100</option><option value="200">200</option></select></div>' +
                        '<div style="flex:1;"><label style="font-size:0.75rem;font-weight:600;color:#9aa0a6;text-transform:uppercase;">Max Halaman</label>' +
                        '<input type="number" id="syncMaxPages" class="swal2-input" value="0" min="0" style="margin:0.25rem 0 0;font-size:0.85rem;width:100%;">' +
                        '<small style="color:#9aa0a6;font-size:0.7rem;">0 = semua halaman</small></div>' +
                        '</div></div>',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#EE4D2D',
                    cancelButtonText: 'Batal',
                    confirmButtonText: 'Mulai Sync',
                    preConfirm: function() {
                        return {
                            sd: document.getElementById('syncStartDate').value,
                            ed: document.getElementById('syncEndDate').value,
                            ps: parseInt(document.getElementById('syncPageSize').value),
                            mp: parseInt(document.getElementById('syncMaxPages').value),
                        };
                    }
                });

                if (!confirm.isConfirmed) return;
                var sd = confirm.value.sd,
                    ed = confirm.value.ed,
                    ps = confirm.value.ps,
                    mp = confirm.value.mp;

                Swal.fire({
                    title: 'Syncing SPX Orders...',
                    html: '<div style="text-align:left;">' +
                        '<div style="margin-bottom:1rem;"><div style="display:flex;justify-content:space-between;margin-bottom:0.5rem;">' +
                        '<span style="font-size:0.82rem;font-weight:600;color:#5f6368;">Progress</span>' +
                        '<span id="syncPercent" style="font-size:0.82rem;font-weight:700;color:#EE4D2D;">0%</span></div>' +
                        '<div style="height:8px;background:#f1f3f5;border-radius:4px;overflow:hidden;">' +
                        '<div id="syncBar" style="height:100%;background:linear-gradient(90deg,#EE4D2D,#FF6633);border-radius:4px;width:0%;transition:width 0.3s;"></div></div></div>' +
                        '<div style="font-size:0.82rem;color:#5f6368;">' +
                        '<div>Halaman: <strong id="syncPage">0</strong> / <span id="syncTotalPages">?</span></div>' +
                        '<div>Diproses: <strong id="syncProcessed">0</strong> / <span id="syncTotalOrders">?</span></div>' +
                        '<div>Baru: <strong id="syncSaved" style="color:#1e8e3e;">0</strong> | Update: <strong id="syncUpdated" style="color:#1a73e8;">0</strong> | Gagal: <strong id="syncFailed" style="color:#d93025;">0</strong></div>' +
                        '</div></div>',
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    showConfirmButton: false,
                    showCancelButton: true,
                    cancelButtonText: 'Stop',
                    didOpen: function() {
                        runSync(sd, ed, ps, mp);
                    }
                });
            };

            async function runSync(sd, ed, pageSize, maxPages) {
                syncAborted = false;
                var page = 1,
                    totalOrders = 0,
                    totalPages = 0;
                var tSaved = 0,
                    tUpdated = 0,
                    tFailed = 0,
                    tProcessed = 0;

                var cancelBtn = Swal.getCancelButton();
                if (cancelBtn) cancelBtn.addEventListener('click', function() {
                    syncAborted = true;
                });

                try {
                    while (true) {
                        if (syncAborted) break;

                        var url = SYNC_URL + '?page=' + page + '&limit=' + pageSize + '&start_date=' + sd +
                            '&end_date=' + ed;
                        var res = await fetch(url, {
                            headers: {
                                'Accept': 'application/json'
                            }
                        }).then(function(r) {
                            return r.json();
                        });

                        if (!res.success) {
                            Swal.fire('Sync Gagal', res.message || 'Error dari SPX API. Cek cookies.', 'error');
                            return;
                        }

                        var apiTotal = (res.data && res.data.data) ? res.data.data.total || 0 : 0;
                        if (page === 1) {
                            totalOrders = apiTotal;
                            totalPages = Math.ceil(totalOrders / pageSize);
                            if (maxPages > 0) totalPages = Math.min(totalPages, maxPages);
                            document.getElementById('syncTotalPages').textContent = totalPages;
                            document.getElementById('syncTotalOrders').textContent = formatNumber(totalOrders);
                        }

                        var ds = res.db_sync || {};
                        tSaved += ds.saved || 0;
                        tUpdated += ds.updated || 0;
                        tFailed += ds.failed || 0;
                        tProcessed += ds.total_processed || 0;

                        var pct = totalPages > 0 ? Math.round((page / totalPages) * 100) : 100;
                        document.getElementById('syncPage').textContent = page;
                        document.getElementById('syncProcessed').textContent = formatNumber(tProcessed);
                        document.getElementById('syncSaved').textContent = formatNumber(tSaved);
                        document.getElementById('syncUpdated').textContent = formatNumber(tUpdated);
                        document.getElementById('syncFailed').textContent = formatNumber(tFailed);
                        document.getElementById('syncPercent').textContent = pct + '%';
                        document.getElementById('syncBar').style.width = pct + '%';

                        var listCount = (res.data && res.data.data && res.data.data.list) ? res.data.data.list
                            .length : 0;
                        if (listCount === 0 || page >= totalPages) break;

                        page++;
                        await new Promise(function(r) {
                            setTimeout(r, 500);
                        });
                    }
                } catch (err) {
                    console.error('Sync error:', err);
                }

                Swal.fire({
                    title: syncAborted ? 'Sync Dihentikan' : 'Sync Selesai!',
                    html: '<div style="text-align:left;font-size:0.88rem;color:#5f6368;">' +
                        '<div style="background:#f8f9fb;border-radius:10px;padding:1rem;">' +
                        '<div style="display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;">' +
                        '<div><span style="color:#9aa0a6;">Halaman</span><br><strong>' + page +
                        '</strong></div>' +
                        '<div><span style="color:#9aa0a6;">Total Diproses</span><br><strong>' +
                        formatNumber(tProcessed) + '</strong></div>' +
                        '<div><span style="color:#1e8e3e;">Baru</span><br><strong style="color:#1e8e3e;">' +
                        formatNumber(tSaved) + '</strong></div>' +
                        '<div><span style="color:#1a73e8;">Update</span><br><strong style="color:#1a73e8;">' +
                        formatNumber(tUpdated) + '</strong></div>' +
                        '</div></div>' +
                        (tFailed > 0 ? '<div style="color:#d93025;font-size:0.8rem;margin-top:0.5rem;">' +
                            tFailed + ' gagal</div>' : '') +
                        '</div>',
                    icon: syncAborted ? 'warning' : 'success',
                    confirmButtonColor: '#EE4D2D',
                });

                loadOrders();
                loadAnalytics();
            }

            // ============ HELPERS ============
            function formatNumber(n) {
                return new Intl.NumberFormat('id-ID').format(Math.round(n || 0));
            }

            function esc(str) {
                if (!str) return '';
                const d = document.createElement('div');
                d.appendChild(document.createTextNode(str));
                return d.innerHTML;
            }

            // ============ ORDER DETAIL MODAL ============
            const ORDER_DETAIL_URL = '{{ url('/api/spx/order-detail') }}';

            function infoItem(lbl, val) {
                return '<div class="spx-info-item"><label>' + lbl + '</label><span>' + val + '</span></div>';
            }

            function fmtEpoch(ts) {
                if (!ts) return '-';
                return new Date(ts * 1000).toLocaleString('id-ID', {
                    day: '2-digit',
                    month: 'short',
                    year: 'numeric',
                    hour: '2-digit',
                    minute: '2-digit'
                });
            }

            window.showTicketDetail = function(spxTn) {
                var overlay = document.getElementById('ticketModalOverlay');
                overlay.style.display = 'flex';
                document.getElementById('modalTicketId').textContent = spxTn;
                document.getElementById('modalTicketReason').textContent = 'Memuat...';
                document.getElementById('modalBody').innerHTML =
                    '<div style="padding:2rem;text-align:center;"><div class="spinner-border spinner-border-sm text-primary"></div> Memuat detail...</div>';

                fetch(ORDER_DETAIL_URL + '?spx_tn=' + encodeURIComponent(spxTn), {
                        headers: {
                            'Accept': 'application/json'
                        }
                    })
                    .then(function(r) {
                        return r.json();
                    })
                    .then(function(res) {
                        if (!res.success) {
                            document.getElementById('modalTicketReason').textContent = '';
                            document.getElementById('modalBody').innerHTML =
                                '<div style="padding:2rem;text-align:center;color:var(--s-text-muted);font-size:0.85rem;"><i class="ti tabler-alert-circle" style="font-size:2rem;display:block;margin-bottom:0.5rem;color:var(--s-danger);"></i>' +
                                esc(res.message || 'Gagal memuat') + '</div>';
                            return;
                        }
                        var data = res.data,
                            oi = data.order_info || {},
                            si = data.sender_info || {},
                            di = data.deliver_info || {},
                            pi = data.parcel_info || {},
                            fi = data.fulfillment_info || {},
                            ti = data.tracking_info || {},
                            records = (data.sls_tracking_info || {}).records || [];

                        document.getElementById('modalTicketId').textContent = oi.spx_tn || spxTn;
                        var gn = oi.tracking_code_group_name || '-';
                        var gc = {
                            'Delivered': '#1e8e3e',
                            'Returning': '#e37400',
                            'Returned': '#6c757d',
                            'On Hold': '#dc3545',
                            'In Transit': '#1a73e8',
                            'Picked Up': '#0d6efd'
                        } [gn] || '#6c757d';
                        document.getElementById('modalTicketReason').innerHTML =
                            '<span style="display:inline-block;padding:2px 8px;border-radius:6px;font-size:0.72rem;font-weight:700;background:' +
                            gc + '20;color:' + gc + ';">' + esc(gn) +
                            '</span> <span style="color:var(--s-text-muted);font-size:0.72rem;">' + esc(oi
                                .sls_tn || '') + '</span>';

                        var isCod = fi.cod_collection === 1;
                        var html =
                            '<h6 style="font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--s-text-muted);margin:0 0 0.75rem;">Informasi Pengiriman</h6><div class="spx-info-grid">';
                        html += infoItem('Penerima', esc(di.deliver_name || '-'));
                        html += infoItem('Telepon', esc(di.deliver_phone || '-'));
                        html += infoItem('Alamat', esc(di.deliver_detail_address || '-') +
                            '<br><small style="color:var(--s-text-muted);">' + esc([di.deliver_district, di
                                .deliver_city, di.deliver_state
                            ].filter(Boolean).join(', ')) + '</small>');
                        html += infoItem('COD', isCod ? 'Ya — Rp ' + (fi.cod_amount || 0).toLocaleString(
                            'id-ID') : 'Tidak');
                        html += infoItem('Pengirim', esc(si.sender_name || '-'));
                        html += infoItem('Telepon Pengirim', esc(si.sender_phone || '-'));
                        html += infoItem('Barang', esc(pi.parcel_item_name || '-') + ' (' + (pi.parcel_weight ||
                            0) + ' kg)');
                        html += infoItem('Invoice', esc(pi.customer_tracking_no || '-'));
                        html += infoItem('Ongkir', 'Rp ' + (oi.estimated_shipping_fee || 0).toLocaleString(
                            'id-ID'));
                        html += infoItem('Instruksi', esc(di.deliver_instruction || '-'));
                        html += '</div>';

                        var pods = ti.pod_list || [];
                        if (pods.length) {
                            html +=
                                '<h6 style="font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--s-text-muted);margin:1rem 0 0.5rem;">Bukti Pengiriman (POD)</h6><div style="display:flex;gap:0.5rem;flex-wrap:wrap;margin-bottom:1rem;">';
                            pods.forEach(function(url) {
                                html += '<a href="' + url + '" target="_blank"><img src="' + url +
                                    '" style="width:80px;height:80px;object-fit:cover;border-radius:8px;border:1px solid var(--s-border);" loading="lazy"></a>';
                            });
                            html += '</div>';
                        }

                        if (records.length) {
                            html +=
                                '<h6 style="font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--s-text-muted);margin:1rem 0 0.75rem;">Riwayat Pengiriman</h6><div class="spx-timeline">';
                            records.forEach(function(r) {
                                var loc = r.current_location || {};
                                html += '<div class="spx-tl-item"><div class="spx-tl-dot"></div>' +
                                    '<div style="font-size:0.8rem;font-weight:600;color:var(--s-text);">' +
                                    esc(r.tracking_name || r.tracking_code) + '</div>' +
                                    '<div style="font-size:0.72rem;color:var(--s-text-sec);margin-top:1px;">' +
                                    esc(r.description || '-') + '</div>' +
                                    (loc.location_name ?
                                        '<div style="font-size:0.68rem;color:var(--s-text-muted);margin-top:1px;"><i class="ti tabler-map-pin" style="font-size:0.7rem;"></i> ' +
                                        esc(loc.location_name) + '</div>' : '') +
                                    '<div style="font-size:0.68rem;color:var(--s-text-muted);">' +
                                    fmtEpoch(r.actual_time) + '</div></div>';
                            });
                            html += '</div>';
                        }

                        document.getElementById('modalBody').innerHTML = html;
                    })
                    .catch(function(err) {
                        console.error('Detail error:', err);
                        document.getElementById('modalBody').innerHTML =
                            '<div style="padding:2rem;text-align:center;color:var(--s-danger);">Gagal memuat detail</div>';
                    });
            };

            window.closeTicketModal = function() {
                document.getElementById('ticketModalOverlay').style.display = 'none';
            };
        })();
    </script>
@endpush