@extends('layouts.app')
@section('title', 'Laboratory')
@section('styles')
<style>
    .hmis-tab-bar{display:flex;gap:8px;padding:14px 18px;background:#f8fafc;border-bottom:2px solid #e5e7eb;overflow-x:auto}
    .hmis-tab{padding:11px 28px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:9px;background:#fff;border:1.5px solid #e2e8f0;border-radius:12px 12px 0 0;color:#64748b;white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.06);margin-bottom:-2px;position:relative}
    .hmis-tab:hover{border-color:#94a3b8;color:#334155;box-shadow:0 3px 8px rgba(0,0,0,.09);transform:translateY(-1px)}
    .hmis-tab.active{color:#fff;border-color:transparent;border-bottom-color:transparent;box-shadow:0 3px 10px rgba(0,0,0,.15);transform:translateY(-2px);z-index:1}
    .hmis-tab .tc{font-size:11px;padding:2px 9px;border-radius:99px;font-weight:700;background:rgba(255,255,255,.28);min-width:22px;text-align:center}
    .hmis-tab:not(.active) .tc{background:#e2e8f0;color:#475569}
    .hmis-tab[data-color="amber"].active{background:linear-gradient(135deg,#f59e0b,#d97706)}
    .hmis-tab[data-color="green"].active{background:linear-gradient(135deg,#22c55e,#16a34a)}
    .hmis-tab[data-color="sky"].active{background:linear-gradient(135deg,#0ea5e9,#0284c7)}
    .hmis-tab[data-color="purple"].active{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}
    .hmis-tab[data-color="teal"].active{background:linear-gradient(135deg,#14b8a6,#0d9488)}
    .hmis-tab[data-color="blue"].active{background:linear-gradient(135deg,#3b82f6,#2563eb)}
    .hmis-tab[data-color="indigo"].active{background:linear-gradient(135deg,#6366f1,#4f46e5)}
    .hmis-tab[data-color="cr"].active{background:linear-gradient(135deg,#0069c9,#0052a3)}
    .hmis-tab[data-color="slate"].active{background:linear-gradient(135deg,#475569,#334155)}
    .lb-panel{display:none}.lb-panel.active{display:block}
</style>
@endsection
@section('content')
{{-- Page header removed per UI cleanup; search/filter form is now the
     top-most bar on the page (sidebar already names the page). --}}
<div class="flex flex-wrap items-center justify-end gap-3 mb-4">
    <form method="GET" class="flex gap-2 items-center flex-wrap">
        <input type="text" name="search" value="{{ request('search') }}" placeholder="Patient, MRN, test…" class="form-input text-xs w-44">
        <select name="urgency" class="form-input text-xs w-28"><option value="">All Urgency</option><option value="routine" {{ request('urgency')==='routine'?'selected':'' }}>Routine</option><option value="urgent" {{ request('urgency')==='urgent'?'selected':'' }}>Urgent</option></select>
        <label class="text-xs text-gray-500">From</label>
        <input type="date" name="from" value="{{ request('from') }}" class="form-input text-xs w-32 no-flatpickr">
        <label class="text-xs text-gray-500">To</label>
        <input type="date" name="to" value="{{ request('to') }}" class="form-input text-xs w-32 no-flatpickr">
        <button class="btn-primary text-xs">Filter</button>
        <a href="{{ route('lab.index', ['all' => 1]) }}" class="btn-secondary text-xs" title="Show every lab order ever — slower">All time</a>
        @if(request()->hasAny(['search','urgency','from','to','date','all']))<a href="{{ route('lab.index') }}" class="btn-secondary text-xs">Clear</a>@endif
    </form>
    @if(request()->hasAny(['search','from','to','date','all']))
        <p class="text-xs text-gray-500 w-full">
            Showing
            @if(request('all')) <strong>all lab orders</strong>
            @elseif(request('from') && request('to')) orders from <strong>{{ request('from') }}</strong> to <strong>{{ request('to') }}</strong>
            @elseif(request('from')) orders from <strong>{{ request('from') }}</strong> onward
            @elseif(request('to')) orders up to <strong>{{ request('to') }}</strong>
            @elseif(request('date')) orders for <strong>{{ request('date') }}</strong>
            @else matching orders
            @endif
            — {{ $orders->total() }} result{{ $orders->total() === 1 ? '' : 's' }}.
        </p>
    @else
        <p class="text-xs text-gray-400 w-full">Showing the last 7 days. Use the date range or <a href="{{ route('lab.index', ['all' => 1]) }}" class="text-blue-600 hover:underline">All time</a> to see history.</p>
    @endif
</div>

{{-- Stats removed Issue #15: tab badges convey same volume info. --}}

<div class="bg-white rounded-xl border shadow-sm">
    <div class="hmis-tab-bar">
        <button class="hmis-tab active" data-color="amber" onclick="lbTab(this,'ordered')">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
            Ordered <span class="tc">{{ $orders->where('status','ordered')->count() }}</span>
        </button>
        <button class="hmis-tab" data-color="blue" onclick="lbTab(this,'inprogress')">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
            In Progress <span class="tc">{{ $inProgressOrders->count() }}</span>
        </button>
        <button class="hmis-tab" data-color="green" onclick="lbTab(this,'released')">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            Released
        </button>
    </div>

    <div id="lb-ordered" class="lb-panel active">@include('lab._orders_table', ['filterStatus' => 'ordered', 'ordersSource' => $orders])</div>
    <div id="lb-inprogress" class="lb-panel">@include('lab._orders_table', ['filterStatus' => 'in_process', 'ordersSource' => $inProgressOrders])</div>
    <div id="lb-released" class="lb-panel">@include('lab._orders_table', ['filterStatus' => 'validated', 'ordersSource' => $orders])</div>
</div>
@endsection
@section('scripts')
<script>
function lbTab(btn, id) {
    document.querySelectorAll('.hmis-tab').forEach(t => t.classList.remove('active'));
    document.querySelectorAll('.lb-panel').forEach(p => p.classList.remove('active'));
    btn.classList.add('active');
    document.getElementById('lb-' + id).classList.add('active');
}
</script>
@include('partials._tab-state-helper', ['defaultTab' => 'ordered'])
@endsection