@extends('template.desktop.app')

@section('title', 'Orderan Bermasalah - SPX')

@push('styles')
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
    <style>
        /* =====================================================
                                                                                                                                                           SPX TICKETS - 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;
            margin: 0;
            font-size: 1.6rem;
            letter-spacing: -0.02em;
        }

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

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

        .spx-btn {
            padding: 0.5rem 1rem;
            border-radius: 10px;
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: 0.8rem;
            cursor: pointer;
            transition: all 0.15s;
            border: none;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
        }

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

        .spx-btn-glass:hover {
            background: rgba(255, 255, 255, 0.35);
            color: #fff;
            transform: translateY(-1px);
        }

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

        .spx-btn-primary:hover {
            background: var(--s-primary-dark);
            color: #fff;
            transform: translateY(-1px);
        }

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

        .spx-btn-outline:hover {
            border-color: var(--s-primary);
            color: var(--s-primary);
        }

        /* ============ STATS CARDS ============ */
        .spx-stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1rem;
            margin: -1rem 0 1.5rem;
            position: relative;
            z-index: 2;
        }

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

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

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

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

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

        .spx-stat-label {
            font-size: 0.7rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--s-text-muted);
            margin-bottom: 2px;
        }

        .spx-stat-value {
            font-size: 1.5rem;
            font-weight: 800;
            letter-spacing: -0.03em;
        }

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

        .spx-search-wrapper {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            background: var(--s-bg);
            border-radius: 10px;
            border: 1.5px solid var(--s-border);
            flex: 1;
            min-width: 240px;
            transition: all 0.15s;
        }

        .spx-search-wrapper:focus-within {
            border-color: var(--s-primary);
            box-shadow: 0 0 0 3px var(--s-primary-soft);
        }

        .spx-search-wrapper i {
            color: var(--s-text-muted);
        }

        .spx-search-input {
            border: none;
            background: transparent;
            outline: none;
            width: 100%;
            font-family: 'Inter', sans-serif;
            font-size: 0.82rem;
            font-weight: 500;
            color: var(--s-text);
        }

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

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

        .spx-table {
            width: 100%;
            border-collapse: collapse;
        }

        .spx-table thead {
            background: linear-gradient(180deg, #fafbfc 0%, #f5f6f8 100%);
            border-bottom: 2px solid var(--s-border);
        }

        .spx-table thead th {
            padding: 0.85rem 1rem;
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--s-text-sec);
            white-space: nowrap;
        }

        .spx-table tbody tr {
            border-bottom: 1px solid var(--s-border-light);
            transition: background 0.1s;
        }

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

        .spx-table td {
            padding: 0.85rem 1rem;
            font-size: 0.8rem;
            vertical-align: middle;
            color: var(--s-text-sec);
        }

        .spx-table .td-ticket {
            font-weight: 700;
            color: var(--s-primary);
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.75rem;
        }

        .spx-table .td-shipment {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.72rem;
            color: var(--s-text-sec);
        }

        .spx-table .td-station {
            font-weight: 600;
            color: var(--s-text);
            font-size: 0.78rem;
        }

        .spx-table .td-sender {
            font-weight: 600;
            color: var(--s-info);
            font-size: 0.78rem;
        }

        .spx-table .td-reason {
            font-size: 0.72rem;
            font-weight: 500;
        }

        .spx-table .td-aging {
            font-weight: 700;
            font-size: 0.78rem;
        }

        .td-aging.critical {
            color: var(--s-danger);
        }

        .td-aging.warning {
            color: var(--s-warning);
        }

        .td-aging.normal {
            color: var(--s-success);
        }

        /* ============ BADGE ============ */
        .spx-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 8px;
            border-radius: 6px;
            font-size: 0.65rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.03em;
            white-space: nowrap;
        }

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

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

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

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

        /* ============ 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);
            }
        }

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

        .spx-pagination .info {
            font-size: 0.78rem;
            color: var(--s-text-muted);
            font-weight: 500;
        }

        .spx-pagination .pages {
            display: flex;
            gap: 4px;
        }

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

        .spx-pagination .pages button:hover {
            border-color: var(--s-primary);
            color: var(--s-primary);
        }

        .spx-pagination .pages button.active {
            background: var(--s-primary);
            color: #fff;
            border-color: var(--s-primary);
        }

        .spx-pagination .pages button:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        /* ============ TOAST ============ */
        .spx-toast {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            background: var(--s-text);
            color: #fff;
            padding: 0.85rem 1.3rem;
            border-radius: 10px;
            font-size: 0.82rem;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            box-shadow: var(--shadow-lg);
            z-index: 9999;
            display: none;
            align-items: center;
            gap: 0.5rem;
            animation: spx-toast-in 0.3s ease-out;
        }

        .spx-toast.show {
            display: flex;
        }

        .spx-toast.success {
            background: var(--s-success);
        }

        .spx-toast.error {
            background: var(--s-danger);
        }

        @keyframes spx-toast-in {
            from {
                transform: translateY(20px);
                opacity: 0;
            }

            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        /* ============ ANALYTICS GRID ============ */
        .spx-analytics-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

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

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

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

        .spx-chart-card:hover {
            box-shadow: var(--shadow-md);
        }

        .spx-chart-title {
            font-size: 0.82rem;
            font-weight: 700;
            color: var(--s-text);
            margin-bottom: 0.25rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .spx-chart-title i {
            color: var(--s-primary);
            font-size: 1.1rem;
        }

        .spx-chart-subtitle {
            font-size: 0.72rem;
            color: var(--s-text-muted);
            margin-bottom: 1rem;
        }

        .spx-chart-loading {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 260px;
            color: var(--s-text-muted);
            font-size: 0.8rem;
        }

        /* ============ RESPONSIVE ============ */
        .table-responsive {
            overflow-x: auto;
        }

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

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

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

        /* ============ MULTI-SELECT ============ */
        .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: 300px;
            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: 280px;
            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);
        }

        /* ============ SYNC PROGRESS ============ */
        .sync-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(4px);
            z-index: 9998;
            display: none;
            align-items: center;
            justify-content: center;
        }

        .sync-overlay.show {
            display: flex;
        }

        .sync-box {
            background: var(--s-surface);
            border-radius: var(--radius-lg);
            padding: 2rem 2.5rem;
            text-align: center;
            box-shadow: var(--shadow-lg);
            min-width: 320px;
        }

        .sync-box .spx-spinner {
            width: 48px;
            height: 48px;
            margin: 0 auto 1rem;
        }

        .sync-box h4 {
            font-size: 1rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }

        .sync-box p {
            font-size: 0.82rem;
            color: var(--s-text-muted);
            margin: 0;
        }

        /* ============ 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 px-3 py-3">
        <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-alert-triangle" style="font-size: 1.3rem; color: var(--s-primary);"></i>
                    </div>
                    <div>
                        <h2 style="font-size: 1.35rem; margin: 0;">Orderan Bermasalah</h2>
                        <p style="margin: 0;">Escalation tickets yang perlu ditindaklanjuti</p>
                    </div>
                </div>
                <div class="spx-header-actions" style="gap: 0.4rem; flex-wrap: nowrap;">
                    <a href="{{ route('spx-orders.index') }}" class="spx-btn spx-btn-glass" title="Pesanan"
                        style="padding: 0.4rem 0.65rem;">
                        <i class="ti tabler-package"></i> <span class="d-none d-xl-inline">Pesanan</span>
                    </a>
                    <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>
                    <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="syncAll()" 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> tiket
                </span>
            </div>
        </header>

        <!-- ============ STATS ============ -->
        <section class="spx-stats-grid">
            <div class="spx-stat-card">
                <div class="spx-stat-icon" style="background: var(--s-primary-soft); color: var(--s-primary);">
                    <i class="ti tabler-alert-circle"></i>
                </div>
                <div>
                    <div class="spx-stat-label">Total Tiket</div>
                    <div class="spx-stat-value" id="statTotal">-</div>
                </div>
            </div>
            <div class="spx-stat-card">
                <div class="spx-stat-icon" style="background: var(--s-warning-bg); color: var(--s-warning);">
                    <i class="ti tabler-clock-exclamation"></i>
                </div>
                <div>
                    <div class="spx-stat-label">Perlu Diproses</div>
                    <div class="spx-stat-value" id="statProcess">-</div>
                </div>
            </div>
            <div class="spx-stat-card">
                <div class="spx-stat-icon" style="background: var(--s-info-bg); color: var(--s-info);">
                    <i class="ti tabler-building-warehouse"></i>
                </div>
                <div>
                    <div class="spx-stat-label">Stasiun Terlibat</div>
                    <div class="spx-stat-value" id="statStations">-</div>
                </div>
            </div>
            <div class="spx-stat-card">
                <div class="spx-stat-icon" style="background: #fff0f6; color: #c2255c;">
                    <i class="ti tabler-clock-hour-3"></i>
                </div>
                <div>
                    <div class="spx-stat-label">Aging Tertinggi</div>
                    <div class="spx-stat-value" id="statMaxAging">-</div>
                </div>
            </div>
        </section>

        <!-- ============ ANALYTICS ============ -->
        <div class="spx-analytics-grid" style="grid-template-columns: repeat(3, 1fr);">
            <div class="spx-chart-card">
                <div class="spx-chart-title"><i class="ti tabler-alert-triangle"></i> Jenis Masalah</div>
                <div class="spx-chart-subtitle">Berdasarkan alasan exception</div>
                <div id="anaReason">
                    <div class="spx-chart-loading">
                        <div class="spx-spinner"></div>
                    </div>
                </div>
            </div>
            <div class="spx-chart-card">
                <div class="spx-chart-title"><i class="ti tabler-checklist"></i> Status Tiket</div>
                <div class="spx-chart-subtitle">Distribusi status penanganan</div>
                <div id="anaStatus">
                    <div class="spx-chart-loading">
                        <div class="spx-spinner"></div>
                    </div>
                </div>
            </div>
            <div class="spx-chart-card">
                <div class="spx-chart-title"><i class="ti tabler-truck-delivery"></i> Pengirim / Warehouse</div>
                <div class="spx-chart-subtitle">Warehouse dengan masalah terbanyak</div>
                <div id="anaSender">
                    <div class="spx-chart-loading">
                        <div class="spx-spinner"></div>
                    </div>
                </div>
            </div>
            <div class="spx-chart-card">
                <div class="spx-chart-title"><i class="ti tabler-map-pin"></i> Provinsi Tujuan</div>
                <div class="spx-chart-subtitle">Top provinsi penerima bermasalah</div>
                <div id="anaProvince">
                    <div class="spx-chart-loading">
                        <div class="spx-spinner"></div>
                    </div>
                </div>
            </div>
            <div class="spx-chart-card">
                <div class="spx-chart-title"><i class="ti tabler-building-community"></i> Kota / Kabupaten</div>
                <div class="spx-chart-subtitle">Top kota penerima bermasalah</div>
                <div id="anaCity">
                    <div class="spx-chart-loading">
                        <div class="spx-spinner"></div>
                    </div>
                </div>
            </div>
            <div class="spx-chart-card">
                <div class="spx-chart-title"><i class="ti tabler-building-warehouse"></i> Stasiun / Hub</div>
                <div class="spx-chart-subtitle">Hub dengan masalah terbanyak</div>
                <div id="anaStation">
                    <div class="spx-chart-loading">
                        <div class="spx-spinner"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- ============ FILTER BAR ============ -->
        <div class="spx-filter-bar">
            <div class="spx-search-wrapper">
                <i class="ti tabler-search"></i>
                <input type="text" class="spx-search-input" id="searchInput"
                    placeholder="Cari ticket ID, resi, stasiun, pengirim...">
            </div>

            {{-- REASON MULTI-SELECT --}}
            <div class="spx-multiselect" id="msWrap_reason">
                <div class="spx-ms-trigger" onclick="window.toggleMS('reason')">
                    <i class="ti tabler-alert-triangle ms-icon"></i>
                    <span class="ms-label" id="msLabel_reason">Semua Alasan</span>
                    <span class="ms-count" id="msCount_reason" style="display:none;">0</span>
                    <i class="ti tabler-chevron-down ms-chevron"></i>
                </div>
                <div class="spx-ms-dropdown" id="msDropdown_reason">
                    <div class="spx-ms-search">
                        <input type="text" placeholder="Cari alasan..."
                            oninput="window.filterMSItems('reason', this.value)">
                    </div>
                    <div class="spx-ms-actions">
                        <button onclick="window.selectAllMS('reason')">Pilih Semua</button>
                        <button onclick="window.clearAllMS('reason')">Hapus Semua</button>
                    </div>
                    <div class="spx-ms-list" id="msList_reason"></div>
                </div>
            </div>

            {{-- STATUS MULTI-SELECT --}}
            <div class="spx-multiselect" id="msWrap_status">
                <div class="spx-ms-trigger" onclick="window.toggleMS('status')">
                    <i class="ti tabler-flag ms-icon"></i>
                    <span class="ms-label" id="msLabel_status">Semua Status</span>
                    <span class="ms-count" id="msCount_status" style="display:none;">0</span>
                    <i class="ti tabler-chevron-down ms-chevron"></i>
                </div>
                <div class="spx-ms-dropdown" id="msDropdown_status">
                    <div class="spx-ms-actions">
                        <button onclick="window.selectAllMS('status')">Pilih Semua</button>
                        <button onclick="window.clearAllMS('status')">Hapus Semua</button>
                    </div>
                    <div class="spx-ms-list" id="msList_status"></div>
                </div>
            </div>

            <select class="form-select" id="limitSelect"
                style="width: 90px; border-radius: 10px; font-size: 0.8rem; border: 1px solid var(--s-border);">
                <option value="20">20</option>
                <option value="50">50</option>
                <option value="100">100</option>
            </select>
        </div>

        <!-- ============ TABLE ============ -->
        <div class="spx-table-card">
            <div class="table-responsive">
                <table class="spx-table" id="ticketsTable">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Ticket ID</th>
                            <th>No. Resi</th>
                            <th>Alasan</th>
                            <th>Status</th>
                            <th>Stasiun</th>
                            <th>Pengirim</th>
                            <th>Aging</th>
                            <th>SLA Response</th>
                            <th>Dibuat</th>
                        </tr>
                    </thead>
                    <tbody id="ticketTableBody">
                        <tr>
                            <td colspan="10">
                                <div class="spx-loading">
                                    <div class="spx-spinner"></div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="spx-pagination" id="paginationArea">
                <div class="info" id="paginationInfo">Memuat data...</div>
                <div class="pages" id="paginationPages"></div>
            </div>
        </div>
    </div>
    </div>

    <!-- ============ SYNC OVERLAY ============ -->
    <div class="sync-overlay" id="syncOverlay">
        <div class="sync-box">
            <div class="spx-spinner"></div>
            <h4 id="syncTitle">Sinkronisasi...</h4>
            <p id="syncMsg">Mengambil data dari SPX Express API</p>
        </div>
    </div>

    <!-- ============ TOAST ============ -->
    <div class="spx-toast" id="toast"></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 class="spx-chart-loading" style="min-height:200px;">
                    <div class="spx-spinner"></div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        (function() {
            'use strict';

            const API_BASE = '{{ url('/api/spx') }}';
            const CSRF = '{{ csrf_token() }}';

            // Reason ID → Indonesian translation map
            const _reasonRaw = [
                @foreach ($reasons as $reason)
                    {
                        id: {!! json_encode($reason->reason_id) !!},
                        label: {!! json_encode(trim($reason->local_lang ?: $reason->reason_desc)) !!}
                    },
                @endforeach
            ];
            const reasonMap = {};
            _reasonRaw.forEach(function(r) {
                reasonMap[r.id] = r.label;
            });

            function translateReason(reasonId, fallback) {
                if (reasonId && reasonMap[reasonId]) return reasonMap[reasonId];
                return fallback || reasonId || '-';
            }

            let currentPage = 1;
            let currentLimit = 20;
            let currentSearch = '';
            let currentReasons = [];
            let currentStatuses = [];

            // ============ HELPERS ============
            function esc(s) {
                if (!s) return '';
                var d = document.createElement('div');
                d.textContent = s;
                return d.innerHTML;
            }

            function formatEpoch(ts) {
                if (!ts) return '-';
                var d = new Date(ts * 1000);
                return d.toLocaleDateString('id-ID', {
                        day: '2-digit',
                        month: 'short',
                        year: 'numeric'
                    }) +
                    ' ' + d.toLocaleTimeString('id-ID', {
                        hour: '2-digit',
                        minute: '2-digit'
                    });
            }

            function formatAging(seconds) {
                if (seconds < 60) return seconds + ' dtk';
                if (seconds < 3600) return Math.round(seconds / 60) + ' mnt';
                if (seconds < 86400) return (seconds / 3600).toFixed(1) + ' jam';
                return (seconds / 86400).toFixed(1) + ' hari';
            }

            function agingClass(seconds) {
                if (seconds >= 86400) return 'critical'; // > 1 day
                if (seconds >= 21600) return 'warning'; // > 6 hours
                return 'normal';
            }

            function statusLabel(st) {
                switch (parseInt(st)) {
                    case 1:
                        return 'Pending';
                    case 2:
                        return 'Perlu Diproses';
                    case 3:
                        return 'Sedang Diproses';
                    case 4:
                        return 'Terselesaikan';
                    case 5:
                        return 'Ditutup';
                    default:
                        return 'N/A';
                }
            }

            function statusBadge(st) {
                switch (parseInt(st)) {
                    case 1:
                        return 'pending';
                    case 2:
                        return 'process';
                    case 3:
                        return 'process';
                    case 4:
                        return 'delivered';
                    case 5:
                        return 'cancelled';
                    default:
                        return 'cancelled';
                }
            }

            function showToast(msg, type) {
                var t = document.getElementById('toast');
                t.textContent = msg;
                t.className = 'spx-toast show ' + (type || '');
                clearTimeout(t._timer);
                t._timer = setTimeout(function() {
                    t.classList.remove('show');
                }, 3500);
            }

            // ============ LOAD TICKETS ============
            function loadTickets() {
                var body = document.getElementById('ticketTableBody');
                body.innerHTML =
                    '<tr><td colspan="10"><div class="spx-loading"><div class="spx-spinner"></div></div></td></tr>';

                var url = API_BASE + '/tickets?page=' + currentPage + '&per_page=' + currentLimit;
                if (currentSearch) url += '&search=' + encodeURIComponent(currentSearch);
                if (currentReasons.length) currentReasons.forEach(function(r) {
                    url += '&reason_id[]=' + encodeURIComponent(r);
                });
                if (currentStatuses.length) currentStatuses.forEach(function(s) {
                    url += '&status[]=' + encodeURIComponent(s);
                });

                fetch(url, {
                        headers: {
                            'Accept': 'application/json'
                        }
                    })
                    .then(function(r) {
                        if (!r.ok) throw new Error('HTTP ' + r.status);
                        return r.json();
                    })
                    .then(function(res) {
                        if (res.success) {
                            renderTable(res.data, res.pagination);
                            updateStats(res.stats || {});
                        } else {
                            body.innerHTML =
                                '<tr><td colspan="10">' +
                                '<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center;">' +
                                '<i class="ti tabler-alert-circle" style="font-size:3rem;color:var(--s-warning);margin-bottom:1rem;"></i>' +
                                '<div style="font-size:0.95rem;font-weight:700;color:var(--s-text-sec);margin-bottom:0.35rem;">Gagal Memuat Data</div>' +
                                '<div style="font-size:0.8rem;color:var(--s-text-muted);">' + (res.message ||
                                    'Coba sync dulu.') + '</div>' +
                                '</div></td></tr>';
                        }
                    })
                    .catch(function(err) {
                        console.error('loadTickets error:', err);
                        body.innerHTML =
                            '<tr><td colspan="10">' +
                            '<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center;">' +
                            '<i class="ti tabler-wifi-off" style="font-size:3rem;color:var(--s-danger);margin-bottom:1rem;"></i>' +
                            '<div style="font-size:0.95rem;font-weight:700;color:var(--s-danger);margin-bottom:0.35rem;">Koneksi Gagal</div>' +
                            '<div style="font-size:0.8rem;color:var(--s-text-muted);">' + esc(err.message) +
                            '</div>' +
                            '</div></td></tr>';
                    });
            }

            function renderTable(data, pagination) {
                var body = document.getElementById('ticketTableBody');

                if (!data || data.length === 0) {
                    body.innerHTML =
                        '<tr><td colspan="10">' +
                        '<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center;">' +
                        '<i class="ti tabler-database-off" style="font-size:3rem;color:var(--s-border);margin-bottom:1rem;"></i>' +
                        '<div style="font-size:0.95rem;font-weight:700;color:var(--s-text-sec);margin-bottom:0.35rem;">Belum Ada Tiket</div>' +
                        '<div style="font-size:0.8rem;color:var(--s-text-muted);">Klik tombol \"Sinkronisasi\" di atas untuk mengambil data dari SPX Express.</div>' +
                        '</div></td></tr>';
                    document.getElementById('paginationInfo').textContent = '0 tiket';
                    document.getElementById('paginationPages').innerHTML = '';
                    return;
                }

                var html = '';
                var startNum = (pagination.page - 1) * pagination.per_page;

                data.forEach(function(t, i) {
                    var slaRemaining = t.response_sla ? (t.response_sla - Math.floor(Date.now() / 1000)) : 0;
                    var slaDisplay = slaRemaining > 0 ? formatAging(slaRemaining) :
                        '<span style="color:var(--s-danger);font-weight:700;">EXPIRED</span>';

                    html += '<tr>' +
                        '<td style="font-weight:600;color:var(--s-text-muted);">' + (startNum + i + 1) +
                        '</td>' +
                        '<td class="td-ticket"><a href="#" onclick="window.showTicketDetail(\'' + esc(t
                            .ticket_id) +
                        '\');return false;" style="color:var(--s-primary);font-weight:700;text-decoration:none;cursor:pointer;">' +
                        esc(t.ticket_id) + '</a></td>' +
                        '<td class="td-shipment">' + esc(t.shipment_id) + '</td>' +
                        '<td class="td-reason"><span class="spx-badge pending">' + esc(t.exception_reason_id) +
                        '</span><br><small style="color:var(--s-text-sec);">' + esc(translateReason(t
                            .exception_reason_id, t.exception_reason_name)) +
                        '</small></td>' +
                        '<td><span class="spx-badge ' + statusBadge(t.ticket_status) + '">' + statusLabel(t
                            .ticket_status) + '</span></td>' +
                        '<td class="td-station">' + esc(t.station_name) + '</td>' +
                        '<td class="td-sender">' + esc(t.sender_name) +
                        '<br><small style="color:var(--s-text-muted);">' + esc(t.sender_phone) +
                        '</small></td>' +
                        '<td class="td-aging ' + agingClass(t.aging_time) + '">' + formatAging(t.aging_time) +
                        '</td>' +
                        '<td style="font-size:0.75rem;">' + slaDisplay + '</td>' +
                        '<td style="font-size:0.72rem;color:var(--s-text-muted);">' + formatEpoch(t.ctime) +
                        '</td>' +
                        '</tr>';
                });

                body.innerHTML = html;

                // Pagination
                var total = pagination.total;
                var totalPages = pagination.total_pages;
                var from = startNum + 1;
                var to = Math.min(startNum + pagination.per_page, total);

                document.getElementById('paginationInfo').textContent =
                    'Menampilkan ' + from + '-' + to + ' dari ' + total + ' tiket';
                document.getElementById('dbCount').textContent = total;

                var pagesHtml = '';
                pagesHtml += '<button ' + (currentPage <= 1 ? 'disabled' : '') + ' onclick="window.goPage(' + (
                    currentPage - 1) + ')">‹</button>';

                var start = Math.max(1, currentPage - 2);
                var end = Math.min(totalPages, currentPage + 2);

                for (var p = start; p <= end; p++) {
                    pagesHtml += '<button class="' + (p === currentPage ? 'active' : '') + '" onclick="window.goPage(' +
                        p + ')">' + p + '</button>';
                }

                pagesHtml += '<button ' + (currentPage >= totalPages ? 'disabled' : '') + ' onclick="window.goPage(' + (
                    currentPage + 1) + ')">›</button>';

                document.getElementById('paginationPages').innerHTML = pagesHtml;
            }

            function updateStats(stats) {
                document.getElementById('statTotal').textContent = stats.total || 0;
                document.getElementById('statProcess').textContent = stats.pending || 0;
                document.getElementById('statStations').textContent = stats.stations || 0;
                document.getElementById('statMaxAging').textContent = formatAging(stats.max_aging || 0);
            }

            // ============ SYNC ============
            function syncAll() {
                var overlay = document.getElementById('syncOverlay');
                overlay.classList.add('show');
                document.getElementById('syncTitle').textContent = 'Sinkronisasi Reasons...';
                document.getElementById('syncMsg').textContent = 'Mengambil daftar alasan exception';

                fetch(API_BASE + '/sync-reasons', {
                        headers: {
                            'Accept': 'application/json'
                        }
                    })
                    .then(function(r) {
                        return r.json();
                    })
                    .then(function(res) {
                        document.getElementById('syncTitle').textContent = 'Sinkronisasi Tiket...';
                        document.getElementById('syncMsg').textContent =
                            'Mengambil data tiket eskalasi dari SPX API';

                        return fetch(API_BASE + '/sync-tickets', {
                            headers: {
                                'Accept': 'application/json'
                            }
                        });
                    })
                    .then(function(r) {
                        return r.json();
                    })
                    .then(function(res) {
                        overlay.classList.remove('show');
                        if (res.success) {
                            showToast(res.message, 'success');
                            loadTickets();
                            loadAnalytics();
                            // Reload page to refresh reason filter
                            var rf = document.getElementById('reasonFilter');
                            if (rf && rf.options && rf.options.length <= 1) {
                                setTimeout(function() {
                                    location.reload();
                                }, 1000);
                            }
                        } else {
                            showToast(res.message || 'Sync gagal', 'error');
                        }
                    })
                    .catch(function(err) {
                        overlay.classList.remove('show');
                        showToast('Sync error: ' + err.message, 'error');
                    });
            }

            window.syncAll = syncAll;

            // ============ PAGINATION ============
            window.goPage = function(p) {
                currentPage = p;
                loadTickets();
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            };

            // ============ MULTI-SELECT UTILITIES ============
            function buildMSItems(key, items) {
                var list = document.getElementById('msList_' + key);
                var html = '';
                items.forEach(function(item, i) {
                    var val = item.value || item;
                    var label = item.label || item;
                    html += '<div class="spx-ms-item" data-val="' + esc(val) + '">' +
                        '<input type="checkbox" id="ms_' + key + '_' + i + '" onchange="window.onMSChange(\'' +
                        key + '\')">' +
                        '<label for="ms_' + key + '_' + i + '">' + esc(label) + '</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');
                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 si = dd.querySelector('.spx-ms-search input');
                    if (si) setTimeout(function() {
                        si.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 label = item.querySelector('label').textContent.toLowerCase();
                    item.classList.toggle('hidden', lower && label.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 === 'reason') {
                    currentReasons = checked;
                    if (checked.length === 0) {
                        label.textContent = 'Semua Alasan';
                    } else {
                        var firstLabel = document.querySelector('#msList_reason .spx-ms-item[data-val="' + checked[
                            0] + '"] label');
                        label.textContent = (firstLabel ? firstLabel.textContent.trim() : checked[0]) + (checked
                            .length > 1 ? ' +' + (checked.length - 1) : '');
                    }
                } else if (key === 'status') {
                    currentStatuses = checked;
                    if (checked.length === 0) {
                        label.textContent = 'Semua Status';
                    } else {
                        var firstLabel = document.querySelector('#msList_status .spx-ms-item[data-val="' + checked[
                            0] + '"] label');
                        label.textContent = (firstLabel ? firstLabel.textContent.trim() : checked[0]) + (checked
                            .length > 1 ? ' +' + (checked.length - 1) : '');
                    }
                }

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

                currentPage = 1;
                loadTickets();
            };

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

            // ============ POPULATE FILTERS ============
            function initFilters() {
                // Build reason items — deduplicate by local_lang
                var reasonData = _reasonRaw.map(function(r) {
                    return {
                        value: r.id,
                        label: r.label
                    };
                });
                // Deduplicate by label
                var seen = {};
                var uniqueReasons = [];
                reasonData.forEach(function(r) {
                    if (!seen[r.label]) {
                        seen[r.label] = true;
                        uniqueReasons.push(r);
                    }
                });
                uniqueReasons.sort(function(a, b) {
                    return a.label.localeCompare(b.label);
                });
                buildMSItems('reason', uniqueReasons);

                // Build status items
                buildMSItems('status', [{
                        value: '1',
                        label: 'Pending'
                    },
                    {
                        value: '2',
                        label: 'Perlu Diproses'
                    },
                    {
                        value: '3',
                        label: 'Sedang Diproses'
                    },
                    {
                        value: '4',
                        label: 'Terselesaikan'
                    },
                    {
                        value: '5',
                        label: 'Ditutup'
                    },
                ]);
            }

            // ============ EVENT LISTENERS ============
            var searchTimeout;
            document.getElementById('searchInput').addEventListener('input', function() {
                clearTimeout(searchTimeout);
                var val = this.value;
                searchTimeout = setTimeout(function() {
                    currentSearch = val;
                    currentPage = 1;
                    loadTickets();
                }, 400);
            });

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

            // ============ ANALYTICS ============
            var anaIds = ['anaReason', 'anaStatus', 'anaSender', 'anaProvince', 'anaCity', 'anaStation'];

            function loadAnalytics() {
                fetch(API_BASE + '/ticket-analytics', {
                        headers: {
                            'Accept': 'application/json'
                        }
                    })
                    .then(function(r) {
                        if (!r.ok) throw new Error('HTTP ' + r.status);
                        return r.json();
                    })
                    .then(function(res) {
                        if (!res.success) return;
                        renderRankedList('anaReason', res.by_reason || [], 'label', '#EE4D2D');
                        renderRankedList('anaStatus', res.by_status || [], 'label', '#1a73e8');
                        renderRankedList('anaSender', res.by_sender || [], 'label', '#7c3aed');
                        renderRankedList('anaProvince', res.by_province || [], 'province', '#e37400');
                        renderRankedList('anaCity', res.by_city || [], 'city', '#1e8e3e');
                        renderRankedList('anaStation', res.by_station || [], 'label', '#d93025');
                    })
                    .catch(function(err) {
                        console.error('Analytics error:', err);
                        anaIds.forEach(function(id) {
                            var el = document.getElementById(id);
                            if (el) el.innerHTML =
                                '<div style="padding:1.5rem;text-align:center;color:var(--s-text-muted);font-size:0.8rem;">Gagal memuat</div>';
                        });
                    });
            }

            function renderRankedList(elementId, data, labelKey, barColor) {
                var el = document.getElementById(elementId);
                if (!el) return;
                if (!data || !data.length) {
                    el.innerHTML =
                        '<div style="padding:1.5rem;text-align:center;color:var(--s-text-muted);font-size:0.8rem;">Belum ada data</div>';
                    return;
                }
                var max = data[0].total;
                var html = '<div style="display:flex;flex-direction:column;gap:0.5rem;">';
                data.forEach(function(d, i) {
                    var pct = max > 0 ? Math.round((d.total / max) * 100) : 0;
                    var label = d[labelKey] || '-';
                    html += '<div style="display:flex;align-items:center;gap:0.6rem;">' +
                        '<span style="min-width:20px;font-size:0.7rem;font-weight:800;color:var(--s-text-muted);text-align:right;">' +
                        (i + 1) + '</span>' +
                        '<div style="flex:1;min-width:0;">' +
                        '<div style="display:flex;justify-content:space-between;align-items:baseline;margin-bottom:2px;">' +
                        '<span style="font-size:0.76rem;font-weight:600;color:var(--s-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:75%;">' +
                        esc(label) + '</span>' +
                        '<span style="font-size:0.72rem;font-weight:800;color:' + barColor +
                        ';flex-shrink:0;">' + d.total + '</span>' +
                        '</div>' +
                        '<div style="height:5px;background:var(--s-border);border-radius:3px;overflow:hidden;">' +
                        '<div style="height:100%;width:' + pct + '%;background:' + barColor +
                        ';border-radius:3px;transition:width 0.4s ease;"></div>' +
                        '</div>' +
                        '</div></div>';
                });
                html += '</div>';
                el.innerHTML = html;
            }

            // ============ TICKET DETAIL MODAL ============
            window.showTicketDetail = function(ticketId) {
                var overlay = document.getElementById('ticketModalOverlay');
                overlay.style.display = 'flex';
                document.getElementById('modalTicketId').textContent = ticketId;
                document.getElementById('modalTicketReason').textContent = 'Memuat...';
                document.getElementById('modalBody').innerHTML =
                    '<div class="spx-chart-loading" style="min-height:200px;"><div class="spx-spinner"></div></div>';

                fetch(API_BASE + '/ticket-detail?ticket_id=' + encodeURIComponent(ticketId), {
                        headers: {
                            'Accept': 'application/json'
                        }
                    })
                    .then(function(r) {
                        return r.json();
                    })
                    .then(function(res) {
                        if (!res.success) {
                            document.getElementById('modalBody').innerHTML =
                                '<div style="padding:2rem;text-align:center;color:var(--s-danger);">' + esc(res
                                    .message || 'Gagal memuat') + '</div>';
                            return;
                        }
                        var d = res.detail || {};
                        var p = res.progress || [];
                        var o = d.related_order_info || {};

                        document.getElementById('modalTicketReason').textContent = d.exception_reason || d
                            .exception_reason_id || '-';

                        var statusMap = {
                            1: 'Pending',
                            2: 'Perlu Diproses',
                            3: 'Sedang Diproses',
                            4: 'Terselesaikan',
                            5: 'Ditutup'
                        };
                        var codStr = o.is_cod ? 'Ya — Rp ' + (o.cod_amount || 0).toLocaleString('id-ID') :
                            'Tidak';

                        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 Pesanan</h6>';
                        html += '<div class="spx-info-grid">';
                        html += infoItem('Penerima', esc(o.receiver_name || '-'));
                        html += infoItem('Kontak', esc(o.receiver_contact || '-'));
                        html += infoItem('Alamat', esc(o.receiver_address || '-'));
                        html += infoItem('COD', codStr);
                        html += infoItem('Pengirim', esc(o.sender_name || '-'));
                        html += infoItem('Kontak Pengirim', esc(o.sender_contact || '-'));
                        html += infoItem('Shipment ID', esc(d.related_order || o.shipment_id || '-'));
                        html += infoItem('SLS TN', esc(o.sls_tracking_number || '-'));
                        html += infoItem('Stasiun', esc(d.escalation_station || '-'));
                        html += infoItem('Status', '<span class="spx-badge ' + statusBadge(d.ticket_status) +
                            '">' + (statusMap[d.ticket_status] || d.ticket_status) + '</span>');
                        html += infoItem('Aging', formatAging(d.ticket_aging_time || 0));
                        html += infoItem('Instruksi', esc(o.delivery_instruction || '-'));
                        html += '</div>';

                        // Timeline
                        if (p.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 Progress</h6>';
                            html += '<div class="spx-timeline">';
                            p.forEach(function(item) {
                                var logMap = {
                                    'ETK001': 'Tiket dibuat',
                                    'ETK002': 'Tiket dieskalasi'
                                };
                                var msg = logMap[item.log_message] || item.log_message || '-';
                                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(msg) + '</div>' +
                                    '<div style="font-size:0.72rem;color:var(--s-text-muted);margin-top:2px;">' +
                                    esc(item.operator || '-') + ' &bull; ' + esc(item.operate_station ||
                                        '-') +
                                    '</div>' +
                                    '<div style="font-size:0.68rem;color:var(--s-text-muted);">' +
                                    formatEpoch(item.action_time) + '</div>' +
                                    (item.comment ?
                                        '<div style="font-size:0.75rem;margin-top:4px;padding:0.5rem;background:var(--s-bg);border-radius:6px;color:var(--s-text-sec);">' +
                                        esc(item.comment) + '</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 tiket</div>';
                    });
            };

            window.closeTicketModal = function() {
                document.getElementById('ticketModalOverlay').style.display = 'none';
            };

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

            // Init & load
            initFilters();
            loadTickets();
            loadAnalytics();
        })();
    </script>
@endpush