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

    /* Secondary metric shown inside a KPI card (e.g. Cancelled on the Closed card) */
    .kpi-side-stat {
        text-align: right;
        padding-left: 14px;
        margin-left: auto;
        border-left: 1px solid var(--border);
        align-self: stretch;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    /* Match the primary card metric's typography exactly */
    .kpi-side-val { font-size: 1.8rem; font-weight: 700; line-height: 1; letter-spacing: -0.5px; }
    .kpi-side-label {
        font-size: 0.75rem;
        color: var(--text-muted);
        font-weight: 500;
        margin-top: 4px;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        white-space: nowrap;
    }

    /* ── Pending KPI breakdown (inline expanding panel) ─────────── */
    .kpi-breakdown-toggle {
        position: absolute;
        top: 12px; right: 12px;
        width: 24px; height: 24px;
        display: flex; align-items: center; justify-content: center;
        background: transparent;
        border: none;
        border-radius: 6px;
        color: var(--text-muted);
        font-size: 0.85rem;
        cursor: pointer;
        z-index: 3;
        transition: transform 0.25s ease, color 0.2s ease, background 0.2s ease;
    }
    .kpi-breakdown-toggle:hover { color: var(--accent-red); background: rgba(255,99,64,0.12); }
    .kpi-breakdown-toggle:focus { outline: none; }
    .kpi-breakdown-toggle.open { transform: rotate(180deg); color: var(--accent-red); }

    /* The breakdown row lives in normal document flow, so opening it pushes the
       rest of the page down (and collapses back on close). Height is animated. */
    .pending-breakdown-row {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        margin-bottom: 0;
        transition: max-height 0.32s ease, opacity 0.25s ease, margin-bottom 0.32s ease;
    }
    .pending-breakdown-row.show {
        max-height: 460px;
        opacity: 1;
        margin-bottom: 1.5rem;
    }
    .pending-breakdown-panel {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        overflow: hidden;
    }
    .pbd-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        border-bottom: 1px solid var(--border);
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        font-weight: 600;
        color: var(--text-muted);
    }
    .pbd-body { padding: 8px 10px; }
    .kpi-breakdown-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 9px 12px;
        border-radius: 8px;
        font-size: 0.85rem;
    }
    .kpi-breakdown-item + .kpi-breakdown-item { border-top: 1px solid var(--border); border-radius: 0; }
    .kpi-breakdown-item:hover { background: rgba(0,0,0,0.04); }
    .kpi-breakdown-item .bd-label { color: var(--text-strong, inherit); }
    .kpi-breakdown-item .bd-count { font-weight: 700; }
    .kpi-breakdown-empty { padding: 9px 12px; font-size: 0.82rem; color: var(--text-muted); }

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

    /* Stack the Nationwide Escalation Status legend one item per row */
    #chart-nationwide .apexcharts-legend {
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
    }

    /* ── 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; }
    .badge-resolved  { background: rgba(245,158,11,0.15); color: #F59E0B; }
    .badge-hold      { background: rgba(139,92,246,0.15); color: #8B5CF6; }
    .badge-pending   { background: rgba(236,72,153,0.15); color: #EC4899; }
    .badge-return    { background: rgba(107,114,128,0.15);color: #6B7280; }
    /* Aggregate Pending column — emphasized (ties to the red Pending KPI card) */
    .badge-pending-total { background: #FF6340; color: #fff; font-weight: 700; }

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

    /* ── Dashboard Filter Bar ──────────────────────────────────── */
    .dash-filterbar {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 14px 18px;
        margin-bottom: 18px;
        box-shadow: var(--shadow);
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
    }
    .dash-filterbar .fb-title {
        font-size: .8rem;
        font-weight: 600;
        color: var(--text-muted);
        display: flex;
        align-items: center;
        gap: 6px;
        margin-right: 4px;
    }
    .filter-dd { position: relative; }
    .filter-toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 190px;
        background: var(--surface-2);
        border: 1px solid var(--border);
        border-radius: 9px;
        padding: 8px 12px;
        font-size: .82rem;
        color: var(--text);
        cursor: pointer;
        transition: border-color .2s, box-shadow .2s;
    }
    .filter-toggle:hover { border-color: rgba(39,135,245,0.4); }
    .filter-toggle.has-selection {
        border-color: var(--accent-blue);
        background: rgba(39,135,245,0.08);
        color: var(--accent-blue);
        font-weight: 500;
    }
    .filter-toggle .bi-chevron-down { margin-left: auto; font-size: .7rem; transition: transform .2s; }
    .filter-dd.open .filter-toggle .bi-chevron-down { transform: rotate(180deg); }
    .filter-menu {
        position: absolute;
        z-index: 50;
        top: calc(100% + 6px);
        left: 0;
        width: 280px;
        max-width: 90vw;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 11px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.14);
        padding: 10px;
        display: none;
    }
    .filter-dd.open .filter-menu { display: block; }
    .filter-search {
        width: 100%;
        border: 1px solid var(--border);
        border-radius: 7px;
        padding: 6px 10px;
        font-size: .8rem;
        margin-bottom: 8px;
    }
    .filter-search:focus { outline: none; border-color: var(--accent-blue); }
    .filter-menu-actions {
        display: flex;
        gap: 8px;
        margin-bottom: 8px;
    }
    .filter-menu-actions button {
        flex: 1;
        background: var(--surface-2);
        border: 1px solid var(--border);
        border-radius: 6px;
        padding: 5px 8px;
        font-size: .74rem;
        color: var(--text-muted);
        cursor: pointer;
        transition: all .2s;
    }
    .filter-menu-actions button:hover { background: var(--accent-blue); color: #fff; border-color: var(--accent-blue); }
    .filter-options { max-height: 240px; overflow-y: auto; }
    .filter-opt {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 8px;
        border-radius: 6px;
        font-size: .82rem;
        cursor: pointer;
        margin: 0;
    }
    .filter-opt:hover { background: var(--surface-2); }
    .filter-opt input { cursor: pointer; }
    .filter-opt.hidden { display: none; }
    .filter-actions { display: flex; gap: 8px; margin-left: auto; }
    .btn-clear-filters {
        background: transparent;
        border: 1px solid var(--border);
        color: var(--text-muted);
        border-radius: 9px;
        padding: 8px 14px;
        font-size: .8rem;
        cursor: pointer;
        transition: all .2s;
        display: flex; align-items: center; gap: 6px;
    }
    .btn-clear-filters:hover { border-color: var(--accent-red); color: var(--accent-red); }
    .active-filters {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 18px;
    }
    .active-filters:empty { display: none; }
    .active-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(39,135,245,0.1);
        color: var(--accent-blue);
        border: 1px solid rgba(39,135,245,0.25);
        border-radius: 20px;
        padding: 3px 10px;
        font-size: .74rem;
        font-weight: 500;
    }
    .active-chip .chip-x { cursor: pointer; font-size: .9rem; line-height: 1; opacity: .7; }
    .active-chip .chip-x:hover { opacity: 1; }
