@extends('template.desktop.app')

@section('title', 'Monitoring Bonus CS')

@push('styles')
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
    <style>
        :root {
            --cb-primary: #A52019;
            --cb-primary-soft: #fef2f1;
            --cb-success: #22c55e;
            --cb-warning: #f59e0b;
            --cb-danger: #ef4444;
            --cb-bg: #f8f9fb;
            --cb-surface: #ffffff;
            --cb-border: #e5e7eb;
            --cb-border-light: #f3f4f6;
            --cb-text: #111827;
            --cb-text-sec: #6b7280;
            --cb-text-muted: #9ca3af;
            --cb-radius: 12px;
            --cb-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
            --cb-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.07);
        }

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

        /* ─── Header ──────── */
        .cb-header {
            background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 30%, #b91c1c 60%, #dc2626 100%);
            border-radius: 16px;
            padding: 2rem 2.25rem;
            color: #fff;
            position: relative;
            overflow: hidden;
            margin-bottom: 1.5rem;
        }

        .cb-header::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -20%;
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
            pointer-events: none;
        }

        .cb-header::after {
            content: '';
            position: absolute;
            bottom: -60%;
            left: -10%;
            width: 300px;
            height: 300px;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
            pointer-events: none;
        }

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

        .cb-header p {
            color: rgba(255, 255, 255, 0.85);
            font-size: 0.82rem;
            margin: 4px 0 0;
        }

        .cb-header .btn-sync {
            background: rgba(255, 255, 255, 0.12);
            color: #fff;
            border: 1px solid rgba(255, 255, 255, 0.2);
            padding: 0.55rem 1.25rem;
            border-radius: 10px;
            font-weight: 700;
            font-size: 0.8rem;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            cursor: pointer;
            transition: all 0.15s;
        }

        .cb-header .btn-sync:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        .cb-header .btn-sync svg {
            width: 15px;
            height: 15px;
        }

        /* ─── Stat Cards ──────── */
        .cb-stats {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .cb-stats-sub {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        @media (max-width: 991px) {

            .cb-stats,
            .cb-stats-sub {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 575px) {

            .cb-stats,
            .cb-stats-sub {
                grid-template-columns: 1fr;
            }
        }

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

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

        .cb-stat-icon {
            width: 42px;
            height: 42px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .cb-stat-icon svg {
            width: 20px;
            height: 20px;
        }

        .cb-stat-val {
            font-size: 1.35rem;
            font-weight: 800;
            color: var(--cb-text);
            line-height: 1.2;
        }

        .cb-stat-val.sm {
            font-size: 1.05rem;
        }

        .cb-stat-lbl {
            font-size: 0.62rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: var(--cb-text-sec);
            margin-top: 2px;
        }

        /* ─── Chart ──────── */
        .cb-chart-card {
            background: var(--cb-surface);
            border: 1px solid var(--cb-border);
            border-radius: var(--cb-radius);
            padding: 1.25rem 1.5rem;
            margin-bottom: 1.5rem;
        }

        .cb-chart-card h6 {
            font-size: 0.82rem;
            font-weight: 700;
            color: var(--cb-text);
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 2px;
        }

        .cb-chart-card h6 svg {
            width: 15px;
            height: 15px;
            color: #e11d48;
        }

        .cb-chart-card .subtitle {
            font-size: 0.7rem;
            color: var(--cb-text-muted);
            margin-bottom: 12px;
        }

        /* ─── Filter Bar ──────── */
        .cb-filters {
            background: var(--cb-surface);
            border: 1px solid var(--cb-border);
            border-radius: var(--cb-radius);
            padding: 1rem 1.25rem;
            margin-bottom: 1rem;
            display: flex;
            flex-wrap: wrap;
            gap: 0.6rem;
            align-items: center;
        }

        .cb-filter-search {
            position: relative;
            flex: 1;
            min-width: 200px;
        }

        .cb-filter-search input {
            width: 100%;
            padding: 0.55rem 0.85rem 0.55rem 2.4rem;
            border: 1px solid var(--cb-border);
            border-radius: 10px;
            font-size: 0.8rem;
            font-weight: 500;
            background: var(--cb-bg);
            outline: none;
            transition: all 0.15s;
        }

        .cb-filter-search input:focus {
            border-color: var(--cb-primary);
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
            background: #fff;
        }

        .cb-filter-search svg {
            position: absolute;
            left: 0.75rem;
            top: 50%;
            transform: translateY(-50%);
            width: 16px;
            height: 16px;
            color: var(--cb-text-muted);
            pointer-events: none;
        }

        .cb-select {
            padding: 0.55rem 2rem 0.55rem 0.75rem;
            border: 1px solid var(--cb-border);
            border-radius: 10px;
            font-size: 0.78rem;
            font-weight: 600;
            color: var(--cb-text);
            background: var(--cb-bg) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") no-repeat right 0.5rem center/16px;
            appearance: none;
            outline: none;
            cursor: pointer;
            transition: all 0.15s;
            min-width: 140px;
        }

        .cb-select:focus {
            border-color: var(--cb-primary);
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
            background-color: #fff;
        }

        .cb-date-input {
            padding: 0.55rem 0.75rem;
            border: 1px solid var(--cb-border);
            border-radius: 10px;
            font-size: 0.78rem;
            font-weight: 500;
            background: var(--cb-bg);
            outline: none;
            transition: all 0.15s;
            width: 145px;
        }

        .cb-date-input:focus {
            border-color: var(--cb-primary);
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
            background-color: #fff;
        }

        .cb-filter-sep {
            width: 1px;
            height: 28px;
            background: var(--cb-border);
            flex-shrink: 0;
        }

        .cb-btn-refresh {
            width: 36px;
            height: 36px;
            border: 1px solid var(--cb-border);
            border-radius: 10px;
            background: var(--cb-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.15s;
            flex-shrink: 0;
        }

        .cb-btn-refresh:hover {
            background: var(--cb-primary-soft);
            border-color: var(--cb-primary);
        }

        .cb-btn-refresh svg {
            width: 15px;
            height: 15px;
            color: var(--cb-text-sec);
        }

        /* ─── Table ──────── */
        .cb-table-card {
            background: var(--cb-surface);
            border: 1px solid var(--cb-border);
            border-radius: var(--cb-radius);
            overflow: hidden;
        }

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

        .cb-table thead th {
            background: #f9fafb;
            padding: 0.7rem 0.85rem;
            font-size: 0.62rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: var(--cb-text-sec);
            border-bottom: 1px solid var(--cb-border);
            white-space: nowrap;
        }

        .cb-table tbody td {
            padding: 0.7rem 0.85rem;
            font-size: 0.78rem;
            color: var(--cb-text);
            border-bottom: 1px solid var(--cb-border-light);
            vertical-align: middle;
        }

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

        .cb-table tbody tr:hover {
            background: #fafbff;
        }

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

        /* ─── Badges ──────── */
        .cb-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 8px;
            border-radius: 6px;
            font-size: 0.6rem;
            font-weight: 700;
            white-space: nowrap;
        }

        .cb-badge svg {
            width: 12px;
            height: 12px;
        }

        .cb-badge-green {
            background: #dcfce7;
            color: #166534;
        }

        .cb-badge-yellow {
            background: #fef3c7;
            color: #92400e;
        }

        .cb-badge-red {
            background: #fee2e2;
            color: #991b1b;
        }

        .cb-badge-orange {
            background: #fff7ed;
            color: #9a3412;
        }

        .cb-badge-purple {
            background: #ede9fe;
            color: #5b21b6;
        }

        .cs-chip {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 8px;
            border-radius: 6px;
            font-size: 0.68rem;
            font-weight: 600;
            background: #ede9fe;
            color: #5b21b6;
        }

        .cs-chip svg {
            width: 12px;
            height: 12px;
        }

        /* ─── Pagination ──────── */
        .cb-pagination {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.85rem 1.25rem;
            border-top: 1px solid var(--cb-border-light);
            background: #fafbfc;
        }

        .cb-pagination .info {
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--cb-text-sec);
        }

        .cb-page-controls {
            display: flex;
            align-items: center;
            gap: 0.35rem;
        }

        .cb-page-btn {
            min-width: 32px;
            height: 32px;
            border: 1px solid var(--cb-border);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--cb-text-sec);
            background: var(--cb-surface);
            cursor: pointer;
            transition: all 0.15s;
            padding: 0 6px;
        }

        .cb-page-btn:hover {
            background: var(--cb-primary-soft);
            color: var(--cb-primary);
            border-color: var(--cb-primary);
        }

        .cb-page-btn.active {
            background: var(--cb-primary);
            color: #fff;
            border-color: var(--cb-primary);
        }

        .cb-page-btn:disabled,
        .cb-page-btn.disabled {
            opacity: 0.35;
            cursor: default;
            pointer-events: none;
        }

        .cb-page-btn svg {
            width: 14px;
            height: 14px;
        }

        .cb-page-dots {
            font-size: 0.75rem;
            color: var(--cb-text-muted);
            padding: 0 2px;
            user-select: none;
        }

        .cb-rows-select {
            padding: 0.35rem 1.6rem 0.35rem 0.5rem;
            border: 1px solid var(--cb-border);
            border-radius: 8px;
            font-size: 0.75rem;
            font-weight: 600;
            background: var(--cb-surface) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") no-repeat right 0.35rem center/14px;
            appearance: none;
            outline: none;
            cursor: pointer;
        }

        /* ─── Money ──────── */
        .money-plus {
            color: #16a34a;
            font-weight: 700;
        }

        .money-minus {
            color: #dc2626;
            font-weight: 700;
        }

        /* ─── Empty ──────── */
        .cb-empty {
            text-align: center;
            padding: 3.5rem 1.5rem;
        }

        .cb-empty svg {
            width: 48px;
            height: 48px;
            color: var(--cb-border);
            margin-bottom: 12px;
        }

        .cb-empty h6 {
            font-weight: 700;
            color: var(--cb-text-sec);
            font-size: 0.9rem;
        }

        .cb-empty p {
            color: var(--cb-text-muted);
            font-size: 0.78rem;
        }

        /* ─── Spin ──────── */
        @keyframes cb-spin {
            to {
                transform: rotate(360deg);
            }
        }

        .cb-spinning {
            animation: cb-spin 1s linear infinite;
        }

        /* ─── CS Target Progress ──────── */
        .cb-target-card {
            background: var(--cb-surface);
            border: 1px solid var(--cb-border);
            border-radius: var(--cb-radius);
            padding: 1.25rem 1.5rem;
            margin-bottom: 1.5rem;
            display: none;
        }

        .cb-target-card.active {
            display: block;
        }

        .cb-target-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 0.75rem;
        }

        .cb-target-title {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.85rem;
            font-weight: 700;
            color: var(--cb-text);
        }

        .cb-target-title svg {
            width: 18px;
            height: 18px;
        }

        .cb-target-stats {
            display: flex;
            align-items: center;
            gap: 1.5rem;
            margin-bottom: 0.75rem;
        }

        .cb-target-stat-item {
            text-align: center;
        }

        .cb-target-stat-val {
            font-size: 1.5rem;
            font-weight: 800;
            line-height: 1.2;
        }

        .cb-target-stat-lbl {
            font-size: 0.6rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: var(--cb-text-sec);
            margin-top: 2px;
        }

        .cb-progress-bar {
            height: 12px;
            background: #f3f4f6;
            border-radius: 6px;
            overflow: hidden;
            position: relative;
        }

        .cb-progress-fill {
            height: 100%;
            border-radius: 6px;
            transition: width 0.5s ease;
            background: linear-gradient(90deg, #ef4444, #f59e0b, #22c55e);
        }

        .cb-progress-fill.met {
            background: linear-gradient(90deg, #22c55e, #16a34a);
        }

        .cb-progress-pct {
            font-size: 0.85rem;
            font-weight: 800;
            margin-left: 0.75rem;
            white-space: nowrap;
        }
    </style>
@endpush

@section('content')
    <div class="cb-wrapper px-3 py-3 px-lg-4">

        {{-- Header --}}
        <header class="cb-header">
            <div class="d-flex flex-wrap justify-content-between align-items-center gap-3">
                <div class="d-flex align-items-center gap-3">
                    <div class="d-flex align-items-center justify-content-center rounded-3"
                        style="width:44px;height:44px;background:rgba(255,255,255,0.1);">
                        <i data-lucide="coins" style="width:22px;color:#fbbf24;"></i>
                    </div>
                    <div>
                        <h2>Monitoring Bonus CS</h2>
                        <p>Monitoring bonus CS dari order Everpro & Marketplace</p>
                    </div>
                </div>
                <button class="btn-sync" id="btn-sync" onclick="window.__syncBonus()">
                    <i data-lucide="refresh-cw"></i> Sync Bonus Pending
                </button>
            </div>
        </header>

        {{-- Chart --}}
        <div class="cb-chart-card">
            <h6><i data-lucide="trending-up"></i> <span id="chart-title">Tren Status Order</span></h6>
            <div class="subtitle" id="chart-subtitle">Perbandingan order selesai, return, bermasalah, dan dikirim</div>
            <div id="order-status-chart"></div>
        </div>

        {{-- Stat Cards Row 1: Financial --}}
        <div class="cb-stats">
            <div class="cb-stat">
                <div class="cb-stat-icon" style="background:var(--cb-primary-soft);color:var(--cb-primary);">
                    <i data-lucide="package-check"></i>
                </div>
                <div>
                    <div class="cb-stat-val" id="stat-total">0</div>
                    <div class="cb-stat-lbl">Total Order</div>
                </div>
            </div>
            <div class="cb-stat">
                <div class="cb-stat-icon" style="background:#dcfce7;color:#16a34a;">
                    <i data-lucide="banknote"></i>
                </div>
                <div>
                    <div class="cb-stat-val sm" id="stat-estimated">Rp 0</div>
                    <div class="cb-stat-lbl">Total Bonus</div>
                </div>
            </div>
            <div class="cb-stat">
                <div class="cb-stat-icon" style="background:#fee2e2;color:#dc2626;">
                    <i data-lucide="scissors"></i>
                </div>
                <div>
                    <div class="cb-stat-val sm" id="stat-deduction">Rp 0</div>
                    <div class="cb-stat-lbl">Potongan Retur</div>
                </div>
            </div>
            <div class="cb-stat">
                <div class="cb-stat-icon" style="background:#dbeafe;color:#2563eb;">
                    <i data-lucide="wallet"></i>
                </div>
                <div>
                    <div class="cb-stat-val sm" id="stat-net">Rp 0</div>
                    <div class="cb-stat-lbl">Bonus Bersih</div>
                </div>
            </div>
        </div>

        {{-- Stat Cards Row 2: Status Counts --}}
        <div class="cb-stats-sub">
            <div class="cb-stat">
                <div class="cb-stat-icon" style="background:#dcfce7;color:#16a34a;">
                    <i data-lucide="check-circle-2"></i>
                </div>
                <div>
                    <div class="cb-stat-val" id="stat-confirmed">0</div>
                    <div class="cb-stat-lbl">Confirmed</div>
                </div>
            </div>
            <div class="cb-stat">
                <div class="cb-stat-icon" style="background:#fef3c7;color:#d97706;">
                    <i data-lucide="clock"></i>
                </div>
                <div>
                    <div class="cb-stat-val" id="stat-pending">0</div>
                    <div class="cb-stat-lbl">Total Pending</div>
                </div>
            </div>
            <div class="cb-stat">
                <div class="cb-stat-icon" style="background:#d1fae5;color:#059669;">
                    <i data-lucide="package-check"></i>
                </div>
                <div>
                    <div class="cb-stat-val" id="stat-pending-delivered">0</div>
                    <div class="cb-stat-lbl">Pending Diterima</div>
                </div>
            </div>
            <div class="cb-stat">
                <div class="cb-stat-icon" style="background:#fff7ed;color:#c2410c;">
                    <i data-lucide="alert-triangle"></i>
                </div>
                <div>
                    <div class="cb-stat-val" id="stat-pending-no-input">0</div>
                    <div class="cb-stat-lbl">Pending Belum Input</div>
                </div>
            </div>
        </div>

        {{-- Stat Cards Row 3: Total Box & Total Sachet --}}
        <div class="cb-stats-sub" style="grid-template-columns: repeat(2, 1fr);">
            <div class="cb-stat">
                <div class="cb-stat-icon" style="background:#ede9fe;color:#7c3aed;">
                    <i data-lucide="box"></i>
                </div>
                <div>
                    <div class="cb-stat-val" id="stat-total-box">0</div>
                    <div class="cb-stat-lbl">Total Box (Periode Ini)</div>
                </div>
            </div>
            <div class="cb-stat">
                <div class="cb-stat-icon" style="background:#fce7f3;color:#db2777;">
                    <i data-lucide="package"></i>
                </div>
                <div>
                    <div class="cb-stat-val" id="stat-total-sachet">0</div>
                    <div class="cb-stat-lbl">Total Sachet (Periode Ini)</div>
                </div>
            </div>
        </div>

        {{-- CS Target Progress Card (hidden by default, shown when CS filter is active) --}}
        <div class="cb-target-card" id="cs-target-card">
            <div class="cb-target-header">
                <div class="cb-target-title">
                    <i data-lucide="target" style="color:var(--cb-primary);"></i>
                    <span id="cs-target-name">Target CS</span>
                </div>
                <div id="cs-target-badge"></div>
            </div>
            <div class="cb-target-stats">
                <div class="cb-target-stat-item">
                    <div class="cb-target-stat-val" style="color:#7c3aed;" id="cs-target-achieved">0</div>
                    <div class="cb-target-stat-lbl">Box Tercapai</div>
                </div>
                <div style="font-size:1.5rem;font-weight:300;color:var(--cb-border);">/</div>
                <div class="cb-target-stat-item">
                    <div class="cb-target-stat-val" style="color:var(--cb-text-sec);" id="cs-target-boxes">0</div>
                    <div class="cb-target-stat-lbl">Target Box</div>
                </div>
                <div class="cb-target-stat-item" style="margin-left: auto;">
                    <div class="cb-target-stat-val" style="color:#db2777;" id="cs-target-sachet">0</div>
                    <div class="cb-target-stat-lbl">Total Sachet</div>
                </div>
            </div>
            <div style="display:flex;align-items:center;">
                <div class="cb-progress-bar" style="flex:1;">
                    <div class="cb-progress-fill" id="cs-target-fill" style="width:0%;"></div>
                </div>
                <span class="cb-progress-pct" id="cs-target-pct">0%</span>
            </div>
        </div>

        {{-- Filter Bar --}}
        <div class="cb-filters">
            <div class="cb-filter-search">
                <i data-lucide="search"></i>
                <input type="text" id="filter-search" placeholder="Cari AWB, Order No, atau nama CS...">
            </div>
            <select id="filter-cs" class="cb-select">
                <option value="">Semua CS</option>
                @foreach ($customerServices as $cs)
                    <option value="{{ $cs->id }}">{{ $cs->name }}</option>
                @endforeach
            </select>
            <select id="filter-status" class="cb-select">
                <option value="">Semua Status Bonus</option>
                <option value="pending">Pending</option>
                <option value="confirmed">Confirmed</option>
                <option value="cancelled">Cancelled</option>
            </select>
            <select id="filter-shipment" class="cb-select">
                <option value="">Semua Status Order</option>
                <option value="completed">Completed</option>
                <option value="return">Return</option>
            </select>
            <select id="filter-input" class="cb-select">
                <option value="">Semua Status Input</option>
                <option value="belum_input">Belum Input</option>
                <option value="sudah_input">Sudah Input</option>
            </select>
            <div class="cb-filter-sep"></div>
            <input type="date" id="filter-start-date" class="cb-date-input">
            <span style="color:var(--cb-text-muted);font-size:0.75rem;font-weight:600;">s/d</span>
            <input type="date" id="filter-end-date" class="cb-date-input">
            <button class="cb-btn-refresh" onclick="window.__loadData(1)" title="Refresh Data">
                <i data-lucide="refresh-cw"></i>
            </button>
        </div>

        {{-- Table --}}
        <div class="cb-table-card">
            <div class="table-responsive">
                <table class="cb-table">
                    <thead>
                        <tr>
                            <th>Order</th>
                            <th>Client No</th>
                            <th>Penerima</th>
                            <th>Customer Service</th>
                            <th>Status Order</th>
                            <th class="text-end">Bonus Estimasi</th>
                            <th class="text-end">Bonus Final</th>
                            <th class="text-end">Potongan</th>
                            <th class="text-end">Bonus Bersih</th>
                            <th>Status</th>
                            <th>Tanggal</th>
                        </tr>
                    </thead>
                    <tbody id="bonus-table-body">
                        <tr>
                            <td colspan="11">
                                <div class="cb-empty">
                                    <div class="spinner-border text-primary spinner-border-sm"></div>
                                    <p class="mt-2 mb-0">Memuat data...</p>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            {{-- Pagination --}}
            <div class="cb-pagination">
                <div class="d-flex align-items-center gap-3">
                    <span class="info">Rows:</span>
                    <select class="cb-rows-select" id="rows-per-page">
                        <option value="20">20</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                    </select>
                    <span class="info" id="pagination-info">Menampilkan 0 dari 0</span>
                </div>
                <div class="cb-page-controls" id="pagination-container"></div>
            </div>
        </div>
    </div>

    {{-- Sync Result Modal --}}
    <div class="modal fade" id="syncResultModal" tabindex="-1">
        <div class="modal-dialog modal-lg modal-dialog-scrollable modal-dialog-centered">
            <div class="modal-content" style="border:none;border-radius:16px;overflow:hidden;">
                <div class="modal-header"
                    style="background:#f9fafb;border-bottom:1px solid #e5e7eb;padding:1.25rem 1.5rem;">
                    <h6 class="modal-title fw-bold" id="syncModalTitle"
                        style="font-size:0.9rem;display:flex;align-items:center;gap:8px;">
                        <i data-lucide="refresh-cw" style="width:16px;height:16px;"></i>
                        Hasil Sync Bonus
                    </h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body" style="padding:1.5rem;">
                    <div class="row g-2 mb-3" id="sync-summary"></div>
                    <div style="max-height:400px;overflow-y:auto;border:1px solid #e5e7eb;border-radius:10px;">
                        <table class="w-100" style="border-collapse:collapse;">
                            <thead>
                                <tr style="background:#f9fafb;position:sticky;top:0;z-index:1;">
                                    <th
                                        style="padding:8px 12px;font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#6b7280;border-bottom:1px solid #e5e7eb;">
                                        Order</th>
                                    <th
                                        style="padding:8px 12px;font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#6b7280;border-bottom:1px solid #e5e7eb;">
                                        Ref</th>
                                    <th
                                        style="padding:8px 12px;font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#6b7280;border-bottom:1px solid #e5e7eb;">
                                        CS</th>
                                    <th
                                        style="padding:8px 12px;font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#6b7280;border-bottom:1px solid #e5e7eb;">
                                        Tipe</th>
                                    <th
                                        style="padding:8px 12px;font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#6b7280;border-bottom:1px solid #e5e7eb;text-align:right;">
                                        Jumlah</th>
                                    <th
                                        style="padding:8px 12px;font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#6b7280;border-bottom:1px solid #e5e7eb;">
                                        Status</th>
                                    <th
                                        style="padding:8px 12px;font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#6b7280;border-bottom:1px solid #e5e7eb;">
                                        Keterangan</th>
                                </tr>
                            </thead>
                            <tbody id="sync-detail-body"></tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer" style="background:#f9fafb;border-top:1px solid #e5e7eb;padding:0.85rem 1.5rem;">
                    <button type="button" class="btn btn-sm btn-secondary rounded-pill px-4"
                        data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            lucide.createIcons();

            let currentPage = 1;
            let rowsPerPage = 20;
            let statusChart = null;

            const fmt = (n) => Number(n || 0).toLocaleString('id-ID');
            const returnStatuses = ['RETURN', 'RETURNED', 'RETURNED TO SENDER', 'IN PROCESS RETURN'];
            const completedStatuses = ['COMPLETED', 'DELIVERED'];

            // ─── CHART ──────────────────────────────
            function renderChart(chartData) {
                const options = {
                    series: [{
                            name: 'Selesai',
                            data: chartData.completed
                        },
                        {
                            name: 'Return',
                            data: chartData.return
                        },
                        {
                            name: 'Bermasalah',
                            data: chartData.problematic
                        },
                        {
                            name: 'Dikirim',
                            data: chartData.shipping
                        },
                    ],
                    chart: {
                        type: 'area',
                        height: 260,
                        fontFamily: 'Inter, sans-serif',
                        toolbar: {
                            show: false
                        },
                        zoom: {
                            enabled: false
                        },
                    },
                    colors: ['#22c55e', '#ef4444', '#f59e0b', '#6366f1'],
                    stroke: {
                        curve: 'smooth',
                        width: 2.5
                    },
                    fill: {
                        type: 'gradient',
                        gradient: {
                            shadeIntensity: 1,
                            opacityFrom: 0.2,
                            opacityTo: 0.03,
                            stops: [0, 90, 100]
                        },
                    },
                    dataLabels: {
                        enabled: false
                    },
                    xaxis: {
                        categories: chartData.dates,
                        labels: {
                            style: {
                                fontSize: '10px',
                                colors: '#9ca3af'
                            },
                            rotate: -45,
                            rotateAlways: false
                        },
                        axisBorder: {
                            show: false
                        },
                        axisTicks: {
                            show: false
                        },
                    },
                    yaxis: {
                        labels: {
                            style: {
                                fontSize: '10px',
                                colors: '#9ca3af'
                            },
                            formatter: (v) => Math.round(v)
                        },
                    },
                    grid: {
                        borderColor: '#f3f4f6',
                        strokeDashArray: 3
                    },
                    legend: {
                        position: 'top',
                        horizontalAlign: 'right',
                        fontSize: '11px',
                        fontWeight: 600,
                        markers: {
                            width: 8,
                            height: 8,
                            radius: 4
                        },
                        itemMargin: {
                            horizontal: 10
                        },
                    },
                    tooltip: {
                        y: {
                            formatter: (v) => fmt(v) + ' order'
                        }
                    },
                };
                if (statusChart) {
                    statusChart.destroy();
                    statusChart = null;
                }
                statusChart = new ApexCharts(document.getElementById('order-status-chart'), options);
                statusChart.render();
            }

            // ─── LOAD DATA ─────────────────────────
            function loadData(page = 1) {
                currentPage = page;
                const params = new URLSearchParams({
                    page: page,
                    limit: rowsPerPage,
                    search: document.getElementById('filter-search').value,
                    customer_service_id: document.getElementById('filter-cs').value,
                    status: document.getElementById('filter-status').value,
                    shipment_status: document.getElementById('filter-shipment').value,
                    input_status: document.getElementById('filter-input').value,
                    start_date: document.getElementById('filter-start-date').value,
                    end_date: document.getElementById('filter-end-date').value,
                });
                for (const [k, v] of [...params]) {
                    if (!v) params.delete(k);
                }

                const tbody = document.getElementById('bonus-table-body');
                tbody.innerHTML =
                    `<tr><td colspan="11"><div class="cb-empty"><div class="spinner-border text-primary spinner-border-sm"></div><p class="mt-2 mb-0">Memuat data...</p></div></td></tr>`;

                fetch(`{{ route('checking.cs-bonus.data') }}?${params}`)
                    .then(r => r.json())
                    .then(res => {
                        if (!res.success) {
                            renderEmpty('Gagal memuat data');
                            return;
                        }

                        // Stats
                        const s = res.stats;
                        document.getElementById('stat-total').textContent = fmt(s.total_orders);
                        document.getElementById('stat-estimated').textContent = 'Rp ' + fmt(s
                            .total_estimated_bonus);
                        document.getElementById('stat-deduction').textContent = 'Rp ' + fmt(s
                            .total_return_deduction);
                        document.getElementById('stat-net').textContent = 'Rp ' + fmt(s.total_net_bonus);
                        document.getElementById('stat-confirmed').textContent = fmt(s.confirmed);
                        document.getElementById('stat-pending').textContent = fmt(s.pending);
                        document.getElementById('stat-pending-delivered').textContent = fmt(s
                            .pending_delivered);
                        document.getElementById('stat-pending-no-input').textContent = fmt(s.pending_no_input);
                        document.getElementById('stat-total-box').textContent = fmt(s.total_box);
                        document.getElementById('stat-total-sachet').textContent = fmt(s.total_sachet);

                        // CS Target Progress Card
                        const targetCard = document.getElementById('cs-target-card');
                        if (res.cs_target_info) {
                            const t = res.cs_target_info;
                            targetCard.classList.add('active');
                            document.getElementById('cs-target-name').textContent = 'Target: ' + t.cs_name;
                            document.getElementById('cs-target-achieved').textContent = fmt(t.total_box);
                            document.getElementById('cs-target-boxes').textContent = fmt(t.target_boxes);
                            document.getElementById('cs-target-sachet').textContent = fmt(t.total_sachet);

                            const pct = Math.min(t.percentage, 100);
                            const fill = document.getElementById('cs-target-fill');
                            fill.style.width = pct + '%';
                            fill.className = 'cb-progress-fill' + (t.target_met ? ' met' : '');
                            document.getElementById('cs-target-pct').textContent = t.percentage + '%';
                            document.getElementById('cs-target-pct').style.color = t.target_met ? '#16a34a' : (t
                                .percentage >= 50 ? '#f59e0b' : '#ef4444');

                            document.getElementById('cs-target-badge').innerHTML = t.target_met ?
                                '<span class="cb-badge cb-badge-green"><i data-lucide="check-circle-2" style="width:12px;height:12px;"></i> Target Tercapai</span>' :
                                '<span class="cb-badge cb-badge-red"><i data-lucide="alert-triangle" style="width:12px;height:12px;"></i> Belum Tercapai (' +
                                fmt(t.target_boxes - t.total_box) + ' box lagi)</span>';
                            lucide.createIcons();
                        } else {
                            targetCard.classList.remove('active');
                        }

                        // Chart
                        if (res.chart_data) {
                            renderChart(res.chart_data);
                            const dates = res.chart_data.dates;
                            if (dates && dates.length > 0) {
                                document.getElementById('chart-title').textContent =
                                    'Tren Status Order (' + dates[0] + ' – ' + dates[dates.length - 1] + ')';
                            }
                        }

                        // Table
                        const data = res.data;
                        if (!data || !data.data || data.data.length === 0) {
                            renderEmpty('Belum ada data bonus');
                            document.getElementById('pagination-container').innerHTML = '';
                            document.getElementById('pagination-info').textContent = 'Menampilkan 0 dari 0';
                            return;
                        }

                        let html = '';
                        data.data.forEach(b => {
                            const order = b.order;
                            const receiver = order?.receiver;
                            const cs = b.customer_service;
                            const shipment = order?.shipment;
                            const shipmentStatus = shipment?.status_name || null;
                            const shipmentStatusId = shipment?.status_id || null;
                            const clientOrderNo = order?.client_order_no || '-';
                            const isReturn = shipmentStatus && returnStatuses.includes(shipmentStatus);
                            const targetMet = b.target_met === true;

                            // Tampilkan nominal bonus yg sebenarnya (tidak tergantung target)
                            const displayEstimated = b.estimated_bonus || 0;
                            const displayFinal = b.final_bonus || 0;
                            const actualDeduction = b.return_deduction || 0;
                            const netBonus = (b.estimated_bonus || 0) + (b.performance_bonus || 0) - (b
                                .return_deduction || 0) - (b.performance_deduction || 0);

                            const targetBadge = targetMet ?
                                `<span class="cb-badge cb-badge-green" style="margin-top:3px;"><i data-lucide="check" style="width:10px;height:10px;"></i> Target Tercapai</span>` :
                                (b.target_boxes > 0 ?
                                    `<span class="cb-badge cb-badge-red" style="margin-top:3px;"><i data-lucide="x" style="width:10px;height:10px;"></i> Belum Target (${fmt(b.cs_total_box || 0)}/${fmt(b.target_boxes || 0)} box)</span>` :
                                    '');

                            html += `<tr>
                                <td>
                                    <div class="fw-bold" style="font-size:0.82rem;">#${b.order_id}</div>
                                    <div style="font-size:0.65rem;color:var(--cb-text-muted);">${order?.shipment_order_no || '-'}</div>
                                </td>
                                <td><code style="font-size:0.68rem;background:#f3f4f6;padding:2px 6px;border-radius:4px;">${clientOrderNo}</code></td>
                                <td>
                                    <div class="fw-semibold" style="font-size:0.78rem;">${receiver?.name || '-'}</div>
                                    <div style="font-size:0.65rem;color:var(--cb-text-muted);">${receiver?.city || ''}</div>
                                </td>
                                <td>
                                    <div><span class="cs-chip"><i data-lucide="user" style="width:12px;height:12px;"></i> ${cs?.name || '-'}</span></div>
                                    <div>${targetBadge}</div>
                                </td>
                                <td>${renderShipmentBadge(shipmentStatus, shipmentStatusId)}</td>
                                <td class="text-end money-plus">Rp ${fmt(displayEstimated)}</td>
                                <td class="text-end money-plus">Rp ${fmt(displayFinal)}</td>
                                <td class="text-end"><span class="money-minus">-Rp ${fmt(actualDeduction)}</span></td>
                                <td class="text-end"><span class="${netBonus >= 0 ? 'money-plus' : 'money-minus'}">Rp ${fmt(netBonus)}</span></td>
                                <td>${renderStatusBadge(b.status, isReturn)}</td>
                                <td><span style="font-size:0.68rem;color:var(--cb-text-muted);">${formatDate(b.created_at)}</span></td>
                            </tr>`;
                        });

                        document.getElementById('bonus-table-body').innerHTML = html;
                        lucide.createIcons();
                        renderPagination(data);
                    })
                    .catch(err => {
                        console.error(err);
                        renderEmpty('Error: ' + err.message);
                    });
            }

            function renderEmpty(msg) {
                document.getElementById('bonus-table-body').innerHTML = `
                    <tr><td colspan="11">
                        <div class="cb-empty">
                            <i data-lucide="inbox"></i>
                            <h6>${msg}</h6>
                            <p>Data bonus CS akan muncul di sini.</p>
                        </div>
                    </td></tr>`;
                lucide.createIcons();
            }

            function renderShipmentBadge(status, statusId) {
                if (!statusId) {
                    return `<span class="cb-badge cb-badge-orange"><i data-lucide="alert-triangle" style="width:12px;height:12px;"></i> Belum Input</span>`;
                }
                if (!status) {
                    return `<span class="cb-badge cb-badge-yellow"><i data-lucide="help-circle" style="width:12px;height:12px;"></i> Belum Ada</span>`;
                }
                if (completedStatuses.includes(status)) {
                    return `<span class="cb-badge cb-badge-green"><i data-lucide="check-circle-2" style="width:12px;height:12px;"></i> ${status}</span>`;
                }
                if (returnStatuses.includes(status)) {
                    return `<span class="cb-badge cb-badge-red"><i data-lucide="undo-2" style="width:12px;height:12px;"></i> ${status}</span>`;
                }
                return `<span class="cb-badge cb-badge-yellow">${status}</span>`;
            }

            function renderStatusBadge(status, isReturn = false) {
                if (status === 'confirmed') {
                    return isReturn ?
                        `<span class="cb-badge cb-badge-red"><i data-lucide="scissors" style="width:12px;height:12px;"></i> Potongan Confirmed</span>` :
                        `<span class="cb-badge cb-badge-green"><i data-lucide="check-circle-2" style="width:12px;height:12px;"></i> Bonus Confirmed</span>`;
                }
                if (status === 'pending') {
                    return isReturn ?
                        `<span class="cb-badge cb-badge-orange"><i data-lucide="clock" style="width:12px;height:12px;"></i> Pending Potongan</span>` :
                        `<span class="cb-badge cb-badge-yellow"><i data-lucide="clock" style="width:12px;height:12px;"></i> Pending Bonus</span>`;
                }
                if (status === 'cancelled') {
                    return `<span class="cb-badge cb-badge-red"><i data-lucide="x-circle" style="width:12px;height:12px;"></i> Cancelled</span>`;
                }
                return `<span class="cb-badge cb-badge-yellow">${status}</span>`;
            }

            function renderPagination(data) {
                document.getElementById('pagination-info').textContent =
                    `Menampilkan ${data.from || 0}–${data.to || 0} dari ${data.total}`;

                const c = data.current_page;
                const l = data.last_page;
                let html = '';

                // Prev
                html +=
                    `<button class="cb-page-btn ${c <= 1 ? 'disabled' : ''}" onclick="window.__loadData(${c - 1})"><i data-lucide="chevron-left"></i></button>`;

                // Page numbers
                const pages = [];
                if (l <= 7) {
                    for (let i = 1; i <= l; i++) pages.push(i);
                } else {
                    pages.push(1);
                    if (c > 3) pages.push('...');
                    for (let i = Math.max(2, c - 1); i <= Math.min(l - 1, c + 1); i++) pages.push(i);
                    if (c < l - 2) pages.push('...');
                    pages.push(l);
                }

                pages.forEach(p => {
                    if (p === '...') {
                        html += `<span class="cb-page-dots">…</span>`;
                    } else {
                        html +=
                            `<button class="cb-page-btn ${p === c ? 'active' : ''}" onclick="window.__loadData(${p})">${p}</button>`;
                    }
                });

                // Next
                html +=
                    `<button class="cb-page-btn ${c >= l ? 'disabled' : ''}" onclick="window.__loadData(${c + 1})"><i data-lucide="chevron-right"></i></button>`;

                document.getElementById('pagination-container').innerHTML = html;
                lucide.createIcons();
            }

            function formatDate(dateStr) {
                if (!dateStr) return '-';
                return new Date(dateStr).toLocaleDateString('id-ID', {
                    day: '2-digit',
                    month: 'short',
                    year: 'numeric'
                });
            }

            // ─── FILTERS ─────────────────────────────
            let debounceTimer;
            document.getElementById('filter-search').addEventListener('input', () => {
                clearTimeout(debounceTimer);
                debounceTimer = setTimeout(() => loadData(1), 400);
            });
            ['filter-cs', 'filter-status', 'filter-shipment', 'filter-input', 'filter-start-date',
                'filter-end-date'
            ].forEach(id => {
                document.getElementById(id).addEventListener('change', () => loadData(1));
            });
            document.getElementById('rows-per-page').addEventListener('change', function() {
                rowsPerPage = parseInt(this.value);
                loadData(1);
            });

            // Expose
            window.__loadData = loadData;

            // ─── SYNC BONUS ───────────────────────────
            window.__syncBonus = function() {
                const btn = document.getElementById('btn-sync');
                const origHtml = btn.innerHTML;
                btn.disabled = true;
                btn.innerHTML =
                    '<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="cb-spinning"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg> Proses sync...';

                const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');

                fetch(`{{ route('checking.cs-bonus.sync') }}`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': csrfToken
                        },
                    })
                    .then(r => r.json())
                    .then(res => {
                        btn.disabled = false;
                        btn.innerHTML = origHtml;
                        lucide.createIcons();
                        if (res.success) {
                            showSyncModal(res);
                            loadData(1);
                        } else {
                            showSyncModalError(res.message || 'Terjadi kesalahan', res.error);
                        }
                    })
                    .catch(err => {
                        btn.disabled = false;
                        btn.innerHTML = origHtml;
                        lucide.createIcons();
                        showSyncModalError('Network Error', err.message);
                    });
            };

            function showSyncModal(res) {
                const details = res.details || [];
                const completedCount = details.filter(d => d.type === 'completed').length;
                const returnCount = details.filter(d => d.type === 'return').length;
                const failedCount = details.filter(d => d.status === 'failed').length;

                document.getElementById('syncModalTitle').innerHTML = res.synced > 0 ?
                    '<i data-lucide="check-circle-2" style="width:16px;height:16px;color:#22c55e;"></i> Sync Berhasil' :
                    '<i data-lucide="info" style="width:16px;height:16px;color:#6366f1;"></i> Sudah Sinkron';

                document.getElementById('sync-summary').innerHTML = `
                    <div class="col-3"><div style="background:#f0fdf4;border-radius:10px;padding:12px;text-align:center;">
                        <div style="font-size:1.2rem;font-weight:800;color:#16a34a;">${res.synced}</div>
                        <div style="font-size:0.55rem;font-weight:700;color:#4ade80;text-transform:uppercase;letter-spacing:0.04em;">Synced</div>
                    </div></div>
                    <div class="col-3"><div style="background:#eff6ff;border-radius:10px;padding:12px;text-align:center;">
                        <div style="font-size:1.2rem;font-weight:800;color:#2563eb;">${completedCount}</div>
                        <div style="font-size:0.55rem;font-weight:700;color:#60a5fa;text-transform:uppercase;letter-spacing:0.04em;">Completed</div>
                    </div></div>
                    <div class="col-3"><div style="background:#fff7ed;border-radius:10px;padding:12px;text-align:center;">
                        <div style="font-size:1.2rem;font-weight:800;color:#ea580c;">${returnCount}</div>
                        <div style="font-size:0.55rem;font-weight:700;color:#fb923c;text-transform:uppercase;letter-spacing:0.04em;">Return</div>
                    </div></div>
                    <div class="col-3"><div style="background:${failedCount > 0 ? '#fef2f2' : '#f9fafb'};border-radius:10px;padding:12px;text-align:center;">
                        <div style="font-size:1.2rem;font-weight:800;color:${failedCount > 0 ? '#dc2626' : '#9ca3af'};">${failedCount}</div>
                        <div style="font-size:0.55rem;font-weight:700;color:${failedCount > 0 ? '#f87171' : '#d1d5db'};text-transform:uppercase;letter-spacing:0.04em;">Gagal</div>
                    </div></div>`;

                let rows = '';
                if (details.length === 0) {
                    rows =
                        '<tr><td colspan="7" style="padding:2rem;text-align:center;color:#9ca3af;font-size:0.78rem;">Tidak ada data yang diproses</td></tr>';
                } else {
                    details.forEach(d => {
                        const isOk = d.status === 'confirmed';
                        const typeBadge = d.type === 'completed' ?
                            '<span class="cb-badge cb-badge-green">COMPLETED</span>' :
                            d.type === 'return' ?
                            '<span class="cb-badge cb-badge-red">RETURN</span>' :
                            '<span class="cb-badge" style="background:#f3f4f6;color:#6b7280;">-</span>';
                        const statusBadge = isOk ?
                            '<span class="cb-badge cb-badge-green">✓ OK</span>' :
                            '<span class="cb-badge cb-badge-red">✗ GAGAL</span>';
                        const amountStr = d.amount ? (d.type === 'return' ? '-' : '+') + 'Rp ' + fmt(d
                            .amount) : '-';
                        const amountColor = d.type === 'return' ? '#dc2626' : '#16a34a';

                        rows += `<tr style="border-bottom:1px solid #f3f4f6;">
                            <td style="padding:8px 12px;font-size:0.78rem;font-weight:700;">#${d.order_id}</td>
                            <td style="padding:8px 12px;font-size:0.7rem;color:#6b7280;">${d.ref || '-'}</td>
                            <td style="padding:8px 12px;font-size:0.78rem;">${d.cs || '-'}</td>
                            <td style="padding:8px 12px;">${typeBadge}</td>
                            <td style="padding:8px 12px;font-size:0.78rem;font-weight:700;color:${amountColor};text-align:right;">${amountStr}</td>
                            <td style="padding:8px 12px;">${statusBadge}</td>
                            <td style="padding:8px 12px;font-size:0.7rem;color:#ef4444;">${d.reason || ''}</td>
                        </tr>`;
                    });
                }
                document.getElementById('sync-detail-body').innerHTML = rows;
                lucide.createIcons();
                new bootstrap.Modal(document.getElementById('syncResultModal')).show();
            }

            function showSyncModalError(title, detail) {
                document.getElementById('syncModalTitle').innerHTML =
                    '<i data-lucide="x-circle" style="width:16px;height:16px;color:#dc2626;"></i> Sync Gagal';
                document.getElementById('sync-summary').innerHTML = `
                    <div class="col-12"><div style="background:#fef2f2;border-radius:10px;padding:1rem;">
                        <div style="font-weight:700;color:#dc2626;font-size:0.85rem;margin-bottom:4px;">${title}</div>
                        <div style="font-size:0.72rem;color:#991b1b;font-family:monospace;white-space:pre-wrap;">${detail || ''}</div>
                    </div></div>`;
                document.getElementById('sync-detail-body').innerHTML = '';
                lucide.createIcons();
                new bootstrap.Modal(document.getElementById('syncResultModal')).show();
            }

            // Init
            loadData(1);
        });
    </script>
@endpush