@php
    $kpis = $ageing['kpis'] ?? [];
    $register = $ageing['exception_register'] ?? [];
    $modal = $ageing['modal'] ?? ['alarm' => 'red', 'rows' => [], 'total' => 0];
    $alarmRules = $ageing['alarm_rules'] ?? [];

    $total = (int) ($register['total'] ?? 0);
    $perPage = (int) ($register['per_page'] ?? 5);
    $currentPage = (int) ($register['current_page'] ?? 1);
    $lastPage = (int) ($register['last_page'] ?? 1);
    $from = (int) ($register['from'] ?? 0);
    $to = (int) ($register['to'] ?? 0);
    $stageWiseChart = $ageing['charts']['stage_wise_ageing'] ?? [];
    $completedMatrixRows = $ageing['completed_stage_matrix'] ?? [];
    $fiscalYears = $stageWiseChart['fiscal_years'] ?? [];
    $selectedFiscalYear = (string) ($stageWiseChart['selected_fiscal_year'] ?? request('fiscal_year', ''));

    $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="mb-4 rounded border border-yellow-300 bg-yellow-50 px-4 py-3 text-sm text-yellow-800">
        {{ 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="completed">
        <div class="sphf-ageing-kpi-card__top">
            <p>Total Cases</p>
        </div>
        <h3 class="font-extrabold">{{ number_format((int) ($kpis['completed'] ?? 0)) }}</h3>
    </article>
      <article class="sphf-ageing-kpi-card is-green" data-alarm-card="green">
        <div class="sphf-ageing-kpi-card__top">
            <p>Efficient</p>
            <span>THR: &le; 45</span>
        </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">
        <div class="sphf-ageing-kpi-card__top">
            <p>Stable</p>
            <span>THR: 46-60</span>
        </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">
        <div class="sphf-ageing-kpi-card__top">
            <p>Delayed</p>
            <span>THR: 61-75</span>
        </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">
        <div class="sphf-ageing-kpi-card__top">
            <p>Severely Delayed</p>
            <span>THR: 76+</span>
        </div>
        <h3 class="font-extrabold">{{ number_format((int) ($kpis['red_population'] ?? 0)) }}</h3>
    </article>
</div>

<div class="grid grid-cols-1 md:grid-cols-5 gap-6 mb-6">
    <article class="bg-white rounded-lg border p-4 md:col-span-3" id="sphfCompletedThresholdMatrixCard">
        <div class="sphf-card__header">
            <h3>Completed Mode: Stage Threshold Mapping</h3>
        </div>
        <div class="sphf-table-wrap">
            <table class="sphf-table">
                <thead>
                    <tr>
                        <th>Stage</th>
                        <th>Cases</th>
                        <th>Avg Days</th>
                        <th>Green</th>
                        <th>Yellow</th>
                        <th>Amber</th>
                        <th>Red</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($completedMatrixRows as $row)
                        @php
                            $pairKey = (string) ($row['pair_key'] ?? '');
                            $stageLabelMap = [
                                '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',
                            ];
                            $fallbackStage = ucwords(str_replace('_', ' ', (string) ($row['stage'] ?? '-')));
                            $displayStage = $stageLabelMap[$pairKey] ?? $fallbackStage;
                        @endphp
                        <tr
                            class="cursor-pointer hover:bg-blue-50 transition-colors"
                            data-stage-drill-row="true"
                            data-pair-key="{{ e($pairKey) }}"
                            data-stage-label="{{ e($displayStage) }}"
                            data-stage-total="{{ (int) ($row['live_cases'] ?? 0) }}"
                        >
                            <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" data-stage-drill-chip="true" data-kpi="green" data-chip-total="{{ (int) ($row['green'] ?? 0) }}">{{ number_format((int) ($row['green'] ?? 0)) }}</button></td>
                            <td><button type="button" class="sphf-matrix-chip is-yellow" data-stage-drill-chip="true" data-kpi="yellow" data-chip-total="{{ (int) ($row['yellow'] ?? 0) }}">{{ number_format((int) ($row['yellow'] ?? 0)) }}</button></td>
                            <td><button type="button" class="sphf-matrix-chip is-orange" data-stage-drill-chip="true" data-kpi="orange" data-chip-total="{{ (int) ($row['amber'] ?? 0) }}">{{ number_format((int) ($row['amber'] ?? 0)) }}</button></td>
                            <td><button type="button" class="sphf-matrix-chip is-red" data-stage-drill-chip="true" data-kpi="red" data-chip-total="{{ (int) ($row['red'] ?? 0) }}">{{ number_format((int) ($row['red'] ?? 0)) }}</button></td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="text-center text-muted-foreground py-4">No completed-stage data found for selected filters.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </article>

    <article class="bg-white rounded-lg border p-4 md:col-span-2" id="sphfAgeingChartCard">
        <div class="sphf-card__header">
            <h3>Alarm Distribution</h3>
        </div>
        <p class="sphf-ageing-card__sub font-bold !text-[13px]">Stage-threshold based distribution of completed cases by alarm color</p>
        <div id="sphfAgeingBucketsChart" class="sphf-chart sphf-chart--line"></div>
    </article>
</div>

{{-- <section class="sphf-table-card">
    <div class="sphf-table-card__header" style="display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;">
        <span>Ageing Exception Register</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/CNIC</th>
                    <th>IP</th>
                    <th>DISTRICT</th>
                    <th>TEHSIL</th>
                    <th>PENDING STAGE</th>
                    <th>AGEING DAYS</th>
                    <th>Performance Thresholds</th>
                </tr>
            </thead>
            <tbody>
                @forelse(($register['rows'] ?? []) as $row)
                    @php
                        $ageClass = $row['ageing_days'] >= 120 ? 'is-critical' : ($row['ageing_days'] >= 60 ? 'is-warning' : 'is-healthy');
                        $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><span class="sphf-stage-pill">{{ $row['stage'] }}</span></td>
                        <td class="{{ $ageClass }}">{{ (int) $row['ageing_days'] }}</td>
                        <td><span class="alarm-dot {{ $alarmClass }}"></span></td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="text-center text-muted-foreground py-4">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="Ageing exception 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

                    @if($startPage > 1)
                        <a href="{{ $pageUrl(1) }}" class="sphf-pager__btn">1</a>
                        @if($startPage > 2)
                            <span class="sphf-pager__ellipsis">&hellip;</span>
                        @endif
                    @endif

                    @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($endPage < $lastPage)
                        @if($endPage < $lastPage - 1)
                            <span class="sphf-pager__ellipsis">&hellip;</span>
                        @endif
                        <a href="{{ $pageUrl($lastPage) }}" class="sphf-pager__btn">{{ $lastPage }}</a>
                    @endif

                    @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) }} exceptions</span>
            </div>
        @endif
    </div>
</section> --}}

