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

    $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="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)
                        <tr class="cursor-pointer hover:bg-blue-50 transition-colors" onclick="openDisaggModal('{{ e($row['key'] ?? '') }}', '{{ e($row['stage'] ?? '') }}', {{ (int) ($row['live_cases'] ?? 0) }}, null, '{{ e($row['escalation'] ?? '') }}')">
                            <td>{{ $row['stage'] ?? '-' }}</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($row['stage'] ?? '') }}', {{ (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($row['stage'] ?? '') }}', {{ (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($row['stage'] ?? '') }}', {{ (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($row['stage'] ?? '') }}', {{ (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>

<section class="sphf-up-table-card">
    <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')) }}"
                    >
                     <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>1st Installment Released</h4>
                <p>Completed</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>