@extends('layouts.app')

@section('title', __('consultations::messages.triage.title'))

@section('content')
    {{-- ── Page head ──────────────────────────────────────────────────────── --}}
    <div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-4">
        <div>
            <h1 class="px-title">{{ __('consultations::messages.triage.title') }}</h1>
            <p class="px-subtitle">{{ __('consultations::messages.triage.subtitle') }}</p>
        </div>

        @if (Route::has('appointments.index'))
            <a href="{{ route('appointments.index') }}" class="btn px-btn-ghost d-inline-flex align-items-center gap-2">
                <i class="bi bi-arrow-left rtl-flip" aria-hidden="true"></i>
                {{ __('common.appointments') }}
            </a>
        @endif
    </div>

    <div class="px-layout">
        <div class="min-w-0">
            <div class="px-panel p-3 p-md-4">
                {{-- Who this is. Shown large, because the single worst outcome
                     here is recording one patient's vitals against another. --}}
                <div class="d-flex align-items-center gap-3 pb-3 mb-4 border-bottom"
                     style="border-color: var(--px-border) !important;">
                    @php
                        $name = $patient?->name ?? __('consultations::messages.encounters.unknown_patient');
                    @endphp

                    <div class="min-w-0">
                        <p class="mb-0 fw-semibold fs-5">{{ $name }}</p>
                        <p class="mb-0 small text-body-secondary">
                            <span class="font-monospace">{{ $patient?->mrn }}</span>
                            @if ($patient?->ageLabel)
                                · {{ $patient->ageLabel }}
                            @endif
                            · {{ $appointment->reference }}
                            · {{ $appointment->localStart->format('d M Y H:i') }}
                        </p>
                    </div>
                </div>

                <form method="POST" action="{{ route('triage.store') }}" class="row g-3">
                    @csrf
                    <input type="hidden" name="appointment" value="{{ $appointment->ulid }}">

                    <div class="col-12">
                        <p class="px-aside__title mb-2">{{ __('consultations::messages.triage.anthropometry') }}</p>
                    </div>

                    <div class="col-6 col-md-3">
                        <label for="height_cm" class="px-field-label">{{ __('consultations::messages.vitals.height') }}</label>
                        <input type="number" step="0.1" min="20" max="272" id="height_cm" name="height_cm"
                               class="form-control px-input" value="{{ old('height_cm') }}"
                               data-triage-height>
                    </div>

                    <div class="col-6 col-md-3">
                        <label for="weight_kg" class="px-field-label">{{ __('consultations::messages.vitals.weight') }}</label>
                        <input type="number" step="0.01" min="0.4" max="700" id="weight_kg" name="weight_kg"
                               class="form-control px-input" value="{{ old('weight_kg') }}"
                               data-triage-weight>
                    </div>

                    <div class="col-6 col-md-3">
                        {{-- Shown live so the desk can see it, but recomputed on
                             the server before storage. A number typed into this
                             box by hand must never be what gets saved. --}}
                        <label for="bmi_preview" class="px-field-label">{{ __('consultations::messages.vitals.bmi') }}</label>
                        <input type="text" id="bmi_preview" class="form-control px-input" readonly
                               data-triage-bmi placeholder="—"
                               aria-describedby="bmi_hint">
                        <span id="bmi_hint" class="visually-hidden">{{ __('consultations::messages.triage.bmi_hint') }}</span>
                    </div>

                    <div class="col-6 col-md-3">
                        <label for="waist_in" class="px-field-label">{{ __('consultations::messages.vitals.waist') }}</label>
                        <input type="number" step="0.1" min="12" max="79" id="waist_in" name="waist_in"
                               class="form-control px-input" value="{{ old('waist_in') }}">
                    </div>

                    <div class="col-12 mt-4">
                        <p class="px-aside__title mb-2">{{ __('consultations::messages.triage.cardiovascular') }}</p>
                    </div>

                    <div class="col-6 col-md-3">
                        <label for="systolic" class="px-field-label">{{ __('consultations::messages.vitals.systolic') }}</label>
                        <input type="number" min="40" max="300" id="systolic" name="systolic"
                               class="form-control px-input" value="{{ old('systolic') }}">
                    </div>

                    <div class="col-6 col-md-3">
                        <label for="diastolic" class="px-field-label">{{ __('consultations::messages.vitals.diastolic') }}</label>
                        <input type="number" min="20" max="200" id="diastolic" name="diastolic"
                               class="form-control px-input" value="{{ old('diastolic') }}">
                    </div>

                    <div class="col-6 col-md-3">
                        <label for="pulse_bpm" class="px-field-label">{{ __('consultations::messages.vitals.pulse') }}</label>
                        <input type="number" min="20" max="300" id="pulse_bpm" name="pulse_bpm"
                               class="form-control px-input" value="{{ old('pulse_bpm') }}">
                    </div>

                    <div class="col-6 col-md-3">
                        <label for="spo2" class="px-field-label">{{ __('consultations::messages.vitals.spo2') }}</label>
                        <input type="number" min="40" max="100" id="spo2" name="spo2"
                               class="form-control px-input" value="{{ old('spo2') }}">
                    </div>

                    <div class="col-12 mt-4">
                        <p class="px-aside__title mb-2">{{ __('consultations::messages.triage.metabolic') }}</p>
                    </div>

                    <div class="col-6 col-md-3">
                        <label for="blood_glucose_mgdl" class="px-field-label">{{ __('consultations::messages.vitals.glucose') }}</label>
                        <input type="number" min="10" max="1500" id="blood_glucose_mgdl" name="blood_glucose_mgdl"
                               class="form-control px-input" value="{{ old('blood_glucose_mgdl') }}">
                    </div>

                    <div class="col-6 col-md-3">
                        <label for="glucose_timing" class="px-field-label">{{ __('consultations::messages.vitals.glucose_timing') }}</label>
                        <select id="glucose_timing" name="glucose_timing" class="form-select px-select">
                            @foreach ($timings as $value => $label)
                                <option value="{{ $value }}" @selected(old('glucose_timing', 'random') === $value)>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-6 col-md-3">
                        <label for="temperature_f" class="px-field-label">{{ __('consultations::messages.vitals.temperature_f') }}</label>
                        <input type="number" step="0.1" min="77" max="113" id="temperature_f" name="temperature_f"
                               class="form-control px-input" value="{{ old('temperature_f') }}">
                    </div>

                    <div class="col-6 col-md-3">
                        <label for="respiratory_rate" class="px-field-label">{{ __('consultations::messages.vitals.respiratory_rate') }}</label>
                        <input type="number" min="4" max="80" id="respiratory_rate" name="respiratory_rate"
                               class="form-control px-input" value="{{ old('respiratory_rate') }}">
                    </div>

                    <div class="col-12 col-md-8">
                        <label for="notes" class="px-field-label">{{ __('consultations::messages.vitals.notes') }}</label>
                        <input type="text" maxlength="255" id="notes" name="notes"
                               class="form-control px-input" value="{{ old('notes') }}"
                               placeholder="{{ __('consultations::messages.triage.notes_placeholder') }}">
                    </div>

                    <div class="col-12 col-md-4">
                        <label for="measured_at" class="px-field-label">{{ __('consultations::messages.triage.measured_at') }}</label>
                        <input type="datetime-local" id="measured_at" name="measured_at"
                               class="form-control px-input" value="{{ old('measured_at') }}">
                    </div>

                    <div class="col-12 d-flex justify-content-end gap-2 mt-4">
                        <button type="submit" class="btn px-btn-primary d-inline-flex align-items-center gap-2">
                            <i class="bi bi-clipboard2-pulse" aria-hidden="true"></i>
                            {{ __('consultations::messages.triage.record') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>

        {{-- ── Context ────────────────────────────────────────────────────── --}}
        <aside class="px-aside" aria-label="{{ __('consultations::messages.triage.context') }}">
            <div class="px-aside__card">
                <p class="px-aside__title">{{ __('consultations::messages.triage.alert_thresholds') }}</p>

                <div class="px-stat">
                    <span class="px-stat__label">{{ __('consultations::messages.vitals.blood_pressure') }}</span>
                    <span class="px-stat__value">&gt; {{ $thresholds->systolic }}/{{ $thresholds->diastolic }}</span>
                </div>
                <div class="px-stat">
                    <span class="px-stat__label">{{ __('consultations::messages.vitals.glucose') }}</span>
                    <span class="px-stat__value">&gt; {{ $thresholds->glucoseHigh }}</span>
                </div>
                <div class="px-stat">
                    <span class="px-stat__label">{{ __('consultations::messages.triage.glucose_low') }}</span>
                    <span class="px-stat__value">&lt; {{ $thresholds->glucoseLow }}</span>
                </div>
            </div>

            @if ($previous->isNotEmpty())
                <div class="px-aside__card">
                    <p class="px-aside__title">{{ __('consultations::messages.triage.earlier_today') }}</p>

                    <ul class="px-timeline">
                        @foreach ($previous as $reading)
                            <li>
                                <span class="fw-medium">
                                    @if ($reading->bloodPressure())
                                        {{ $reading->bloodPressure() }} mmHg
                                    @endif
                                    @if ($reading->blood_glucose_mgdl)
                                        · {{ $reading->blood_glucose_mgdl }} mg/dL
                                    @endif
                                    @if ($reading->bmi)
                                        · BMI {{ $reading->bmi }}
                                    @endif
                                </span>
                                <span class="px-timeline__when">{{ $reading->measured_at->format('H:i') }}</span>
                            </li>
                        @endforeach
                    </ul>
                </div>
            @endif
        </aside>
    </div>
@endsection