@extends('layouts.app')
@section('title', 'Imaging / Radiology')
@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)}
    .im-panel{display:none}.im-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 justify-end mb-4">
    <form method="GET" class="flex gap-2 items-center">
        <input type="text" name="search" value="{{ request('search') }}" placeholder="Patient, MRN, study…" class="form-input text-xs w-44">
        <input type="date" name="date" value="{{ request('date') }}" class="form-input text-xs w-32 no-flatpickr">
        <button class="btn-primary text-xs">Filter</button>
        @if(request()->hasAny(['search','date']))<a href="{{ route('imaging.index') }}" class="btn-secondary text-xs">Clear</a>@endif
    </form>
</div>

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

<div class="bg-white rounded-xl border shadow-sm">
    <div class="hmis-tab-bar">
        <button class="hmis-tab active" data-color="amber" onclick="imTab(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">{{ $stats['ordered'] }}</span>
        </button>
        <button class="hmis-tab" data-color="purple" onclick="imTab(this,'pending')">
            <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 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
            Pending Reports <span class="tc">{{ $stats['pending_report'] }}</span>
        </button>
        <button class="hmis-tab" data-color="green" onclick="imTab(this,'verified')">
            <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>
            Verified <span class="tc">{{ $stats['verified'] }}</span>
        </button>
    </div>

    {{-- Ordered Studies (requested / scheduled / in_progress) --}}
    <div id="im-ordered" class="im-panel active">
        @include('imaging._table', ['requests' => $orderedRows])
    </div>

    {{-- Pending Reports (imaging_done / reported) --}}
    <div id="im-pending" class="im-panel">
        @include('imaging._table', ['requests' => $pendingRows])
    </div>

    {{-- Verified Reports --}}
    <div id="im-verified" class="im-panel">
        @include('imaging._table', ['requests' => $verifiedRows])
    </div>
</div>
@endsection
@section('scripts')
<script>
function imTab(btn, id) {
    document.querySelectorAll('.hmis-tab').forEach(t => t.classList.remove('active'));
    document.querySelectorAll('.im-panel').forEach(p => p.classList.remove('active'));
    btn.classList.add('active');
    document.getElementById('im-' + id).classList.add('active');
}
</script>
@include('partials._tab-state-helper', ['defaultTab' => 'ordered'])
@endsection