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

{{-- Page header removed per UI cleanup; sidebar already names the page. --}}
<div class="flex justify-end gap-2 mb-4">
    <a href="{{ route('lab.consumables') }}" class="btn-secondary text-xs">Lab Consumables</a>
    <a href="{{ route('lab.index') }}" class="btn-secondary text-xs">← Back to Lab</a>
</div>

@if(session('success'))
<div class="bg-green-50 border border-green-200 text-green-800 px-4 py-3 rounded-lg mb-4 text-sm">{{ session('success') }}</div>
@endif

{{-- Search & Filter bar --}}
<form method="GET" action="{{ route('lab.catalogue') }}" class="bg-white rounded-xl border border-gray-200 p-4 mb-4">
    <div class="grid grid-cols-1 md:grid-cols-12 gap-3 items-end">
        <div class="md:col-span-4">
            <label class="block text-[11px] font-medium text-gray-600 mb-1">Search</label>
            <input type="text" name="q" value="{{ $q }}" placeholder="Test name, code, or lab name…"
                   class="form-input w-full text-sm" autofocus>
        </div>
        <div class="md:col-span-3">
            <label class="block text-[11px] font-medium text-gray-600 mb-1">Category</label>
            <select name="category" class="form-input w-full text-sm">
                <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">
            <label class="block text-[11px] font-medium text-gray-600 mb-1">Outsourcing</label>
            <select name="outsourced" class="form-input w-full text-sm">
                <option value=""         {{ $outsourced === ''         ? 'selected' : '' }}>All</option>
                <option value="in"       {{ $outsourced === 'in'       ? 'selected' : '' }}>In-house only</option>
                <option value="out"      {{ $outsourced === 'out'      ? 'selected' : '' }}>Outsourced only</option>
                <option value="pathcare" {{ $outsourced === 'pathcare' ? 'selected' : '' }}>– PathCare</option>
                <option value="lancet"   {{ $outsourced === 'lancet'   ? 'selected' : '' }}>– Lancet</option>
                <option value="diamond"  {{ $outsourced === 'diamond'  ? 'selected' : '' }}>– Diamond-Path</option>
            </select>
        </div>
        <div class="md:col-span-1">
            <label class="block text-[11px] font-medium text-gray-600 mb-1">Status</label>
            <select name="status" class="form-input w-full text-sm">
                <option value="active"   {{ $status === 'active'   ? 'selected' : '' }}>Active</option>
                <option value="inactive" {{ $status === 'inactive' ? 'selected' : '' }}>Off</option>
                <option value="all"      {{ $status === 'all'      ? 'selected' : '' }}>All</option>
            </select>
        </div>
        <div class="md:col-span-2 flex gap-2">
            <button type="submit" class="btn-primary text-xs flex-1">Search</button>
            <a href="{{ route('lab.catalogue') }}" class="btn-secondary text-xs flex-1 text-center">Clear</a>
        </div>
    </div>
    @if($q !== '' || $category !== '' || $outsourced !== '' || $status !== 'active')
    <div class="mt-3 text-xs text-gray-500">
        Showing {{ $tests->total() }} result{{ $tests->total() === 1 ? '' : 's' }}
        @if($q !== '')          for "<span class="font-medium text-gray-800">{{ $q }}</span>"@endif
        @if($category !== '')   in <span class="font-medium text-gray-800">{{ $category }}</span>@endif
        @if($outsourced !== '') · <span class="font-medium text-gray-800">{{ ucfirst($outsourced) }}</span>@endif
        @if($status !== 'active') · <span class="font-medium text-gray-800">{{ ucfirst($status) }}</span>@endif
    </div>
    @endif
</form>

<div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
    <table class="w-full sortable">
        <thead class="bg-gray-50"><tr>
            <th class="table-header" data-sort="string">Code</th>
            <th class="table-header" data-sort="string">Test Name</th>
            <th class="table-header" data-sort="string">Category</th>
            <th class="table-header" data-sort="string">Sample</th>
            <th class="table-header" data-sort="number">Price</th>
            <th class="table-header" data-sort="number">Buy Price</th>
            <th class="table-header" data-sort="number">TAT</th>
            <th class="table-header" data-sort="string">Outsourced</th>
            <th class="table-header" data-sort="string">Consumable</th>
            <th class="table-header">Status</th>
            @if(Auth::user()->hasRole('Super Admin') || Auth::user()->hasRole('Hospital Admin'))
            <th class="table-header text-right">Actions</th>
            @endif
        </tr></thead>
        <tbody class="divide-y divide-gray-50">
        @forelse($tests as $test)
        <tr class="hover:bg-gray-50">
            <td class="table-cell font-mono text-xs">{{ $test->code }}</td>
            <td class="table-cell font-medium">{{ $test->name }}</td>
            <td class="table-cell text-xs">{{ $test->category }}</td>
            <td class="table-cell text-xs">{{ $test->sample_type ?? '-' }}</td>
            <td class="table-cell" data-sort-value="{{ $test->price ?? 0 }}">{{ $test->price ? number_format($test->price) : '-' }}</td>
            <td class="table-cell" data-sort-value="{{ $test->outsource_buy_price ?? 0 }}">
                @if($test->is_outsourced && $test->outsource_buy_price)
                    <span class="text-gray-700">{{ number_format($test->outsource_buy_price) }}</span>
                @else
                    <span class="text-gray-300">—</span>
                @endif
            </td>
            <td class="table-cell" data-sort-value="{{ $test->turnaround_hours ?? 0 }}">{{ $test->turnaround_hours ?? '-' }}h</td>
            <td class="table-cell">
                @if($test->is_outsourced)
                    <span class="badge badge-warning">{{ $test->outsource_lab ?? 'Yes' }}</span>
                @else
                    <span class="text-gray-400 text-xs">In-house</span>
                @endif
            </td>
            <td class="table-cell text-xs">
                @if($test->consumableItem)
                    <span class="text-cr-600">{{ $test->consumableItem->name }}</span>
                @else
                    <span class="text-gray-300">|</span>
                @endif
            </td>
            <td class="table-cell">
                <span class="badge {{ $test->is_active ? 'badge-success' : 'badge-gray' }}">{{ $test->is_active ? 'Active' : 'Off' }}</span>
            </td>
            @if(Auth::user()->hasRole('Super Admin') || Auth::user()->hasRole('Hospital Admin'))
            <td class="table-cell text-right whitespace-nowrap">
                <button onclick="openEdit({{ $test->id }}, '{{ addslashes($test->name) }}', {{ $test->turnaround_hours ?? 4 }}, {{ $test->is_outsourced ? 'true' : 'false' }}, '{{ addslashes($test->outsource_lab ?? '') }}', '{{ $test->sample_type ?? 'Blood' }}', '{{ $test->category ?? 'Chemistry' }}', '{{ $test->outsource_buy_price ?? '' }}')" class="text-cr-500 hover:text-cr-700 text-xs font-medium">Edit</button>
                <form method="POST" action="{{ route('lab.catalogue.delete', $test) }}" class="inline ml-1" onsubmit="return confirm('Delete {{ addslashes($test->name) }}?')">@csrf @method('DELETE')
                    <button type="submit" class="text-red-400 hover:text-red-600 text-xs">Delete</button>
                </form>
            </td>
            @endif
        </tr>
        @empty
        <tr><td colspan="11" class="table-cell text-center text-gray-400 py-8">
            @if($q !== '' || $category !== '' || $outsourced !== '' || $status !== 'active')
                No tests match your filters. <a href="{{ route('lab.catalogue') }}" class="text-cr-600 hover:underline">Clear filters</a>
            @else
                No lab tests configured.
            @endif
        </td></tr>
        @endforelse
        </tbody>
    </table>
    <div class="px-5 py-3 border-t border-gray-100">{{ $tests->links() }}</div>