{{-- ===== STAGE WISE AGEING COMPARISON CHART ===== --}}
<article class="bg-white rounded-lg border p-4 mt-4" id="sphfStageWiseChartCard">
    {{-- Header row: title left, stage totals right (pr-12 reserves space for the 3-dot toolbar button) --}}
    <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 Level Completion</h3>
            </div>
            {{-- <p class="sphf-ageing-card__sub font-bold !text-[13px] mt-0.5 text-[#8a95a5]">Monthly completion progress by construction stage &middot; Fiscal Year 2024&ndash;25</p> --}}
        </div>
        {{-- Overall totals pills — populated by renderStageWiseBarChart() in ageing.js --}}
        <div id="sphfStageWiseTotals" class="flex items-center gap-2 flex-wrap">
            {{-- JS will inject pills here once chart renders --}}
        </div>
    </div>

    {{-- Chart Controls Toolbar --}}
    <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($fiscalYears))>
                @forelse($fiscalYears as $fiscalYear)
                    <option value="{{ $fiscalYear }}" @selected($selectedFiscalYear === $fiscalYear)>FY {{ $fiscalYear }}</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="sphfStageWiseBarChart" class="sphf-chart sphf-chart--line mt-2"></div>
</article>

{{-- Chart rendered by renderStageWiseBarChart() in ageing.js --}}