<section class="rounded-2xl border border-slate-200 bg-white p-5">
    <h2 class="text-sm font-semibold text-slate-900">Visit history</h2>
    <p class="mt-0.5 text-xs text-slate-500">Completed specialty episodes.</p>

    <div class="mt-4 space-y-2">
        @forelse ($visitHistory as $visit)
            <div class="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-slate-100 bg-slate-50 px-3 py-3 text-sm">
                <div class="min-w-0">
                    <p class="font-semibold text-slate-900">{{ $visit->patient?->fullName() ?? 'Patient' }}</p>
                    <p class="text-xs text-slate-500">
                        {{ $visit->appointment?->department?->name ?? 'Specialty' }}
                        @if ($visit->completed_at)
                            · {{ $visit->completed_at->format('d M Y H:i') }}
                        @endif
                        @if ($visit->bill)
                            · Invoice {{ $visit->bill->invoice_number }}
                        @endif
                    </p>
                </div>
                <div class="flex gap-2">
                    @if ($visit->patient)
                        <a href="{{ route('care.patients.show', $visit->patient) }}" class="text-xs font-medium text-sky-600">Chart</a>
                    @endif
                    <a href="{{ route('care.specialty.workspace', ['module' => $moduleKey, 'visit' => $visit]) }}" class="text-xs font-medium text-indigo-600">Review</a>
                </div>
            </div>
        @empty
            <p class="rounded-xl border border-dashed border-slate-200 px-4 py-10 text-center text-sm text-slate-500">No completed specialty visits yet.</p>
        @endforelse
    </div>
</section>
