@php
    $matrixRows = $ageing['stage_bottleneck_matrix'] ?? [];
@endphp

<article class="sphf-card" id="sphfAgeingChartCard">
    <div class="sphf-card__header">
        <h3>Stage Bottleneck Matrix</h3>
        <span class="sphf-stage-caption">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>
                        <td>{{ $row['stage'] ?? '-' }}</td>
                        <td>{{ number_format((int) ($row['live_cases'] ?? 0)) }}</td>
                        <td>{{ number_format((int) ($row['avg_days'] ?? 0)) }}</td>
                        <td><span class="sphf-matrix-chip is-green">{{ number_format((int) ($row['green'] ?? 0)) }}</span></td>
                        <td><span class="sphf-matrix-chip is-yellow">{{ number_format((int) ($row['yellow'] ?? 0)) }}</span></td>
                        <td><span class="sphf-matrix-chip is-orange">{{ number_format((int) ($row['amber'] ?? 0)) }}</span></td>
                        <td><span class="sphf-matrix-chip is-red">{{ number_format((int) ($row['red'] ?? 0)) }}</span></td>
                        <td>{{ $row['escalation'] ?? '-' }}</td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="8" class="text-center text-muted-foreground py-4">No stage bottleneck data found for selected filters.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </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>