@php
    $filters = [
        'attention' => 'Needs attention',
        'overdue' => 'Overdue',
        'upcoming' => 'Coming up',
        'all' => 'Everything',
    ];
@endphp

<x-app-layout title="Immunization desk">
    <x-page-header
        title="Immunization desk"
        subtitle="Open doses the desk owes patients — overdue first, then what falls due today and in the next fortnight."
        icon="pill"
    >
        <x-slot:actions>
            @can('immunizations.schedule')
                <a href="{{ route('immunizations.create') }}" class="hms-btn-primary">
                    <x-icon name="plus" size="sm" />
                    Schedule a dose
                </a>
            @endcan
            @can('immunizations.reports')
                <a href="{{ route('reports.vaccination') }}" class="hms-btn-secondary">
                    <x-icon name="chart-bar" size="sm" />
                    Coverage report
                </a>
            @endcan
        </x-slot:actions>
    </x-page-header>

    <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        <x-stat-card label="Overdue" :value="$stats['overdue']" icon="exclamation" tone="red" />
        <x-stat-card label="Due today" :value="$stats['dueToday']" icon="calendar" tone="amber" />
        <x-stat-card label="Due in 14 days" :value="$stats['next30']" icon="calendar" tone="sky" />
        <x-stat-card label="Given this month" :value="$stats['administeredMonth']" icon="pill" tone="green" />
    </div>

    <x-card>
        <x-slot:header>
            <div class="flex flex-wrap items-center gap-2">
                @foreach ($filters as $key => $label)
                    <a href="{{ route('immunizations.index', ['filter' => $key, 'q' => $term !== '' ? $term : null]) }}"
                       class="rounded-full px-3 py-1 text-xs font-medium transition
                              {{ $filter === $key ? 'bg-brand-600 text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200' }}">
                        {{ $label }}
                    </a>
                @endforeach
            </div>
        </x-slot:header>

        <form method="GET" action="{{ route('immunizations.index') }}" class="mb-4 flex flex-wrap items-end gap-3">
            <input type="hidden" name="filter" value="{{ $filter }}">
            <div class="min-w-[16rem] flex-1">
                <x-form.input name="q" label="Search" :value="$term"
                              placeholder="Patient name, MRN or vaccine…" />
            </div>
            <button type="submit" class="hms-btn-secondary">
                <x-icon name="search" size="sm" />
                Search
            </button>
        </form>

        @if ($doses->isEmpty())
            <x-empty-state icon="pill" title="Nothing on the desk">
                @if ($term !== '' || $filter !== 'attention')
                    Nothing matches this view — try the “Everything” tab or clear the search.
                @else
                    No open doses at all. Schedule one and it lands here as soon as it is due.
                @endif
            </x-empty-state>
        @else
            <div class="overflow-x-auto">
                <table class="hms-table">
                    <thead>
                        <tr>
                            <th>Patient</th>
                            <th>Vaccine</th>
                            <th>Dose</th>
                            <th>Due</th>
                            <th>Status</th>
                            <th class="text-right">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($doses as $dose)
                            <tr>
                                <td>
                                    <a href="{{ route('immunizations.show', $dose) }}" class="hms-link font-medium">
                                        {{ $dose->patient?->full_name }}
                                    </a>
                                    @if ($dose->patient?->isRestricted())
                                        <x-icon name="lock" size="xs" class="ml-1 inline text-amber-600" />
                                    @endif
                                    <span class="block font-mono text-xs text-slate-500">
                                        {{ $dose->patient?->medical_record_number }}
                                    </span>
                                </td>
                                <td>
                                    {{ $dose->vaccine?->name }}
                                    @if ($dose->vaccine?->doses_required > 1)
                                        <span class="block text-xs text-slate-500">
                                            of {{ $dose->vaccine->doses_required }} doses
                                        </span>
                                    @endif
                                </td>
                                <td class="whitespace-nowrap">Dose {{ $dose->dose_number }}</td>
                                <td>
                                    <span class="whitespace-nowrap">{{ $dose->scheduled_date?->format('d M Y') }}</span>
                                    @if ($dose->status === 'overdue' && $dose->scheduled_date)
                                        <span class="block text-xs text-red-600">
                                            {{ $dose->scheduled_date->diffForHumans() }}
                                        </span>
                                    @endif
                                </td>
                                <td>
                                    <x-status-badge :color="$dose->status_color" :label="$dose->status_label" size="sm" dot />
                                </td>
                                <td class="text-right">
                                    <a href="{{ route('immunizations.show', $dose) }}" class="hms-btn-ghost hms-btn-xs">Open</a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            {{ $doses->links() }}
        @endif
    </x-card>
</x-app-layout>