@extends('layouts.app')
@section('title', __('medemergency::lang.triage'))
@section('content')
<section class="content-header">
    <h1><i class="fa fa-stethoscope"></i> @lang('medemergency::lang.triage') — {{ $visit->patient_name ?: ('#' . $visit->id) }}</h1>
    <p>{{ $visit->visit_no }} · @lang('medemergency::lang.triage_help')</p>
</section>
<section class="content">
    <form action="{{ route('mder.triage.store', $visit->id) }}" method="POST" id="mder_triage_form">
        {{ csrf_field() }}
        <div class="row">
            <div class="col-md-7">
                @component('components.widget', ['class' => 'box-primary', 'title' => __('medemergency::lang.vitals')])
                    <div class="row">
                        <div class="col-md-4 form-group"><label>@lang('medemergency::lang.temperature')</label>
                            <input type="number" step="0.1" name="temperature" class="form-control"></div>
                        <div class="col-md-4 form-group"><label>@lang('medemergency::lang.heart_rate')</label>
                            <input type="number" name="heart_rate" class="form-control mder-vital"></div>
                        <div class="col-md-4 form-group"><label>@lang('medemergency::lang.respiratory_rate')</label>
                            <input type="number" name="respiratory_rate" class="form-control mder-vital"></div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 form-group"><label>@lang('medemergency::lang.spo2')</label>
                            <input type="number" step="0.1" name="spo2" class="form-control mder-vital"></div>
                        <div class="col-md-4 form-group"><label>@lang('medemergency::lang.bp_systolic')</label>
                            <input type="number" name="bp_systolic" class="form-control"></div>
                        <div class="col-md-4 form-group"><label>@lang('medemergency::lang.bp_diastolic')</label>
                            <input type="number" name="bp_diastolic" class="form-control"></div>
                    </div>
                    <div class="row">
                        <div class="col-md-3 form-group"><label>@lang('medemergency::lang.pain_score')</label>
                            <input type="number" min="0" max="10" name="pain_score" class="form-control"></div>
                        <div class="col-md-3 form-group"><label>@lang('medemergency::lang.gcs_eye')</label>
                            <input type="number" min="1" max="4" name="gcs_eye" class="form-control mder-vital"></div>
                        <div class="col-md-3 form-group"><label>@lang('medemergency::lang.gcs_verbal')</label>
                            <input type="number" min="1" max="5" name="gcs_verbal" class="form-control mder-vital"></div>
                        <div class="col-md-3 form-group"><label>@lang('medemergency::lang.gcs_motor')</label>
                            <input type="number" min="1" max="6" name="gcs_motor" class="form-control mder-vital"></div>
                    </div>
                @endcomponent
            </div>
            <div class="col-md-5">
                @component('components.widget', ['class' => 'box-warning', 'title' => __('medemergency::lang.triage_level')])
                    <div class="callout" id="mder_suggest_box" style="display:none;background:#fff7ed;border-left:4px solid #ea580c;">
                        <strong>@lang('medemergency::lang.suggested_level'):</strong>
                        <span id="mder_suggest_level"></span>
                        <div id="mder_suggest_reasons" class="text-muted" style="font-size:12px;"></div>
                        <button type="button" class="btn btn-xs btn-warning" id="mder_apply_suggest" style="margin-top:5px;">
                            <i class="fa fa-check"></i> @lang('medemergency::lang.apply_suggestion')
                        </button>
                    </div>
                    <div class="form-group">
                        <label>@lang('medemergency::lang.triage_level') *</label>
                        <select name="triage_level" id="mder_triage_level" class="form-control" required>
                            <option value="">—</option>
                            @foreach($triageLevels as $lvl)
                                <option value="{{ $lvl }}">@lang('medemergency::lang.level_' . $lvl)</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label>@lang('medemergency::lang.triage_system')</label>
                        <select name="triage_system" class="form-control">
                            @foreach($triageSystems as $sys)
                                <option value="{{ $sys }}" @selected($sys === ($visit->triage_system ?: 'esi'))>@lang('medemergency::lang.system_' . $sys)</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label>@lang('medemergency::lang.assigned_doctor')</label>
                        <select name="assigned_doctor_id" class="form-control">
                            <option value="">@lang('medemergency::lang.none')</option>
                            @foreach($doctors as $id => $name)
                                <option value="{{ $id }}" @selected((int) $visit->assigned_doctor_id === (int) $id)>{{ $name }}</option>
                            @endforeach
                        </select>
                    </div>
                @endcomponent
            </div>
        </div>
        <div class="text-right">
            <a href="{{ route('mder.board.index') }}" class="btn btn-default">@lang('medemergency::lang.cancel')</a>
            <button type="submit" class="btn btn-primary"><i class="fa fa-save"></i> @lang('medemergency::lang.save_triage')</button>
        </div>
    </form>
</section>
@endsection

@section('javascript')
<script>
$(function () {
    var LEVELS = @json(collect($triageLevels)->mapWithKeys(fn($l) => [$l => __('medemergency::lang.level_' . $l)]));
    var suggested = null;

    function refreshSuggestion() {
        var payload = {
            heart_rate: $('[name=heart_rate]').val(),
            respiratory_rate: $('[name=respiratory_rate]').val(),
            spo2: $('[name=spo2]').val(),
            gcs_eye: $('[name=gcs_eye]').val(),
            gcs_verbal: $('[name=gcs_verbal]').val(),
            gcs_motor: $('[name=gcs_motor]').val(),
            _token: '{{ csrf_token() }}'
        };
        $.post('{{ route('mder.triage.suggest') }}', payload, function (r) {
            if (r && r.level) {
                suggested = r.level;
                $('#mder_suggest_level').text(LEVELS[r.level] || r.level);
                $('#mder_suggest_reasons').text((r.reasons || []).join(' · '));
                $('#mder_suggest_box').show();
            } else {
                suggested = null;
                $('#mder_suggest_box').hide();
            }
        });
    }
    $(document).on('change keyup', '.mder-vital', function () { refreshSuggestion(); });
    $('#mder_apply_suggest').on('click', function () {
        if (suggested) { $('#mder_triage_level').val(suggested); }
    });
});
</script>
@endsection
