@extends('layouts.app')
@section('title', 'Triage | ' . ($visit->patient->full_name ?? ''))
@section('content')

{{-- Patient Header | prominent, always visible --}}
<div class="bg-white rounded-xl border border-gray-200 p-4 mb-4">
    <div class="flex flex-wrap items-center gap-4">
        <div class="w-14 h-14 bg-cr-100 text-cr-700 rounded-full flex items-center justify-center text-lg font-bold flex-shrink-0">
            {{ strtoupper(substr($visit->patient->first_name ?? '', 0, 1) . substr($visit->patient->last_name ?? '', 0, 1)) }}
        </div>
        <div class="flex-1 min-w-0">
            <h2 class="text-lg font-bold text-gray-900">{{ $visit->patient->full_name ?? '' }}</h2>
            <p class="text-sm text-gray-500">
                <span class="font-mono font-semibold text-cr-600">{{ $visit->patient->mrn ?? '' }}</span>
                · {{ ucfirst($visit->patient->gender ?? '') }}
                · {{ $visit->patient->age ?? '' }}
                · {{ $visit->patient->phone ?? '' }}
            </p>
        </div>
        @if($visit->patient->allergies && count($visit->patient->allergies))
        <div class="bg-red-50 border border-red-300 rounded-lg px-3 py-2">
            <p class="text-xs font-bold text-red-700">ALLERGIES: {{ implode(', ', $visit->patient->allergies) }}</p>
        </div>
        @endif
        <div class="text-right text-xs text-gray-400">
            <p>Visit: <span class="font-mono font-semibold">{{ $visit->visit_number }}</span></p>
            <p>Check-in: {{ $visit->check_in_at ? $visit->check_in_at->format('H:i') : '-' }}</p>
            <p>Dept: {{ $visit->department->name ?? '-' }}</p>
        </div>
    </div>
</div>

{{-- Existing triage banner (re-triage scenario) --}}
@if($existingTriage)
<div class="bg-amber-50 border border-amber-300 rounded-xl p-4 mb-4">
    <div class="flex items-center justify-between">
        <div>
            <p class="text-sm font-bold text-amber-800">Triage already recorded</p>
            <p class="text-xs text-amber-700">
                Recorded by {{ $existingTriage->recordedBy->name ?? 'Unknown' }}
                at {{ $existingTriage->created_at->format('d M Y H:i') }}
                @if($existingTriage->triage_source === 'triage_nurse') (Triage Nurse) @elseif($existingTriage->triage_source === 'clinician') (Clinician) @endif
            </p>
            <p class="text-xs text-amber-600 mt-1">
                BP: {{ $existingTriage->blood_pressure_systolic ?? '-' }}/{{ $existingTriage->blood_pressure_diastolic ?? '-' }}
                · T: {{ $existingTriage->temperature ?? '-' }}°C
                · P: {{ $existingTriage->pulse ?? '-' }}
                · SpO2: {{ $existingTriage->oxygen_saturation ?? '-' }}%
                · Wt: {{ $existingTriage->weight ?? '-' }}kg
                · Priority: {{ ucfirst($existingTriage->priority) }}
            </p>
        </div>
        <button onclick="document.getElementById('triageForm').classList.toggle('hidden')"
                class="btn-secondary text-xs">Re-triage</button>
    </div>
</div>
@endif