</div>

@if(Auth::user()->hasRole('Super Admin') || Auth::user()->hasRole('Hospital Admin'))
<div id="editModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/40">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-md mx-4 p-6">
        <div class="flex justify-between items-center mb-4">
            <h3 class="font-bold text-gray-900 text-sm" id="editTitle">Edit Lab Test</h3>
            <button onclick="document.getElementById('editModal').classList.add('hidden')" class="text-gray-400 hover:text-gray-600 text-xl">&times;</button>
        </div>
        <form method="POST" id="editForm">@csrf @method('PUT')
            <div class="space-y-3">
                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label class="form-label">Category</label>
                        <select name="category" id="eCat" class="form-input w-full text-sm">
                            @foreach(['Chemistry','Haematology','Serology','Microbiology','Parasitology','Urinalysis','Histology','Cytology'] as $c)
                            <option value="{{ $c }}">{{ $c }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="form-label">Sample Type</label>
                        <select name="sample_type" id="eSample" class="form-input w-full text-sm">
                            @foreach(['Blood','Urine','Stool','Swab','CSF','Semen','Sputum','Other'] as $s)
                            <option value="{{ $s }}">{{ $s }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div>
                    <label class="form-label">Turnaround Time (hours)</label>
                    <input type="number" name="turnaround_hours" id="eTAT" min="1" class="form-input w-full">
                </div>
                <div class="flex items-center gap-2">
                    <input type="checkbox" name="is_outsourced" id="eOut" value="1" class="w-4 h-4 rounded" onchange="document.getElementById('eOutsourceFields').classList.toggle('hidden', !this.checked)">
                    <label for="eOut" class="text-sm text-gray-700 cursor-pointer">Outsourced to external lab</label>
                </div>
                <div id="eOutsourceFields" class="hidden space-y-3 pl-1 border-l-2 border-cr-100">
                    <div class="pl-3">
                        <label class="form-label">External Lab Name</label>
                        <input type="text" name="outsource_lab" id="eLab" class="form-input w-full" placeholder="e.g. PathCare, Lancet, Diamond-Path" list="labOptions">
                        <datalist id="labOptions">
                            <option value="PathCare"></option>
                            <option value="Lancet"></option>
                            <option value="Diamond-Path"></option>
                        </datalist>
                    </div>
                    <div class="pl-3">
                        <label class="form-label">Buying Price / Lab Price (KES)</label>
                        <input type="number" name="outsource_buy_price" id="eBuyPrice" min="0" step="0.01" class="form-input w-full" placeholder="What the external lab charges CRH">
                        <p class="text-[11px] text-gray-500 mt-1">Cost CRH pays the lab for this test.</p>
                    </div>
                </div>
                <div class="flex justify-end gap-2 pt-2">
                    <button type="button" onclick="document.getElementById('editModal').classList.add('hidden')" class="btn-secondary text-xs">Cancel</button>
                    <button type="submit" class="btn-primary text-xs">Save Changes</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script>
function openEdit(id, name, tat, out, lab, sample, cat, buyPrice) {
    document.getElementById('editTitle').textContent = 'Edit: ' + name;
    document.getElementById('editForm').action = '/lab/catalogue/' + id;
    document.getElementById('eTAT').value = tat;
    document.getElementById('eOut').checked = out;
    document.getElementById('eLab').value = lab;
    document.getElementById('eBuyPrice').value = buyPrice || '';
    document.getElementById('eOutsourceFields').classList.toggle('hidden', !out);
    document.getElementById('eCat').value = cat;
    document.getElementById('eSample').value = sample;
    document.getElementById('editModal').classList.remove('hidden');
}
</script>
@endif
@endsection