@php
    $maxMonthly = max(1, $monthly->max('count'));
@endphp

<x-app-layout title="Vaccination coverage">
    <x-page-header
        title="Vaccination coverage"
        subtitle="Who has had what, and what the desk is still chasing — per vaccine and over the last six months."
        icon="chart-bar"
        :back="route('immunizations.index')"
        backLabel="Immunization desk"
    />

    <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        <x-stat-card label="Doses administered" :value="number_format($totals['doses'])" icon="pill" tone="green" />
        <x-stat-card label="Patients vaccinated" :value="number_format($totals['patients'])" icon="users" tone="sky" />
        <x-stat-card label="Open doses" :value="number_format($totals['open'])" icon="calendar" tone="amber" />
        <x-stat-card label="Overdue" :value="number_format($totals['overdue'])" icon="exclamation" tone="red" />
    </div>

    <x-card title="Per-vaccine coverage" icon="list">
        @if ($rows->isEmpty())
            <x-empty-state icon="pill" title="No vaccines in the catalogue">
                Add vaccines to the catalogue and their coverage rows appear here.
            </x-empty-state>
        @else
            <div class="overflow-x-auto">
                <table class="hms-table">
                    <thead>
                        <tr>
                            <th>Vaccine</th>
                            <th class="text-right">Doses given</th>
                            <th class="text-right">Courses started</th>
                            <th class="text-right">Courses complete</th>
                            <th class="text-right">Open</th>
                            <th class="text-right">Overdue</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($rows as $row)
                            @php $vaccine = $row['vaccine']; @endphp
                            <tr>
                                <td>
                                    <span class="font-medium text-slate-800">{{ $vaccine->name }}</span>
                                    <span class="block text-xs text-slate-500">
                                        {{ $vaccine->doses_required }} dose{{ $vaccine->doses_required > 1 ? 's' : '' }}
                                        @if ($vaccine->schedule_age_label) · {{ $vaccine->schedule_age_label }} @endif
                                        @if ($vaccine->is_government_supplied) · government-supplied @endif
                                    </span>
                                </td>
                                <td class="text-right">{{ number_format($row['administered']) }}</td>
                                <td class="text-right">{{ number_format($row['started']) }}</td>
                                <td class="text-right">
                                    {{ number_format($row['complete']) }}
                                    @if ($row['started'] > 0)
                                        <span class="block text-xs text-slate-500">
                                            {{ round($row['complete'] / $row['started'] * 100) }}% of starters
                                        </span>
                                    @endif
                                </td>
                                <td class="text-right">{{ number_format($row['open']) }}</td>
                                <td class="text-right">
                                    @if ($row['overdue'] > 0)
                                        <span class="font-medium text-red-600">{{ number_format($row['overdue']) }}</span>
                                    @else
                                        <span class="text-slate-400">0</span>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </x-card>

    <x-card title="Doses given per month" icon="chart-bar">
        <div class="space-y-3">
            @foreach ($monthly as $month)
                <div class="flex items-center gap-3">
                    <span class="w-16 shrink-0 text-xs text-slate-500">{{ $month['label'] }}</span>
                    <div class="h-5 flex-1 rounded bg-slate-100">
                        <div class="h-5 rounded bg-brand-500"
                             style="width: {{ round($month['count'] / $maxMonthly * 100) }}%"></div>
                    </div>
                    <span class="w-10 shrink-0 text-right text-sm font-medium text-slate-700">{{ $month['count'] }}</span>
                </div>
            @endforeach
        </div>
    </x-card>
</x-app-layout>