<x-app-layout :title="'Assessments · '.$patient->fullName()">
    <x-care.consultation-return :consultation="$returnConsultation ?? null" />

    <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
        <div>
            <p class="text-xs font-medium uppercase tracking-wide text-slate-500">Clinical assessments</p>
            <h1 class="text-2xl font-semibold text-slate-900">{{ $patient->fullName() }}</h1>
            <p class="mt-1 text-sm text-slate-500">
                <a href="{{ route('care.patients.show', $patient) }}" class="text-sky-600 hover:text-sky-700">{{ $patient->patient_number }}</a>
            </p>
        </div>
        @if ($canCapture)
            @if ($returnConsultation ?? null)
                <a href="{{ route('care.consultations.assessments.create', $returnConsultation) }}" class="btn-primary">Start assessment</a>
            @else
                <a href="{{ route('care.assessments.create', $patient) }}" class="btn-primary">Start assessment</a>
            @endif
        @endif
    </div>

    <form method="GET" class="mt-6 flex flex-wrap gap-3 rounded-2xl border border-slate-200 bg-white p-4 text-sm">
        <select name="status" class="rounded-lg border-slate-300 text-sm">
            <option value="">All statuses</option>
            @foreach ($statuses as $value => $label)
                <option value="{{ $value }}" @selected(($filters['status'] ?? '') === $value)>{{ $label }}</option>
            @endforeach
        </select>
        <select name="category" class="rounded-lg border-slate-300 text-sm">
            <option value="">All categories</option>
            @foreach ($categories as $value => $label)
                <option value="{{ $value }}" @selected(($filters['category'] ?? '') === $value)>{{ $label }}</option>
            @endforeach
        </select>
        <input type="text" name="template_code" value="{{ $filters['template_code'] ?? '' }}" placeholder="Template code" class="rounded-lg border-slate-300 text-sm">
        <button type="submit" class="rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 font-medium text-slate-700 hover:bg-slate-100">Filter</button>
    </form>

    <section class="mt-6 overflow-hidden rounded-2xl border border-slate-200 bg-white">
        <table class="min-w-full divide-y divide-slate-100 text-sm">
            <thead class="bg-slate-50 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">
                <tr>
                    <th class="px-4 py-3">Template</th>
                    <th class="px-4 py-3">Status</th>
                    <th class="px-4 py-3">Assessed</th>
                    <th class="px-4 py-3"></th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100">
                @forelse ($assessments as $assessment)
                    <tr>
                        <td class="px-4 py-3">
                            <p class="font-medium text-slate-900">{{ $assessment->template->name }}</p>
                            <p class="text-xs text-slate-400">{{ $assessment->template->code }} · v{{ $assessment->template->version }}</p>
                        </td>
                        <td class="px-4 py-3">{{ $statuses[$assessment->status] ?? $assessment->status }}</td>
                        <td class="px-4 py-3 text-slate-600">
                            {{ $assessment->assessed_at?->format('d M Y H:i') ?? $assessment->created_at?->format('d M Y H:i') ?? '—' }}
                        </td>
                        <td class="px-4 py-3 text-right">
                            @if ($returnConsultation ?? null)
                                <a href="{{ route('care.consultations.assessments.show', [$returnConsultation, $assessment]) }}" class="text-sky-600 hover:text-sky-700">Open</a>
                            @else
                                <a href="{{ route('care.assessments.show', $assessment) }}" class="text-sky-600 hover:text-sky-700">Open</a>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="4" class="px-4 py-8 text-center text-slate-400">No assessments yet.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
        @if ($assessments->hasPages())
            <div class="border-t border-slate-100 px-4 py-3">{{ $assessments->withQueryString()->links() }}</div>
        @endif
    </section>
</x-app-layout>
