@extends('template.desktop.app')
@section('title', 'SPX Keuangan')

@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 FINANCE - PREMIUM DESIGN SYSTEM (matched with orders)
                                   ===================================================== */
        :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;
            font-family: inherit;
        }

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

        /* ============ BALANCE CARD ============ */
        .spx-balance {
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 60%, #1e3a5f 100%);
            border-radius: var(--radius-lg);
            padding: 2rem 2.25rem;
            display: flex;
            align-items: center;
            gap: 1.5rem;
            box-shadow: 0 8px 30px rgba(15, 23, 42, 0.25);
            position: relative;
            overflow: hidden;
            color: #fff;
        }

        .spx-balance::before {
            content: '';
            position: absolute;
            top: -40px;
            right: -30px;
            width: 180px;
            height: 180px;
            background: rgba(255, 255, 255, 0.04);
            border-radius: 50%;
            pointer-events: none;
        }

        .spx-balance-icon {
            width: 56px;
            height: 56px;
            border-radius: 14px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(8px);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
            color: #60a5fa;
            flex-shrink: 0;
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .spx-balance-label {
            font-size: 0.7rem;
            font-weight: 700;
            color: rgba(255, 255, 255, 0.5);
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }

        .spx-balance-value {
            font-size: 2rem;
            font-weight: 900;
            color: #fff !important;
            line-height: 1.2;
            letter-spacing: -0.02em;
        }

        .spx-balance-sub {
            font-size: 0.76rem;
            color: rgba(255, 255, 255, 0.45);
            margin-top: 3px;
        }

        /* ============ CARDS ============ */
        .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;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .spx-card-header small {
            font-size: 0.72rem;
            color: var(--s-text-muted);
            font-weight: 500;
        }

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

        /* ============ LAYOUT GRIDS ============ */
        .spx-top-grid {
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: 1.5rem;
            margin-bottom: 1.5rem;
        }

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

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

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

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

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

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

        .spx-stat-icon {
            width: 44px;
            height: 44px;
            border-radius: var(--radius);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 0.6rem;
            font-size: 1.1rem;
        }

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

        .spx-stat-value {
            font-size: 1.05rem;
            font-weight: 800;
            color: var(--s-text);
        }

        .spx-stat-value.positive {
            color: var(--s-success);
        }

        .spx-stat-value.negative {
            color: var(--s-danger);
        }

        /* ============ 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-date-wrapper {
            position: relative;
            display: inline-flex;
            align-items: center;
            flex: 1;
            max-width: 300px;
        }

        .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-input {
            padding: 0.6rem 1rem 0.6rem 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);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
        }

        .spx-date-input:hover {
            border-color: rgba(238, 77, 45, 0.4);
        }

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

        .spx-btn-outline {
            padding: 0.55rem 1rem;
            background: var(--s-surface);
            color: var(--s-text-sec);
            border: 1.5px solid var(--s-border);
            border-radius: 10px;
            font-size: 0.8rem;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            transition: all 0.15s;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

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

        /* ============ 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.4rem;
            white-space: nowrap;
            font-family: inherit;
        }

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

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

        /* ============ SEARCH ============ */
        .spx-search-bar {
            display: flex;
            gap: 0.75rem;
            padding: 1rem 1.5rem;
            background: var(--s-bg);
            border-bottom: 1px solid var(--s-border-light);
            flex-wrap: wrap;
            align-items: flex-end;
        }

        .spx-search-group {
            flex: 1;
            min-width: 160px;
        }

        .spx-search-group label {
            display: block;
            font-size: 0.65rem;
            font-weight: 700;
            color: var(--s-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.04em;
            margin-bottom: 4px;
        }

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

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

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

        select.spx-search-input {
            cursor: pointer;
            appearance: auto;
        }

        .spx-search-btn {
            padding: 7px 16px;
            background: var(--s-primary);
            color: #fff;
            border: none;
            border-radius: 8px;
            font-size: 0.8rem;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            transition: background 0.15s;
            white-space: nowrap;
        }

        .spx-search-btn:hover {
            background: var(--s-primary-dark);
        }

        /* ============ 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.8rem 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;
        }

        .spx-mono {
            font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--s-primary);
        }

        /* ============ BADGES ============ */
        .spx-badge {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 100px;
            font-size: 0.66rem;
            font-weight: 700;
        }

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

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

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

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

        .spx-amount-pos {
            color: var(--s-success);
            font-weight: 700;
        }

        .spx-amount-neg {
            color: var(--s-danger);
            font-weight: 700;
        }

        .spx-bal {
            font-size: 0.76rem;
            color: var(--s-text-sec);
            font-variant-numeric: tabular-nums;
        }

        .spx-time {
            white-space: nowrap;
            font-size: 0.72rem;
            color: var(--s-text-muted);
            font-weight: 500;
        }

        /* ============ 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: 0.75rem;
        }

        .spx-pagination .pi {
            font-size: 0.76rem;
            color: var(--s-text-sec);
            font-weight: 600;
            letter-spacing: -0.01em;
        }

        .pb {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .pbtn {
            min-width: 34px;
            height: 34px;
            padding: 0 10px;
            border-radius: 10px;
            border: 1.5px solid var(--s-border);
            background: var(--s-surface);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 0.8rem;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            color: var(--s-text-sec);
            transition: all 0.2s;
            line-height: 1;
        }

        .pbtn:hover:not(:disabled):not(.active) {
            border-color: var(--s-primary);
            color: var(--s-primary);
            background: var(--s-primary-soft);
            transform: translateY(-1px);
        }

        .pbtn.active {
            background: var(--s-primary);
            color: #fff;
            border-color: var(--s-primary);
            box-shadow: 0 2px 8px rgba(238, 77, 45, 0.3);
        }

        .pbtn:disabled {
            opacity: 0.3;
            cursor: not-allowed;
        }

        .pb-dots {
            font-size: 0.8rem;
            color: var(--s-text-muted);
            padding: 0 4px;
            user-select: none;
            line-height: 34px;
        }

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

        .spx-spinner {
            width: 28px;
            height: 28px;
            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);
            }
        }

        /* ============ EMPTY STATE ============ */
        .spx-empty {
            text-align: center;
            padding: 3.5rem 2rem;
            color: var(--s-text-muted);
        }

        .spx-empty-icon {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: var(--s-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem;
        }

        .spx-empty-icon i {
            font-size: 1.5rem;
            color: var(--s-text-muted);
            opacity: 0.6;
        }

        .spx-empty-title {
            font-weight: 700;
            font-size: 0.88rem;
            color: var(--s-text-sec);
            margin-bottom: 4px;
        }

        .spx-empty-sub {
            font-size: 0.75rem;
            color: var(--s-text-muted);
            font-weight: 500;
        }

        .spx-ts {
            text-align: center;
            font-size: 0.7rem;
            color: var(--s-text-muted);
            padding: 0.5rem 0 0.75rem;
        }

        /* ============ SYNC TOAST ============ */
        .spx-toast {
            position: fixed;
            bottom: 24px;
            right: 24px;
            background: var(--s-surface);
            border: 1px solid var(--s-border);
            border-radius: var(--radius);
            padding: 1rem 1.25rem;
            box-shadow: var(--shadow-lg);
            z-index: 9999;
            font-size: 0.82rem;
            color: var(--s-text);
            display: none;
            min-width: 280px;
        }

        .spx-toast.show {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .spx-toast .spx-spinner {
            width: 20px;
            height: 20px;
            border-width: 2.5px;
        }

        /* ============ MODAL ============ */
        .spx-modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.45);
            z-index: 10000;
            display: none;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(4px);
        }

        .spx-modal-overlay.show {
            display: flex;
        }

        .spx-modal {
            background: var(--s-surface);
            border-radius: var(--radius-lg);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
            width: 100%;
            max-width: 440px;
            overflow: hidden;
            animation: spxModalIn 0.2s ease;
        }

        @keyframes spxModalIn {
            from {
                opacity: 0;
                transform: scale(0.95) translateY(10px);
            }

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

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

        .spx-modal-header h6 {
            margin: 0;
            font-size: 0.92rem;
            font-weight: 800;
            color: var(--s-text);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .spx-modal-close {
            background: none;
            border: none;
            font-size: 1.2rem;
            color: var(--s-text-muted);
            cursor: pointer;
            padding: 4px;
            border-radius: 6px;
            transition: all 0.15s;
        }

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

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

        .spx-modal-body label {
            display: block;
            font-size: 0.72rem;
            font-weight: 700;
            color: var(--s-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.04em;
            margin-bottom: 6px;
        }

        .spx-modal-body .spx-info {
            font-size: 0.75rem;
            color: var(--s-text-muted);
            margin-top: 12px;
            padding: 10px 12px;
            background: var(--s-bg);
            border-radius: 8px;
            display: flex;
            align-items: flex-start;
            gap: 8px;
            line-height: 1.5;
        }

        .spx-modal-body .spx-info i {
            color: var(--s-warning);
            font-size: 1rem;
            flex-shrink: 0;
            margin-top: 1px;
        }

        .spx-modal-footer {
            padding: 1rem 1.5rem;
            border-top: 1px solid var(--s-border-light);
            display: flex;
            justify-content: flex-end;
            gap: 8px;
        }

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

        .litepicker .container__days .day-item:hover {
            background: var(--s-primary-soft) !important;
            color: var(--s-primary) !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;
        }

        .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__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;
        }

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

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

            .spx-balance {
                padding: 1.25rem;
                flex-direction: column;
                text-align: center;
            }

            .spx-balance-value {
                font-size: 1.4rem;
            }

            .spx-date-wrapper {
                max-width: 100%;
            }

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

            .spx-stats {
                grid-template-columns: 1fr 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;
        }
    </style>
@endpush

@section('content')
    <div class="spx-wrapper">

        {{-- ══ HEADER ══ --}}
        <header class="spx-header">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <div class="d-flex align-items-center gap-3 mb-2 justify-content-center justify-content-lg-start">
                        <div class="rounded-3 d-flex align-items-center justify-content-center"
                            style="width: 48px; height: 48px; background: rgba(238,77,45,0.2);">
                            <i class="ti tabler-wallet" style="font-size: 1.5rem; color: var(--s-primary);"></i>
                        </div>
                        <div>
                            <h2 style="font-size: 1.6rem;">Keuangan SPX Express</h2>
                            <p>Monitoring saldo & riwayat transaksi</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 mt-3 mt-lg-0">
                    <div class="spx-header-actions justify-content-lg-end">
                        <a href="{{ route('spx-orders.index') }}" class="spx-btn spx-btn-glass">
                            <i class="ti tabler-package"></i> Pesanan
                        </a>
                        <button class="spx-btn spx-btn-glass" onclick="window.syncHistory()" id="btnSync">
                            <i class="ti tabler-cloud-download"></i> Sinkronisasi
                        </button>
                        <button class="spx-btn spx-btn-glass" onclick="window.refreshAll()" id="btnRefresh">
                            <i class="ti tabler-refresh"></i> Refresh
                        </button>
                    </div>
                </div>
            </div>
        </header>

        {{-- ══ SALDO + CHART ══ --}}
        <div class="spx-top-grid">
            <div class="spx-balance">
                <div class="spx-balance-icon"><i class="ti tabler-coins"></i></div>
                <div>
                    <div class="spx-balance-label">Total Saldo Akun</div>
                    <div class="spx-balance-value" id="finTotal">
                        <div class="spx-loading" style="padding:0.4rem;">
                            <div class="spx-spinner"></div>
                        </div>
                    </div>
                    <div class="spx-balance-sub">Seluruh saldo akun SPX Express</div>
                </div>
            </div>
            <div class="spx-card">
                <div class="spx-card-header">
                    <h6><i class="ti tabler-chart-area-line" style="color:var(--s-primary)"></i> Tren Transaksi</h6>
                    <small>30 hari terakhir</small>
                </div>
                <div class="spx-card-body" style="padding: 1rem 1.25rem 0.5rem;">
                    <div id="tranChart" style="min-height: 190px;"></div>
                </div>
            </div>
        </div>

        {{-- ══ GLOBAL DATE FILTER ══ --}}
        <div class="spx-filter-bar">
            <div style="display:flex; align-items:center; gap:12px; flex:1;">
                <div
                    style="width:40px; height:40px; border-radius:10px; background:linear-gradient(135deg, var(--s-primary), var(--s-accent)); display:flex; align-items:center; justify-content:center; flex-shrink:0;">
                    <i class="ti tabler-calendar-stats" style="color:#fff; font-size:1.15rem;"></i>
                </div>
                <div>
                    <div style="font-size:0.85rem; font-weight:700; color:var(--s-text); line-height:1.2;">Filter Tanggal
                    </div>
                    <div style="font-size:0.7rem; color:var(--s-text-muted); font-weight:500; margin-top:1px;">Berlaku untuk
                        ringkasan, riwayat & grafik</div>
                </div>
            </div>
            <div class="spx-date-wrapper">
                <i class="ti tabler-calendar-event spx-date-icon"></i>
                <input type="text" class="spx-date-input" id="globalDateRange" placeholder="Pilih rentang tanggal"
                    readonly>
            </div>
            <button class="spx-btn-outline" onclick="window.resetDateFilter()" id="btnResetDate" style="display:none;">
                <i class="ti tabler-x" style="font-size:0.85rem;"></i> Reset
            </button>
        </div>

        {{-- ══ SUMMARY ══ --}}
        <div class="spx-card" style="margin-bottom:1.5rem;">
            <div class="spx-card-header">
                <div>
                    <h6><i class="ti tabler-chart-bar" style="color:var(--s-primary);"></i> Ringkasan Transaksi</h6>
                    <small>Transaksi yang berhasil diproses</small>
                </div>
            </div>
            <div class="spx-card-body">
                <div class="spx-stats">
                    <div class="spx-stat">
                        <div class="spx-stat-icon" style="background:var(--s-success-bg); color:var(--s-success);"><i
                                class="ti tabler-cash"></i></div>
                        <div class="spx-stat-label">COD</div>
                        <div class="spx-stat-value" id="tranCod">-</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-delivery"></i></div>
                        <div class="spx-stat-label">Ongkos Kirim</div>
                        <div class="spx-stat-value" id="tranShipping">-</div>
                    </div>
                    <div class="spx-stat">
                        <div class="spx-stat-icon" style="background:var(--s-danger-bg); color:var(--s-danger);"><i
                                class="ti tabler-arrow-down-right"></i></div>
                        <div class="spx-stat-label">Penarikan</div>
                        <div class="spx-stat-value" id="tranRelease">-</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-adjustments"></i></div>
                        <div class="spx-stat-label">Penyesuaian</div>
                        <div class="spx-stat-value" id="tranAdjustment">-</div>
                    </div>
                </div>
            </div>
        </div>

        {{-- ══ HISTORY ══ --}}
        <div class="spx-card">
            <div class="spx-card-header">
                <div>
                    <h6><i class="ti tabler-receipt-2" style="color:var(--s-primary);"></i> Riwayat Transaksi</h6>
                    <small>Data dari database lokal — klik Sinkronisasi untuk update</small>
                </div>
            </div>
            <div style="padding:1rem 1.5rem; border-bottom:1px solid var(--s-border-light);">
                <div class="spx-tabs">
                    <button class="spx-tab active" data-type="" onclick="window.filterHist(this)">Semua</button>
                    <button class="spx-tab" data-type="1" onclick="window.filterHist(this)">COD</button>
                    <button class="spx-tab" data-type="2" onclick="window.filterHist(this)">Ongkos Kirim</button>
                    <button class="spx-tab" data-type="4" onclick="window.filterHist(this)">Tarik</button>
                    <button class="spx-tab" data-type="3" onclick="window.filterHist(this)">Penyesuaian</button>
                </div>
            </div>
            <div class="spx-search-bar">
                <div class="spx-search-group">
                    <label>ID Transaksi</label>
                    <input type="text" class="spx-search-input" id="sTransId" placeholder="Mohon masukkan">
                </div>
                <div class="spx-search-group">
                    <label>Nomor Pelacakan</label>
                    <input type="text" class="spx-search-input" id="sTrackNo" placeholder="Mohon masukkan">
                </div>
                <div class="spx-search-group" style="min-width:130px; flex:0.6;">
                    <label>Status</label>
                    <select class="spx-search-input" id="sStatus">
                        <option value="">Semua</option>
                        <option value="1">Berhasil</option>
                        <option value="2">Pending</option>
                        <option value="3">Gagal</option>
                    </select>
                </div>
                <button class="spx-search-btn" onclick="window.doSearch()">
                    <i class="ti tabler-search" style="font-size:0.85rem;"></i> Cari
                </button>
                <button class="spx-btn-outline" onclick="window.resetSearch()">
                    <i class="ti tabler-x" style="font-size:0.85rem;"></i> Reset
                </button>
            </div>
            <div class="table-responsive">
                <table class="spx-table">
                    <thead>
                        <tr>
                            <th>No. Resi / Referensi</th>
                            <th>Tipe</th>
                            <th>Jumlah</th>
                            <th>Saldo Sebelum</th>
                            <th>Saldo Sesudah</th>
                            <th>Waktu</th>
                        </tr>
                    </thead>
                    <tbody id="hBody">
                        <tr>
                            <td colspan="6">
                                <div class="spx-loading">
                                    <div class="spx-spinner"></div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="spx-pagination">
                <span class="pi" id="hInfo">Memuat...</span>
                <div class="pb">
                    <button class="pbtn" id="hPrev" onclick="window.hPrev()" disabled>
                        <i class="ti tabler-chevron-left"></i>
                    </button>
                    <span id="hPages"></span>
                    <button class="pbtn" id="hNext" onclick="window.hNext()" disabled>
                        <i class="ti tabler-chevron-right"></i>
                    </button>
                </div>
            </div>
        </div>

        <div class="spx-ts" id="fTs"></div>

        {{-- Sync Toast --}}
        <div class="spx-toast" id="syncToast">
            <div class="spx-spinner"></div>
            <span id="syncMsg">Menyinkronkan transaksi...</span>
        </div>

        {{-- Sync Modal --}}
        <div class="spx-modal-overlay" id="syncModal">
            <div class="spx-modal">
                <div class="spx-modal-header">
                    <h6><i class="ti tabler-cloud-download" style="color:var(--s-primary)"></i> Sinkronisasi Transaksi
                    </h6>
                    <button class="spx-modal-close" onclick="window.closeSyncModal()">&times;</button>
                </div>
                <div class="spx-modal-body">
                    <div style="display:flex; gap:12px;">
                        <div style="flex:1;">
                            <label>Dari Tanggal</label>
                            <input type="date" class="spx-search-input" id="syncFrom">
                        </div>
                        <div style="flex:1;">
                            <label>Sampai Tanggal</label>
                            <input type="date" class="spx-search-input" id="syncTo">
                        </div>
                    </div>
                    <div class="spx-info">
                        <i class="ti tabler-info-circle"></i>
                        <span>Data transaksi akan diambil dari API SPX dan disimpan ke database lokal. Proses ini mungkin
                            memakan waktu beberapa saat tergantung jumlah data.</span>
                    </div>
                </div>
                <div class="spx-modal-footer">
                    <button class="spx-btn-outline" onclick="window.closeSyncModal()">Batal</button>
                    <button class="spx-btn spx-btn-primary" id="btnStartSync" onclick="window.startSync()">
                        <i class="ti tabler-cloud-download"></i> Mulai Sinkronisasi
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/litepicker/dist/litepicker.js"></script>
    <script>
        (function() {
            var BAL = '{{ url('/api/spx/balance') }}';
            var TRAN = '{{ url('/api/spx/transactions') }}';
            var LIST = '{{ url('/api/spx/transaction-list') }}';
            var SYNC = '{{ url('/api/spx/sync-transactions') }}';
            var SRCH = '{{ url('/api/spx/search-transactions') }}';
            var CHRT = '{{ url('/api/spx/chart-data') }}';

            function R(n) {
                return n == null ? '0' : Number(n).toLocaleString('id-ID');
            }

            function E(s) {
                var d = document.createElement('div');
                d.textContent = s;
                return d.innerHTML;
            }

            function $(id) {
                return document.getElementById(id);
            }

            // ── SALDO ──
            function loadBal() {
                fetch(BAL, {
                        headers: {
                            Accept: 'application/json'
                        }
                    })
                    .then(function(r) {
                        return r.json();
                    })
                    .then(function(res) {
                        if (!res.success) {
                            $('finTotal').textContent = '-';
                            return;
                        }
                        var d = res.data;
                        if (d && d.data) d = d.data;
                        if (d && d.detail) d = d.detail;
                        if (!d || typeof d !== 'object') {
                            $('finTotal').textContent = '-';
                            return;
                        }
                        var t = d.total_balance || d.balance || d.total_amount || 0;
                        if (t > 1e11) t = t / 100;
                        $('finTotal').textContent = 'Rp ' + R(Math.round(t));
                        $('fTs').textContent = 'Terakhir dimuat: ' + new Date().toLocaleString('id-ID', {
                            day: '2-digit',
                            month: 'short',
                            year: 'numeric',
                            hour: '2-digit',
                            minute: '2-digit',
                            second: '2-digit'
                        });
                    })
                    .catch(function() {
                        $('finTotal').textContent = '-';
                    });
            }

            // ── SUMMARY ──
            var TM = {
                1: 'tranCod',
                2: 'tranShipping',
                3: 'tranAdjustment',
                4: 'tranRelease'
            };

            function initDateFilter() {
                var now = new Date(),
                    ago = new Date(now);
                ago.setMonth(ago.getMonth() - 1);
                histDateStart = Math.floor(ago.getTime() / 1000);
                histDateEnd = Math.floor(now.getTime() / 1000);

                new Litepicker({
                    element: $('globalDateRange'),
                    singleMode: false,
                    numberOfMonths: 2,
                    numberOfColumns: 2,
                    format: 'DD MMM YYYY',
                    separator: '  →  ',
                    startDate: ago,
                    endDate: now,
                    lang: 'id-ID',
                    autoApply: true,
                    showTooltip: true,
                    tooltipText: {
                        one: 'hari',
                        other: 'hari'
                    },
                    setup: function(p) {
                        p.on('selected', function(a, b) {
                            histDateStart = Math.floor(a.dateInstance.getTime() / 1000);
                            histDateEnd = Math.floor(b.dateInstance.getTime() / 1000) + 86399;
                            $('btnResetDate').style.display = 'inline-flex';
                            reloadAll();
                        });
                    },
                });
                loadSum(histDateStart, histDateEnd);
            }

            window.resetDateFilter = function() {
                var now = new Date(),
                    ago = new Date(now);
                ago.setMonth(ago.getMonth() - 1);
                histDateStart = Math.floor(ago.getTime() / 1000);
                histDateEnd = Math.floor(now.getTime() / 1000);
                $('globalDateRange').value = '';
                $('btnResetDate').style.display = 'none';
                initDateFilter();
                reloadAll();
            };

            function reloadAll() {
                loadSum(histDateStart, histDateEnd);
                loadChart();
                hOff = 0;
                if (searchMode) {
                    searchPage = 1;
                    loadSearch();
                } else {
                    loadHist();
                }
            }

            function loadSum(s, e) {
                Object.values(TM).forEach(function(id) {
                    $(id).textContent = '-';
                    $(id).className = 'spx-stat-value';
                });
                fetch(TRAN + '?tran_time_start=' + s + '&tran_time_end=' + e, {
                        headers: {
                            Accept: 'application/json'
                        }
                    })
                    .then(function(r) {
                        return r.json();
                    })
                    .then(function(res) {
                        if (!res.success) return;
                        var d = res.data;
                        if (d && d.data) d = d.data;
                        if (!Array.isArray(d)) return;
                        d.forEach(function(i) {
                            var id = TM[i.seller_tran_type];
                            if (!id) return;
                            var a = parseInt(i.total_transaction_amount || '0', 10);
                            var neg = a < 0;
                            $(id).textContent = (neg ? '-' : '+') + 'Rp' + R(Math.abs(a));
                            $(id).className = 'spx-stat-value ' + (neg ? 'negative' : 'positive');
                        });
                    }).catch(function() {});
            }

            // ── HISTORY ──
            var hOff = 0,
                hSz = 10,
                hTot = 0,
                hTp = '';
            var histDateStart = null,
                histDateEnd = null;
            var TL = {
                1: {
                    l: 'COD',
                    c: 'spx-badge-cod'
                },
                2: {
                    l: 'Ongkos Kirim',
                    c: 'spx-badge-ship'
                },
                3: {
                    l: 'Penyesuaian',
                    c: 'spx-badge-adj'
                },
                4: {
                    l: 'Tarik',
                    c: 'spx-badge-release'
                },
            };



            window.filterHist = function(b) {
                document.querySelectorAll('.spx-tab').forEach(function(t) {
                    t.classList.remove('active');
                });
                b.classList.add('active');
                hTp = b.dataset.type;
                hOff = 0;
                searchMode = false;
                $('sTransId').value = '';
                $('sTrackNo').value = '';
                $('sStatus').value = '';
                loadHist();
            };

            // ── SEARCH ──
            var searchMode = false;
            var searchPage = 1;

            window.doSearch = function() {
                var tid = $('sTransId').value.trim();
                var trk = $('sTrackNo').value.trim();
                var sts = $('sStatus').value;

                if (!tid && !trk && !sts && !hTp) {
                    searchMode = false;
                    hOff = 0;
                    loadHist();
                    return;
                }

                searchMode = true;
                searchPage = 1;
                loadSearch();
            };

            window.resetSearch = function() {
                $('sTransId').value = '';
                $('sTrackNo').value = '';
                $('sStatus').value = '';
                searchMode = false;
                hOff = 0;
                loadHist();
            };

            function loadSearch() {
                var params = new URLSearchParams();
                var tid = $('sTransId').value.trim();
                var trk = $('sTrackNo').value.trim();
                var sts = $('sStatus').value;

                if (tid) params.set('transaction_id', tid);
                if (trk) params.set('tracking_number', trk);
                if (sts) params.set('status', sts);
                if (hTp) params.set('seller_tran_type', hTp);
                if (histDateStart) params.set('date_start', histDateStart);
                if (histDateEnd) params.set('date_end', histDateEnd);
                params.set('page', searchPage);
                params.set('per_page', hSz);

                $('hBody').innerHTML =
                    '<tr><td colspan="6"><div class="spx-loading"><div class="spx-spinner"></div></div></td></tr>';

                fetch(SRCH + '?' + params.toString(), {
                        headers: {
                            Accept: 'application/json'
                        }
                    })
                    .then(function(r) {
                        return r.json();
                    })
                    .then(function(res) {
                        if (!res.success) {
                            $('hBody').innerHTML = emptyRow('tabler-alert-circle', 'Gagal Mencari',
                                'Terjadi kesalahan saat mencari data');
                            return;
                        }
                        var d = res.data;
                        var list = d.list || [];
                        hTot = d.total || 0;
                        hOff = (d.page - 1) * d.per_page;

                        if (!list.length) {
                            $('hBody').innerHTML = emptyRow('tabler-search-off', 'Tidak Ditemukan',
                                'Coba ubah kata kunci pencarian');
                            updPag();
                            return;
                        }

                        renderRows(list);
                        updPag();
                    })
                    .catch(function() {
                        $('hBody').innerHTML = emptyRow('tabler-alert-circle', 'Gagal Mencari',
                            'Periksa koneksi internet');
                    });
            }

            window.hPrev = function() {
                if (searchMode) {
                    if (searchPage > 1) {
                        searchPage--;
                        loadSearch();
                    }
                } else {
                    if (hOff >= hSz) {
                        hOff -= hSz;
                        loadHist();
                    }
                }
            };
            window.hNext = function() {
                if (searchMode) {
                    if (searchPage * hSz < hTot) {
                        searchPage++;
                        loadSearch();
                    }
                } else {
                    if (hOff + hSz < hTot) {
                        hOff += hSz;
                        loadHist();
                    }
                }
            };

            function emptyRow(icon, title, sub) {
                return '<tr><td colspan="6"><div class="spx-empty">' +
                    '<div class="spx-empty-icon"><i class="ti ' + icon + '"></i></div>' +
                    '<div class="spx-empty-title">' + title + '</div>' +
                    (sub ? '<div class="spx-empty-sub">' + sub + '</div>' : '') +
                    '</div></td></tr>';
            }

            function renderRows(list) {
                var h = '';
                list.forEach(function(i) {
                    var ti = TL[i.seller_tran_type] || {
                        l: 'Lainnya',
                        c: ''
                    };
                    var amt = parseInt(i.transaction_amount || '0', 10);
                    var pos = amt >= 0;
                    var ref = i.tracking_number || i.reference_id || i.settlement_sn || '-';
                    var dt = i.tran_time ? new Date(i.tran_time * 1000) : null;
                    var ds = dt ? dt.toLocaleDateString('id-ID', {
                            day: '2-digit',
                            month: 'short',
                            year: 'numeric'
                        }) +
                        ' ' + dt.toLocaleTimeString('id-ID', {
                            hour: '2-digit',
                            minute: '2-digit'
                        }) : '-';

                    h += '<tr>' +
                        '<td><span class="spx-mono">' + E(ref) + '</span></td>' +
                        '<td><span class="spx-badge ' + ti.c + '">' + ti.l + '</span></td>' +
                        '<td><span class="' + (pos ? 'spx-amount-pos' : 'spx-amount-neg') + '">' + (pos ? '+' :
                            '-') + 'Rp' + R(
                            Math.abs(amt)) + '</span></td>' +
                        '<td class="spx-bal">Rp' + R(parseInt(i.balance_before || '0', 10)) + '</td>' +
                        '<td class="spx-bal">Rp' + R(parseInt(i.balance_after || '0', 10)) + '</td>' +
                        '<td class="spx-time">' + ds + '</td>' +
                        '</tr>';
                });
                $('hBody').innerHTML = h;
            }

            function loadHist() {
                var params = new URLSearchParams();
                if (hTp) params.set('seller_tran_type', hTp);
                if (histDateStart) params.set('date_start', histDateStart);
                if (histDateEnd) params.set('date_end', histDateEnd);
                params.set('page', Math.floor(hOff / hSz) + 1);
                params.set('per_page', hSz);

                $('hBody').innerHTML =
                    '<tr><td colspan="6"><div class="spx-loading"><div class="spx-spinner"></div></div></td></tr>';

                fetch(SRCH + '?' + params.toString(), {
                        headers: {
                            Accept: 'application/json'
                        }
                    })
                    .then(function(r) {
                        return r.json();
                    })
                    .then(function(res) {
                        if (!res.success) {
                            $('hBody').innerHTML = emptyRow('tabler-alert-circle', 'Gagal Memuat',
                                'Terjadi kesalahan saat memuat data');
                            return;
                        }
                        var d = res.data;
                        var list = d.list || [];
                        hTot = d.total || 0;
                        hOff = (d.page - 1) * d.per_page;

                        if (!list.length) {
                            $('hBody').innerHTML = emptyRow('tabler-receipt-off', 'Belum Ada Transaksi',
                                'Klik tombol Sinkronisasi untuk mengambil data dari SPX');
                            updPag();
                            return;
                        }

                        renderRows(list);
                        updPag();
                    })
                    .catch(function() {
                        $('hBody').innerHTML = emptyRow('tabler-wifi-off', 'Gagal Memuat',
                            'Periksa koneksi internet Anda');
                    });
            }

            function updPag() {
                var s = hTot > 0 ? hOff + 1 : 0;
                var e = Math.min(hOff + hSz, hTot);
                var curPage = Math.floor(hOff / hSz) + 1;
                var totPages = Math.ceil(hTot / hSz);

                $('hInfo').textContent = s + '–' + e + ' dari ' + R(hTot) + ' transaksi';
                $('hPrev').disabled = curPage <= 1;
                $('hNext').disabled = curPage >= totPages;

                // Build page numbers
                var pages = [];
                if (totPages <= 7) {
                    for (var i = 1; i <= totPages; i++) pages.push(i);
                } else {
                    pages.push(1);
                    if (curPage > 3) pages.push('...');
                    var start = Math.max(2, curPage - 1);
                    var end = Math.min(totPages - 1, curPage + 1);
                    for (var i = start; i <= end; i++) pages.push(i);
                    if (curPage < totPages - 2) pages.push('...');
                    pages.push(totPages);
                }

                var h = '';
                pages.forEach(function(p) {
                    if (p === '...') {
                        h += '<span class="pb-dots">…</span>';
                    } else {
                        h += '<button class="pbtn' + (p === curPage ? ' active' : '') +
                            '" onclick="window.goPage(' + p + ')">' + p + '</button>';
                    }
                });
                $('hPages').innerHTML = h;
            }

            window.goPage = function(p) {
                hOff = (p - 1) * hSz;
                if (searchMode) {
                    searchPage = p;
                    loadSearch();
                } else {
                    loadHist();
                }
            };

            // ── SYNC ──
            window.syncHistory = function() {
                var now = new Date(),
                    ago = new Date(now);
                ago.setMonth(ago.getMonth() - 1);
                $('syncFrom').value = ago.toISOString().slice(0, 10);
                $('syncTo').value = now.toISOString().slice(0, 10);
                $('syncModal').classList.add('show');
            };

            window.closeSyncModal = function() {
                $('syncModal').classList.remove('show');
            };

            window.startSync = function() {
                var btn = $('btnStartSync');
                var toast = $('syncToast');
                var msg = $('syncMsg');

                var fromVal = $('syncFrom').value;
                var toVal = $('syncTo').value;
                if (!fromVal || !toVal) {
                    alert('Silakan pilih tanggal Dari dan Sampai.');
                    return;
                }

                btn.disabled = true;
                btn.innerHTML =
                    '<div class="spx-spinner" style="width:16px;height:16px;border-width:2px;"></div> Menyinkronkan...';
                toast.classList.add('show');
                msg.textContent = 'Mengambil & menyimpan transaksi dari SPX...';

                var url = SYNC + '?date_start=' + encodeURIComponent(fromVal) + '&date_end=' + encodeURIComponent(
                    toVal);

                fetch(url, {
                        headers: {
                            Accept: 'application/json'
                        },
                    })
                    .then(function(r) {
                        return r.json();
                    })
                    .then(function(res) {
                        btn.disabled = false;
                        btn.innerHTML = '<i class="ti tabler-cloud-download"></i> Mulai Sinkronisasi';

                        if (res.success) {
                            msg.textContent = '✓ ' + res.message + ' (DB: ' + R(res.db_total) + ')';
                            setTimeout(function() {
                                toast.classList.remove('show');
                            }, 4000);
                            $('syncModal').classList.remove('show');
                            hOff = 0;
                            loadHist();
                            loadChart();
                        } else {
                            msg.textContent = '✗ ' + (res.message || 'Gagal sync');
                            setTimeout(function() {
                                toast.classList.remove('show');
                            }, 5000);
                        }
                    })
                    .catch(function(err) {
                        btn.disabled = false;
                        btn.innerHTML = '<i class="ti tabler-cloud-download"></i> Mulai Sinkronisasi';
                        msg.textContent = '✗ Error: ' + err.message;
                        setTimeout(function() {
                            toast.classList.remove('show');
                        }, 5000);
                    });
            };

            // ── CHART ──
            var chartInstance = null;

            function loadChart() {
                var params = new URLSearchParams();
                if (histDateStart) params.set('date_start', histDateStart);
                if (histDateEnd) params.set('date_end', histDateEnd);

                fetch(CHRT + '?' + params.toString(), {
                        headers: {
                            Accept: 'application/json'
                        }
                    })
                    .then(function(r) {
                        return r.json();
                    })
                    .then(function(res) {
                        if (!res.success || !res.data.length) return;

                        var labels = [],
                            incData = [],
                            expData = [];
                        res.data.forEach(function(r) {
                            var d = new Date(r.date + 'T00:00:00');
                            labels.push(d.toLocaleDateString('id-ID', {
                                day: '2-digit',
                                month: 'short'
                            }));
                            incData.push(r.income);
                            expData.push(r.expense);
                        });

                        if (chartInstance) chartInstance.destroy();

                        chartInstance = new ApexCharts($('tranChart'), {
                            chart: {
                                type: 'area',
                                height: 190,
                                fontFamily: 'Inter, sans-serif',
                                toolbar: {
                                    show: false
                                },
                                zoom: {
                                    enabled: false
                                },
                            },
                            series: [{
                                    name: 'Pemasukan',
                                    data: incData
                                },
                                {
                                    name: 'Pengeluaran',
                                    data: expData
                                },
                            ],
                            colors: ['#16a34a', '#dc2626'],
                            fill: {
                                type: 'gradient',
                                gradient: {
                                    shadeIntensity: 1,
                                    opacityFrom: 0.3,
                                    opacityTo: 0.05,
                                    stops: [0, 95]
                                }
                            },
                            stroke: {
                                curve: 'smooth',
                                width: 2.5
                            },
                            dataLabels: {
                                enabled: false
                            },
                            xaxis: {
                                categories: labels,
                                labels: {
                                    style: {
                                        fontSize: '10px',
                                        colors: '#94a3b8'
                                    },
                                    rotate: 0,
                                    hideOverlappingLabels: true
                                },
                                axisBorder: {
                                    show: false
                                },
                                axisTicks: {
                                    show: false
                                },
                                tickAmount: 6,
                            },
                            yaxis: {
                                labels: {
                                    style: {
                                        fontSize: '10px',
                                        colors: '#94a3b8'
                                    },
                                    formatter: function(v) {
                                        return v >= 1000000 ? (v / 1000000).toFixed(1) + 'jt' : v >=
                                            1000 ? (v / 1000).toFixed(0) + 'rb' : v;
                                    },
                                },
                            },
                            grid: {
                                borderColor: '#f1f5f9',
                                strokeDashArray: 3,
                                padding: {
                                    left: 5,
                                    right: 5
                                }
                            },
                            tooltip: {
                                y: {
                                    formatter: function(v) {
                                        return 'Rp' + R(v);
                                    }
                                },
                                theme: 'light'
                            },
                            legend: {
                                show: true,
                                position: 'top',
                                horizontalAlign: 'right',
                                fontSize: '11px',
                                fontWeight: 600,
                                markers: {
                                    size: 4
                                }
                            },
                        });
                        chartInstance.render();
                    })
                    .catch(function(e) {
                        console.error('Chart error:', e);
                    });
            }

            // ── REFRESH ──
            window.refreshAll = function() {
                $('finTotal').innerHTML =
                    '<div class="spx-loading" style="padding:0.4rem;"><div class="spx-spinner"></div></div>';
                loadBal();
                initDateFilter();
                hOff = 0;
                loadHist();
                loadChart();
            };

            document.addEventListener('DOMContentLoaded', function() {
                loadBal();
                initDateFilter();
                loadHist();
                loadChart();
            });
        })();
    </script>
@endpush