@extends('layouts.app')
@section('title', 'Triage Queue')
@section('content')

{{-- Stats --}}
<div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-5">
    <div class="stat-card text-center" style="border-left:3px solid #f59e0b">
        <p class="text-xs text-gray-400 uppercase">Waiting</p>
        <p class="text-2xl font-bold text-amber-600">{{ $stats['waiting'] }}</p>
    </div>
    <div class="stat-card text-center" style="border-left:3px solid #ef4444">
        <p class="text-xs text-gray-400 uppercase">Urgent</p>
        <p class="text-2xl font-bold text-red-600">{{ $stats['urgent'] }}</p>
    </div>
    <div class="stat-card text-center" style="border-left:3px solid #3b82f6">
        <p class="text-xs text-gray-400 uppercase">In Triage</p>
        <p class="text-2xl font-bold text-blue-600">{{ $stats['in_triage'] }}</p>
    </div>
    <div class="stat-card text-center" style="border-left:3px solid #22c55e">
        <p class="text-xs text-gray-400 uppercase">Triaged (Ready)</p>
        <p class="text-2xl font-bold text-green-600">{{ $stats['triaged'] }}</p>
    </div>
</div>

{{-- Filter --}}
<div class="flex flex-wrap gap-2 mb-4 items-center">
    <h2 class="text-base font-bold text-gray-900">Triage Queue</h2>
    <form method="GET" class="ml-auto flex gap-2 items-center">
        <input type="text" name="search" value="{{ request('search') }}" placeholder="Search patient..." class="form-input text-xs w-40">
        <select name="department" class="form-input text-xs w-36" onchange="this.form.submit()">
            <option value="">All Depts</option>
            @include('partials._department-options', ['selected' => request('department')])
        </select>
        <button class="btn-primary text-xs">Filter</button>
    </form>
    <button onclick="location.reload()" class="btn-secondary text-xs">Refresh</button>
</div>

{{-- Pending Queue --}}
<div class="bg-white rounded-xl border border-gray-200 overflow-hidden mb-5">
    <div class="px-5 py-3 bg-amber-50 border-b border-amber-200 flex items-center gap-2">
        <span class="w-2.5 h-2.5 bg-amber-500 rounded-full animate-pulse"></span>
        <h3 class="text-sm font-bold text-amber-800">Awaiting Triage ({{ $pendingVisits->count() }})</h3>
    </div>
    <table class="w-full">
        <thead class="bg-gray-50"><tr>
            <th class="table-header">#</th>
            <th class="table-header">Patient</th>
            <th class="table-header">MRN</th>
            <th class="table-header">Age/Sex</th>
            <th class="table-header">Dept</th>
            <th class="table-header">Check-in</th>
            <th class="table-header">Wait Time</th>
            <th class="table-header">Type</th>
            <th class="table-header">Action</th>
        </tr></thead>
        <tbody class="divide-y divide-gray-50">
        @forelse($pendingVisits as $v)
        <tr class="hover:bg-blue-50/30 {{ $v->status === 'urgent' ? 'bg-red-50/40' : '' }}">
            <td class="table-cell font-mono text-xs text-gray-400">{{ $v->visit_number }}</td>
            <td class="table-cell">
                <p class="text-sm font-semibold text-gray-900">{{ $v->patient->full_name ?? '' }}</p>
                @if($v->patient->allergies && count($v->patient->allergies))
                    <span class="text-xs text-red-600 font-bold">ALLERGY: {{ implode(', ', $v->patient->allergies) }}</span>
                @endif
            </td>
            <td class="table-cell font-mono text-xs">{{ $v->patient->mrn ?? '' }}</td>
            <td class="table-cell text-xs">{{ $v->patient->age ?? '-' }} / {{ strtoupper(substr($v->patient->gender ?? '', 0, 1)) }}</td>
            <td class="table-cell text-xs">{{ $v->department->name ?? '-' }}</td>
            <td class="table-cell text-xs">{{ $v->check_in_at ? $v->check_in_at->format('H:i') : '-' }}</td>
            <td class="table-cell text-xs">
                @if($v->check_in_at)
                    @php $wait = $v->check_in_at->diffInMinutes(now()); @endphp
                    <span class="{{ $wait > 30 ? 'text-red-600 font-bold' : ($wait > 15 ? 'text-amber-600' : 'text-gray-500') }}">
                        {{ $wait }} min
                    </span>
                @endif
            </td>
            <td class="table-cell">
                @if($v->status === 'urgent')
                    <span class="badge badge-danger">URGENT</span>
                @else
                    <span class="badge badge-warning">{{ ucfirst(str_replace('_', ' ', $v->visit_type)) }}</span>
                @endif
            </td>
            <td class="table-cell">
                <a href="{{ route('triage.create', $v) }}"
                   class="inline-flex items-center gap-1 text-xs font-semibold text-white bg-blue-600 hover:bg-blue-700 px-3 py-1.5 rounded-lg transition">
                    <svg class="w-3.5 h-3.5" 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>
                    Start Triage
                </a>
            </td>
        </tr>
        @empty
        <tr><td colspan="9" class="table-cell text-center text-gray-400 py-10">No patients waiting for triage.</td></tr>
        @endforelse
        </tbody>
    </table>
</div>

{{-- Recently Triaged --}}
@if($triaged->count())
<div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
    <div class="px-5 py-3 bg-green-50 border-b border-green-200 flex items-center gap-2">
        <span class="w-2.5 h-2.5 bg-green-500 rounded-full"></span>
        <h3 class="text-sm font-bold text-green-800">Recently Triaged | Waiting for Consultation ({{ $triaged->count() }})</h3>
    </div>
    <table class="w-full">
        <thead class="bg-gray-50"><tr>
            <th class="table-header">Patient</th>
            <th class="table-header">MRN</th>
            <th class="table-header">Vitals</th>
            <th class="table-header">Priority</th>
            <th class="table-header">Triaged by</th>
            <th class="table-header">Time</th>
        </tr></thead>
        <tbody class="divide-y divide-gray-50">
        @foreach($triaged as $v)
        <tr class="hover:bg-gray-50">
            <td class="table-cell text-sm font-medium">{{ $v->patient->full_name ?? '' }}</td>
            <td class="table-cell font-mono text-xs">{{ $v->patient->mrn ?? '' }}</td>
            <td class="table-cell text-xs">
                @if($v->triage)
                    BP: {{ $v->triage->blood_pressure_systolic ?? '-' }}/{{ $v->triage->blood_pressure_diastolic ?? '-' }}
                    · T: {{ $v->triage->temperature ?? '-' }}°C
                    · P: {{ $v->triage->pulse ?? '-' }}
                    · SpO2: {{ $v->triage->oxygen_saturation ?? '-' }}%
                @endif
            </td>
            <td class="table-cell">
                @if($v->triage)
                    <span class="badge {{ $v->triage->priority === 'emergency' ? 'badge-danger' : ($v->triage->priority === 'urgent' ? 'badge-warning' : 'badge-success') }}">
                        {{ ucfirst($v->triage->priority) }}
                    </span>
                @endif
            </td>
            <td class="table-cell text-xs text-gray-500">{{ $v->triage->recordedBy->name ?? '-' }}</td>
            <td class="table-cell text-xs text-gray-400">{{ $v->triage->triage_completed_at ? $v->triage->triage_completed_at->format('H:i') : ($v->triage->created_at->format('H:i')) }}</td>
        </tr>
        @endforeach
        </tbody>
    </table>
</div>
@endif

@endsection