@extends('layouts.app')
@section('title', 'Lab Catalogue')
@section('content')

<div class="flex flex-wrap items-baseline justify-between gap-3 mb-4">
    <div>
        <h1 class="text-lg font-bold text-gray-900">Lab Catalogue</h1>
        <p class="text-xs text-gray-400">Price reference for laboratory tests · Read-only</p>
    </div>
</div>

{{-- Search + filter bar --}}
<form method="GET" action="{{ route('price-list.lab') }}" class="bg-white border border-gray-100 rounded-xl shadow-sm p-3 mb-4">
    <div class="grid grid-cols-1 md:grid-cols-12 gap-2 items-end">
        <div class="md:col-span-7">
            <label class="block text-[10px] text-gray-500 font-semibold uppercase mb-1">Search by name or code</label>
            <input type="text" name="q" value="{{ $q }}"
                   placeholder="e.g. CBC, Urea, FBC, ferritin"
                   autocomplete="off"
                   class="w-full px-3 py-1.5 border border-gray-300 rounded-lg text-xs focus:border-purple-500 focus:outline-none">
        </div>
        <div class="md:col-span-3">
            <label class="block text-[10px] text-gray-500 font-semibold uppercase mb-1">Category</label>
            <select name="category" class="w-full px-3 py-1.5 border border-gray-300 rounded-lg text-xs focus:border-purple-500 focus:outline-none">
                <option value="">All categories</option>
                @foreach($categories as $c)
                    <option value="{{ $c }}" {{ $category === $c ? 'selected' : '' }}>{{ $c }}</option>
                @endforeach
            </select>
        </div>
        <div class="md:col-span-2 flex gap-2">
            <button type="submit" class="px-3 py-1.5 bg-purple-600 hover:bg-purple-700 text-white text-xs rounded-lg font-medium flex-1">Search</button>
            @if($q !== '' || $category !== '')
                <a href="{{ route('price-list.lab') }}" class="px-2 py-1.5 text-xs text-gray-500 hover:text-purple-600">Reset</a>
            @endif
        </div>
    </div>
</form>

<p class="text-xs text-gray-500 mb-2">
    Showing <strong>{{ number_format($tests->total()) }}</strong>
    {{ $tests->total() === 1 ? 'test' : 'tests' }}
    @if($q !== '') matching "<strong>{{ $q }}</strong>" @endif
    @if($category !== '') in <strong>{{ $category }}</strong> @endif
</p>

<div class="bg-white rounded-xl border border-gray-100 shadow-sm overflow-x-auto">
    <table class="w-full">
        <thead class="bg-gray-50">
            <tr>
                <th class="table-header">Test</th>
                <th class="table-header">Code</th>
                <th class="table-header">Category</th>
                <th class="table-header">Sample</th>
                <th class="table-header">TAT</th>
                <th class="table-header text-right">Price (KES)</th>
                <th class="table-header">Outsourced</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-50">
            @forelse($tests as $t)
                <tr class="hover:bg-gray-50">
                    <td class="table-cell font-medium text-gray-800">{{ $t->name }}</td>
                    <td class="table-cell font-mono text-xs">{{ $t->code ?: '—' }}</td>
                    <td class="table-cell text-xs">{{ $t->category ?: '—' }}</td>
                    <td class="table-cell text-xs">{{ $t->sample_type ?: '—' }}</td>
                    <td class="table-cell text-xs">
                        {{ $t->turnaround_hours ? $t->turnaround_hours . ' hr' . ($t->turnaround_hours == 1 ? '' : 's') : '—' }}
                    </td>
                    <td class="table-cell text-right font-semibold">{{ number_format($t->price, 2) }}</td>
                    <td class="table-cell">
                        @if($t->is_outsourced)
                            <span class="inline-block px-2 py-0.5 bg-purple-100 text-purple-800 text-[10px] font-semibold rounded uppercase">
                                Outsourced{{ $t->outsource_lab ? ' · ' . $t->outsource_lab : '' }}
                            </span>
                        @else
                            <span class="text-[11px] text-gray-400">In-house</span>
                        @endif
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="7" class="text-center text-gray-400 py-10 text-sm">
                        No tests match the current filters.
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>

@if($tests->hasPages())
    <div class="mt-4">{{ $tests->links() }}</div>
@endif
@endsection