</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>

{{-- ── FILTER BAR (Zone / Service Center — applies to entire dashboard) ── --}}
<div class="dash-filterbar">
    <span class="fb-title"><i class="bi bi-funnel-fill"></i> Filters</span>

    {{-- Zone --}}
    <div class="filter-dd" id="zoneDD">
        <button type="button" class="filter-toggle" data-dd="zoneDD">
            <i class="bi bi-geo-alt"></i>
            <span class="filter-label" data-base="Zone">Zone</span>
            <i class="bi bi-chevron-down"></i>
        </button>
        <div class="filter-menu">
            <div class="filter-menu-actions">
                <button type="button" data-act="all"   data-type="zone">Select all</button>
                <button type="button" data-act="clear" data-type="zone">Clear</button>
            </div>
            <div class="filter-options">
                @foreach ($zones as $i => $zone)
                    <label class="filter-opt">
                        <input type="checkbox" class="zone-cb" value="{{ $zone }}" id="zone_cb_{{ $i }}">
                        <span>{{ $zone }}</span>
                    </label>
                @endforeach
            </div>
        </div>
    </div>

    {{-- Service Center --}}
    <div class="filter-dd" id="scDD">
        <button type="button" class="filter-toggle" data-dd="scDD">
            <i class="bi bi-building"></i>
            <span class="filter-label" data-base="Service Center">Service Center</span>
            <i class="bi bi-chevron-down"></i>
        </button>
        <div class="filter-menu">
            <input type="text" class="filter-search" id="scSearch" placeholder="Search service center…">
            <div class="filter-menu-actions">
                <button type="button" data-act="all"   data-type="sc">Select all</button>
                <button type="button" data-act="clear" data-type="sc">Clear</button>
            </div>
            <div class="filter-options" id="scOptions">
                @foreach ($serviceCenters as $i => $sc)
                    <label class="filter-opt" data-name="{{ strtolower($sc->service_center) }}">
                        <input type="checkbox" class="sc-cb" value="{{ $sc->coms_sc }}" id="sc_cb_{{ $i }}">
                        <span>{{ $sc->service_center }}</span>
                    </label>
                @endforeach
            </div>
        </div>
    </div>

    <div class="filter-actions">
        <button type="button" class="btn-clear-filters" id="clearFiltersBtn">
            <i class="bi bi-x-circle"></i> Clear all
        </button>
    </div>
