{{-- ===== DISAGGREGATION DRILL-DOWN MODAL (Steps 2-4: IP → District → Beneficiary) ===== --}}
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 hidden" id="sphfDisaggModal" aria-hidden="true">
    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-6xl mx-4 flex flex-col max-h-[90vh] overflow-hidden">

        {{-- Header --}}
        <div class="flex items-start justify-between px-8 pt-7 pb-4">
            <div>
                <h3 class="text-xl font-bold text-gray-900" id="sphfDisaggModalTitle">Beneficiaries</h3>
                <p class="text-sm text-gray-600 mt-2 flex items-center gap-2" id="sphfDisaggBreadcrumb">
                    <span class="text-blue-600 font-medium">—</span>
                    <span id="sphfDisaggBreadcrumbPath">Select a stage row to explore</span>
                </p>
                <p class="text-sm text-gray-500 mt-1 flex items-center gap-1.5 sphf-disagg-sub" id="sphfDisaggModalSubtitle">
                    <span class="inline-block w-2 h-2 rounded-full bg-blue-500"></span>
                    Showing individual beneficiary details
                </p>
            </div>
            <button type="button" id="sphfDisaggModalClose" class="sphf-modal__close">
                <i class="ki-filled ki-cross"></i><span style="display:none;">
                ✕
                </span>
            </button>
        </div>

        {{-- NO chart wrap here — we skip step 1 (gap) entirely --}}

        {{-- Table --}}
        <div class="px-8 pb-2 overflow-y-auto flex-1">
            <p class="text-[11px] font-bold tracking-widest text-gray-700 uppercase mb-3 flex items-center gap-2">
                Disaggregated Data
            </p>
            <div class="rounded-xl border border-gray-400 overflow-hidden">
                <table class="w-full text-sm" id="sphfDisaggTable">
                    <thead>
                        <tr class="bg-gray-100 border-b border-gray-400">
                            <th class="text-left text-[11px] font-semibold text-gray-500 tracking-wider px-5 py-3" id="sphfDisaggColHeader">IP</th>
                            <th class="text-left text-[11px] font-semibold text-gray-500 tracking-wider px-4 py-3">TOTAL CASES</th>
                            <th class="text-left text-[11px] font-semibold text-gray-500 tracking-wider px-4 py-3">GREEN STATUS</th>
                            <th class="text-left text-[11px] font-semibold text-gray-500 tracking-wider px-4 py-3">YELLOW STATUS</th>
                            <th class="text-left text-[11px] font-semibold text-gray-500 tracking-wider px-4 py-3">AMBER STATUS</th>
                            <th class="text-left text-[11px] font-semibold text-gray-500 tracking-wider px-4 py-3">RED STATUS</th>
                        </tr>
                    </thead>
                    <tbody id="sphfDisaggTableBody">
                        <tr><td colspan="6" class="text-center py-6 text-gray-400">Loading...</td></tr>
                    </tbody>
                </table>
            </div>
            <div id="sphfDisaggBeneficiaryPager" class="hidden mt-3 flex items-center justify-between text-xs text-gray-600">
                <span id="sphfDisaggBeneficiaryPagerInfo">Page 1 of 1</span>
                <div class="flex items-center gap-2">
                    <button type="button" id="sphfDisaggBeneficiaryPrev" 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 Page</button>
                    <button type="button" id="sphfDisaggBeneficiaryNext" 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 Page</button>
                </div>
            </div>
        </div>

        {{-- Footer --}}
        <div class="flex items-center justify-between px-8 py-5 border-t border-gray-100 mt-2">
            <div class="flex items-center gap-2">
                <button type="button" id="sphfDisaggPrev"
                    class="w-10 h-10 flex items-center justify-center rounded-full border border-gray-200 text-gray-500 hover:bg-gray-50 transition text-base">&#8592;</button>
                <button type="button" id="sphfDisaggNext"
                    class="w-10 h-10 flex items-center justify-center rounded-full border border-gray-200 text-gray-500 hover:bg-gray-50 transition text-base">&#8594;</button>
            </div>
            {{-- <button type="button" id="sphfDisaggExport"
                class="flex items-center gap-2 bg-green-600 hover:bg-green-700 text-white text-sm font-semibold px-5 py-2.5 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>
</div>

<script>
(function () {
    // ── State ──────────────────────────────────────────────────────────────────
    var state = {
        step:     'ip',      // ip | district | beneficiary
        pairKey:  '',        // e.g. tranche_1_to_plinth
        stageLabel: '',      // human-readable stage name shown in header
        selectedAlarm: '',
        selectedTotal: 0,
        selectedGreen: 0,
        selectedYellow: 0,
        selectedAmber: 0,
        selectedRed: 0,
        selectedEscalation: '',
        ipValue:  null,      // set after IP click
        ipTotal:  0,
        districtValue: null, // set after district click
        beneficiaryTotal: 0,
        beneficiaryPage: 1,
        beneficiaryPerPage: 100,
        beneficiaryLastPage: 1,
        beneficiaryFrom: 0,
        beneficiaryTo: 0,
    };

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

    function buildBreadcrumb() {
        var parts = [];

        if (state.stageLabel || state.pairKey) {
            var stageText = escHtml(state.stageLabel || state.pairKey);
            if (state.selectedTotal > 0) {
                stageText += ' <span class="text-gray-500 font-normal">(' + Number(state.selectedTotal).toLocaleString() + ' cases)</span>';
            }
            parts.push('<span class="font-semibold text-blue-600">' + stageText + '</span>');
        }

        if (state.selectedAlarm) {
            parts.push('<span class="font-semibold text-gray-700 uppercase">' + escHtml(state.selectedAlarm) + '</span>');
        }

        if (state.ipValue) {
            var ipText = escHtml(state.ipValue);
            if (state.ipTotal > 0) {
                ipText += ' <span class="text-gray-500 font-normal">(' + Number(state.ipTotal).toLocaleString() + ' cases)</span>';
            }
            parts.push('<span class="text-gray-700">' + ipText + '</span>');
        }

        if (state.districtValue) {
            var districtText = escHtml(state.districtValue);
            if (state.step === 'beneficiary' && state.beneficiaryTotal > 0) {
                districtText += ' <span class="text-gray-500 font-normal">(' + Number(state.beneficiaryTotal).toLocaleString() + ' cases)</span>';
            }
            parts.push('<span class="text-gray-700">' + districtText + '</span>');
        }

        if (!parts.length) {
            return '<span class="text-gray-400">Select a stage row to explore</span>';
        }

        return parts.join(' <span class="text-gray-400 mx-1">›</span> ');
    }

    function updateModalHeader() {
        var titleEl = document.getElementById('sphfDisaggModalTitle');
        var crumbEl = document.getElementById('sphfDisaggBreadcrumbPath');
        var subEl   = document.getElementById('sphfDisaggModalSubtitle');
        if (titleEl) {
            titleEl.textContent = 'Beneficiaries';
        }
        if (crumbEl) {
            crumbEl.innerHTML = buildBreadcrumb();
        }
        if (subEl) {
            var summary = 'Showing individual beneficiary details';
            if (state.selectedEscalation) {
                summary += ' • ' + escHtml(state.selectedEscalation);
            }
            if (state.selectedAlarm) {
                summary += ' • ' + escHtml(state.selectedAlarm);
            }
            subEl.innerHTML = '<span class="inline-block w-2 h-2 rounded-full bg-blue-500"></span>' + summary;
        }
    }

    function updateBeneficiaryPager(pagination) {
        var wrap = document.getElementById('sphfDisaggBeneficiaryPager');
        var info = document.getElementById('sphfDisaggBeneficiaryPagerInfo');
        var prevBtn = document.getElementById('sphfDisaggBeneficiaryPrev');
        var nextBtn = document.getElementById('sphfDisaggBeneficiaryNext');
        if (!wrap || !info || !prevBtn || !nextBtn) return;

        if (state.step !== 'beneficiary') {
            wrap.classList.add('hidden');
            return;
        }

        wrap.classList.remove('hidden');
        var current = Number((pagination && pagination.current_page) || state.beneficiaryPage || 1);
        var last = Number((pagination && pagination.last_page) || state.beneficiaryLastPage || 1);
        var from = Number((pagination && pagination.from) || state.beneficiaryFrom || 0);
        var to = Number((pagination && pagination.to) || state.beneficiaryTo || 0);
        var total = Number((pagination && pagination.total) || state.beneficiaryTotal || 0);

        info.textContent = 'Page ' + current + ' of ' + last + ' - Showing ' + from + '-' + to + ' of ' + total;
        prevBtn.disabled = current <= 1;
        nextBtn.disabled = current >= last;
    }

    // ── Header columns ────────────────────────────────────────────────────────
    function updateTableHeaders() {
        var thead = document.querySelector('#sphfDisaggTable thead tr');
        if (!thead) return;

        if (state.step === 'beneficiary') {
            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">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">ALARM</th>' +
                '<th class="text-center text-[10px] font-semibold text-gray-400 tracking-wider px-3 py-3">1ST → PLINTH</th>' +
                '<th class="text-center text-[10px] font-semibold text-gray-400 tracking-wider px-3 py-3">PLINTH → 2ND</th>' +
                '<th class="text-center text-[10px] font-semibold text-gray-400 tracking-wider px-3 py-3">2ND → LINTEL</th>' +
                '<th class="text-center text-[10px] font-semibold text-gray-400 tracking-wider px-3 py-3">LINTEL → 3RD</th>' +
                '<th class="text-center text-[10px] font-semibold text-gray-400 tracking-wider px-3 py-3">3RD → ROOF</th>' +
                '<th class="text-center text-[10px] font-semibold text-gray-400 tracking-wider px-3 py-3">TOTAL DAYS</th>';
        } else {
            var colLabel = state.step === 'district' ? 'DISTRICT' : 'IP PARTNER';
            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 CASES</th>' +
                '<th class="text-left text-[11px] font-semibold text-gray-400 tracking-wider px-4 py-3">EFFICIENT</th>' +
                '<th class="text-left text-[11px] font-semibold text-gray-400 tracking-wider px-4 py-3">STABLE</th>' +
                '<th class="text-left text-[11px] font-semibold text-gray-400 tracking-wider px-4 py-3">DELAYED</th>' +
                '<th class="text-left text-[11px] font-semibold text-gray-400 tracking-wider px-4 py-3">CRITICAL</th>';
        }
    }

    // ── Row rendering ─────────────────────────────────────────────────────────
    function renderRows(rows) {
        var tbody = document.getElementById('sphfDisaggTableBody');
        if (!tbody) return;

        if (!rows || !rows.length) {
            tbody.innerHTML = '<tr><td colspan="11" class="text-center py-6 text-gray-400">No data available.</td></tr>';
            return;
        }

        if (state.step === 'beneficiary') {
            var dc = function (v) {
                if (v === null || v === undefined) return '<span class="text-gray-300">—</span>';
                if (v >= 60) return '<span class="text-red-500 font-semibold">' + v + 'd</span>';
                if (v >= 30) return '<span class="text-orange-400 font-semibold">' + v + 'd</span>';
                return '<span class="text-green-500 font-semibold">' + v + 'd</span>';
            };
            tbody.innerHTML = rows.map(function (row) {
                var almCls = row.alarm === 'red'    ? 'bg-red-100 text-red-600'
                           : row.alarm === 'orange' ? 'bg-orange-100 text-orange-500'
                           : row.alarm === 'yellow' ? 'bg-yellow-100 text-yellow-700'
                           : 'bg-green-100 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">' + escHtml(row.uuid) + '</td>' +
                    '<td class="px-3 py-3"><div class="font-semibold text-gray-900 text-sm">' + escHtml(row.name) + '</div>' +
                        '<div class="text-xs text-gray-400">' + escHtml(row.cnic) + '</div></td>' +
                    '<td class="px-3 py-3 text-xs text-gray-600">' + escHtml(row.tehsil) + '</td>' +
                    '<td class="px-3 py-3 text-xs"><div class="font-medium text-gray-800">' + escHtml(row.bank) + '</div>' +
                        '<div class="text-gray-400">' + escHtml(row.branch) + '</div></td>' +
                    '<td class="px-3 py-3"><span class="inline-flex px-2 py-1 rounded-full text-xs font-semibold ' + almCls + '">' + escHtml(row.alarm) + '</span></td>' +
                    '<td class="px-3 py-3 text-center">' + dc(row.s1) + '</td>' +
                    '<td class="px-3 py-3 text-center">' + dc(row.s2) + '</td>' +
                    '<td class="px-3 py-3 text-center">' + dc(row.s3) + '</td>' +
                    '<td class="px-3 py-3 text-center">' + dc(row.s4) + '</td>' +
                    '<td class="px-3 py-3 text-center">' + dc(row.s5) + '</td>' +
                    '<td class="px-3 py-3 text-center font-bold text-gray-900">' + row.total_days + 'd</td>' +
                '</tr>';
            }).join('');
            return;
        }

        // IP or District step — clickable rows
        tbody.innerHTML = rows.map(function (row) {
            return '<tr data-disagg-row="true" data-step="' + escHtml(state.step) + '" data-value="' + escHtml(row.label) + '" data-total="' + Number(row.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">' + escHtml(row.label) + '</td>' +
                '<td class="px-4 py-4 font-bold text-gray-900">' + Number(row.total).toLocaleString() + '</td>' +
                '<td class="px-4 py-4"><span class="inline-flex min-w-[56px] justify-center px-3 py-1 rounded-full text-sm font-medium bg-green-50 text-green-700">' + Number(row.green).toLocaleString() + '</span></td>' +
                '<td class="px-4 py-4"><span class="inline-flex min-w-[56px] justify-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-50 text-yellow-700">' + Number(row.yellow).toLocaleString() + '</span></td>' +
                '<td class="px-4 py-4"><span class="inline-flex min-w-[56px] justify-center px-3 py-1 rounded-full text-sm font-medium bg-orange-50 text-orange-600">' + Number(row.amber).toLocaleString() + '</span></td>' +
                '<td class="px-4 py-4"><span class="inline-flex min-w-[56px] justify-center px-3 py-1 rounded-full text-sm font-medium bg-red-50 text-red-600">' + Number(row.red).toLocaleString() + '</span></td>' +
            '</tr>';
        }).join('');
    }

    function showLoading() {
        var tbody = document.getElementById('sphfDisaggTableBody');
        var cols = state.step === 'beneficiary' ? 11 : 6;
        if (tbody) tbody.innerHTML = '<tr><td colspan="' + cols + '" class="text-center py-8 text-gray-400">Loading...</td></tr>';
    }

    // ── API fetch ─────────────────────────────────────────────────────────────
    function fetchStep() {
        showLoading();
        updateTableHeaders();

        var params = new URLSearchParams({ step: state.step, pair_key: state.pairKey });
        if (state.ipValue)       params.set('ip', state.ipValue);
        if (state.districtValue) params.set('district', state.districtValue);
        if (state.selectedAlarm) params.set('alarm', state.selectedAlarm);
        if (state.step === 'beneficiary') {
            params.set('page', String(state.beneficiaryPage || 1));
            params.set('per_page', String(state.beneficiaryPerPage || 100));
        }

        fetch('/sphf-stage-drill?' + params.toString(), {
            headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }
        })
        .then(function (res) { return res.json(); })
        .then(function (data) {
            var rows = data.rows || [];
            var pagination = data.pagination || null;
            state.beneficiaryTotal = Number(data.total_count || data.total || rows.length || 0);
            state.beneficiaryPage = Number((pagination && pagination.current_page) || state.beneficiaryPage || 1);
            state.beneficiaryPerPage = Number((pagination && pagination.per_page) || state.beneficiaryPerPage || 100);
            state.beneficiaryLastPage = Number((pagination && pagination.last_page) || state.beneficiaryLastPage || 1);
            state.beneficiaryFrom = Number((pagination && pagination.from) || state.beneficiaryFrom || 0);
            state.beneficiaryTo = Number((pagination && pagination.to) || state.beneficiaryTo || 0);

            updateModalHeader();
            updateBeneficiaryPager(pagination);
            renderRows(rows);
        })
        .catch(function () {
            var tbody = document.getElementById('sphfDisaggTableBody');
            var cols = state.step === 'beneficiary' ? 11 : 6;
            if (tbody) tbody.innerHTML = '<tr><td colspan="' + cols + '" class="text-center py-6 text-red-400">Failed to load data. Please try again.</td></tr>';
        });
    }

    // ── Public open / close ───────────────────────────────────────────────────
    function openDisaggModal(pairKey, stageLabel, total, alarm, escalation) {
        state.pairKey       = pairKey || '';
        state.stageLabel    = stageLabel || pairKey || '';
        state.selectedAlarm = alarm || '';
        state.selectedTotal = Number(total || 0);
        state.selectedGreen = 0;
        state.selectedYellow = 0;
        state.selectedAmber = 0;
        state.selectedRed = 0;
        state.selectedEscalation = escalation || '';
        state.step          = 'ip';
        state.ipValue       = null;
        state.ipTotal       = 0;
        state.districtValue = null;
        state.beneficiaryTotal = 0;
        state.beneficiaryPage = 1;
        state.beneficiaryPerPage = 100;
        state.beneficiaryLastPage = 1;
        state.beneficiaryFrom = 0;
        state.beneficiaryTo = 0;

        var cw = document.getElementById('sphfDisaggChartWrap');
        if (cw) cw.classList.add('hidden');

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

        fetchStep();
    }

    window.__sphfOpenDisaggModal = openDisaggModal;

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

    // ── Navigation ────────────────────────────────────────────────────────────
    document.addEventListener('DOMContentLoaded', function () {
        var closeBtn = document.getElementById('sphfDisaggModalClose');
        if (closeBtn) closeBtn.onclick = window.__sphfCloseDisaggModal;

        var modal = document.getElementById('sphfDisaggModal');
        if (modal) modal.onclick = function (e) { if (e.target === this) window.__sphfCloseDisaggModal(); };

        document.addEventListener('keydown', function (e) {
            if (e.key === 'Escape') window.__sphfCloseDisaggModal();
        });

        setTimeout(function () {
            var prevBtn = document.getElementById('sphfDisaggPrev');
            var nextBtn = document.getElementById('sphfDisaggNext');
            var pagePrevBtn = document.getElementById('sphfDisaggBeneficiaryPrev');
            var pageNextBtn = document.getElementById('sphfDisaggBeneficiaryNext');

            if (prevBtn) prevBtn.onclick = function () {
                if (state.step === 'ip') {
                    window.__sphfCloseDisaggModal();
                } else if (state.step === 'district') {
                    state.step          = 'ip';
                    state.ipValue       = null;
                    state.ipTotal       = 0;
                    state.districtValue = null;
                    state.beneficiaryTotal = 0;
                    state.beneficiaryPage = 1;
                    state.beneficiaryLastPage = 1;
                    state.beneficiaryFrom = 0;
                    state.beneficiaryTo = 0;
                    fetchStep();
                } else if (state.step === 'beneficiary') {
                    state.step          = 'district';
                    state.districtValue = null;
                    state.beneficiaryTotal = 0;
                    state.beneficiaryPage = 1;
                    state.beneficiaryLastPage = 1;
                    state.beneficiaryFrom = 0;
                    state.beneficiaryTo = 0;
                    fetchStep();
                }
            };

            // Next only makes sense on IP step (go to all districts)
            if (nextBtn) nextBtn.onclick = function () {
                if (state.step === 'ip') {
                    state.step = 'district';
                    fetchStep();
                } else if (state.step === 'district') {
                    state.step = 'beneficiary';
                    state.beneficiaryPage = 1;
                    fetchStep();
                }
            };

            if (pagePrevBtn) pagePrevBtn.onclick = function () {
                if (state.step !== 'beneficiary' || state.beneficiaryPage <= 1) return;
                state.beneficiaryPage -= 1;
                fetchStep();
            };

            if (pageNextBtn) pageNextBtn.onclick = function () {
                if (state.step !== 'beneficiary' || state.beneficiaryPage >= state.beneficiaryLastPage) return;
                state.beneficiaryPage += 1;
                fetchStep();
            };
        }, 0);

        // Row click — IP row → district, District row → beneficiary
        function sphfDisaggRowClick(e) {
            var row = e.target.closest('#sphfDisaggTableBody tr[data-disagg-row]');
            if (!row) return;
            var clickedStep  = row.dataset.step;
            var clickedValue = row.dataset.value;
            if (clickedStep === 'ip') {
                state.step    = 'district';
                state.ipValue = clickedValue;
                state.ipTotal = Number(row.dataset.total || 0);
                state.districtValue = null;
                state.beneficiaryTotal = 0;
                state.beneficiaryPage = 1;
                state.beneficiaryLastPage = 1;
                state.beneficiaryFrom = 0;
                state.beneficiaryTo = 0;
                fetchStep();
            } else if (clickedStep === 'district') {
                state.step          = 'beneficiary';
                state.districtValue = clickedValue;
                state.beneficiaryPage = 1;
                fetchStep();
            }
        }
        document.removeEventListener('click', sphfDisaggRowClick);
        document.addEventListener('click', sphfDisaggRowClick);
    });
})();
</script>