@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

{{-- ===== IFI STAT CARDS ===== --}}
<div class="sphf-ifi-stat-grid" id="sphfIfiStatGrid">
    @forelse($ifiView['stat_cards'] ?? [] as $stat)
    <div class="sphf-ifi-stat-card {{ $stat['tone'] }}">
        <span class="sphf-ifi-stat-card__label">{{ $stat['label'] }}</span>
        <span class="sphf-ifi-stat-card__value">{{ $stat['value'] }}</span>
        <div class="sphf-ifi-stat-card__footer">
            <span class="sphf-ifi-stat-card__footer-label">Progress</span>
            <span class="sphf-ifi-pct-badge">{{ $stat['pct'] }}</span>
        </div>
    </div>
    @empty
    <div class="col-span-5 py-6 text-center text-sm text-slate-400">No IFI data available.</div>
    @endforelse
</div>

{{-- ===== CHART + TABLE GRID ===== --}}
<div class="sphf-ifi-main-grid">

    {{-- IFI Completion Trend (Cumulative) --}}
    @php
        $trendChart          = $ifiView['charts']['ifi_trend'] ?? [];
        $trendFiscalYears    = $trendChart['fiscal_years'] ?? [];
        $trendSelectedFY     = (string) ($trendChart['selected_fiscal_year'] ?? '');
    @endphp
    <article class="sphf-card sphf-card--wide" id="sphfIfiTrendCard">
        <div class="sphf-card__header">
            <h3>IFI Completion Trend (Cumulative)</h3>
        </div>

        {{-- Fiscal year dropdown --}}
        <div class="flex items-center justify-end border-t border-gray-100 pt-3 mt-1 mb-2">
            <div class="relative">
                <select id="sphfIfiFiscalYear" 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($trendFiscalYears))>
                    @forelse($trendFiscalYears as $fy)
                        <option value="{{ $fy }}" @selected($trendSelectedFY === $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"/>
                    </svg>
                </div>
            </div>
        </div>

        <div id="sphfIfiTrendChart" class="sphf-chart sphf-chart--line" style="min-height:280px;"
             data-chart-categories="{{ json_encode($trendChart['categories'] ?? []) }}"
             data-chart-series="{{ json_encode($trendChart['series'] ?? []) }}">
        </div>
    </article>

    {{-- IFI Disbursement vs Completion --}}
    <article class="sphf-card sphf-card--wide" id="sphfIfiDisbCard" style="display:flex;flex-direction:column;">
        <div class="sphf-card__header">
            <h3>IFI Disbursement vs Completion</h3>
        </div>
        <div style="flex:1;overflow:auto;">
            <table class="sphf-ifi-disb-table" id="sphfIfiDisbTable">
                <thead>
                    <tr>
                        <th>IFI</th>
                        <th>TOTAL</th>
                        <th>COMPLETED</th>
                        <th>PROGRESS</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($ifiView['table']['disbursement'] ?? [] as $row)
                    <tr>
                        <td><strong>{{ $row['ifi'] }}</strong></td>
                        <td>{{ $row['allocated'] }}</td>
                        <td>{{ $row['completed'] }}</td>
                        <td>
                            <span class="sphf-ifi-disb-pct" style="background:{{ $row['color'] }};color:{{ $row['text'] }};">
                                {{ $row['pct'] }}
                            </span>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="4" class="py-6 text-center text-sm text-slate-400">No data available.</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="sphf-ifi-disb-footer">
            <span>Beneficiary counts by IFI</span>
        </div>
    </article>

</div>