</div>
<div class="active-filters" id="activeFilters"></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 has-breakdown">
            <div class="kpi-icon red"><i class="bi bi-hourglass-split"></i></div>
            <div>
                <div class="kpi-val" id="kpi-pending">
                    <span class="skeleton-bar d-inline-block" style="width:60px;height:28px;"></span>
                </div>
                <div class="kpi-label">Pending</div>
            </div>
            <button type="button" class="kpi-breakdown-toggle" id="pending-breakdown-toggle"
                    aria-label="Show pending status breakdown" aria-expanded="false">
                <i class="bi bi-chevron-down"></i>
            </button>
        </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 class="kpi-side-stat ms-auto">
                <div class="kpi-side-val" id="kpi-cancelled">0</div>
                <div class="kpi-side-label"><i class="bi bi-slash-circle me-1"></i>Cancelled</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>

{{-- ── PENDING BREAKDOWN (expands below the KPI cards, pushing content down) ── --}}
<div class="row g-3 pending-breakdown-row" id="pending-breakdown-row">
    <div class="col-12 col-md-6 col-lg-4 offset-md-3 offset-lg-3">
        <div class="pending-breakdown-panel">
            <div class="pbd-head">
                <span><i class="bi bi-hourglass-split me-2"></i>Pending Breakdown</span>
            </div>
            <div id="pending-breakdown-body" class="pbd-body">
                <div class="kpi-breakdown-empty">Loading…</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>Sr #</th>
                    <th>Zone</th>
                    <th>Service Centre</th>
                    <th>Total Cases</th>
                    <th>Closed</th>
                    <th>Resolved</th>
                    <th>Cancelled</th>
                    <th>Pending</th>
                    <th>In process</th>
                    <th>Hold PNA</th>
                    <th>Pending from Customer</th>
                    <th>Sale Return</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-ru-channels" title="Top 10 RU Receiving Channels" icon="bi-reception-4" 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 Escalation Reasons · Top 10 Delay Reasons (Expert Opinion) ──────── --}}
<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-esc-reasons" title="Top 10 Escalation Reasons" icon="bi-arrow-up-circle-fill" height="340px" />
    </div>
    <div class="col-12 col-md-6">
        <x-chart-card chart-id="chart-delay-reasons" title="Top 10 Reason of Escalation (Expert Opinion)" icon="bi-chat-square-text-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 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');

// ── Global Dashboard Filters (Zone / Service Center) ──────────────────────────
// Applied to every chart, KPI, the service-center table, and drilldown popups.
const dashboardFilters = { zone: [], service_center: [] };

/** Append the active Zone / Service Center filters to a request URL. */
function appendFilters(url) {
    const u = new URL(url, window.location.origin);
    u.searchParams.delete('zone');
    u.searchParams.delete('service_center');
    if (dashboardFilters.zone.length) {
        u.searchParams.set('zone', dashboardFilters.zone.join(','));
    }
    if (dashboardFilters.service_center.length) {
        // coms_sc codes can contain commas, so service centers are pipe-delimited.
        u.searchParams.set('service_center', dashboardFilters.service_center.join('|'));
    }
    return u.toString();
}