{{-- Triage Form | large inputs, fast entry --}}
<div id="triageForm" class="{{ $existingTriage ? 'hidden' : '' }}">
<form method="POST" action="{{ route('triage.store', $visit) }}">
    @csrf
    <div class="bg-white rounded-xl border border-gray-200 p-6">
        <h3 class="text-sm font-bold text-gray-800 uppercase tracking-wide mb-5 flex items-center gap-2">
            <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/></svg>
            Vital Signs
        </h3>

        @if($errors->any())
        <div class="bg-red-50 border border-red-200 rounded-lg px-4 py-3 mb-4 text-sm text-red-800">
            @foreach($errors->all() as $error)<p>{{ $error }}</p>@endforeach
        </div>
        @endif

        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            {{-- BP -- two fields side by side --}}
            <div>
                <label class="form-label text-xs font-semibold">BP Systolic <span class="text-red-400">*</span></label>
                <input type="number" name="blood_pressure_systolic" min="50" max="300"
                       value="{{ old('blood_pressure_systolic', $existingTriage->blood_pressure_systolic ?? '') }}"
                       class="form-input text-lg font-bold text-center" placeholder="120" autofocus>
            </div>
            <div>
                <label class="form-label text-xs font-semibold">BP Diastolic <span class="text-red-400">*</span></label>
                <input type="number" name="blood_pressure_diastolic" min="20" max="200"
                       value="{{ old('blood_pressure_diastolic', $existingTriage->blood_pressure_diastolic ?? '') }}"
                       class="form-input text-lg font-bold text-center" placeholder="80">
            </div>
            <div>
                <label class="form-label text-xs font-semibold">Temperature (°C)</label>
                <input type="number" step="0.1" name="temperature" min="30" max="45"
                       value="{{ old('temperature', $existingTriage->temperature ?? '') }}"
                       class="form-input text-lg font-bold text-center" placeholder="36.5">
            </div>
            <div>
                <label class="form-label text-xs font-semibold">Pulse (bpm)</label>
                <input type="number" name="pulse" min="20" max="250"
                       value="{{ old('pulse', $existingTriage->pulse ?? '') }}"
                       class="form-input text-lg font-bold text-center" placeholder="72">
            </div>
            <div>
                <label class="form-label text-xs font-semibold">SpO2 (%)</label>
                <input type="number" name="oxygen_saturation" min="50" max="100"
                       value="{{ old('oxygen_saturation', $existingTriage->oxygen_saturation ?? '') }}"
                       class="form-input text-lg font-bold text-center" placeholder="98">
            </div>
            <div>
                <label class="form-label text-xs font-semibold">Weight (kg)</label>
                <input type="number" step="0.1" name="weight" min="0.5" max="300"
                       value="{{ old('weight', $existingTriage->weight ?? '') }}"
                       class="form-input text-lg font-bold text-center" placeholder="70">
            </div>
            <div>
                <label class="form-label text-xs font-semibold">Height (cm)</label>
                <input type="number" step="0.1" name="height" min="20" max="250"
                       value="{{ old('height', $existingTriage->height ?? '') }}"
                       class="form-input text-lg font-bold text-center" placeholder="165">
            </div>
            <div>
                <label class="form-label text-xs font-semibold">Resp Rate (/min)</label>
                <input type="number" name="respiratory_rate" min="5" max="60"
                       value="{{ old('respiratory_rate', $existingTriage->respiratory_rate ?? '') }}"
                       class="form-input text-lg font-bold text-center" placeholder="18">
            </div>
            <div>
                <label class="form-label text-xs font-semibold">Blood Sugar (mmol/L)</label>
                <input type="number" step="0.1" name="blood_sugar" min="0" max="50"
                       value="{{ old('blood_sugar', $existingTriage->blood_sugar ?? '') }}"
                       class="form-input text-lg font-bold text-center" placeholder="5.5">
            </div>
            <div>
                <label class="form-label text-xs font-semibold">Pain Score (0-10)</label>
                <input type="number" name="pain_score" min="0" max="10"
                       value="{{ old('pain_score', $existingTriage->pain_score ?? '') }}"
                       class="form-input text-lg font-bold text-center" placeholder="0">
            </div>
            <div>
                <label class="form-label text-xs font-semibold">Priority <span class="text-red-500">*</span></label>
                <select name="priority" required class="form-input text-sm font-semibold">
                    <option value="normal" {{ old('priority', $existingTriage->priority ?? '') === 'normal' ? 'selected' : '' }}>Routine</option>
                    <option value="urgent" {{ old('priority', $existingTriage->priority ?? '') === 'urgent' ? 'selected' : '' }}>Semi-urgent</option>
                    <option value="emergency" {{ old('priority', $existingTriage->priority ?? '') === 'emergency' ? 'selected' : '' }}>Emergency</option>
                </select>
            </div>
        </div>

        <div class="mt-4">
            <label class="form-label text-xs font-semibold">Chief Complaint / Notes</label>
            <textarea name="notes" class="form-input" rows="2" placeholder="Brief chief complaint or triage notes...">{{ old('notes', $existingTriage->notes ?? '') }}</textarea>
        </div>

        {{-- Action Buttons --}}
        <div class="flex flex-wrap gap-3 mt-6 pt-4 border-t">
            <button type="submit" name="action" value="send_consultation"
                    class="flex-1 md:flex-none inline-flex items-center justify-center gap-2 bg-green-600 hover:bg-green-700 text-white font-semibold px-6 py-3 rounded-lg transition text-sm">
                <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 5l7 7-7 7"/></svg>
                Save & Send to Consultation
            </button>
            <button type="submit" name="action" value="save"
                    class="btn-secondary text-sm px-4 py-3">
                Save Triage Only
            </button>
            <a href="{{ route('triage.index') }}" class="btn-secondary text-sm px-4 py-3">Cancel</a>
        </div>
    </div>
</form>
</div>

@endsection