@extends('layouts.app')

@section('title', 'Analytics Dashboard — PEL RU-APP')

@push('styles')
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
{{-- DataTables CSS --}}
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/dataTables.bootstrap5.min.css">
<style>
    /* ── Design Tokens ─────────────────────────────────────────── */
    :root {
        --bg:          #f8f9fa;
        --surface:     #ffffff;
        --surface-2:   #f1f3f5;
        --border:      rgba(0,0,0,0.08);
        --text:        #1f2937;
        --text-muted:  #6b7280;
        --accent-blue: #2787F5;
        --accent-red:  #FF6340;
        --accent-green:#10B981;
        --accent-amber:#F59E0B;
        --accent-violet:#8B5CF6;
        --radius:      14px;
        --shadow:      0 4px 20px rgba(0,0,0,0.05);
    }

    body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); }

    /* ── Dashboard Header ──────────────────────────────────────── */
    .dash-header {
        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 50%, #f1f3f5 100%);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 24px 28px;
        margin-bottom: 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-shadow: var(--shadow);
        position: relative;
        overflow: hidden;
    }
    .dash-header::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at top left, rgba(39,135,245,0.08) 0%, transparent 60%);
        pointer-events: none;
    }
    .dash-header-title {
        font-size: 1.5rem;
        font-weight: 700;
        background: linear-gradient(90deg, #1f2937 0%, #4b5563 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .dash-header-sub { font-size: 0.82rem; color: var(--text-muted); margin-top: 3px; }
    .btn-refresh {
        background: rgba(39,135,245,0.15);
        border: 1px solid rgba(39,135,245,0.4);
        color: var(--accent-blue);
        border-radius: 8px;
        padding: 8px 18px;
        font-size: 0.82rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.25s;
        display: flex; align-items: center; gap: 6px;
    }
    .btn-refresh:hover {
        background: var(--accent-blue);
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 4px 16px rgba(39,135,245,0.4);
    }
    .btn-refresh.spinning .bi { animation: spin 0.8s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ── KPI Cards ─────────────────────────────────────────────── */
    .kpi-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 20px 22px;
        display: flex;
        align-items: center;
        gap: 16px;
        box-shadow: var(--shadow);
        transition: transform 0.25s, box-shadow 0.25s;
        position: relative;
        overflow: hidden;
    }
    .kpi-card:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(0,0,0,0.08); }
    .kpi-card::after {
        content: '';
        position: absolute;
        bottom: 0; left: 0; right: 0;
        height: 3px;
        border-radius: 0 0 var(--radius) var(--radius);
    }
    .kpi-card.blue::after  { background: var(--accent-blue); }
    .kpi-card.red::after   { background: var(--accent-red); }
    .kpi-card.green::after { background: var(--accent-green); }
    .kpi-card.amber::after { background: var(--accent-amber); }

    .kpi-icon {
        width: 52px; height: 52px;
        border-radius: 12px;
        display: flex; align-items: center; justify-content: center;
        font-size: 22px;
        flex-shrink: 0;
    }
    .kpi-icon.blue   { background: rgba(39,135,245,0.15); color: var(--accent-blue); }
    .kpi-icon.red    { background: rgba(255,99,64,0.15);  color: var(--accent-red); }
    .kpi-icon.green  { background: rgba(16,185,129,0.15); color: var(--accent-green); }
    .kpi-icon.amber  { background: rgba(245,158,11,0.15); color: var(--accent-amber); }

    .kpi-val {
        font-size: 1.8rem;
        font-weight: 700;
        line-height: 1;
        letter-spacing: -0.5px;
    }
    .kpi-label { font-size: 0.75rem; color: var(--text-muted); font-weight: 500; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.6px; }

    /* ── Chart Cards ────────────────────────────────────────────── */
    .chart-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 20px;
        box-shadow: var(--shadow);
        transition: transform 0.25s, box-shadow 0.25s;
        height: 100%;
    }
    .chart-card:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,0.08); }
    .chart-card-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--border);
    }
    .chart-icon {
        width: 32px; height: 32px;
        border-radius: 8px;
        background: rgba(39,135,245,0.12);
        color: var(--accent-blue);
        display: flex; align-items: center; justify-content: center;
        font-size: 15px;
        flex-shrink: 0;
    }
    .chart-title { font-size: 0.85rem; font-weight: 600; color: var(--text); }

    /* ── Skeleton Loader ────────────────────────────────────────── */
    .skeleton-loader { padding: 8px 0; }
    .skeleton-bar {
        background: linear-gradient(90deg, var(--surface-2) 25%, rgba(0,0,0,0.05) 50%, var(--surface-2) 75%);
        background-size: 400% 100%;
        animation: shimmer 1.5s infinite;
        border-radius: 6px;
        width: 100%;
    }
    @keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

    /* ── DataTable Styling ──────────────────────────────────────── */
    #service-center-table-wrapper .table-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 20px;
        box-shadow: var(--shadow);
        margin-bottom: 24px;
    }
    #sc-table { width: 100% !important; }
    #sc-table thead th {
        background: var(--surface-2);
        color: var(--text-muted);
        font-size: 0.73rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-color: var(--border);
        padding: 10px 12px;
        white-space: nowrap;
    }
    #sc-table tbody tr {
        background: var(--surface);
        border-color: var(--border);
        transition: background 0.15s;
    }
    #sc-table tbody tr:hover { background: var(--surface-2); }
    #sc-table tbody td {
        color: var(--text);
        font-size: 0.82rem;
        border-color: var(--border);
        padding: 10px 12px;
        vertical-align: middle;
    }
    .dataTables_wrapper .dataTables_length select,
    .dataTables_wrapper .dataTables_filter input {
        background: var(--surface-2) !important;
        border: 1px solid var(--border) !important;
        color: var(--text) !important;
        border-radius: 6px;
        padding: 4px 8px;
    }
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_length label,
    .dataTables_wrapper .dataTables_filter label { color: var(--text-muted); font-size: 0.8rem; }
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        background: var(--surface-2) !important;
        border: 1px solid var(--border) !important;
        color: var(--text) !important;
        border-radius: 6px !important;
        margin: 0 2px;
        padding: 4px 10px !important;
        font-size: 0.8rem;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        background: var(--accent-blue) !important;
        color: #fff !important;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button.current {
        background: var(--accent-blue) !important;
        color: #fff !important;
    }
    .badge-status {
        font-size: 0.7rem; font-weight: 500;
        padding: 3px 8px;
        border-radius: 20px;
        display: inline-block;
    }
    .badge-closed    { background: rgba(16,185,129,0.15); color: #10B981; }
    .badge-process   { background: rgba(39,135,245,0.15); color: #2787F5; }
    .badge-canceled  { background: rgba(255,99,64,0.15);  color: #FF6340; }

    /* ── Misc ───────────────────────────────────────────────────── */
    .section-label {
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--text-muted);
        margin-bottom: 14px;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .section-label::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--border);
    }
    .last-updated { font-size: 0.72rem; color: var(--text-muted); }

    /* ── Drilldown Modal ─────────────────────────────────────────── */
    .detail-modal-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.45);
        backdrop-filter: blur(2px);
        z-index: 1100;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }
    .detail-modal-backdrop.show { display: flex; }
    .detail-modal {
        width: min(1180px, 96vw);
        max-height: 88vh;
        background: #fff;
        border-radius: 14px;
        border: 1px solid var(--border);
        box-shadow: 0 18px 60px rgba(15, 23, 42, 0.25);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    .detail-modal-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        padding: 16px 18px;
        border-bottom: 1px solid var(--border);
        background: linear-gradient(90deg, rgba(39,135,245,0.08), rgba(255,255,255,1));
    }
    .detail-title { font-size: 0.98rem; font-weight: 700; color: var(--text); }
    .detail-subtitle { font-size: 0.78rem; color: var(--text-muted); margin-top: 3px; }
    .detail-close {
        border: 1px solid var(--border);
        background: #fff;
        border-radius: 8px;
        height: 34px;
        width: 34px;
        color: #6b7280;
    }
    .detail-close:hover { background: #f3f4f6; }
    .detail-modal-body {
        padding: 14px 18px 18px;
        overflow: auto;
    }
    .detail-summary {
        font-size: 0.78rem;
        color: var(--text-muted);
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }
    .detail-chip {
        background: #eff6ff;
        color: #1d4ed8;
        border: 1px solid #bfdbfe;
        border-radius: 999px;
        padding: 2px 10px;
        font-size: 0.72rem;
        font-weight: 600;
    }
    .detail-table-wrap { border: 1px solid var(--border); border-radius: 10px; overflow: auto; }
    .detail-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        font-size: 0.78rem;
    }
    .detail-table thead th {
        position: sticky;
        top: 0;
        background: #f8fafc;
        z-index: 1;
        color: #475569;
        text-transform: uppercase;
        letter-spacing: .3px;
        font-size: .68rem;
        padding: 9px 10px;
        border-bottom: 1px solid var(--border);
        white-space: nowrap;
    }
    .detail-table tbody td {
        padding: 9px 10px;
        border-bottom: 1px solid #eef2f7;
        color: #374151;
        white-space: nowrap;
        max-width: 280px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .detail-table tbody tr:hover { background: #f9fbff; }
    .detail-loading {
        text-align: center;
        color: #6b7280;
        padding: 28px;
        font-size: .82rem;
    }
    .detail-empty {
        text-align: center;
        color: #6b7280;
        padding: 30px;
        font-size: .82rem;
    }
</style>
@endpush

@section('content')

{{-- ── HEADER ───────────────────────────────────────────────────────── --}}
<div class="dash-header">
    <div>
        <div class="dash-header-title">
            <i class="bi bi-bar-chart-line me-2"></i>Analytics Dashboard
        </div>
        <div class="dash-header-sub">PEL Escalation & RU Cases — Real-time overview</div>
    </div>
    <div class="d-flex align-items-center gap-3">
        <span class="last-updated">Last updated: <span id="lastUpdatedTime">—</span></span>
        <button class="btn-refresh" id="refreshAllBtn" onclick="refreshAll()">
            <i class="bi bi-arrow-clockwise"></i> Refresh
        </button>
    </div>
</div>

{{-- ── KPI SUMMARY CARDS ────────────────────────────────────────────── --}}
<div class="section-label">Key Metrics</div>
<div class="row g-3 mb-4" id="kpi-row">
    <div class="col-6 col-md-3">
        <div class="kpi-card blue">
            <div class="kpi-icon blue"><i class="bi bi-ticket-perforated"></i></div>
            <div>
                <div class="kpi-val" id="kpi-total">
                    <span class="skeleton-bar d-inline-block" style="width:60px;height:28px;"></span>
                </div>
                <div class="kpi-label">Total Cases</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="kpi-card red">
            <div class="kpi-icon red"><i class="bi bi-hourglass-split"></i></div>
            <div>
                <div class="kpi-val" id="kpi-inprocess">
                    <span class="skeleton-bar d-inline-block" style="width:60px;height:28px;"></span>
                </div>
                <div class="kpi-label">In Process</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="kpi-card green">
            <div class="kpi-icon green"><i class="bi bi-check-circle"></i></div>
            <div>
                <div class="kpi-val" id="kpi-closed">
                    <span class="skeleton-bar d-inline-block" style="width:60px;height:28px;"></span>
                </div>
                <div class="kpi-label">Closed</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="kpi-card amber">
            <div class="kpi-icon amber"><i class="bi bi-exclamation-lg"></i></div>
            <div>
                <div class="kpi-val" id="kpi-resolved">
                    <span class="skeleton-bar d-inline-block" style="width:60px;height:28px;"></span>
                </div>
                <div class="kpi-label">Resolved</div>
            </div>
        </div>
    </div>
</div>

{{-- ── SERVICE CENTER TABLE ─────────────────────────────────────────── --}}
<div class="section-label">Service Center Summary</div>
<div id="service-center-table-wrapper">
    <div class="table-card">
        <div class="chart-card-header mb-3">
            <div class="chart-icon"><i class="bi bi-table"></i></div>
            <span class="chart-title">Service Center — Cases Breakdown</span>
        </div>
        <table id="sc-table" class="table table-hover align-middle" style="width:100%">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Service Center</th>
                    <th>Zone</th>
                    <th>Total</th>
                    <th>Closed</th>
                    <th>In Process</th>
                    <th>Canceled</th>
                    <th>Open</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

{{-- ── ROW 1: Nationwide · In-Process Reasons · Zone-Wise ─────────── --}}
<div class="section-label">Status Distribution</div>
<div class="row g-3 mb-3">
    <div class="col-12 col-md-4">
        <x-chart-card chart-id="chart-nationwide" title="Nationwide Escalation Status" icon="bi-pie-chart-fill" height="300px" />
    </div>
    <div class="col-12 col-md-4">
        <x-chart-card chart-id="chart-inprocess" title="In-Process Job Reasons" icon="bi-list-task" height="300px" />
    </div>
    <div class="col-12 col-md-4">
        <x-chart-card chart-id="chart-zone" title="Zone Wise Escalation" icon="bi-geo-alt-fill" height="300px" />
    </div>
</div>

{{-- ── ROW 2: Top 10 RU Channels · Top 10 Escalation Reasons ──────── --}}
<div class="section-label">Top 10 Analysis</div>
<div class="row g-3 mb-3">
    <div class="col-12 col-md-6">
        <x-chart-card chart-id="chart-ru-channels" title="Top 10 RU Receiving Channels" icon="bi-reception-4" height="340px" />
    </div>
    <div class="col-12 col-md-6">
        <x-chart-card chart-id="chart-esc-reasons" title="Top 10 Escalation Reasons" icon="bi-arrow-up-circle-fill" height="340px" />
    </div>
</div>

{{-- ── ROW 3: SC Detail Not Closed ─────────────────────────────────── --}}
<div class="section-label">Not Closed by Service Center</div>
<div class="row g-3 mb-3">
    <div class="col-12">
        <x-chart-card chart-id="chart-sc-notclosed" title="Service Centers With Not Closed RU Cases" icon="bi-building-exclamation" height="300px" />
    </div>
</div>

{{-- ── ROW 4: Top 5 Reasons (Pie) · Top 10 Tech+ASC ───────────────── --}}
<div class="section-label">Top Cases</div>
<div class="row g-3 mb-3">
    <div class="col-12 col-md-5">
        <x-chart-card chart-id="chart-top5-reasons" title="Top 5 Escalation Reasons" icon="bi-pie-chart" height="320px" />
    </div>
    <div class="col-12 col-md-7">
        <x-chart-card chart-id="chart-top10-tech" title="Top 10 Tech + ASC RU Cases" icon="bi-tools" height="320px" />
    </div>
</div>

{{-- ── ROW 5: Top 20 Tech+ASC ───────────────────────────────────────── --}}
<div class="section-label">Top 20 Technicians / ASC</div>
<div class="row g-3 mb-3">
    <div class="col-12">
        <x-chart-card chart-id="chart-top20-tech" title="Top 20 Tech + ASC RU Cases" icon="bi-person-badge" height="320px" />
    </div>
</div>

{{-- ── ROW 6: National vs RU (Pie) · SC vs RU Comparison ──────────── --}}
<div class="section-label">National vs Escalation Comparison</div>
<div class="row g-3 mb-3">
    <div class="col-12 col-md-4">
        <x-chart-card chart-id="chart-national-vs-ru" title="National Complaints VS RU Cases" icon="bi-bar-chart-steps" height="300px" />
    </div>
    <div class="col-12 col-md-8">
        <x-chart-card chart-id="chart-sc-vs-ru" title="Service Center Complaints VS RU Comparison" icon="bi-bar-chart-line" height="300px" />
    </div>
</div>

<div class="detail-modal-backdrop" id="detailModalBackdrop" aria-hidden="true">
    <div class="detail-modal" role="dialog" aria-modal="true" aria-labelledby="detailModalTitle">
        <div class="detail-modal-head">
            <div>
                <div class="detail-title" id="detailModalTitle">Detail</div>
                <div class="detail-subtitle" id="detailModalSubtitle">Loading...</div>
            </div>
            <button class="detail-close" id="detailModalClose" type="button" aria-label="Close details">
                <i class="bi bi-x-lg"></i>
            </button>
        </div>
        <div class="detail-modal-body" id="detailModalBody">
            <div class="detail-loading"><i class="bi bi-arrow-repeat"></i> Loading details...</div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
{{-- jQuery + DataTables --}}
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.8/js/dataTables.bootstrap5.min.js"></script>

<script>
// ── Helpers ──────────────────────────────────────────────────────────────────

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

/** Count-up animation */
function animateCount(el, target) {
    const duration = 800;
    const start = Date.now();
    const from   = 0;
    const tick   = () => {
        const elapsed = Date.now() - start;
        const progress = Math.min(elapsed / duration, 1);
        const eased = 1 - Math.pow(1 - progress, 3); // ease-out-cubic
        el.textContent = Math.round(from + (target - from) * eased).toLocaleString();
        if (progress < 1) requestAnimationFrame(tick);
    };
    requestAnimationFrame(tick);
}

/** Show/hide skeleton + chart div */
function showChart(chartId) {
    const skeleton = document.getElementById('skeleton-' + chartId);
    const chart    = document.getElementById(chartId);
    if (skeleton) skeleton.style.display = 'none';
    if (chart)    chart.style.display    = 'block';
}

/** Light ApexCharts defaults */
const apexDefaults = {
    chart: { background: 'transparent', foreColor: '#6b7280', toolbar: { show: false }, animations: { enabled: true, speed: 600 } },
    grid:  { borderColor: 'rgba(0,0,0,0.07)' },
    tooltip: { theme: 'light' },
    legend: { labels: { colors: '#1f2937' } },
};

const DASHBOARD_API_BASE = @json(url('api/dashboard'));
const dashboardDetailConfig = {
    'chart-nationwide':    { chart: 'nationwide-status', title: 'Nationwide Escalation Status' },
    'chart-inprocess':     { chart: 'in-process-reasons', title: 'In-Process Job Reasons' },
    'chart-zone':          { chart: 'zone-wise', title: 'Zone Wise Escalation' },
    'chart-ru-channels':   { chart: 'top-ru-channels', title: 'Top RU Receiving Channels' },
    'chart-esc-reasons':   { chart: 'top-escalation-reasons', title: 'Top Escalation Reasons' },
    'chart-sc-notclosed':  { chart: 'sc-not-closed', title: 'Service Centers With Not Closed Cases' },
    'chart-top5-reasons':  { chart: 'top-5-reasons', title: 'Top 5 Escalation Reasons' },
    'chart-top10-tech':    { chart: 'top-tech', title: 'Top 10 Tech + ASC RU Cases' },
    'chart-top20-tech':    { chart: 'top-twenty-tech', title: 'Top 20 Tech + ASC RU Cases' },
    'chart-national-vs-ru':{ chart: 'national-vs-ru', title: 'National Complaints VS RU Cases' },
    'chart-sc-vs-ru':      { chart: 'sc-vs-ru', title: 'Service Center Complaints VS RU Comparison' },
};

let detailAbortController = null;

function escapeHtml(value) {
    return String(value ?? '')
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#039;');
}

function closeDetailModal() {
    const backdrop = document.getElementById('detailModalBackdrop');
    if (backdrop) backdrop.classList.remove('show');
    if (detailAbortController) {
        detailAbortController.abort();
        detailAbortController = null;
    }
}

function openDetailModalShell(title, subtitle) {
    const backdrop = document.getElementById('detailModalBackdrop');
    const body = document.getElementById('detailModalBody');
    document.getElementById('detailModalTitle').textContent = title || 'Detail';
    document.getElementById('detailModalSubtitle').textContent = subtitle || 'Loading...';
    body.innerHTML = '<div class="detail-loading"><i class="bi bi-arrow-repeat"></i> Loading details...</div>';
    backdrop.classList.add('show');
}

function renderDetailModal(data) {
    const body = document.getElementById('detailModalBody');
    document.getElementById('detailModalTitle').textContent = data.title || 'Detail';
    document.getElementById('detailModalSubtitle').textContent = data.subtitle || 'Record details';

    const rows = Array.isArray(data.rows) ? data.rows : [];

    if (rows.length === 0) {
        body.innerHTML = `
            <div class="detail-summary">
                <span class="detail-chip">Total: ${Number(data.total || 0).toLocaleString()}</span>
                <span>Showing 0 records</span>
            </div>
            <div class="detail-empty"><i class="bi bi-inboxes me-1"></i>No records found for this selection.</div>
        `;
        return;
    }

    const tableRows = rows.map((row, index) => `
        <tr>
            <td>${index + 1}</td>
            <td title="${escapeHtml(row.reference)}">${escapeHtml(row.reference)}</td>
            <td title="${escapeHtml(row.source)}">${escapeHtml(row.source)}</td>
            <td title="${escapeHtml(row.service_center)}">${escapeHtml(row.service_center)}</td>
            <td title="${escapeHtml(row.status)}">${escapeHtml(row.status)}</td>
            <td title="${escapeHtml(row.category)}">${escapeHtml(row.category)}</td>
            <td title="${escapeHtml(row.reason)}">${escapeHtml(row.reason)}</td>
            <td title="${escapeHtml(row.owner)}">${escapeHtml(row.owner)}</td>
            <td>${escapeHtml(row.event_date)}</td>
        </tr>
    `).join('');

    body.innerHTML = `
        <div class="detail-summary">
            <span class="detail-chip">Total: ${Number(data.total || 0).toLocaleString()}</span>
            <span>Showing up to ${Number(data.limit || rows.length).toLocaleString()} latest records</span>
        </div>
        <div class="detail-table-wrap">
            <table class="detail-table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Reference</th>
                        <th>Source</th>
                        <th>Service Center</th>
                        <th>Status</th>
                        <th>Category</th>
                        <th>Reason</th>
                        <th>Owner</th>
                        <th>Date</th>
                    </tr>
                </thead>
                <tbody>${tableRows}</tbody>
            </table>
        </div>
    `;
}

function loadDetailPopup(chartId, pointMeta) {
    const config = dashboardDetailConfig[chartId];
    if (!config || !pointMeta.label) return;

    const subtitle = pointMeta.seriesName ? `${pointMeta.label} - ${pointMeta.seriesName}` : pointMeta.label;
    openDetailModalShell(config.title, subtitle);

    const params = new URLSearchParams({
        chart: config.chart,
        label: pointMeta.label,
        limit: '120',
    });
    if (pointMeta.seriesName && pointMeta.seriesName !== 'Cases') {
        params.append('series', pointMeta.seriesName);
    }

    if (detailAbortController) {
        detailAbortController.abort();
    }
    detailAbortController = new AbortController();

    fetchJson(`${DASHBOARD_API_BASE}/drilldown?${params.toString()}`, {
        headers: { 'Accept': 'application/json' },
        signal: detailAbortController.signal,
    })
        .then(renderDetailModal)
        .catch(error => {
            if (error?.name === 'AbortError') return;
            const body = document.getElementById('detailModalBody');
            body.innerHTML = '<div class="detail-empty"><i class="bi bi-exclamation-triangle me-1"></i>Unable to load details for this selection.</div>';
        });
}

function extractPointMeta(chartContext, config) {
    const chartConfig = chartContext?.w?.config || {};
    const globals = chartContext?.w?.globals || {};
    const dataPointIndex = config?.dataPointIndex ?? -1;
    const seriesIndex = config?.seriesIndex ?? 0;

    const categoryLabels = chartConfig?.xaxis?.categories || globals?.labels || [];
    const label = categoryLabels[dataPointIndex] ?? globals?.labels?.[dataPointIndex] ?? null;
    const seriesName = chartConfig?.series?.[seriesIndex]?.name || null;

    return { label, seriesName };
}

function fetchJson(endpoint, options) {
    return fetch(endpoint, options).then(async response => {
        if (response.ok) {
            return response.json();
        }

        const text = await response.text();
        throw new Error(`HTTP ${response.status} ${response.statusText}: ${text.slice(0, 300)}`);
    });
}

// ── Chart Loader Factory ──────────────────────────────────────────────────────

const chartInstances = {};

/**
 * loadChart(endpoint, chartId, buildFn)
 * buildFn receives the JSON response and returns an ApexCharts options object.
 */
function loadChart(endpoint, chartId, buildFn) {
    // Destroy previous instance if refreshing
    if (chartInstances[chartId]) {
        try { chartInstances[chartId].destroy(); } catch(e) {}
    }
    const skeleton = document.getElementById('skeleton-' + chartId);
    const div      = document.getElementById(chartId);
    if (skeleton) { skeleton.style.display = 'block'; }
    if (div)      { div.style.display = 'none'; div.innerHTML = ''; }

    fetchJson(endpoint, { headers: { 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json' } })
        .then(data => {
            const options = Object.assign({}, apexDefaults, buildFn(data));
            // Deep-merge chart object
            options.chart = Object.assign({}, apexDefaults.chart, options.chart || {});

            const existingEvents = (options.chart && options.chart.events) ? options.chart.events : {};
            options.chart.events = Object.assign({}, existingEvents, {
                dataPointSelection: function(event, chartContext, config) {
                    if (!dashboardDetailConfig[chartId]) return;
                    const pointMeta = extractPointMeta(chartContext, config);
                    if (!pointMeta.label) return;
                    loadDetailPopup(chartId, pointMeta);
                }
            });

            showChart(chartId);
            const chart = new ApexCharts(div, options);
            chart.render();
            chartInstances[chartId] = chart;
        })
        .catch(err => {
            showChart(chartId);
            if (div) div.innerHTML = '<div class="text-center text-muted py-4" style="font-size:0.8rem;"><i class="bi bi-exclamation-circle me-1"></i>Could not load data</div>';
            console.error('[Dashboard]', chartId, err);
        });
}

// ── KPI Summary ───────────────────────────────────────────────────────────────

function loadKPIs() {
    fetchJson(`${DASHBOARD_API_BASE}/kpi-summary`, { headers: { 'Accept': 'application/json' } })
        .then(d => {
            animateCount(document.getElementById('kpi-total'),     d.total     || 0);
            animateCount(document.getElementById('kpi-inprocess'), d.inProcess || 0);
            animateCount(document.getElementById('kpi-closed'),    d.closed    || 0);
            animateCount(document.getElementById('kpi-resolved'),  d.resolved  || 0);
        })
        .catch(() => {});
}

// ── DataTable ─────────────────────────────────────────────────────────────────

let scTable = null;
function initSCTable() {
    if (scTable) { scTable.ajax.reload(); return; }
    scTable = $('#sc-table').DataTable({
        serverSide: true,
        processing: true,
        ajax: { url: `${DASHBOARD_API_BASE}/service-center-table`, type: 'GET' },
        columns: [
            { data: null, render: (_, __, ___, meta) => meta.row + 1, orderable: false },
            { data: 'service_center' },
            { data: 'zone' },
            { data: 'total',         render: v => `<strong>${v.toLocaleString()}</strong>` },
            { data: 'closed_count',  render: v => `<span class="badge-status badge-closed">${v.toLocaleString()}</span>` },
            { data: 'in_process_count', render: v => `<span class="badge-status badge-process">${v.toLocaleString()}</span>` },
            { data: 'canceled_count',   render: v => `<span class="badge-status badge-canceled">${v.toLocaleString()}</span>` },
            { data: 'open_count',    render: v => v > 0 ? `<span class="badge-status" style="background:rgba(245,158,11,0.15);color:#F59E0B;">${v.toLocaleString()}</span>` : `<span class="text-muted">0</span>` },
        ],
        pageLength: 15,
        order: [[3, 'desc']],
        language: {
            search: '',
            searchPlaceholder: 'Search service center…',
            lengthMenu: 'Show _MENU_',
            processing: '<div class="text-center p-2" style="color:#6b7280;font-size:.8rem;">Loading…</div>',
            emptyTable: '<div class="text-center p-3" style="color:#6b7280;">No data available</div>',
        },
    });

    $('#sc-table tbody').on('click', 'tr', function () {
        const rowData = scTable.row(this).data();
        if (!rowData || !rowData.service_center) return;
        loadDetailPopup('chart-sc-vs-ru', { label: rowData.service_center, seriesName: 'Escalated Jobs' });
    });
}

// ── Chart Builders ────────────────────────────────────────────────────────────

function buildDonut(d) {
    return {
        chart:  { type: 'donut', height: 300 },
        labels: d.labels || [],
        series: d.series || [],
        colors: d.colors || ['#2787F5','#FF6340','#10B981','#F59E0B','#8B5CF6'],
        plotOptions: { pie: { donut: { size: '65%', labels: { show: true, total: { show: true, label: 'Total', color: '#1f2937', formatter: w => w.globals.seriesTotals.reduce((a,b)=>a+b,0).toLocaleString() } } } } },
        dataLabels: { enabled: true, style: { fontSize: '11px' } },
    };
}

function buildHBar(d, color) {
    return {
        chart:  { type: 'bar', height: 340 },
        plotOptions: { bar: { horizontal: true, borderRadius: 4, barHeight: '60%' } },
        xaxis: { categories: d.labels || [], labels: { style: { colors: '#6b7280', fontSize: '11px' } } },
        yaxis: { labels: { style: { colors: '#6b7280', fontSize: '11px' }, maxWidth: 200 } },
        series: [{ name: 'Cases', data: d.series || [] }],
        colors: d.colors || [color || '#2787F5'],
        dataLabels: { enabled: false },
    };
}

function buildVBar(d) {
    // Supports both simple {labels,series} and grouped {labels,series:[{name,data}]}
    const isGrouped = Array.isArray(d.series) && d.series.length > 0 && typeof d.series[0] === 'object' && !Array.isArray(d.series[0]) && 'name' in d.series[0];
    const series = isGrouped ? d.series.map(s => ({ name: s.name, data: s.data })) : [{ name: 'Cases', data: d.series || [] }];
    const colors = isGrouped ? d.series.map(s => s.color) : (d.colors || ['#10B981']);
    return {
        chart:  { type: 'bar', height: 300 },
        plotOptions: { bar: { borderRadius: 4, columnWidth: '60%' } },
        xaxis: { categories: d.labels || [], labels: { style: { colors: '#6b7280', fontSize: '10px' }, rotate: -30 } },
        yaxis: { labels: { style: { colors: '#6b7280', fontSize: '11px' } } },
        series, colors,
        dataLabels: { enabled: false },
    };
}

function buildPie(d) {
    return {
        chart:  { type: 'pie', height: 320 },
        labels: d.labels || [],
        series: d.series || [],
        colors: d.colors || ['#2787F5','#FF6340','#808080','#D4AF37','#10B981'],
        dataLabels: { enabled: true, style: { fontSize: '11px' } },
    };
}

// ── Load All ──────────────────────────────────────────────────────────────────

function loadAllCharts() {
    loadChart(`${DASHBOARD_API_BASE}/nationwide-status`,      'chart-nationwide',    d => buildDonut(d));
    loadChart(`${DASHBOARD_API_BASE}/in-process-reasons`,     'chart-inprocess',     d => buildHBar(d, '#FF6340'));
    loadChart(`${DASHBOARD_API_BASE}/zone-wise`,              'chart-zone',          d => buildVBar(d));
    loadChart(`${DASHBOARD_API_BASE}/top-ru-channels`,        'chart-ru-channels',   d => buildHBar(d, '#2787F5'));
    loadChart(`${DASHBOARD_API_BASE}/top-escalation-reasons`, 'chart-esc-reasons',   d => buildHBar(d, '#FF6340'));
    loadChart(`${DASHBOARD_API_BASE}/sc-not-closed`,          'chart-sc-notclosed',  d => buildVBar(d));
    loadChart(`${DASHBOARD_API_BASE}/top-5-reasons`,          'chart-top5-reasons',  d => buildPie(d));
    loadChart(`${DASHBOARD_API_BASE}/top-tech`,               'chart-top10-tech',    d => buildHBar(d, '#FF6340'));
    loadChart(`${DASHBOARD_API_BASE}/top-twenty-tech`,        'chart-top20-tech',    d => buildVBar(d));
    loadChart(`${DASHBOARD_API_BASE}/national-vs-ru`,         'chart-national-vs-ru',d => buildDonut(d));
    loadChart(`${DASHBOARD_API_BASE}/sc-vs-ru`,               'chart-sc-vs-ru',      d => buildVBar(d));
}

function refreshAll() {
    const btn = document.getElementById('refreshAllBtn');
    btn.classList.add('spinning');
    loadKPIs();
    loadAllCharts();
    initSCTable();
    setTimeout(() => btn.classList.remove('spinning'), 1200);
    document.getElementById('lastUpdatedTime').textContent = new Date().toLocaleTimeString();
}

// ── Init ───────────────────────────────────────────────────────────────────────

document.addEventListener('DOMContentLoaded', () => {
    loadKPIs();
    initSCTable();
    loadAllCharts();
    document.getElementById('lastUpdatedTime').textContent = new Date().toLocaleTimeString();

    const backdrop = document.getElementById('detailModalBackdrop');
    const closeBtn = document.getElementById('detailModalClose');
    if (closeBtn) closeBtn.addEventListener('click', closeDetailModal);
    if (backdrop) {
        backdrop.addEventListener('click', function (event) {
            if (event.target === backdrop) closeDetailModal();
        });
    }
    document.addEventListener('keydown', function (event) {
        if (event.key === 'Escape') closeDetailModal();
    });
});
</script>
@endsection