/** 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-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-delay-reasons': { chart: 'top-delay-reasons', title: 'Top 10 Reason of Escalation (Expert Opinion)' },
    'chart-sc-notclosed':  { chart: 'sc-not-closed', title: 'Service Centers With Not Closed 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('');

    const showingLabel = data.limit
        ? `Showing up to ${Number(data.limit).toLocaleString()} latest records`
        : `Showing all ${Number(rows.length).toLocaleString()} records`;

    body.innerHTML = `
        <div class="detail-summary">
            <span class="detail-chip">Total: ${Number(data.total || 0).toLocaleString()}</span>
            <span>${showingLabel}</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,
    });
    if (pointMeta.seriesName && pointMeta.seriesName !== 'Cases') {
        params.append('series', pointMeta.seriesName);
    }
    // Carry the active Zone / Service Center filters into the drilldown.
    if (dashboardFilters.zone.length) {
        params.append('zone', dashboardFilters.zone.join(','));
    }
    if (dashboardFilters.service_center.length) {
        params.append('service_center', dashboardFilters.service_center.join('|'));
    }

    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(appendFilters(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(appendFilters(`${DASHBOARD_API_BASE}/kpi-summary`), { headers: { 'Accept': 'application/json' } })
        .then(d => {
            animateCount(document.getElementById('kpi-total'),     d.total     || 0);
            animateCount(document.getElementById('kpi-pending'), d.pending || 0);
            animateCount(document.getElementById('kpi-closed'),    d.closed    || 0);
            animateCount(document.getElementById('kpi-resolved'),  d.resolved  || 0);
            animateCount(document.getElementById('kpi-cancelled'), d.cancelled || 0);
            renderPendingBreakdown(d.pendingBreakdown || []);
        })
        .catch(() => {});
}

// Render the per-status rows inside the Pending KPI card dropdown.
function renderPendingBreakdown(breakdown) {
    const body = document.getElementById('pending-breakdown-body');
    if (!body) return;

    if (!Array.isArray(breakdown) || breakdown.length === 0) {
        body.innerHTML = '<div class="kpi-breakdown-empty">No data</div>';
        return;
    }

    body.innerHTML = breakdown.map(item => {
        const label = (item.status || '').replace(/[&<>"']/g, c => ({
            '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
        }[c]));
        const count = Number(item.count || 0).toLocaleString();
        return `<div class="kpi-breakdown-item" role="menuitem">
                    <span class="bd-label">${label}</span>
                    <span class="bd-count">${count}</span>
                </div>`;
    }).join('');
}

// Expand / collapse the inline Pending breakdown panel. It sits in normal flow,
// so toggling it pushes the page content down and restores it on close.
function initPendingBreakdown() {
    const toggle = document.getElementById('pending-breakdown-toggle');
    const row = document.getElementById('pending-breakdown-row');
    if (!toggle || !row) return;

    function setOpen(open) {
        row.classList.toggle('show', open);
        toggle.classList.toggle('open', open);
        toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
    }

    toggle.addEventListener('click', function (e) {
        e.stopPropagation();
        setOpen(!row.classList.contains('show'));
    });

    document.addEventListener('keydown', e => { if (e.key === 'Escape') setOpen(false); });
}

// ── 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',
            data: function (d) {
                if (dashboardFilters.zone.length) d.zone = dashboardFilters.zone.join(',');
                if (dashboardFilters.service_center.length) d.service_center = dashboardFilters.service_center.join('|');
            },
        },
        columns: [
            { data: null, render: (_, __, ___, meta) => meta.row + 1, orderable: false },
            { data: 'zone' },
            { data: 'service_center' },
            { data: 'total',                  render: v => `<strong>${v.toLocaleString()}</strong>` },
            { data: 'closed_count',           render: v => `<span class="badge-status badge-closed">${v.toLocaleString()}</span>` },
            { data: 'resolved_count',         render: v => `<span class="badge-status badge-resolved">${v.toLocaleString()}</span>` },
            { data: 'cancelled_count',        render: v => `<span class="badge-status badge-canceled">${v.toLocaleString()}</span>` },
            { data: 'pending_count',          render: v => `<span class="badge-status badge-pending-total">${v.toLocaleString()}</span>` },
            { data: 'in_process_count',       render: v => `<span class="badge-status badge-process">${v.toLocaleString()}</span>` },
            { data: 'hold_pna_count',         render: v => `<span class="badge-status badge-hold">${v.toLocaleString()}</span>` },
            { data: 'pending_customer_count', render: v => `<span class="badge-status badge-pending">${v.toLocaleString()}</span>` },
            { data: 'sales_return_count',     render: v => `<span class="badge-status badge-return">${v.toLocaleString()}</span>` },
        ],
        paging: false,
        lengthChange: false,
        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, opts = {}) {
    const options = {
        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' } },
    };
    // Hide the labels drawn on the donut slices; every detail (count + share) is
    // listed in the legend below the chart instead (e.g. "Closed: 46 (35.7%)").
    if (opts.showCount) {
        options.dataLabels.enabled = false;
        // Make the donut larger and centred, then list the values in the legend
        // below the chart so the card space is used fully.
        options.chart.height = 380;
        options.plotOptions.pie.donut.size = '65%';
        options.legend = {
            position: 'bottom',
            horizontalAlign: 'center',
            fontSize: '12px',
            itemMargin: { horizontal: 10, vertical: 3 },
            markers: { width: 10, height: 10, radius: 3 },
            formatter: (label, o) => {
                const count = o.w.globals.series[o.seriesIndex] || 0;
                const total = o.w.globals.series.reduce((a, b) => a + b, 0);
                const pct = total > 0 ? (count / total * 100).toFixed(1) : '0.0';
                return `${label}: ${count.toLocaleString()} (${pct}%)`;
            },
        };
    }
    return options;
}

function buildHBar(d, color) {
    return {
        chart:  { type: 'bar', height: 340 },
        plotOptions: { bar: { horizontal: true, borderRadius: 4, barHeight: '60%', dataLabels: { position: 'top' } } },
        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: true,
            textAnchor: 'start',
            offsetX: 8,
            formatter: val => Number(val).toLocaleString(),
            style: { fontSize: '11px', fontWeight: 600, colors: ['#1f2937'] },
            background: { 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%', dataLabels: { position: 'top' } } },
        xaxis: { categories: d.labels || [], labels: { style: { colors: '#6b7280', fontSize: '10px' }, rotate: -30 } },
        yaxis: { labels: { style: { colors: '#6b7280', fontSize: '11px' } } },
        series, colors,
        dataLabels: {
            enabled: true,
            offsetY: -18,
            formatter: val => Number(val).toLocaleString(),
            style: { fontSize: '10px', fontWeight: 600, colors: ['#1f2937'] },
            background: { 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, { showCount: true }));
    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}/top-delay-reasons`,      'chart-delay-reasons', d => buildHBar(d, '#8B5CF6'));
    loadChart(`${DASHBOARD_API_BASE}/sc-not-closed`,          'chart-sc-notclosed',  d => buildVBar(d));
    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();
}

// ── Dashboard Filter Bar wiring (Zone / Service Center) ─────────────────────────
// The filter bar markup, the `dashboardFilters` state object and `appendFilters()`
// already exist; this wires the UI to that state and reloads the dashboard on change.
function initDashboardFilters() {
    if (!document.querySelector('.dash-filterbar')) return;

    // Display-name lookup for service-center chips (coms_sc code → label).
    const scNameByValue = {};
    document.querySelectorAll('#scOptions .sc-cb').forEach(cb => {
        const span = cb.parentElement.querySelector('span');
        scNameByValue[cb.value] = span ? span.textContent.trim() : cb.value;
    });

    // Debounce reloads so ticking several boxes fires a single refresh.
    let refreshTimer = null;
    const debounceRefresh = () => {
        clearTimeout(refreshTimer);
        refreshTimer = setTimeout(refreshAll, 350);
    };

    function updateLabel(ddId, base, count) {
        const dd = document.getElementById(ddId);
        dd.querySelector('.filter-label').textContent = count ? `${base} (${count})` : base;
        dd.querySelector('.filter-toggle').classList.toggle('has-selection', count > 0);
    }

    function renderChips() {
        const box = document.getElementById('activeFilters');
        const chip = (type, value, label) =>
            `<span class="active-chip">${escapeHtml(label)}` +
            `<span class="chip-x" data-type="${type}" data-value="${escapeHtml(value)}">&times;</span></span>`;
        const chips = [];
        dashboardFilters.zone.forEach(z => chips.push(chip('zone', z, z)));
        dashboardFilters.service_center.forEach(v => chips.push(chip('sc', v, scNameByValue[v] || v)));
        box.innerHTML = chips.join('');
        box.querySelectorAll('.chip-x').forEach(x => {
            x.addEventListener('click', () => {
                const sel = x.dataset.type === 'zone' ? '.zone-cb' : '.sc-cb';
                const cb = Array.from(document.querySelectorAll(sel)).find(c => c.value === x.dataset.value);
                if (cb) { cb.checked = false; syncFilters(); }
            });
        });
    }

    function syncFilters() {
        dashboardFilters.zone =
            Array.from(document.querySelectorAll('.zone-cb:checked')).map(cb => cb.value);
        dashboardFilters.service_center =
            Array.from(document.querySelectorAll('.sc-cb:checked')).map(cb => cb.value);
        updateLabel('zoneDD', 'Zone', dashboardFilters.zone.length);
        updateLabel('scDD', 'Service Center', dashboardFilters.service_center.length);
        renderChips();
        debounceRefresh();
    }

    // Dropdown open/close (toggle one at a time; close on outside click).
    document.querySelectorAll('.filter-toggle').forEach(btn => {
        btn.addEventListener('click', e => {
            e.stopPropagation();
            const dd = document.getElementById(btn.dataset.dd);
            const wasOpen = dd.classList.contains('open');
            document.querySelectorAll('.filter-dd.open').forEach(d => d.classList.remove('open'));
            if (!wasOpen) dd.classList.add('open');
        });
    });
    document.querySelectorAll('.filter-menu').forEach(menu =>
        menu.addEventListener('click', e => e.stopPropagation()));
    document.addEventListener('click', () =>
        document.querySelectorAll('.filter-dd.open').forEach(d => d.classList.remove('open')));

    // Checkbox changes.
    document.querySelectorAll('.zone-cb, .sc-cb').forEach(cb =>
        cb.addEventListener('change', syncFilters));

    // Select all / Clear (scoped to the dropdown's checkbox class).
    document.querySelectorAll('.filter-menu-actions button').forEach(btn => {
        btn.addEventListener('click', () => {
            const sel = btn.dataset.type === 'zone' ? '.zone-cb' : '.sc-cb';
            const check = btn.dataset.act === 'all';
            document.querySelectorAll(sel).forEach(cb => {
                // Honour the search filter: only toggle currently-visible options.
                if (!cb.closest('.filter-opt').classList.contains('hidden')) cb.checked = check;
            });
            syncFilters();
        });
    });

    // Service-center search box.
    const scSearch = document.getElementById('scSearch');
    if (scSearch) {
        scSearch.addEventListener('input', () => {
            const q = scSearch.value.trim().toLowerCase();
            document.querySelectorAll('#scOptions .filter-opt').forEach(opt => {
                opt.classList.toggle('hidden', q && !(opt.dataset.name || '').includes(q));
            });
        });
    }

    // Clear all.
    const clearBtn = document.getElementById('clearFiltersBtn');
    if (clearBtn) {
        clearBtn.addEventListener('click', () => {
            document.querySelectorAll('.zone-cb, .sc-cb').forEach(cb => (cb.checked = false));
            syncFilters();
        });
    }
}

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

document.addEventListener('DOMContentLoaded', () => {
    loadKPIs();
    initSCTable();
    loadAllCharts();
    initDashboardFilters();
    initPendingBreakdown();
    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