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

    $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: < 60</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: 60-89</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: 90-119</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: 120+</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-3 gap-6 mb-6">
    <article class="col-span-2 bg-white rounded-lg border p-4" id="sphfAgeingChartCard">
        <div class="sphf-card__header">
            <h3>Ageing Buckets</h3>
        </div>
        <p class="sphf-ageing-card__sub font-bold !text-[13px]">Cross-sectional analysis of user engagement duration</p>
        <div id="sphfAgeingBucketsChart" class="sphf-chart sphf-chart--line"></div>
    </article>

    <article class="col-span-1 bg-white rounded-lg border p-4">
        <div class="sphf-card__header">
            <h3>Performance Thresholds</h3>
        </div>
        <div class="sphf-ageing-rule-list">
            @php
                $fallbackRules = [
                    ['color' => 'green', 'title' => 'Normal Range', 'badge' => 'NORMAL', 'range' => '< 60 Days', 'count' => 0],
                    ['color' => 'yellow', 'title' => 'Moderate Risk', 'badge' => 'REVIEW', 'range' => '60-89 Days', 'count' => 0],
                    ['color' => 'orange', 'title' => 'High Risk', 'badge' => 'WARNING', 'range' => '90-119 Days', 'count' => 0],
                    ['color' => 'red', 'title' => 'Critical Delay', 'badge' => 'CRITICAL', 'range' => '120+ Days', 'count' => 0],
                ];
                $rulesToRender = !empty($alarmRules) ? $alarmRules : $fallbackRules;
            @endphp

            @foreach($rulesToRender as $rule)
                @php
                    $color = strtolower((string) ($rule['color'] ?? 'green'));
                    $title = (string) ($rule['title'] ?? ucfirst($color));
                    $badge = (string) ($rule['badge'] ?? strtoupper($color));
                    $range = (string) ($rule['range'] ?? '-');
                    $count = (int) ($rule['count'] ?? 0);
                    $ruleProgress = max(0, min(100, (float) ($rule['progress'] ?? ($total > 0 ? ($count / $total) * 100 : 0))));
                @endphp
                <div class="sphf-ageing-rule-item is-{{ $color }}">
                    <div class="sphf-ageing-rule-item__head">
                        <div class="sphf-ageing-rule-item__title">
                            <span class="sphf-ageing-rule-item__icon is-{{ $color }}" aria-hidden="true">
                                <svg viewBox="0 0 24 24" fill="none">
                                    @if($color === 'green')
                                        <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2"></circle>
                                        <path d="M8.25 12.25l2.4 2.45 5.1-5.2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                    @elseif($color === 'yellow')
                                        <path d="M12 5.25c4.65 0 8.58 3.05 10.06 6.75-1.48 3.7-5.41 6.75-10.06 6.75S3.42 15.7 1.94 12C3.42 8.3 7.35 5.25 12 5.25Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"></path>
                                        <circle cx="12" cy="12" r="2.2" stroke="currentColor" stroke-width="2"></circle>
                                    @elseif($color === 'orange')
                                        <path d="M12 4.5 21 19.5H3L12 4.5Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"></path>
                                        <path d="M12 9v5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
                                        <circle cx="12" cy="16.7" r="1.1" fill="currentColor"></circle>
                                    @else
                                        <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2"></circle>
                                        <path d="M12 7.5v6" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
                                        <circle cx="12" cy="16.8" r="1.1" fill="currentColor"></circle>
                                    @endif
                                </svg>
                            </span>
                            <span>{{ $title }}</span>
                        </div>
                        <span class="sphf-ageing-rule-item__badge is-{{ $color }}">{{ $badge }}</span>
                    </div>
                    <div class="sphf-ageing-rule-item__body">
                        <div class="sphf-ageing-rule-item__bar">
                            <span class="is-{{ $color }}" style="width: {{ $ruleProgress }}%;"></span>
                        </div>
                        <small class="sphf-ageing-rule-item__range">{{ $range }} ({{ number_format($count) }})</small>
                    </div>
                </div>
            @endforeach
        </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['pending_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">
    <div class="sphf-card__header">
        <h3>Stage Wise Ageing Comparison</h3>
    </div>
    <p class="sphf-ageing-card__sub font-bold !text-[13px]">Distribution of cases by construction stage across districts</p>
    <div id="sphfStageWiseBarChart" class="sphf-chart sphf-chart--line"></div>
</article>

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