@extends('layouts.app')

@section('content')

<div style="max-width:1000px;margin:auto;">

    <!-- HEADER -->
    <div style="margin-bottom:30px;">

        <h2 style="margin-bottom:5px;">
            Record Vitals
        </h2>

        <p style="color:#666;">
            Capture patient observations and measurements
        </p>

    </div>

    <!-- PATIENT -->
    <div class="panel"
         style="margin-bottom:20px;background:#eff6ff;">

        <div style="
            display:grid;
            grid-template-columns:1fr 1fr 1fr;
            gap:15px;
            font-size:14px;
            color:#1e3a8a;
        ">

            <div>

                <strong>Patient</strong><br>

                {{ $encounter->first_name }}
                {{ $encounter->last_name }}

            </div>

            <div>

                <strong>Patient No</strong><br>

                <span style="font-family:monospace;">

                    {{ $encounter->patient_no ?? '—' }}

                </span>

            </div>

            <div>

                <strong>Encounter</strong><br>

                {{ $encounter->encounter_no }}

            </div>

        </div>

    </div>

    <!-- ERRORS -->
    @if ($errors->any())

        <div style="
            margin-bottom:20px;
            padding:12px;
            background:#fee2e2;
            color:#991b1b;
            border-radius:6px;
        ">

            <strong>Fix the following:</strong>

            <ul style="margin-top:8px;">

                @foreach ($errors->all() as $error)

                    <li style="font-size:13px;">
                        {{ $error }}
                    </li>

                @endforeach

            </ul>

        </div>

    @endif

    <!-- FORM -->
    <div class="panel">

        <form method="POST"
              action="{{ route('admin.vitals.store', $encounter->id) }}">

            @csrf

            <!-- CORE VITALS -->
            <div style="margin-bottom:25px;">

                <h3 style="margin-bottom:15px;">
                    Core Vitals
                </h3>

                <div style="
                    display:grid;
                    grid-template-columns:1fr 1fr 1fr;
                    gap:20px;
                ">

                    <!-- TEMPERATURE -->
                    <div>

                        <label style="font-weight:600;">
                            Temperature (°C)
                        </label>

                        <input type="number"
                               step="0.1"
                               name="temperature"
                               value="{{ old('temperature') }}"
                               style="
                                    width:100%;
                                    padding:12px;
                                    border:1px solid #ddd;
                                    border-radius:6px;
                               ">

                    </div>

                    <!-- PULSE -->
                    <div>

                        <label style="font-weight:600;">
                            Pulse Rate
                        </label>

                        <input type="number"
                               name="pulse_rate"
                               value="{{ old('pulse_rate') }}"
                               placeholder="bpm"
                               style="
                                    width:100%;
                                    padding:12px;
                                    border:1px solid #ddd;
                                    border-radius:6px;
                               ">

                    </div>

                    <!-- RESPIRATORY -->
                    <div>

                        <label style="font-weight:600;">
                            Respiratory Rate
                        </label>

                        <input type="number"
                               name="respiratory_rate"
                               value="{{ old('respiratory_rate') }}"
                               placeholder="breaths/min"
                               style="
                                    width:100%;
                                    padding:12px;
                                    border:1px solid #ddd;
                                    border-radius:6px;
                               ">

                    </div>

                    <!-- SYSTOLIC -->
                    <div>

                        <label style="font-weight:600;">
                            Systolic BP
                        </label>

                        <input type="number"
                               name="systolic_bp"
                               value="{{ old('systolic_bp') }}"
                               placeholder="mmHg"
                               style="
                                    width:100%;
                                    padding:12px;
                                    border:1px solid #ddd;
                                    border-radius:6px;
                               ">

                    </div>

                    <!-- DIASTOLIC -->
                    <div>

                        <label style="font-weight:600;">
                            Diastolic BP
                        </label>

                        <input type="number"
                               name="diastolic_bp"
                               value="{{ old('diastolic_bp') }}"
                               placeholder="mmHg"
                               style="
                                    width:100%;
                                    padding:12px;
                                    border:1px solid #ddd;
                                    border-radius:6px;
                               ">

                    </div>

                    <!-- OXYGEN -->
                    <div>

                        <label style="font-weight:600;">
                            Oxygen Saturation
                        </label>

                        <input type="number"
                               name="oxygen_saturation"
                               value="{{ old('oxygen_saturation') }}"
                               placeholder="%"
                               style="
                                    width:100%;
                                    padding:12px;
                                    border:1px solid #ddd;
                                    border-radius:6px;
                               ">

                    </div>

                </div>

            </div>

            <!-- BODY MEASUREMENTS -->
            <div style="margin-bottom:25px;">

                <h3 style="margin-bottom:15px;">
                    Body Measurements
                </h3>

                <div style="
                    display:grid;
                    grid-template-columns:1fr 1fr 1fr;
                    gap:20px;
                ">

                    <!-- WEIGHT -->
                    <div>

                        <label style="font-weight:600;">
                            Weight (kg)
                        </label>

                        <input type="number"
                               step="0.01"
                               name="weight"
                               value="{{ old('weight') }}"
                               style="
                                    width:100%;
                                    padding:12px;
                                    border:1px solid #ddd;
                                    border-radius:6px;
                               ">

                    </div>

                    <!-- HEIGHT -->
                    <div>

                        <label style="font-weight:600;">
                            Height (cm)
                        </label>

                        <input type="number"
                               step="0.01"
                               name="height"
                               value="{{ old('height') }}"
                               style="
                                    width:100%;
                                    padding:12px;
                                    border:1px solid #ddd;
                                    border-radius:6px;
                               ">

                    </div>

                    <!-- BLOOD SUGAR -->
                    <div>

                        <label style="font-weight:600;">
                            Blood Sugar
                        </label>

                        <input type="number"
                               step="0.01"
                               name="blood_sugar"
                               value="{{ old('blood_sugar') }}"
                               placeholder="mmol/L"
                               style="
                                    width:100%;
                                    padding:12px;
                                    border:1px solid #ddd;
                                    border-radius:6px;
                               ">

                    </div>

                </div>

            </div>

            <!-- NOTES -->
            <div style="margin-bottom:20px;">

                <label style="font-weight:600;">
                    Notes
                </label>

                <textarea name="notes"
                          rows="4"
                          style="
                                width:100%;
                                padding:12px;
                                border:1px solid #ddd;
                                border-radius:6px;
                          ">{{ old('notes') }}</textarea>

            </div>

            <!-- RECORDED BY -->
            <div style="margin-bottom:20px;">

                <label style="font-weight:600;">
                    Recorded By
                </label>

                <input type="text"
                       name="recorded_by"
                       value="{{ old('recorded_by') }}"
                       placeholder="Nurse / clinician"
                       style="
                            width:100%;
                            padding:12px;
                            border:1px solid #ddd;
                            border-radius:6px;
                       ">

            </div>

            <!-- ACTIONS -->
            <div style="
                display:flex;
                gap:15px;
                margin-top:30px;
            ">

                <a href="{{ route('admin.encounters.show', $encounter->id) }}"
                   style="
                        flex:1;
                        text-align:center;
                        padding:12px;
                        border:1px solid #ddd;
                        border-radius:6px;
                        text-decoration:none;
                        color:#333;
                   ">

                    Cancel

                </a>

                <button type="submit"
                        style="
                            flex:2;
                            background:#2563eb;
                            color:white;
                            padding:12px;
                            border:none;
                            border-radius:6px;
                            font-weight:600;
                            cursor:pointer;
                        ">

                    Save Vitals

                </button>

            </div>

        </form>

    </div>

</div>

@endsection