@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__progress">
            <span class="sphf-ifi-stat-card__progress-bar"
                  style="width: {{ rtrim($stat['pct'], '%') }}%"></span>
        </div>
        <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">

    {{-- Total Count on IFI --}}
    @php
        $trendChart = $ifiView['charts']['ifi_trend'] ?? [];
    @endphp
    <article class="sphf-card sphf-card--wide" id="sphfIfiTrendCard">
        <div class="sphf-card__header">
            <h3>Total Count on IFI</h3>
        </div>

        <div id="sphfIfiTrendLegend" class="sphf-ifi-total-legend"></div>
        <div id="sphfIfiTrendChart" class="sphf-chart sphf-chart--bar" style="min-height:340px;"
             data-chart-categories="{{ json_encode($trendChart['categories'] ?? []) }}"
             data-chart-series="{{ json_encode($trendChart['series'] ?? []) }}"
             data-chart-colors="{{ json_encode($trendChart['colors'] ?? []) }}">
        </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>