@php
    $kpis = $ageing['kpis'] ?? [];
    $register = $ageing['exception_register'] ?? [];
    $modal = $ageing['modal'] ?? ['alarm' => 'red', 'rows' => [], 'total' => 0];
    $matrixRows = $ageing['stage_bottleneck_matrix'] ?? [];
    $nonWithdrawalMatrix = $ageing['non_withdrawal_matrix'] ?? ['yellow' => 0, 'orange' => 0, 'red' => 0];
    $alarmCardCounts = [
        'yellow' => (int) ($nonWithdrawalMatrix['yellow'] ?? 0),
        'orange' => (int) ($nonWithdrawalMatrix['orange'] ?? 0),
        'red' => (int) ($nonWithdrawalMatrix['red'] ?? 0),
    ];
    if (($alarmCardCounts['yellow'] + $alarmCardCounts['orange'] + $alarmCardCounts['red']) === 0) {
        // Fallback for tenants where w_* precompute is not available yet.
        $alarmCardCounts['yellow'] = (int) ($kpis['yellow_population'] ?? 0);
        $alarmCardCounts['orange'] = (int) ($kpis['orange_population'] ?? 0);
        $alarmCardCounts['red'] = (int) ($kpis['red_population'] ?? 0);
    }
    $stageNameOverrides = [
        'tranche_1_to_plinth' => 'First Installment Released',
        'plinth_to_tranche_2' => 'Plinth Completed',
        'tranche_2_to_lintel' => 'Second Installment Released',
        'lintel_to_tranche_3' => 'Lintel Completed',
        'tranche_3_to_roof'   => 'Third Installment Released',
        'roof_to_tranche_4'   => 'Roof Completed',
        'overall_1st_to_roof' => 'Overall',
    ];

    $stageDelayChart     = $ageing['charts']['stage_delay_trend'] ?? [];
    $delayFiscalYears    = $stageDelayChart['fiscal_years'] ?? [];
    $delaySelectedFY     = (string) ($stageDelayChart['selected_fiscal_year'] ?? request('fiscal_year', ''));

    $total = (int) ($register['total'] ?? 0);
    $currentPage = (int) ($register['current_page'] ?? 1);
    $lastPage = (int) ($register['last_page'] ?? 1);
    $from = (int) ($register['from'] ?? 0);
    $to = (int) ($register['to'] ?? 0);

    $baseQuery = request()->except('page', 'ajax', 'per_page');
    $pageUrl = fn(int $p) => url()->current() . '?' . http_build_query(array_merge($baseQuery, ['page' => $p]));
@endphp

@if(!empty($pageMessages ?? []))
    <div class="sphf-up-message">
        {{ implode(' ', $pageMessages) }}
    </div>
@endif

<div class="grid grid-cols-1 md:grid-cols-5 gap-4 mb-6">
    <article class="sphf-ageing-kpi-card is-completed" data-alarm-card="total"
             data-kpi-drill="1" style="cursor:pointer" role="button" tabindex="0">
        <div class="sphf-ageing-kpi-card__top">
            <p>Total Cases</p>
        </div>
        <h3 class="font-extrabold">{{ number_format((int) ($kpis['total_population'] ?? 0)) }}</h3>
    </article>

    <article class="sphf-ageing-kpi-card is-green" data-alarm-card="green"
             data-kpi-drill="1" style="cursor:pointer" role="button" tabindex="0">
        <div class="sphf-ageing-kpi-card__top">
            <p>Normal</p>
        </div>
        <h3 class="font-extrabold">{{ number_format((int) ($kpis['green_population'] ?? 0)) }}</h3>
    </article>

    <article class="sphf-ageing-kpi-card is-yellow" data-alarm-card="yellow"
             data-kpi-drill="1" style="cursor:pointer" role="button" tabindex="0">
        <div class="sphf-ageing-kpi-card__top">
            <p>Yellow</p>
        </div>
        <h3 class="font-extrabold">{{ number_format((int) ($kpis['yellow_population'] ?? 0)) }}</h3>
    </article>

    <article class="sphf-ageing-kpi-card is-orange" data-alarm-card="orange"
             data-kpi-drill="1" style="cursor:pointer" role="button" tabindex="0">
        <div class="sphf-ageing-kpi-card__top">
            <p>Orange</p>
        </div>
        <h3 class="font-extrabold">{{ number_format((int) ($kpis['orange_population'] ?? 0)) }}</h3>
    </article>

    <article class="sphf-ageing-kpi-card is-red" data-alarm-card="red"
             data-kpi-drill="1" style="cursor:pointer" role="button" tabindex="0">
        <div class="sphf-ageing-kpi-card__top">
            <p>Red</p>
        </div>
        <h3 class="font-extrabold">{{ number_format((int) ($kpis['red_population'] ?? 0)) }}</h3>
    </article>
