{{-- ===== KPI DRILL MODAL: Overall / Financial / Physical tabs ===== --}}
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 hidden"
     id="sphfKpiDrillModal" aria-hidden="true">
    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-6xl mx-4 flex flex-col max-h-[92vh] overflow-hidden">

        {{-- Header --}}
        <div class="flex items-start justify-between px-8 pt-7 pb-3">
            <div>
                <h3 class="text-xl font-bold text-gray-900" id="sphfKpiDrillTitle">KPI Stage Analysis</h3>
                <p class="text-sm text-gray-500 mt-1" id="sphfKpiDrillBreadcrumb">
                    Showing stage distribution
                </p>
            </div>
            <button type="button" id="sphfKpiDrillClose" class="sphf-modal__close">
                <i class="ki-filled ki-cross"></i>
            </button>
        </div>

        {{-- Tabs --}}
        <div class="flex gap-1 px-8 pb-0 border-b border-gray-100">
            <button type="button" class="sphf-kpi-drill-tab is-active" data-tab="overall">
                Overall
            </button>
            <button type="button" class="sphf-kpi-drill-tab" data-tab="withdrawal">
                Financial
            </button>
            <button type="button" class="sphf-kpi-drill-tab" data-tab="not_withdrawal">
                Physical
            </button>
            <div class="ml-auto mb-2 flex items-center gap-2">
                <button type="button" id="sphfKpiDrillStepPrev" title="Previous step"
                    class="hidden h-9 w-9 rounded-full border border-slate-300 text-slate-600 hover:bg-slate-50 disabled:opacity-40 disabled:cursor-not-allowed">
                    ←
                </button>
                <button type="button" id="sphfKpiDrillStepNext" title="Next step"
                    class="hidden h-9 w-9 rounded-full border border-slate-300 text-slate-600 hover:bg-slate-50 disabled:opacity-40 disabled:cursor-not-allowed">
                    →
                </button>
                <button type="button" id="sphfKpiDrillExport"
                    class="hidden flex items-center gap-2 bg-green-600 hover:bg-green-700 text-white text-sm font-semibold px-4 py-2 rounded-xl transition">
                    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none"><path d="M12 3v13m0 0l-4-4m4 4l4-4M4 20h16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    Export Data
                </button>
            </div>
        </div>

        {{-- Body --}}
        <div class="flex-1 overflow-y-auto px-8 py-5">

            {{-- Loading --}}
            <div id="sphfKpiDrillLoading" class="hidden py-12 text-center text-gray-400 text-sm">
                Loading…
            </div>

            {{-- Bar chart (step = chart) --}}
            <div id="sphfKpiDrillChartArea">
                <div id="sphfKpiDrillNote" class="hidden mb-3 text-xs px-3 py-2 rounded-lg bg-amber-50 text-amber-700 border border-amber-200"></div>
                <div id="sphfKpiDrillChartEl" style="min-height:260px;"></div>
                <p class="text-xs text-gray-400 mt-2 text-center">
                    Click a bar to drill down into IP-wise distribution
                </p>
            </div>

            {{-- Drill-down table (step = ip / district / beneficiary) --}}
            <div id="sphfKpiDrillTableArea" class="hidden">
                {{-- Search --}}
                <div class="flex items-center justify-between mb-3">
                    <span class="text-xs font-bold tracking-widest text-gray-600 uppercase"
                          id="sphfKpiDrillTableLabel">IP Partner</span>
                    <input type="text" id="sphfKpiDrillSearch" placeholder="Search by UUID,CNIC"
                           class="pl-3 pr-3 py-1.5 text-sm border border-gray-200 rounded-lg bg-gray-50
                                  text-gray-700 placeholder-gray-400 focus:outline-none focus:border-blue-400
                                  focus:bg-white transition w-48" autocomplete="off">
                </div>

                <div class="rounded-xl border border-gray-200 overflow-hidden">
                    <table class="w-full text-sm" id="sphfKpiDrillTable">
                        <thead>
                            <tr class="bg-gray-50 border-b border-gray-200"
                                id="sphfKpiDrillThead">
                                {{-- filled by JS --}}
                            </tr>
                        </thead>
                        <tbody id="sphfKpiDrillTbody">
                            <tr><td colspan="6" class="text-center py-8 text-gray-400">Loading…</td></tr>
                        </tbody>
                    </table>
                </div>

                {{-- Beneficiary pager --}}
                <div id="sphfKpiDrillPager"
                     class="hidden mt-3 flex items-center justify-between text-xs text-gray-600">
                    <span id="sphfKpiDrillPagerInfo">Page 1 of 1</span>
                    <div class="flex items-center gap-2">
                        <button type="button" id="sphfKpiDrillPagerPrev"
                            class="px-3 py-1.5 rounded border border-gray-300 text-gray-700
                                   hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
                            Prev
                        </button>
                        <button type="button" id="sphfKpiDrillPagerNext"
                            class="px-3 py-1.5 rounded border border-gray-300 text-gray-700
                                   hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
                            Next
                        </button>
                    </div>
                </div>
            </div>

        </div>

    </div>
</div>

