<x-app-layout title="Investigation catalog">
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-xl font-semibold text-slate-900">Investigation catalog</h1>
            <p class="mt-1 text-sm text-slate-500">Managers and admins set test types and prices. Lab technicians process samples from the laboratory queue.</p>
        </div>
        <div class="flex gap-2">
            <a href="{{ route('care.lab.admin.index') }}" class="rounded-lg border border-slate-200 px-4 py-2 text-sm">Lab admin</a>
            <a href="{{ route('care.lab.catalog.create') }}" class="btn-primary">Add test</a>
        </div>
    </div>
    <div class="mt-4 overflow-hidden rounded-2xl border border-slate-200 bg-white">
        <table class="min-w-full text-sm">
            <thead class="bg-slate-50 text-left text-xs uppercase text-slate-500">
                <tr><th class="px-4 py-3">Name</th><th class="px-4 py-3">Category</th><th class="px-4 py-3">Reference</th><th class="px-4 py-3">Price</th><th></th></tr>
            </thead>
            <tbody class="divide-y divide-slate-50">
                @forelse ($types as $type)
                    <tr>
                        <td class="px-4 py-3 font-medium">{{ $type->name }}</td>
                        <td class="px-4 py-3">{{ $categories[$type->category] ?? $type->category }}</td>
                        <td class="px-4 py-3">{{ $type->reference_text ?? ($type->reference_low.'–'.$type->reference_high) }} {{ $type->unit }}</td>
                        <td class="px-4 py-3">{{ number_format($type->price_minor / 100, 2) }}</td>
                        <td class="px-4 py-3 text-right"><a href="{{ route('care.lab.catalog.edit', $type) }}" class="text-sky-600">Edit</a></td>
                    </tr>
                @empty
                    <tr><td colspan="5" class="px-4 py-8 text-center text-slate-500">No tests in catalog.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    <div class="mt-4">{{ $types->links() }}</div>
</x-app-layout>
