@extends('layouts.app')

@section('content')

@php

    $triageCategory =
        strtolower($encounter->triage_category ?? 'green');

    $riskLevelLabel = 'NORMAL';
    $riskColor = '#16a34a';

    if ($triageCategory === 'red') {

        $riskLevelLabel = 'CRITICAL';
        $riskColor = '#dc2626';

    } elseif ($triageCategory === 'orange') {

        $riskLevelLabel = 'HIGH';
        $riskColor = '#ea580c';

    } elseif ($triageCategory === 'yellow') {

        $riskLevelLabel = 'MODERATE';
        $riskColor = '#ca8a04';

    }

@endphp

<div style="
    max-width:1600px;
    margin:auto;
    padding:10px 16px 30px;
">

    @include(
        'admin.consultations.partials.page-header'
    )

    <!-- ========================================= -->
    <!-- MAIN GRID -->
    <!-- ========================================= -->

    <div style="
        display:grid;
        grid-template-columns:minmax(0,1fr) 320px;
        gap:16px;
        align-items:start;
    ">

        <!-- ===================================== -->
        <!-- LEFT CONTENT -->
        <!-- ===================================== -->

        <div>

            @include(
                'admin.consultations.partials.patient-header'
            )

            @include(
                'admin.consultations.partials.risk-alerts'
            )

            @include(
                'admin.consultations.partials.vitals'
            )

            <!-- ================================= -->
            <!-- CONSULTATION FORM -->
            <!-- ================================= -->

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

                @csrf

                @include(
                    'admin.consultations.partials.clinical-assessment'
                )

                @include(
                    'admin.consultations.partials.investigations-management'
                )

                @include(
                    'admin.consultations.partials.footer-actions'
                )

            </form>

        </div>

        <!-- ===================================== -->
        <!-- RIGHT SIDEBAR -->
        <!-- ===================================== -->

        <div style="
            display:flex;
            flex-direction:column;
            gap:14px;
            position:sticky;
            top:14px;
        ">

            @include(
                'admin.consultations.partials.triage-card',
                [
                    'triageCategory' => $triageCategory,
                    'riskColor' => $riskColor,
                    'riskLevel' => $riskLevelLabel,
                ]
            )

            @include(
                'admin.consultations.partials.emergency-actions'
            )

            @include(
                'admin.consultations.partials.workflow-status'
            )

        </div>

    </div>

</div>

<script>

    function togglePanel(id)
    {
        const panel =
            document.getElementById(id);

        if (!panel) {
            return;
        }

        panel.style.display =
            panel.style.display === 'block'
            ? 'none'
            : 'block';
    }

</script>

@endsection