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

    $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);

    $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="sphf-ageing-main-grid">
    <div data-stage-summary-slot="true" class="contents">
        @if(!empty($ageing['lazy_stage_summary'] ?? false) && empty($matrixRows))
            <article class="sphf-card" id="sphfAgeingChartCard">
                <div class="sphf-card__header">
                    <h3>Stage Bottleneck Matrix</h3>
                    <span class="sphf-stage-caption">Loading dedicated stage cache...</span>
                </div>
                <div class="text-center text-muted-foreground py-10">Stage bottleneck summary is loading separately for the pending page.</div>
            </article>

            <article class="sphf-card" id="sphfStageRedAlertShareCard">
                <div class="sphf-card__header">
                    <h3>Stage Red Alert Share</h3>
                </div>
                <div id="sphfStageRedAlertShareChart" class="sphf-chart sphf-chart--donut"></div>
            </article>
        @else
            @include('theme.sphf.pages.partials.stage-bottlenecks-summary', ['ageing' => $ageing])
        @endif
    </div>
</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>Beneficiary Drill-down: Current Stage Delays</span>
        <span class="sphf-table-hint">Click Row</span>
        <input
            type="text"
            id="sphfAgeingSearch"
            class="sphf-modal__search"
            value="{{ $register['search'] ?? '' }}"
            placeholder="Search CNIC, Beneficiary, IP, District..."
            style="max-width:340px;">
    </div>
    <div class="sphf-table-wrap">
        <table class="sphf-table">
            <thead>
                <tr>
                    <th>BENEFICIARY</th>
                    <th>CNIC</th>
                    <th>IP</th>
                    <th>DISTRICT</th>
                    <th>IFI</th>
                    <th>Stage Transition</th>
                    <th>Pending At</th>
                    <th>Elapsed Days</th>
                    <th>Status</th>
                    <th>Owner Level</th>
                </tr>
            </thead>
            <tbody>
                @forelse(($register['rows'] ?? []) as $row)
                    @php
                        $alarmClass = 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['stage_transition'] ?? ($row['pending_stage'] ?? ($row['stage'] ?? '-')))) }}"
                        data-days="{{ (int) ($row['ageing_days'] ?? 0) }}"
                        data-status="{{ e($alarmLabel) }}"
                        data-status-class="{{ $alarmClass }}"
                        data-owner="{{ e((string) ($row['owner_level'] ?? 'Normal')) }}"
                    >
                        <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['stage_transition'] ?? '-' }}</span></td>
                        <td><span class="sphf-stage-pill is-muted">{{ $row['pending_stage'] ?? ($row['stage'] ?? 'N/A') }}</span></td>
                        <td>{{ (int) $row['ageing_days'] }}</td>
                        <td><span class="sphf-status-pill {{ $alarmClass }}">{{ $alarmLabel }}</span></td>
                        <td>{{ $row['owner_level'] ?? 'Normal' }}</td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="10" 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>

<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__btn sphf-journey-close-btn" id="sphfJourneyModalClose">Close</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>

<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 CNIC or Beneficiary Name..." class="sphf-modal__search" id="sphfAlarmModalSearch">
            <div class="sphf-modal__toolbar-actions">
                <button type="button" class="sphf-modal__btn">{{ 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'] ?? ($row['stage'] ?? 'N/A') }}</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>