<style>
.sphf-kpi-drill-tab {
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    border-bottom: 3px solid transparent;
    background: none;
    cursor: pointer;
    transition: color .15s, border-color .15s;
    white-space: nowrap;
    position: relative;
    top: 1px;
}
.sphf-kpi-drill-tab:hover { color: #2563eb; }
.sphf-kpi-drill-tab.is-active { color: #2563eb; border-bottom-color: #2563eb; }
.sphf-kpi-chart-shell {
    border: 1px solid #e5e7eb;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    border-radius: 20px;
    padding: 26px 24px 20px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.sphf-kpi-chart-topbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 22px;
    margin-bottom: 10px;
}
.sphf-kpi-chart-menu {
    font-size: 22px;
    line-height: 1;
    color: #7b8794;
    user-select: none;
}
.sphf-kpi-chart-stage {
    position: relative;
    height: 340px;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 16px;
}
.sphf-kpi-chart-yaxis {
    position: relative;
    height: 300px;
}
.sphf-kpi-chart-yaxis span {
    position: absolute;
    right: 0;
    transform: translateY(50%);
    font-size: 12px;
    color: #334155;
    font-weight: 800;
    background: #f8fafc;
    border: 1px solid #dbe4ee;
    border-radius: 999px;
    padding: 3px 8px;
    min-width: 56px;
    text-align: right;
    box-shadow: 0 1px 2px rgba(15,23,42,.06);
}
.sphf-kpi-chart-plot {
    position: relative;
    height: 300px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    padding: 0 6px;
}
.sphf-kpi-chart-gridline {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid #d7dde5;
}
.sphf-kpi-chart-col {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}
.sphf-kpi-chart-barbtn {
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
    height: 300px;
    position: relative;
}
.sphf-kpi-chart-barbtn:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 4px;
    border-radius: 10px;
}
.sphf-kpi-chart-bar {
    width: min(100%, 46px);
    min-height: 8px;
    border-radius: 0;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.08), 0 0 0 1px rgba(255,255,255,.25);
    transition: transform .15s ease, opacity .15s ease;
}
.sphf-kpi-chart-value {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translate(-50%, 8px);
    font-size: 12px;
    font-weight: 900;
    color: #0f172a;
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(148,163,184,.45);
    border-radius: 999px;
    padding: 4px 9px;
    box-shadow: 0 8px 20px rgba(15,23,42,.12);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
    white-space: nowrap;
}
.sphf-kpi-chart-barbtn:hover .sphf-kpi-chart-bar {
    transform: translateY(-3px);
    opacity: .92;
}
.sphf-kpi-chart-barbtn:hover .sphf-kpi-chart-value,
.sphf-kpi-chart-barbtn:focus-visible .sphf-kpi-chart-value {
    opacity: 1;
    transform: translate(-50%, 0);
}
.sphf-kpi-chart-label {
    text-align: center;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.1;
    min-height: 32px;
    word-break: break-word;
}
.sphf-kpi-chart-zero {
    position: absolute;
    left: -2px;
    bottom: -30px;
    font-size: 12px;
    font-weight: 800;
    color: #334155;
    background: #f8fafc;
    border: 1px solid #dbe4ee;
    border-radius: 999px;
    padding: 3px 8px;
    min-width: 56px;
    text-align: right;
    box-shadow: 0 1px 2px rgba(15,23,42,.06);
}
.sphf-kpi-chart-baseline {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-top: 2px solid #cbd5e1;
}
</style>