</div>

<div class="sphf-up-grid sphf-up-grid--stage">
    <article class="sphf-up-card" id="sphfAgeingChartCard">
        <div class="sphf-up-card__header">
            <h3 class="sphf-up-card__title">Stage Bottleneck Matrix</h3>
            <span class="sphf-up-badge is-blue">Under-progress only</span>
        </div>
        <div class="sphf-table-wrap">
            <table class="sphf-table">
                <thead>
                    <tr>
                        <th>Stage</th>
                        <th>Live Cases</th>
                        <th>Avg Days</th>
                        <th>Green</th>
                        <th>Yellow</th>
                        <th>Amber</th>
                        <th>Red</th>
                        <th>Escalation</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($matrixRows as $row)
                        @php
                            $displayStage = $stageNameOverrides[(string) ($row['key'] ?? '')] ?? ($row['stage'] ?? '-');
                        @endphp
                        <tr class="cursor-pointer hover:bg-blue-50 transition-colors" onclick="openDisaggModal('{{ e($row['key'] ?? '') }}', '{{ e($displayStage) }}', {{ (int) ($row['live_cases'] ?? 0) }}, null, '{{ e($row['escalation'] ?? '') }}')">
                            <td>{{ $displayStage }}</td>
                            <td>{{ number_format((int) ($row['live_cases'] ?? 0)) }}</td>
                            <td>{{ number_format((int) ($row['avg_days'] ?? 0)) }}</td>
                            <td><button type="button" class="sphf-matrix-chip is-green" onclick="event.stopPropagation(); openDisaggModal('{{ e($row['key'] ?? '') }}', '{{ e($displayStage) }}', {{ (int) ($row['green'] ?? 0) }}, 'green', '{{ e($row['escalation'] ?? '') }}')">{{ number_format((int) ($row['green'] ?? 0)) }}</button></td>
                            <td><button type="button" class="sphf-matrix-chip is-yellow" onclick="event.stopPropagation(); openDisaggModal('{{ e($row['key'] ?? '') }}', '{{ e($displayStage) }}', {{ (int) ($row['yellow'] ?? 0) }}, 'yellow', '{{ e($row['escalation'] ?? '') }}')">{{ number_format((int) ($row['yellow'] ?? 0)) }}</button></td>
                            <td><button type="button" class="sphf-matrix-chip is-orange" onclick="event.stopPropagation(); openDisaggModal('{{ e($row['key'] ?? '') }}', '{{ e($displayStage) }}', {{ (int) ($row['amber'] ?? 0) }}, 'orange', '{{ e($row['escalation'] ?? '') }}')">{{ number_format((int) ($row['amber'] ?? 0)) }}</button></td>
                            <td><button type="button" class="sphf-matrix-chip is-red" onclick="event.stopPropagation(); openDisaggModal('{{ e($row['key'] ?? '') }}', '{{ e($displayStage) }}', {{ (int) ($row['red'] ?? 0) }}, 'red', '{{ e($row['escalation'] ?? '') }}')">{{ number_format((int) ($row['red'] ?? 0)) }}</button></td>
                            <td>{{ $row['escalation'] ?? '-' }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="text-center">No stage bottleneck data found for selected filters.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </article>

    <article class="sphf-up-card sphf-up-card--chart" id="sphfStageRedAlertShareCard">
        <div class="sphf-up-card__header">
            <h3 class="sphf-up-card__title">Stage Red Alert Share</h3>
        </div>
        <div class="sphf-up-card__body sphf-up-card__body--chart">
            <div id="sphfStageRedAlertShareChart" class="sphf-up-chart"></div>
        </div>
    </article>
</div>

<article class="sphf-up-card mt-4" id="sphfNonWithdrawalAlarmCard">
    <div class="sphf-up-card__header">
        <h3 class="sphf-up-card__title">Non Withdrawal Matrix</h3>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <button type="button"
            class="text-left rounded-xl border-l-4 border-yellow-400 bg-white shadow-sm px-4 py-3 hover:bg-yellow-50 transition"
            onclick="openNonWithdrawalAlarmDrill('yellow', 'Non Withdrawal Yellow', {{ (int) ($alarmCardCounts['yellow'] ?? 0) }})">
            <p class="text-xs font-semibold text-gray-500">Yellow</p>
            <p class="text-4xl font-extrabold text-yellow-500">{{ number_format((int) ($alarmCardCounts['yellow'] ?? 0)) }}</p>
        </button>

        <button type="button"
            class="text-left rounded-xl border-l-4 border-orange-400 bg-white shadow-sm px-4 py-3 hover:bg-orange-50 transition"
            onclick="openNonWithdrawalAlarmDrill('orange', 'Non Withdrawal Amber', {{ (int) ($alarmCardCounts['orange'] ?? 0) }})">
            <p class="text-xs font-semibold text-gray-500">Amber</p>
            <p class="text-4xl font-extrabold text-orange-500">{{ number_format((int) ($alarmCardCounts['orange'] ?? 0)) }}</p>
        </button>

        <button type="button"
            class="text-left rounded-xl border-l-4 border-red-500 bg-white shadow-sm px-4 py-3 hover:bg-red-50 transition"
            onclick="openNonWithdrawalAlarmDrill('red', 'Non Withdrawal Red', {{ (int) ($alarmCardCounts['red'] ?? 0) }})">
            <p class="text-xs font-semibold text-gray-500">Red</p>
            <p class="text-4xl font-extrabold text-red-600">{{ number_format((int) ($alarmCardCounts['red'] ?? 0)) }}</p>
        </button>
    </div>
</article>

{{-- ===== MONTH WISE PROGRESS CHART ===== --}}
{{-- <article class="bg-white rounded-lg border p-4 mt-4" id="sphfStageDelayChartCard">
    <div class="flex items-start justify-between gap-4 flex-wrap mb-1 pr-12">
        <div>
            <div class="sphf-card__header mb-0">
                <h3>Month Wise Progress</h3>
            </div>
        </div>
        <div id="sphfStageDelayTotals" class="flex items-center gap-2 flex-wrap">

        </div>
    </div>

    <div class="flex items-center justify-end border-t border-gray-100 pt-3 mt-3 mb-2">
        <div class="relative">
            <select id="sphfStageWiseFiscalYear" name="fiscal_year"
                    class="appearance-none bg-white border border-gray-200 rounded-lg py-1.5 pl-4 pr-9 text-[13px] font-semibold text-gray-700 hover:bg-gray-50 focus:outline-none cursor-pointer transition-colors shadow-sm"
                    @disabled(empty($delayFiscalYears))>
                @forelse($delayFiscalYears as $fy)
                    <option value="{{ $fy }}" @selected($delaySelectedFY === $fy)>FY {{ $fy }}</option>
                @empty
                    <option value="">FY unavailable</option>
                @endforelse
            </select>
            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2.5 text-gray-500">
                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                </svg>
            </div>
        </div>
    </div>

    <div id="sphfStageDelayChart" class="sphf-chart sphf-chart--line mt-2" style="min-height:320px;"></div>
</article> --}}

{{-- ===== STAGE-WISE SEVERITY BREAKDOWN CHART ===== --}}
<article class="bg-white rounded-lg border p-4 mt-4" id="sphfStageSeverityCard">
    <div class="flex items-start justify-between gap-4 flex-wrap mb-1">
        <div>
            <h3 class="text-[14px] font-bold text-gray-800 leading-tight">Stage-wise severity breakdown</h3>
            <p class="text-[11px] text-gray-400 mt-0.5">Withdrawal stages &middot; Construction stages</p>
        </div>
        <div class="sphf-severity-tabs-wrap">
            <button type="button" class="sphf-stage-severity-tab is-active" data-stage-severity-view="all">All stages</button>
            <button type="button" class="sphf-stage-severity-tab" data-stage-severity-view="withdrawal">Withdrawal stages</button>
            <button type="button" class="sphf-stage-severity-tab" data-stage-severity-view="construction">Construction stages</button>
        </div>
    </div>

    {{-- Custom legend --}}
    <div class="flex items-center gap-4 flex-wrap mt-3 mb-1" id="sphfStageSeverityLegend">
        <div class="flex items-center gap-1.5">
            <span style="display:inline-block;width:14px;height:12px;background:#16a34a;border-radius:2px;flex-shrink:0;"></span>
            <span style="font-size:11px;font-weight:600;color:#374151;">Green</span>
        </div>
        <div class="flex items-center gap-1.5">
            <span style="display:inline-block;width:14px;height:12px;background:#d97706;border-radius:2px;flex-shrink:0;"></span>
            <span style="font-size:11px;font-weight:600;color:#374151;">Yellow</span>
        </div>
        <div class="flex items-center gap-1.5">
            <span style="display:inline-block;width:14px;height:12px;background:#ea580c;border-radius:2px;flex-shrink:0;"></span>
            <span style="font-size:11px;font-weight:600;color:#374151;">Amber</span>
        </div>
        <div class="flex items-center gap-1.5">
            <span style="display:inline-block;width:14px;height:12px;background:#dc2626;border-radius:2px;flex-shrink:0;"></span>
            <span style="font-size:11px;font-weight:600;color:#374151;">Red</span>
        </div>
        <div style="width:1px;height:18px;background:#e5e7eb;margin:0 4px;"></div>
        <div class="flex items-center gap-1.5">
            <span style="display:inline-block;width:14px;height:12px;background:#3b82f6;border-radius:2px;flex-shrink:0;"></span>
            <span style="font-size:11px;font-weight:600;color:#374151;">Withdrawal</span>
        </div>
        <div class="flex items-center gap-1.5">
            <span style="display:inline-block;width:14px;height:12px;background:#15803d;border-radius:2px;flex-shrink:0;"></span>
            <span style="font-size:11px;font-weight:600;color:#374151;">Construction</span>
        </div>
    </div>

    <div id="sphfStageSeverityChart" class="mt-2" style="min-height:320px;"></div>
</article>

<style>
.sphf-severity-tabs-wrap {
    display: inline-flex;
    align-items: center;
    background: #f3f4f6;
    border-radius: 12px;
    padding: 3px;
    gap: 2px;
}
.sphf-stage-severity-tab {
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    background: transparent;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    transition: all .18s;
    white-space: nowrap;
}
.sphf-stage-severity-tab.is-active {
    background: #fff;
    color: #111827;
    box-shadow: 0 1px 4px rgba(0,0,0,.10);
}
.sphf-stage-severity-tab:hover:not(.is-active) {
    color: #374151;
    background: rgba(255,255,255,0.5);
}
</style>

<section class="sphf-up-table-card mt-4">
    <div class="sphf-up-table-card__header">
        <h3 class="sphf-up-table-card__title">Beneficiary Drill-down: Current Stage Delays</h3>
        <!-- <span class="sphf-table-hint">Click Row</span> -->
         <input
            type="text"
            id="sphfAgeingSearch"
            class="sphf-modal__search"
            value="{{ $register['search'] ?? '' }}"
            placeholder="Search by UUID, CNIC"
            style="max-width:340px;">
    </div>

    <div class="sphf-table-wrap">
        <table class="sphf-table">
            <thead>
                <tr>
                    <th>UUID</th>
                    <th>Beneficiary</th>
                    <th>CNIC</th>
                    <th>IP</th>
                    <th>District</th>
                    <th>IFI</th>
                    <th>Current Stage</th>
                    <th>Elapsed Days</th>
                    <th>Status</th>
                    <th>Owner Level</th>
                </tr>
            </thead>
            <tbody>
                @forelse(($register['rows'] ?? []) as $row)
                    @php
                        $statusClass = match (strtolower((string) ($row['alarm_level'] ?? 'green'))) {
                            'red' => 'is-red',
                            'orange' => 'is-orange',
                            'yellow' => 'is-yellow',
                            default => 'is-green',
                        };
                        $alarmLabel = ucfirst((string) ($row['alarm_level'] ?? 'Green'));
                    @endphp
                    <tr
                        data-drill-row="true"
                        data-beneficiary="{{ e((string) ($row['beneficiary_name'] ?? '-')) }}"
                        data-cnic="{{ e((string) ($row['beneficiary_cnic'] ?? '-')) }}"
                        data-ip="{{ e((string) ($row['ip'] ?? '-')) }}"
                        data-district="{{ e((string) ($row['district'] ?? '-')) }}"
                        data-ifi="{{ e((string) ($row['ifi'] ?? '-')) }}"
                        data-stage="{{ e((string) ($row['pending_stage'] ?? '-')) }}"
                        data-days="{{ (int) ($row['ageing_days'] ?? 0) }}"
                        data-status="{{ e($alarmLabel) }}"
                        data-status-class="{{ $statusClass }}"
                        data-owner="{{ e((string) ($row['owner_level'] ?? 'Normal')) }}"
                        data-date1="{{ e((string) ($row['date_1st'] ?? '')) }}"
                        data-date2="{{ e((string) ($row['date_2nd'] ?? '')) }}"
                        data-date3="{{ e((string) ($row['date_3rd'] ?? '')) }}"
                        data-date4="{{ e((string) ($row['date_4th'] ?? '')) }}"
                    >
                     <td>{{ $row['uuid'] ?? '-' }}</td>
                        <td>{{ $row['beneficiary_name'] ?? '-' }}</td>
                        <td>{{ $row['beneficiary_cnic'] ?? '-' }}</td>
                        <td>{{ $row['ip'] ?? '-' }}</td>
                        <td>{{ $row['district'] ?? '-' }}</td>
                        <td>{{ $row['ifi'] ?? '-' }}</td>
                        <td><span class="sphf-stage-pill">{{ $row['pending_stage'] ?? '-' }}</span></td>
                        <td>{{ (int) ($row['ageing_days'] ?? 0) }}</td>
                        <td><span class="sphf-up-status {{ $statusClass }}">{{ $alarmLabel }}</span></td>
                        <td>{{ $row['owner_level'] ?? 'Normal' }}</td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="9" class="text-center">No exception rows found for selected filters.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>

        @if($lastPage > 1)
            <div class="sphf-table-footer sphf-pagination-footer">
                <span class="sphf-pagination-info">
                    Showing {{ number_format($from) }}-{{ number_format($to) }} of {{ number_format($total) }}
                </span>
                <nav class="sphf-pager" aria-label="Pagination">
                    @if($currentPage > 1)
                        <a href="{{ $pageUrl($currentPage - 1) }}" class="sphf-pager__btn" aria-label="Previous">&lsaquo;</a>
                    @else
                        <span class="sphf-pager__btn is-disabled">&lsaquo;</span>
                    @endif

                    @php
                        $startPage = max(1, $currentPage - 2);
                        $endPage = min($lastPage, $currentPage + 2);
                        if ($endPage - $startPage < 4) {
                            $startPage = max(1, $endPage - 4);
                        }
                    @endphp

                    @for($p = $startPage; $p <= $endPage; $p++)
                        @if($p === $currentPage)
                            <span class="sphf-pager__btn active">{{ $p }}</span>
                        @else
                            <a href="{{ $pageUrl($p) }}" class="sphf-pager__btn">{{ $p }}</a>
                        @endif
                    @endfor

                    @if($currentPage < $lastPage)
                        <a href="{{ $pageUrl($currentPage + 1) }}" class="sphf-pager__btn" aria-label="Next">&rsaquo;</a>
                    @else
                        <span class="sphf-pager__btn is-disabled">&rsaquo;</span>
                    @endif
                </nav>
            </div>
        @elseif($total > 0)
            <div class="sphf-table-footer">
                <span>Showing all {{ number_format($total) }} records</span>
            </div>
        @endif
    </div>
</section>

<div class="sphf-modal-backdrop" id="sphfJourneyModal" aria-hidden="true">
    <div class="sphf-modal sphf-journey-modal">
        <div class="sphf-modal__header sphf-journey-modal__header">
            <h3>Beneficiary Stage Journey</h3>
            <button type="button" class="sphf-modal__close" id="sphfJourneyModalClose">
                <i class="ki-filled ki-cross"></i>
            </button>
        </div>

        <div class="sphf-journey-grid">
            <div class="sphf-journey-card"><small>Beneficiary</small><strong id="sphfJourneyBeneficiary">-</strong></div>
            <div class="sphf-journey-card"><small>CNIC</small><strong id="sphfJourneyCnic">-</strong></div>
            <div class="sphf-journey-card"><small>Current Stage</small><strong id="sphfJourneyStage">-</strong></div>
            <div class="sphf-journey-card"><small>Status</small><span class="sphf-status-pill is-green" id="sphfJourneyStatus">Green</span></div>
            <div class="sphf-journey-card"><small>IP</small><strong id="sphfJourneyIp">-</strong></div>
            <div class="sphf-journey-card"><small>District</small><strong id="sphfJourneyDistrict">-</strong></div>
            <div class="sphf-journey-card"><small>IFI</small><strong id="sphfJourneyIfi">-</strong></div>
            <div class="sphf-journey-card"><small>Owner</small><strong id="sphfJourneyOwner">-</strong></div>
        </div>

        <div class="sphf-journey-note-row">
            <div>
                <h4 id="sphfJourneyLastInstallLabel">-</h4>
                <p id="sphfJourneyLastInstallDate">-</p>
            </div>
            <span class="sphf-journey-chip is-done">Done</span>
        </div>

        <div class="sphf-journey-note-row">
            <div>
                <h4>Current Pending Transition</h4>
                <p id="sphfJourneyTransitionText">-</p>
            </div>
            <span class="sphf-journey-chip is-alert" id="sphfJourneyTransitionBadge">-</span>
        </div>

        <div class="sphf-journey-note-row">
            <div>
                <h4>Required Decision</h4>
                <p id="sphfJourneyDecisionText">-</p>
            </div>
            <span class="sphf-journey-chip is-action">Action</span>
        </div>
    </div>
</div>