{{-- ===== DISAGGREGATION DRILL-DOWN MODAL (Steps 1-3) ===== --}}
<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">Loading path...</span>
                </p>
                <p class="text-sm text-gray-500 mt-1 flex items-center gap-1.5" id="sphfDisaggModalSubtitle">
                    <span class="inline-block w-2 h-2 rounded-full bg-green-500"></span>
                    <span id="sphfDisaggRowCount">showing disaggregated data</span>
                </p>
            </div>
            <button type="button" id="sphfDisaggModalClose"
                class="flex items-center gap-1.5 text-sm text-gray-600 border border-gray-300 rounded-lg px-3 py-1.5 hover:bg-gray-50 transition">
                <i class="ki-filled ki-cross text-xs"></i>
            </button>
        </div>

        {{-- Step 1 only: Bar Chart --}}
        <div id="sphfDisaggChartWrap" class="px-8 pb-2 hidden">
            <p class="text-[11px] font-bold tracking-widest text-gray-600 uppercase mb-3">Breakdown by Calculated Gap</p>
            <div id="sphfDisaggBarChart" style="min-height:200px;"></div>
        </div>

        {{-- Table --}}
        <div class="px-8 pb-2 overflow-y-auto flex-1" id="sphfDisaggTableWrap">
            <p class="text-[11px] font-bold tracking-widest text-gray-700 uppercase mb-3 flex items-center gap-2">
                <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none"><rect x="3" y="3" width="7" height="7" rx="1" stroke="currentColor" stroke-width="2"/><rect x="14" y="3" width="7" height="7" rx="1" stroke="currentColor" stroke-width="2"/><rect x="3" y="14" width="7" height="7" rx="1" stroke="currentColor" stroke-width="2"/><rect x="14" y="14" width="7" height="7" rx="1" stroke="currentColor" stroke-width="2"/></svg>
                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">GAP SEGMENT</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>



<div class="sphf-modal-backdrop" id="sphfAlarmModal" aria-hidden="true">
    <div class="sphf-modal">
        <div class="sphf-modal__header">
            <h3 id="sphfAlarmModalTitle">Population Detail - {{ ucfirst($modal['alarm'] ?? 'red') }} Alarm</h3>
            <button type="button" class="sphf-modal__close" id="sphfAlarmModalClose">
                <i class="ki-filled ki-cross"></i>
            </button>
        </div>

        <div class="sphf-modal__toolbar">
            <input type="text" placeholder="Search UUID or CNIC" class="sphf-modal__search" id="sphfAlarmModalSearch">
            <div class="sphf-modal__toolbar-actions">
                <button type="button" class="sphf-modal__btn" id="sphfAlarmModalCount">{{ number_format((int) ($modal['total'] ?? 0)) }} rows</button>
                <button type="button" class="sphf-modal__btn is-primary" data-sphf-export-btn="true" data-export-target="#sphfAlarmModal" data-export-file="SPHF_Ageing_Alarm_Detail" data-export-bg="#ffffff">Export Data</button>
            </div>
        </div>

        <div class="sphf-table-wrap">
            <table class="sphf-table" id="sphfAlarmDataTable" data-sphf-datatable="true">
                <thead>
                    <tr>
                        <th>UUID</th>
                        <th>BENEFICIARY / CNIC</th>
                        <th>IP</th>
                        <th>DISTRICT</th>
                        <th>TEHSIL</th>
                        <th>BANK</th>
                        <th>BRANCH</th>
                        <th>PENDING STAGE</th>
                        <th>AGEING DAYS</th>
                        <th>ALARM</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse(($modal['rows'] ?? []) as $row)
                        @php
                            $alarmClass = match ($row['alarm_level']) {
                                'red' => 'is-red',
                                'orange' => 'is-orange',
                                'yellow' => 'is-yellow',
                                default => 'is-green',
                            };
                        @endphp
                        <tr>
                            <td>{{ $row['uuid'] ?? '-' }}</td>
                            <td><strong>{{ $row['beneficiary_name'] }}</strong><br><small>{{ $row['beneficiary_cnic'] }}</small></td>
                            <td>{{ $row['ip'] }}</td>
                            <td>{{ $row['district'] }}</td>
                            <td>{{ $row['tehsil'] }}</td>
                            <td>{{ $row['bank_name'] }}</td>
                            <td>{{ $row['branch_name'] }}</td>
                            <td><span class="sphf-stage-pill">{{ $row['pending_stage'] }}</span></td>
                            <td><strong>{{ (int) $row['ageing_days'] }}</strong></td>
                            <td><span class="alarm-dot {{ $alarmClass }}"></span></td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9" class="text-center text-muted-foreground py-4">No rows for selected alarm.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>