<script>
(function () {
    var NAV = {
        back: [],
        forward: [],
    };

    var D = {
        step: 'chart',
        kpiLabel: '',
        kpiTotal: 0,
        stageKey: '',
        stageLabel: '',
        stageTotal: 0,
        releaseStageKey: '',
        releaseStageLabel: '',
        releaseStageTotal: 0,
        financialLabel: '',
        financialTotal: 0,
        alarmBucketLabel: '',
        alarmBucketTotal: 0,
        drillMode: 'stage_green',
        alarm: '',
        ip: null,
        ipTotal: 0,
        district: null,
        districtTotal: 0,
        page: 1,
        perPage: 100,
        lastPage: 1,
        totalRows: 0,
        _rows: [],
        _bars: [],
    };

    var KPI_DRILL_URL = '/sphf-kpi-drill';

    function esc(s) {
        return String(s ?? '').replace(/[&<>"']/g, function (c) {
            return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c];
        });
    }

    function el(id) { return document.getElementById(id); }
    function show(id) { var n = el(id); if (n) n.classList.remove('hidden'); }
    function hide(id) { var n = el(id); if (n) n.classList.add('hidden'); }

    function setLoading(on) {
        if (on) {
            show('sphfKpiDrillLoading');
            hide('sphfKpiDrillChartArea');
            hide('sphfKpiDrillTableArea');
            hide('sphfKpiDrillExport');
            return;
        }
        hide('sphfKpiDrillLoading');
    }

    function setNote(msg) {
        var note = el('sphfKpiDrillNote');
        if (!note) return;
        if (!msg) {
            note.textContent = '';
            note.classList.add('hidden');
            return;
        }
        note.textContent = String(msg);
        note.classList.remove('hidden');
    }

    function updateTitle() {
        var title = el('sphfKpiDrillTitle');
        if (title) title.textContent = 'Stage Bottlenecks Drilldown';
    }

    function updateBreadcrumb() {
        function labelWithCount(label, count) {
            var n = Number(count || 0);
            var suffix = ' <span class="text-gray-400">(' + n.toLocaleString() + ')</span>';
            return '<span class="text-gray-700">' + esc(label) + suffix + '</span>';
        }

        var crumbs = ['<span class="font-semibold text-blue-600">Stage Flow</span>'];
        var stageLabel = String(D.stageLabel || '').trim();
        var releaseStageLabel = String(D.releaseStageLabel || '').trim();
        var stageMatchesRelease = stageLabel !== '' && releaseStageLabel !== '' && stageLabel.toLowerCase() === releaseStageLabel.toLowerCase();

        if (D.kpiLabel) {
            crumbs.push(labelWithCount(D.kpiLabel, D.kpiTotal));
        }

        if (releaseStageLabel && !stageMatchesRelease) {
            crumbs.push(labelWithCount(releaseStageLabel, D.releaseStageTotal));
        }

        if (stageLabel) {
            var stageCount = Number(D.stageTotal || 0);
            if (stageMatchesRelease && stageCount === 0 && Number(D.releaseStageTotal || 0) > 0) {
                stageCount = Number(D.releaseStageTotal || 0);
            }
            crumbs.push(labelWithCount(stageLabel, stageCount));
        }

        if (D.step === 'financial_status') {
            crumbs.push('<span class="text-gray-700">Financial Status</span>');
        }

        if (D.financialLabel) {
            crumbs.push(labelWithCount(D.financialLabel, D.financialTotal));
        }

        if (D.step === 'not_withdrawal_alarm') {
            crumbs.push('<span class="text-gray-700">Risk Buckets</span>');
        }

        if (D.alarmBucketLabel) {
            crumbs.push(labelWithCount(D.alarmBucketLabel, D.alarmBucketTotal));
        }
        if (D.alarm) {
            crumbs.push('<span class="inline-flex px-2 py-0.5 rounded-full text-xs font-semibold bg-orange-100 text-orange-600">' + esc(D.alarm.toUpperCase()) + '</span>');
        }
        if (D.ip) {
            crumbs.push(labelWithCount(D.ip, D.ipTotal));
        }
        if (D.district) {
            crumbs.push(labelWithCount(D.district, D.districtTotal));
        }

        var breadcrumb = el('sphfKpiDrillBreadcrumb');
        if (breadcrumb) {
            breadcrumb.innerHTML = crumbs.join(' <span class="text-gray-300 mx-1">›</span> ');
        }
    }

    function updateBackBtn() {
        var btn = el('sphfKpiDrillBackBtn');
        if (!btn) return;
        btn.classList.toggle('hidden', D.step === 'chart');
    }

    function snapshotState() {
        return {
            step: D.step,
            kpiLabel: D.kpiLabel,
            kpiTotal: D.kpiTotal,
            stageKey: D.stageKey,
            stageLabel: D.stageLabel,
            stageTotal: D.stageTotal,
            releaseStageKey: D.releaseStageKey,
            releaseStageLabel: D.releaseStageLabel,
            releaseStageTotal: D.releaseStageTotal,
            financialLabel: D.financialLabel,
            financialTotal: D.financialTotal,
            alarmBucketLabel: D.alarmBucketLabel,
            alarmBucketTotal: D.alarmBucketTotal,
            drillMode: D.drillMode,
            alarm: D.alarm,
            ip: D.ip,
            ipTotal: D.ipTotal,
            district: D.district,
            districtTotal: D.districtTotal,
            page: D.page,
            perPage: D.perPage,
            lastPage: D.lastPage,
            totalRows: D.totalRows,
        };
    }

    function applySnapshot(state) {
        if (!state) return;
        Object.assign(D, state);
        D._rows = [];
        D._bars = [];
    }

    function updateStepArrows() {
        var prev = el('sphfKpiDrillStepPrev');
        var next = el('sphfKpiDrillStepNext');
        if (!prev || !next) return;

        var hidden = D.step === 'chart' && NAV.back.length === 0 && NAV.forward.length === 0;
        prev.classList.toggle('hidden', hidden);
        next.classList.toggle('hidden', hidden);
        prev.disabled = NAV.back.length === 0;
        next.disabled = NAV.forward.length === 0;
    }

    function pushCurrentToBack() {
        NAV.back.push(snapshotState());
        if (NAV.back.length > 60) NAV.back.shift();
        NAV.forward = [];
        updateStepArrows();
    }

    function transitionTo(mutator) {
        pushCurrentToBack();
        mutator();
        updateStepArrows();
        fetchAndRender();
    }

    function goForward() {
        if (!NAV.forward.length) return;
        NAV.back.push(snapshotState());
        applySnapshot(NAV.forward.pop());
        updateStepArrows();
        fetchAndRender();
    }

    function updateExportBtn() {
        var btn = el('sphfKpiDrillExport');
        if (!btn) return;
        btn.classList.toggle('hidden', D.step !== 'beneficiary');
    }

    function hideTabsKeepActions() {
        var tabs = document.querySelectorAll('#sphfKpiDrillModal .sphf-kpi-drill-tab');
        tabs.forEach(function (tab) { tab.classList.add('hidden'); });
    }

    function niceCeil(value) {
        if (!isFinite(value) || value <= 0) return 1;
        var magnitude = Math.pow(10, Math.floor(Math.log10(value)));
        var normalized = value / magnitude;
        var nice = normalized <= 1 ? 1 : normalized <= 2 ? 2 : normalized <= 5 ? 5 : 10;
        return nice * magnitude;
    }

    function renderSimpleBars(bars) {
        var chartEl = el('sphfKpiDrillChartEl');
        if (!chartEl) return;
        if (!bars.length) {
            chartEl.innerHTML = '<div class="py-10 text-center text-sm text-gray-400">No chart data available.</div>';
            return;
        }

        var rawMax = Math.max.apply(null, bars.map(function (b) { return Number(b.count || 0); }));
        var max = niceCeil(rawMax > 0 ? rawMax : 1);
        var steps = 6;
        var ticks = [];
        for (var i = 1; i < steps; i++) {
            var ratio = i / (steps - 1);
            var val = Math.round(max * ratio);
            var bottom = Math.round((300 / (steps - 1)) * i);
            ticks.push('<span style="bottom:' + bottom + 'px">' + Number(val).toLocaleString() + '</span>');
        }

        function splitLabel(label) {
            var words = String(label || '').split(' ');
            if (words.length <= 2) return esc(label);
            var mid = Math.ceil(words.length / 2);
            return esc(words.slice(0, mid).join(' ')) + '<br>' + esc(words.slice(mid).join(' '));
        }

        var grid = [];
        for (var line = 0; line < steps; line++) {
            var pos = Math.round((300 / (steps - 1)) * line);
            grid.push('<div class="sphf-kpi-chart-gridline" style="bottom:' + pos + 'px"></div>');
        }

        chartEl.innerHTML =
            '<div class="sphf-kpi-chart-shell">' +
                '<div class="sphf-kpi-chart-topbar"><span class="sphf-kpi-chart-menu">≡</span></div>' +
                '<div class="sphf-kpi-chart-stage">' +
                    '<div class="sphf-kpi-chart-yaxis">' + ticks.join('') + '<span class="sphf-kpi-chart-zero">0</span></div>' +
                    '<div class="sphf-kpi-chart-plot">' +
                        '<div class="sphf-kpi-chart-baseline"></div>' +
                        grid.join('') +
                        bars.map(function (b) {
                            var val = Number(b.count || 0);
                            var height = val > 0 ? Math.max(12, Math.round((val / max) * 300)) : 0;
                            var color = String(b.color || '#2563eb');
                            return '<div class="sphf-kpi-chart-col">' +
                                '<button type="button" class="sphf-kpi-chart-barbtn" title="' + esc(b.label) + ': ' + val.toLocaleString() + '" data-simple-chart-key="' + esc(b.key) + '" data-simple-chart-label="' + esc(b.label) + '" data-simple-chart-next="' + esc(b.next_step || '') + '" data-simple-chart-count="' + val + '">' +
                                    '<span class="sphf-kpi-chart-value">' + val.toLocaleString() + '</span>' +
                                    '<div class="sphf-kpi-chart-bar" style="height:' + height + 'px;background:' + color + ';"></div>' +
                                '</button>' +
                                '<div class="sphf-kpi-chart-label" style="color:' + color + '">' + splitLabel(b.label) + '</div>' +
                            '</div>';
                        }).join('') +
                    '</div>' +
                '</div>' +
            '</div>';
    }

    function buildParams() {
        var params = new URLSearchParams({
            flow: 'stage_bottlenecks',
            tab: 'overall',
            step: D.step,
            stage_key: D.stageKey || '',
            release_stage_key: D.releaseStageKey || '',
            drill_mode: D.drillMode || '',
        });

        if (D.alarm) params.set('alarm', D.alarm);
        if (D.ip) params.set('ip', D.ip);
        if (D.district) params.set('district', D.district);
        if (D.step === 'beneficiary') {
            params.set('page', String(D.page));
            params.set('per_page', String(D.perPage));
        }

        var pageParams = new URLSearchParams(window.location.search || '');
        pageParams.forEach(function (value, key) {
            if (key === 'ajax' || key === 'modal_only' || key === 'lazy_modal' || key === 'alarm') return;
            if (params.has(key)) return;
            params.append(key, value);
        });

        return params;
    }

    function fetchAndRender() {
        setLoading(true);
        updateTitle();
        updateBreadcrumb();
        updateBackBtn();

        fetch(KPI_DRILL_URL + '?' + buildParams().toString(), {
            headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }
        })
        .then(function (r) { return r.json(); })
        .then(function (data) {
            setLoading(false);
            if (data.step === 'chart') {
                D._bars = Array.isArray(data.bars) ? data.bars : [];
                D._rows = [];
                var defaultNote = 'Click a bar to drill down.';
                setNote(data.message || defaultNote);
                hide('sphfKpiDrillTableArea');
                show('sphfKpiDrillChartArea');
                updateExportBtn();
                renderSimpleBars(D._bars);
                return;
            }

            setNote('');
            renderTable(data);
        })
        .catch(function () {
            setLoading(false);
            setNote('');
            hide('sphfKpiDrillChartArea');
            show('sphfKpiDrillTableArea');
            var tbody = el('sphfKpiDrillTbody');
            if (tbody) tbody.innerHTML = '<tr><td colspan="6" class="text-center py-8 text-red-400">Failed to load data.</td></tr>';
            D._rows = [];
            updateExportBtn();
        });
    }

    function renderTable(payload) {
        hide('sphfKpiDrillChartArea');
        show('sphfKpiDrillTableArea');

        var rows = Array.isArray(payload.rows) ? payload.rows : [];
        D._rows = rows;

        var thead = el('sphfKpiDrillThead');
        var tbody = el('sphfKpiDrillTbody');
        var lbl = el('sphfKpiDrillTableLabel');
        var pager = el('sphfKpiDrillPager');

        var searchEl = el('sphfKpiDrillSearch');
        if (searchEl) searchEl.value = '';

        if (D.step === 'beneficiary') {
            var pag = payload.pagination || {};
            D.totalRows = Number(pag.total || rows.length || 0);
            D.lastPage = Number(pag.last_page || 1);
            D.page = Number(pag.current_page || 1);

            if (lbl) lbl.textContent = 'Beneficiaries';
            if (thead) {
                thead.innerHTML =
                    '<th class="text-left text-[10px] font-semibold text-gray-400 tracking-wider px-3 py-3">UUID</th>' +
                    '<th class="text-left text-[10px] font-semibold text-gray-400 tracking-wider px-3 py-3">BENEFICIARY / CNIC</th>' +
                    '<th class="text-left text-[10px] font-semibold text-gray-400 tracking-wider px-3 py-3">IP</th>' +
                    '<th class="text-left text-[10px] font-semibold text-gray-400 tracking-wider px-3 py-3">DISTRICT / TEHSIL</th>' +
                    '<th class="text-left text-[10px] font-semibold text-gray-400 tracking-wider px-3 py-3">BANK / BRANCH</th>' +
                    '<th class="text-left text-[10px] font-semibold text-gray-400 tracking-wider px-3 py-3">DAYS</th>' +
                    '<th class="text-left text-[10px] font-semibold text-gray-400 tracking-wider px-3 py-3">ALARM</th>';
            }

            if (tbody) {
                if (!rows.length) {
                    tbody.innerHTML = '<tr><td colspan="7" class="text-center py-8 text-gray-400">No data found.</td></tr>';
                } else {
                    tbody.innerHTML = rows.map(function (r) {
                        var alarm = String(r.alarm || 'green');
                        var alarmCls = alarm === 'red' ? 'bg-red-100 text-red-600'
                            : alarm === 'orange' ? 'bg-orange-100 text-orange-500'
                            : alarm === 'yellow' ? 'bg-yellow-100 text-yellow-700'
                            : 'bg-green-100 text-green-600';
                        var days = Number(r.days || 0);
                        var daysCls = days >= 120 ? 'text-red-500 font-bold'
                            : days >= 90 ? 'text-orange-500 font-bold'
                            : days >= 60 ? 'text-yellow-600 font-bold'
                            : 'text-green-600';

                        return '<tr class="border-b border-gray-50 hover:bg-gray-50">' +
                            '<td class="px-3 py-3 text-xs text-gray-400">' + esc(r.uuid) + '</td>' +
                            '<td class="px-3 py-3"><div class="font-semibold text-gray-900 text-sm">' + esc(r.name) + '</div><div class="text-xs text-gray-400">' + esc(r.cnic) + '</div></td>' +
                            '<td class="px-3 py-3 text-xs text-gray-600">' + esc(r.ip) + '</td>' +
                            '<td class="px-3 py-3 text-xs"><div>' + esc(r.district) + '</div><div class="text-gray-400">' + esc(r.tehsil) + '</div></td>' +
                            '<td class="px-3 py-3 text-xs"><div class="font-medium text-gray-800">' + esc(r.bank) + '</div><div class="text-gray-400">' + esc(r.branch) + '</div></td>' +
                            '<td class="px-3 py-3 text-sm ' + daysCls + '">' + days + 'd</td>' +
                            '<td class="px-3 py-3"><span class="inline-flex px-2 py-1 rounded-full text-xs font-semibold ' + alarmCls + '">' + esc(alarm) + '</span></td>' +
                        '</tr>';
                    }).join('');
                }
            }

            if (pager) {
                pager.classList.remove('hidden');
                var info = el('sphfKpiDrillPagerInfo');
                var prev = el('sphfKpiDrillPagerPrev');
                var next = el('sphfKpiDrillPagerNext');
                if (info) info.textContent = 'Page ' + D.page + ' of ' + D.lastPage + ' · ' + D.totalRows.toLocaleString() + ' total';
                if (prev) prev.disabled = D.page <= 1;
                if (next) next.disabled = D.page >= D.lastPage;
            }
        } else {
            if (pager) pager.classList.add('hidden');
            var colLabel = D.step === 'district' ? 'DISTRICT' : 'IP PARTNER';
            if (lbl) lbl.textContent = D.step === 'district' ? 'Districts' : 'IP Partners';
            if (thead) {
                thead.innerHTML =
                    '<th class="text-left text-[11px] font-semibold text-gray-400 tracking-wider px-5 py-3">' + colLabel + '</th>' +
                    '<th class="text-left text-[11px] font-semibold text-gray-400 tracking-wider px-4 py-3">TOTAL</th>' +
                    '<th class="text-left text-[11px] font-semibold text-gray-400 tracking-wider px-4 py-3">GREEN</th>' +
                    '<th class="text-left text-[11px] font-semibold text-gray-400 tracking-wider px-4 py-3">YELLOW</th>' +
                    '<th class="text-left text-[11px] font-semibold text-gray-400 tracking-wider px-4 py-3">AMBER</th>' +
                    '<th class="text-left text-[11px] font-semibold text-gray-400 tracking-wider px-4 py-3">RED</th>';
            }
            if (tbody) {
                if (!rows.length) {
                    tbody.innerHTML = '<tr><td colspan="6" class="text-center py-8 text-gray-400">No data found.</td></tr>';
                } else {
                    tbody.innerHTML = rows.map(function (r) {
                        return '<tr data-kpi-drill-row="1" data-step="' + esc(D.step) + '" data-value="' + esc(r.label) + '" data-total="' + Number(r.total || 0) + '" class="cursor-pointer hover:bg-blue-50 border-b border-gray-50 transition-colors">' +
                            '<td class="px-5 py-4 font-medium text-gray-800">' + esc(r.label) + '</td>' +
                            '<td class="px-4 py-4 font-bold text-gray-900">' + Number(r.total || 0).toLocaleString() + '</td>' +
                            '<td class="px-4 py-4"><span class="inline-flex min-w-[48px] justify-center px-2 py-1 rounded-full text-xs font-semibold bg-green-50 text-green-700">' + Number(r.green || 0).toLocaleString() + '</span></td>' +
                            '<td class="px-4 py-4"><span class="inline-flex min-w-[48px] justify-center px-2 py-1 rounded-full text-xs font-semibold bg-yellow-50 text-yellow-700">' + Number(r.yellow || 0).toLocaleString() + '</span></td>' +
                            '<td class="px-4 py-4"><span class="inline-flex min-w-[48px] justify-center px-2 py-1 rounded-full text-xs font-semibold bg-orange-50 text-orange-600">' + Number(r.amber || 0).toLocaleString() + '</span></td>' +
                            '<td class="px-4 py-4"><span class="inline-flex min-w-[48px] justify-center px-2 py-1 rounded-full text-xs font-semibold bg-red-50 text-red-600">' + Number(r.red || 0).toLocaleString() + '</span></td>' +
                        '</tr>';
                    }).join('');
                }
            }
        }

        updateBreadcrumb();
        updateBackBtn();
        updateExportBtn();
    }

    function applySearch(query) {
        var tbody = el('sphfKpiDrillTbody');
        if (!tbody) return;
        var q = String(query || '').toLowerCase().trim();
        Array.from(tbody.querySelectorAll('tr')).forEach(function (tr) {
            tr.style.display = !q || String(tr.textContent || '').toLowerCase().includes(q) ? '' : 'none';
        });
    }

    function csvEscape(value) {
        var s = String(value ?? '');
        return /[",\n\r]/.test(s) ? '"' + s.replace(/"/g, '""') + '"' : s;
    }

    function filenamePart(value) {
        var s = String(value || '').trim().replace(/[^a-z0-9_-]+/gi, '_').replace(/^_+|_+$/g, '');
        return s || 'data';
    }

    function exportKpiDrillRowsToCSV() {
        var rows = Array.isArray(D._rows) ? D._rows : [];
        if (D.step !== 'beneficiary' || !rows.length) {
            alert('No data to export.');
            return;
        }

        var headers = ['Stage', 'UUID', 'Beneficiary Name', 'CNIC', 'IP', 'District', 'Tehsil', 'Bank', 'Branch', 'Days', 'Alarm'];
        var csv = [headers.map(csvEscape).join(',')];
        rows.forEach(function (r) {
            csv.push([
                r.stage ?? D.stageLabel ?? '',
                r.uuid ?? '',
                r.name ?? '',
                r.cnic ?? '',
                r.ip ?? '',
                r.district ?? '',
                r.tehsil ?? '',
                r.bank ?? '',
                r.branch ?? '',
                r.days ?? '',
                r.alarm ?? '',
            ].map(csvEscape).join(','));
        });

        var filename = 'SPHF_Stage_Bottlenecks_Drill_' +
            filenamePart(D.stageLabel || D.releaseStageLabel || 'stage') + '_' +
            filenamePart(D.ip || 'all_ip') + '_' +
            filenamePart(D.district || 'all_district') + '_' +
            'page_' + filenamePart(D.page) + '_' + Date.now() + '.csv';

        var blob = new Blob(['\uFEFF' + csv.join('\n')], { type: 'text/csv;charset=utf-8;' });
        var url = URL.createObjectURL(blob);
        var link = document.createElement('a');
        link.setAttribute('href', url);
        link.setAttribute('download', filename);
        link.style.display = 'none';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        setTimeout(function () { URL.revokeObjectURL(url); }, 0);
    }

    function goBack() {
        if (NAV.back.length) {
            NAV.forward.push(snapshotState());
            applySnapshot(NAV.back.pop());
            updateStepArrows();
            fetchAndRender();
            return;
        }

        if (D.step === 'chart') {
            window._sphfKpiDrillClose();
            return;
        }

        if (D.step === 'financial_status') {
            D.step = 'chart';
            D.releaseStageKey = '';
            D.releaseStageLabel = '';
            D.releaseStageTotal = 0;
            D.financialLabel = '';
            D.financialTotal = 0;
            D.alarmBucketLabel = '';
            D.alarmBucketTotal = 0;
            D.drillMode = 'stage_green';
            D.alarm = '';
            fetchAndRender();
            return;
        }

        if (D.step === 'not_withdrawal_alarm') {
            D.step = 'financial_status';
            D.financialLabel = '';
            D.financialTotal = 0;
            D.alarmBucketLabel = '';
            D.alarmBucketTotal = 0;
            D.alarm = '';
            fetchAndRender();
            return;
        }

        if (D.step === 'ip') {
            D.ip = null;
            D.ipTotal = 0;
            D.district = null;
            D.districtTotal = 0;
            D.page = 1;
            if (D.drillMode === 'withdrawal') {
                D.step = 'financial_status';
                D.financialLabel = '';
                D.financialTotal = 0;
            } else if (D.drillMode === 'not_withdrawal') {
                D.step = 'not_withdrawal_alarm';
                D.alarm = '';
                D.alarmBucketLabel = '';
                D.alarmBucketTotal = 0;
            } else {
                D.step = 'chart';
                D.stageKey = '';
                D.stageLabel = '';
                D.stageTotal = 0;
            }
            fetchAndRender();
            return;
        }

        if (D.step === 'district') {
            D.district = null;
            D.districtTotal = 0;
            D.page = 1;
            if (D.drillMode === 'stage_green') {
                D.step = 'ip';
                D.district = null;
            } else {
                D.step = 'ip';
            }
            fetchAndRender();
            return;
        }

        if (D.step === 'beneficiary') {
            D.step = 'district';
            D.district = null;
            D.districtTotal = 0;
            D.page = 1;
            fetchAndRender();
        }

        updateStepArrows();
    }

    function handleChartClick(key, label, nextStep, count) {
        var selectedCount = Number(count || 0);

        if (D.step === 'chart') {
            if (nextStep === 'financial_status') {
                transitionTo(function () {
                    D.releaseStageKey = key;
                    D.releaseStageLabel = label;
                    D.releaseStageTotal = selectedCount;
                    D.financialLabel = '';
                    D.financialTotal = 0;
                    D.alarmBucketLabel = '';
                    D.alarmBucketTotal = 0;
                    D.step = 'financial_status';
                    D.drillMode = 'stage_green';
                    D.ip = null;
                    D.ipTotal = 0;
                    D.district = null;
                    D.districtTotal = 0;
                    D.page = 1;
                });
                return;
            }

            transitionTo(function () {
                D.stageKey = key;
                D.stageLabel = label;
                D.stageTotal = selectedCount;
                D.financialLabel = '';
                D.financialTotal = 0;
                D.alarmBucketLabel = '';
                D.alarmBucketTotal = 0;
                D.drillMode = 'stage_green';
                D.step = 'ip';
                D.ip = null;
                D.ipTotal = 0;
                D.district = null;
                D.districtTotal = 0;
                D.page = 1;
            });
            return;
        }

        if (D.step === 'financial_status') {
            if (key === 'withdrawal') {
                transitionTo(function () {
                    D.drillMode = 'withdrawal';
                    D.stageKey = D.releaseStageKey;
                    D.stageLabel = D.releaseStageLabel;
                    D.financialLabel = 'Withdrawal';
                    D.financialTotal = selectedCount;
                    D.alarmBucketLabel = '';
                    D.alarmBucketTotal = 0;
                    D.step = 'ip';
                    D.ip = null;
                    D.ipTotal = 0;
                    D.district = null;
                    D.districtTotal = 0;
                    D.page = 1;
                });
                return;
            }

            if (key === 'not_withdrawal') {
                transitionTo(function () {
                    D.drillMode = 'not_withdrawal';
                    D.stageKey = D.releaseStageKey;
                    D.stageLabel = D.releaseStageLabel;
                    D.financialLabel = 'Not Withdrawal';
                    D.financialTotal = selectedCount;
                    D.alarmBucketLabel = '';
                    D.alarmBucketTotal = 0;
                    D.step = 'not_withdrawal_alarm';
                });
            }
            return;
        }

        if (D.step === 'not_withdrawal_alarm' && ['yellow', 'orange', 'red'].indexOf(key) !== -1) {
            if (selectedCount <= 0) {
                setNote('No records available for selected bucket.');
                return;
            }

            transitionTo(function () {
                D.drillMode = 'not_withdrawal';
                D.stageKey = D.releaseStageKey;
                D.stageLabel = D.releaseStageLabel;
                D.alarm = key;
                D.alarmBucketLabel = key.toUpperCase();
                D.alarmBucketTotal = selectedCount;
                D.step = 'ip';
                D.ip = null;
                D.ipTotal = 0;
                D.district = null;
                D.districtTotal = 0;
                D.page = 1;
            });
        }
    }

    window.openKpiDrillModal = function (alarm, kpiLabel, kpiTotal) {
        var normalizedAlarm = String(alarm || '').toLowerCase();
        if (normalizedAlarm === 'amber') normalizedAlarm = 'orange';
        if (['green', 'yellow', 'orange', 'red'].indexOf(normalizedAlarm) === -1) normalizedAlarm = '';

        var normalizedKpiLabel = String(kpiLabel || '').trim();
        if (!normalizedKpiLabel) {
            normalizedKpiLabel = normalizedAlarm ? (normalizedAlarm.toUpperCase() + ' Cases') : 'Total Cases';
        }
        var normalizedKpiTotal = Number(kpiTotal || 0);

        D.step = 'chart';
        D.kpiLabel = normalizedKpiLabel;
        D.kpiTotal = normalizedKpiTotal;
        D.stageKey = '';
        D.stageLabel = '';
        D.stageTotal = 0;
        D.releaseStageKey = '';
        D.releaseStageLabel = '';
        D.releaseStageTotal = 0;
        D.financialLabel = '';
        D.financialTotal = 0;
        D.alarmBucketLabel = '';
        D.alarmBucketTotal = 0;
        D.drillMode = 'stage_green';
        D.alarm = normalizedAlarm;
        D.ip = null;
        D.ipTotal = 0;
        D.district = null;
        D.districtTotal = 0;
        D.page = 1;
        D.lastPage = 1;
        D.totalRows = 0;
        D._rows = [];
        D._bars = [];

        NAV.back = [];
        NAV.forward = [];

        hideTabsKeepActions();
        updateStepArrows();

        var modal = el('sphfKpiDrillModal');
        if (!modal) return;
        modal.classList.remove('hidden');
        modal.setAttribute('aria-hidden', 'false');
        document.body.classList.add('sphf-modal-open');
        fetchAndRender();
    };

    window.openNonWithdrawalAlarmDrill = function (alarm, kpiLabel, kpiTotal) {
        var normalized = String(alarm || '').toLowerCase();
        if (normalized === 'amber') normalized = 'orange';
        if (['yellow', 'orange', 'red'].indexOf(normalized) === -1) return;

        var normalizedKpiLabel = String(kpiLabel || '').trim();
        if (!normalizedKpiLabel) {
            normalizedKpiLabel = normalized.toUpperCase() + ' Non Withdrawal';
        }
        var normalizedKpiTotal = Number(kpiTotal || 0);

        D.step = 'ip';
        D.kpiLabel = normalizedKpiLabel;
        D.kpiTotal = normalizedKpiTotal;
        D.stageKey = '';
        D.stageLabel = 'Non Withdrawal';
        D.stageTotal = normalizedKpiTotal;
        D.releaseStageKey = '';
        D.releaseStageLabel = '';
        D.releaseStageTotal = 0;
        D.drillMode = 'not_withdrawal';
        D.alarm = normalized;
        D.ip = null;
        D.ipTotal = 0;
        D.district = null;
        D.districtTotal = 0;
        D.page = 1;
        D.lastPage = 1;
        D.totalRows = 0;
        D._rows = [];
        D._bars = [];

        hideTabsKeepActions();

        var modal = el('sphfKpiDrillModal');
        if (!modal) return;
        modal.classList.remove('hidden');
        modal.setAttribute('aria-hidden', 'false');
        document.body.classList.add('sphf-modal-open');
        fetchAndRender();
    };

    window._sphfKpiDrillClose = function () {
        var modal = el('sphfKpiDrillModal');
        if (!modal) return;
        modal.classList.add('hidden');
        modal.setAttribute('aria-hidden', 'true');
        document.body.classList.remove('sphf-modal-open');
    };

    window._sphfKpiDrillBack = goBack;

    document.addEventListener('DOMContentLoaded', function () {
        var closeBtn = el('sphfKpiDrillClose');
        if (closeBtn && !closeBtn.dataset.kpibound) {
            closeBtn.dataset.kpibound = '1';
            closeBtn.onclick = window._sphfKpiDrillClose;
        }

        var modal = el('sphfKpiDrillModal');
        if (modal && !modal.dataset.kpibound) {
            modal.dataset.kpibound = '1';
            modal.onclick = null;
        }

        document.addEventListener('keydown', function (e) {
            if (e.key === 'Escape') {
                var m = el('sphfKpiDrillModal');
                if (m && !m.classList.contains('hidden')) window._sphfKpiDrillClose();
            }
        });

        var searchEl = el('sphfKpiDrillSearch');
        if (searchEl && !searchEl.dataset.kpibound) {
            searchEl.dataset.kpibound = '1';
            searchEl.addEventListener('input', function () { applySearch(this.value); });
            searchEl.addEventListener('keydown', function (e) {
                if (e.key === 'Escape') {
                    this.value = '';
                    applySearch('');
                }
            });
        }

        var exportBtn = el('sphfKpiDrillExport');
        if (exportBtn && !exportBtn.dataset.kpibound) {
            exportBtn.dataset.kpibound = '1';
            exportBtn.addEventListener('click', exportKpiDrillRowsToCSV);
        }

        var prev = el('sphfKpiDrillPagerPrev');
        var next = el('sphfKpiDrillPagerNext');
        if (prev && !prev.dataset.kpibound) {
            prev.dataset.kpibound = '1';
            prev.onclick = function () {
                if (D.page <= 1) return;
                D.page -= 1;
                fetchAndRender();
            };
        }

        var stepPrev = el('sphfKpiDrillStepPrev');
        var stepNext = el('sphfKpiDrillStepNext');
        if (stepPrev && !stepPrev.dataset.kpibound) {
            stepPrev.dataset.kpibound = '1';
            stepPrev.onclick = function () { window._sphfKpiDrillBack(); };
        }
        if (stepNext && !stepNext.dataset.kpibound) {
            stepNext.dataset.kpibound = '1';
            stepNext.onclick = function () { goForward(); };
        }
        if (next && !next.dataset.kpibound) {
            next.dataset.kpibound = '1';
            next.onclick = function () {
                if (D.page >= D.lastPage) return;
                D.page += 1;
                fetchAndRender();
            };
        }

        var tableWrap = el('sphfKpiDrillTableArea');
        if (tableWrap && !tableWrap.dataset.kpibound) {
            tableWrap.dataset.kpibound = '1';
            tableWrap.addEventListener('click', function (e) {
                var row = e.target.closest('#sphfKpiDrillTbody tr[data-kpi-drill-row]');
                if (!row) return;
                var clickedStep = String(row.dataset.step || '');
                var clickedValue = String(row.dataset.value || '');
                var clickedTotal = Number(row.dataset.total || 0);

                if (clickedStep === 'ip') {
                    transitionTo(function () {
                        D.step = 'district';
                        D.ip = clickedValue;
                        D.ipTotal = clickedTotal;
                        D.district = null;
                        D.districtTotal = 0;
                        D.page = 1;
                    });
                    return;
                }

                if (clickedStep === 'district') {
                    transitionTo(function () {
                        D.step = 'beneficiary';
                        D.district = clickedValue;
                        D.districtTotal = clickedTotal;
                        D.page = 1;
                    });
                }
            });
        }

        var chartArea = el('sphfKpiDrillChartArea');
        if (chartArea && !chartArea.dataset.kpibound) {
            chartArea.dataset.kpibound = '1';
            chartArea.addEventListener('click', function (e) {
                var btn = e.target.closest('#sphfKpiDrillChartEl [data-simple-chart-key]');
                if (!btn) return;
                var clickCount = Number(btn.getAttribute('data-simple-chart-count') || 0);
                if (clickCount <= 0) {
                    setNote('No records available for selected bucket.');
                    return;
                }
                handleChartClick(
                    String(btn.getAttribute('data-simple-chart-key') || ''),
                    String(btn.getAttribute('data-simple-chart-label') || ''),
                    String(btn.getAttribute('data-simple-chart-next') || ''),
                    clickCount
                );
            });
        }
    });
})();
</script>