@extends('layouts.app')

@section('content')

@php

    $age = null;

    if (!empty($encounter->date_of_birth)) {

        $age = \Carbon\Carbon::parse(
            $encounter->date_of_birth
        )->age;
    }

    $existingBmi = null;

    if (
        !empty($triage->height_cm) &&
        !empty($triage->weight_kg)
    ) {

        $heightMeters =
            $triage->height_cm / 100;

        if ($heightMeters > 0) {

            $existingBmi = round(
                $triage->weight_kg
                / ($heightMeters * $heightMeters),
                2
            );
        }
    }

@endphp

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

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

        <h1 style="
            font-size:30px;
            font-weight:700;
            margin-bottom:6px;
        ">

            Triage Assessment

        </h1>

        <div style="
            color:#64748b;
            font-size:14px;
        ">

            Vital signs, emergency screening and workflow routing

        </div>

    </div>

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

        <div style="
            display:grid;
            grid-template-columns:
                repeat(auto-fit,minmax(220px,1fr));
            gap:18px;
            font-size:14px;
        ">

            <div>

                <strong>Patient</strong><br>

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

            </div>

            <div>

                <strong>Sex</strong><br>

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

            </div>

            <div>

                <strong>Age</strong><br>

                {{ $age ? $age . ' years' : '—' }}

            </div>

            <div>

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

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

                    {{ $encounter->patient_no }}

                </span>

            </div>

            <div>

                <strong>Visit No</strong><br>

                {{ $encounter->visit_no }}

            </div>

            <div>

                <strong>Visit Type</strong><br>

                {{ ucfirst(
                    $encounter->visit_type ?? 'Medical'
                ) }}

            </div>

        </div>

    </div>

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

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

            <strong>
                Please correct the following:
            </strong>

            <ul style="
                margin-top:10px;
                padding-left:18px;
            ">

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

                    <li>{{ $error }}</li>

                @endforeach

            </ul>

        </div>

    @endif

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

        @csrf

        <!-- VITALS -->
        <div class="panel"
             style="
                margin-bottom:22px;
             ">

            <div style="
                font-size:18px;
                font-weight:700;
                margin-bottom:18px;
            ">

                Vital Signs

            </div>

            <div style="
                display:grid;
                grid-template-columns:
                    repeat(auto-fit,minmax(220px,1fr));
                gap:18px;
            ">

                <div>

                    <label style="
                        display:block;
                        margin-bottom:8px;
                        font-size:13px;
                        font-weight:700;
                        color:#374151;
                    ">

                        Temperature °C

                    </label>

                    <input type="number"
                           step="0.1"
                           name="temperature"
                           value="{{ old(
                                'temperature',
                                $triage->temperature ?? ''
                           ) }}"
                           style="
                                width:100%;
                                height:42px;
                                padding:10px 12px;
                                border:1px solid #d1d5db;
                                border-radius:8px;
                           ">

                </div>

                <div>

                    <label style="
                        display:block;
                        margin-bottom:8px;
                        font-size:13px;
                        font-weight:700;
                        color:#374151;
                    ">

                        Pulse Rate

                    </label>

                    <input type="number"
                           name="pulse_rate"
                           value="{{ old(
                                'pulse_rate',
                                $triage->pulse_rate ?? ''
                           ) }}"
                           style="
                                width:100%;
                                height:42px;
                                padding:10px 12px;
                                border:1px solid #d1d5db;
                                border-radius:8px;
                           ">

                </div>

                <div>

                    <label style="
                        display:block;
                        margin-bottom:8px;
                        font-size:13px;
                        font-weight:700;
                        color:#374151;
                    ">

                        Respiratory Rate

                    </label>

                    <input type="number"
                           name="respiratory_rate"
                           value="{{ old(
                                'respiratory_rate',
                                $triage->respiratory_rate ?? ''
                           ) }}"
                           style="
                                width:100%;
                                height:42px;
                                padding:10px 12px;
                                border:1px solid #d1d5db;
                                border-radius:8px;
                           ">

                </div>

                <div>

                    <label style="
                        display:block;
                        margin-bottom:8px;
                        font-size:13px;
                        font-weight:700;
                        color:#374151;
                    ">

                        SpO₂

                    </label>

                    <input type="number"
                           name="spo2"
                           value="{{ old(
                                'spo2',
                                $triage->spo2 ?? ''
                           ) }}"
                           style="
                                width:100%;
                                height:42px;
                                padding:10px 12px;
                                border:1px solid #d1d5db;
                                border-radius:8px;
                           ">

                </div>

                <div>

                    <label style="
                        display:block;
                        margin-bottom:8px;
                        font-size:13px;
                        font-weight:700;
                        color:#374151;
                    ">

                        Systolic BP

                    </label>

                    <input type="number"
                           name="systolic_bp"
                           value="{{ old(
                                'systolic_bp',
                                $triage->systolic_bp ?? ''
                           ) }}"
                           style="
                                width:100%;
                                height:42px;
                                padding:10px 12px;
                                border:1px solid #d1d5db;
                                border-radius:8px;
                           ">

                </div>

                <div>

                    <label style="
                        display:block;
                        margin-bottom:8px;
                        font-size:13px;
                        font-weight:700;
                        color:#374151;
                    ">

                        Diastolic BP

                    </label>

                    <input type="number"
                           name="diastolic_bp"
                           value="{{ old(
                                'diastolic_bp',
                                $triage->diastolic_bp ?? ''
                           ) }}"
                           style="
                                width:100%;
                                height:42px;
                                padding:10px 12px;
                                border:1px solid #d1d5db;
                                border-radius:8px;
                           ">

                </div>

            </div>

        </div>

        <!-- ANTHROPOMETRICS -->
        <div class="panel"
             style="
                margin-bottom:22px;
             ">

            <div style="
                font-size:18px;
                font-weight:700;
                margin-bottom:18px;
            ">

                Anthropometrics

            </div>

            <div style="
                display:grid;
                grid-template-columns:
                    repeat(auto-fit,minmax(220px,1fr));
                gap:18px;
            ">

                <!-- HEIGHT -->
                <div>

                    <label style="
                        display:block;
                        margin-bottom:8px;
                        font-size:13px;
                        font-weight:700;
                        color:#374151;
                    ">

                        Height (cm)

                    </label>

                    <input type="number"
                           step="0.1"
                           id="height_cm"
                           name="height_cm"
                           value="{{ old(
                                'height_cm',
                                $triage->height_cm ?? ''
                           ) }}"
                           style="
                                width:100%;
                                height:42px;
                                padding:10px 12px;
                                border:1px solid #d1d5db;
                                border-radius:8px;
                           ">

                </div>

                <!-- WEIGHT -->
                <div>

                    <label style="
                        display:block;
                        margin-bottom:8px;
                        font-size:13px;
                        font-weight:700;
                        color:#374151;
                    ">

                        Weight (kg)

                    </label>

                    <input type="number"
                           step="0.1"
                           id="weight_kg"
                           name="weight_kg"
                           value="{{ old(
                                'weight_kg',
                                $triage->weight_kg ?? ''
                           ) }}"
                           style="
                                width:100%;
                                height:42px;
                                padding:10px 12px;
                                border:1px solid #d1d5db;
                                border-radius:8px;
                           ">

                </div>

                <!-- BMI -->
                <div>

                    <label style="
                        display:block;
                        margin-bottom:8px;
                        font-size:13px;
                        font-weight:700;
                        color:#374151;
                    ">

                        BMI (Auto Calculated)

                    </label>

                    <input type="text"
                           id="bmi_display"
                           readonly
                           value="{{ $existingBmi }}"
                           style="
                                width:100%;
                                height:42px;
                                padding:10px 12px;
                                border:1px solid #d1d5db;
                                border-radius:8px;
                                background:#f8fafc;
                                color:#111827;
                                font-weight:700;
                           ">

                </div>

                <!-- PAIN SCORE -->
                <div>

                    <label style="
                        display:block;
                        margin-bottom:8px;
                        font-size:13px;
                        font-weight:700;
                        color:#374151;
                    ">

                        Pain Score

                    </label>

                    <select
                        name="pain_score"
                        style="
                            width:100%;
                            height:42px;
                            padding:10px 12px;
                            border:1px solid #d1d5db;
                            border-radius:8px;
                            background:white;
                        ">

                        <option value="">
                            Select pain score
                        </option>

                        @for($i = 0; $i <= 10; $i++)

                            <option value="{{ $i }}"
                                {{
                                    old(
                                        'pain_score',
                                        $triage->pain_score ?? ''
                                    ) == $i
                                    ? 'selected'
                                    : ''
                                }}>

                                {{ $i }} / 10

                            </option>

                        @endfor

                    </select>

                </div>

            </div>

        </div>

        <!-- NCD SCREENING -->
        <div class="panel"
             style="
                margin-bottom:22px;
             ">

            <div style="
                font-size:18px;
                font-weight:700;
                margin-bottom:18px;
            ">

                NCD Screening

            </div>

            <div style="
                display:grid;
                grid-template-columns:
                    repeat(auto-fit,minmax(240px,1fr));
                gap:14px;
            ">

                @php

                    $conditions = [

                        'known_hypertension' =>
                            'Hypertension',

                        'known_diabetes' =>
                            'Diabetes',

                        'asthma_copd' =>
                            'Asthma / COPD',

                        'epilepsy_history' =>
                            'Epilepsy',

                        'heart_disease' =>
                            'Heart Disease',

                        'sickle_cell_disease' =>
                            'Sickle Cell Disease'

                    ];

                @endphp

                @foreach($conditions as $field => $label)

                    <label style="
                        display:flex;
                        align-items:center;
                        gap:12px;
                        padding:14px;
                        border:1px solid #e5e7eb;
                        border-radius:10px;
                        background:white;
                        min-height:52px;
                    ">

                        <input type="checkbox"
                               name="{{ $field }}"
                               value="1"

                               {{
                                    old(
                                        $field,
                                        $triage->$field ?? false
                                    )
                                    ? 'checked'
                                    : ''
                               }}>

                        <span style="
                            font-size:14px;
                            font-weight:600;
                            color:#374151;
                        ">

                            {{ $label }}

                        </span>

                    </label>

                @endforeach

            </div>

        </div>

                <!-- RISKY BEHAVIOURS -->
        <div class="panel"
             style="
                margin-bottom:22px;
             ">

            <div style="
                font-size:18px;
                font-weight:700;
                margin-bottom:18px;
            ">

                Risky Behaviours

            </div>

            <div style="
                display:grid;
                grid-template-columns:
                    repeat(auto-fit,minmax(240px,1fr));
                gap:14px;
            ">

                @php

                    $behaviours = [

                        'smoker' =>
                            'Tobacco Smoking',

                        'alcohol_use' =>
                            'Alcohol Use',

                        'substance_use' =>
                            'Substance / Drug Use'

                    ];

                @endphp

                @foreach($behaviours as $field => $label)

                    <label style="
                        display:flex;
                        align-items:center;
                        gap:12px;
                        padding:14px;
                        border:1px solid #e5e7eb;
                        border-radius:10px;
                        background:white;
                        min-height:52px;
                    ">

                        <input type="checkbox"
                               name="{{ $field }}"
                               value="1"

                               {{
                                    old(
                                        $field,
                                        $triage->$field ?? false
                                    )
                                    ? 'checked'
                                    : ''
                               }}>

                        <span style="
                            font-size:14px;
                            font-weight:600;
                            color:#374151;
                        ">

                            {{ $label }}

                        </span>

                    </label>

                @endforeach

            </div>

        </div>

        <!-- NOTES -->
        <div class="panel"
             style="
                margin-bottom:22px;
             ">

            <div style="
                font-size:18px;
                font-weight:700;
                margin-bottom:18px;
            ">

                Clinical Notes

            </div>

            <textarea
                name="notes"
                rows="5"
                style="
                    width:100%;
                    padding:14px;
                    border:1px solid #d1d5db;
                    border-radius:10px;
                    resize:vertical;
                "
            >{{ old(
                'notes',
                $triage->notes ?? ''
            ) }}</textarea>

        </div>

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

            <a href="{{ route('admin.triage.queue') }}"
               style="
                    flex:1;
                    min-width:180px;
                    text-align:center;
                    padding:12px;
                    border:1px solid #ddd;
                    border-radius:8px;
                    text-decoration:none;
                    color:#333;
               ">

                Back to Queue

            </a>

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

                Save Triage

            </button>

        </div>

    </form>

</div>

<script>

    function calculateBMI() {

        const height =
            parseFloat(
                document.getElementById('height_cm').value
            );

        const weight =
            parseFloat(
                document.getElementById('weight_kg').value
            );

        const bmiField =
            document.getElementById('bmi_display');

        if (height > 0 && weight > 0) {

            const heightMeters =
                height / 100;

            const bmi =
                weight / (
                    heightMeters * heightMeters
                );

            bmiField.value =
                bmi.toFixed(2);

        } else {

            bmiField.value = '';

        }
    }

    document
        .getElementById('height_cm')
        .addEventListener(
            'input',
            calculateBMI
        );

    document
        .getElementById('weight_kg')
        .addEventListener(
            'input',
            calculateBMI
        );

    calculateBMI();

</script>

@endsection