<?php
// FORMATO MSP-008: EMERGENCIA
?>
<form name="formulariop" id="formulariop" method="POST">
    <input type="hidden" name="idatencion" id="idatencion" value="<?php echo $_POST['idatencion'] ?? ''; ?>">
    <input type="hidden" name="tipo_formato" value="MSP_008">

    <!-- ENCABEZADO OFICIAL -->
    <div class="msp-008-header">
        EMERGENCIA 008
    </div>

    <!-- DATOS DEL PACIENTE -->
    <?php include 'partials/patient_header.php'; ?>

    <div class="msp-container">

        <!-- 1. DATOS DE INGRESO Y TRIAJE -->
        <div class="msp-section">
            <div class="msp-section-title">1. INGRESO Y TRIAJE</div>

            <div class="msp-row">
                <div class="msp-col-3">
                    <div class="msp-form-group">
                        <label class="msp-field-label">Fecha Ingreso</label>
                        <input type="date" class="msp-input" name="fecha_ingreso" required
                            value="<?php echo date('Y-m-d'); ?>">
                    </div>
                </div>
                <div class="msp-col-3">
                    <div class="msp-form-group">
                        <label class="msp-field-label">Hora Ingreso</label>
                        <input type="time" class="msp-input" name="hora_ingreso" required
                            value="<?php echo date('H:i'); ?>">
                    </div>
                </div>
                <div class="msp-col-3">
                    <div class="msp-form-group">
                        <label class="msp-field-label">Medio de Llegada</label>
                        <select class="msp-select" name="medio_llegada">
                            <option value="VEHICULO_PROPIO">Vehículo Propio</option>
                            <option value="AMBULANCIA">Ambulancia</option>
                            <option value="POLICIA">Policía</option>
                            <option value="OTRO">Otro</option>
                        </select>
                    </div>
                </div>
                <div class="msp-col-3">
                    <div class="msp-form-group">
                        <label class="msp-field-label">Prioridad Triaje</label>
                        <select class="msp-select" name="clasificacion_triaje" id="clasificacion_triaje"
                            onchange="actualizarBadgeTriaje(this.value)">
                            <option value="ROJO">I - ROJO (Resucitación)</option>
                            <option value="NARANJA">II - NARANJA (Emergencia)</option>
                            <option value="AMARILLO">III - AMARILLO (Urgencia)</option>
                            <option value="VERDE">IV - VERDE (Urgencia Menor)</option>
                            <option value="AZUL">V - AZUL (Sin Urgencia)</option>
                        </select>
                        <div id="badge-triaje" class="msp-mt-10 triaje-rojo" style="display:none; text-align:center;">
                            PRIORIDAD I</div>
                    </div>
                </div>

                <div class="msp-col-6">
                    <div class="msp-form-group">
                        <label class="msp-field-label">Acompañante / Informante</label>
                        <input type="text" class="msp-input" name="acompañante">
                    </div>
                </div>
                <div class="msp-col-6">
                    <div class="msp-form-group">
                        <label class="msp-field-label">Síntomas Principales</label>
                        <input type="text" class="msp-input" name="sintomas_principales">
                    </div>
                </div>
            </div>
        </div>

        <!-- 2. MOTIVO DE CONSULTA -->
        <div class="msp-section">
            <div class="msp-section-title">2. MOTIVO DE CONSULTA Y ENFERMEDAD ACTUAL</div>
            <div class="msp-form-group">
                <label class="msp-field-label">Motivo de Consulta (Emergencia)</label>
                <textarea class="msp-textarea" name="motivo_consulta_emergencia" required rows="2"></textarea>
            </div>
            <div class="msp-form-group">
                <label class="msp-field-label">Tiempo de Evolución</label>
                <input type="text" class="msp-input" name="tiempo_evolucion" placeholder="Ej: 2 horas, 3 días...">
            </div>
        </div>

        <div class="msp-row">
            <!-- 3. SIGNOS VITALES (EMERGENCIA) -->
            <div class="msp-col-6">
                <div class="msp-section">
                    <div class="msp-section-title">3. CONSTANTES VITALES EN EMERGENCIA</div>
                    <div class="msp-row">
                        <div class="msp-col-6">
                            <label class="msp-field-label">P. Arterial</label>
                            <input type="text" class="msp-input msp-mb-10" name="pa_emergencia" placeholder="mmHg">
                        </div>
                        <div class="msp-col-6">
                            <label class="msp-field-label">F. Cardíaca</label>
                            <input type="text" class="msp-input msp-mb-10" name="fc_emergencia" placeholder="lpm">
                        </div>
                        <div class="msp-col-6">
                            <label class="msp-field-label">F. Respira.</label>
                            <input type="text" class="msp-input msp-mb-10" name="fr_emergencia" placeholder="rpm">
                        </div>
                        <div class="msp-col-6">
                            <label class="msp-field-label">Temp.</label>
                            <input type="text" class="msp-input msp-mb-10" name="temp_emergencia" placeholder="°C">
                        </div>
                        <div class="msp-col-6">
                            <label class="msp-field-label">Sat O2</label>
                            <input type="text" class="msp-input msp-mb-10" name="sat_o2_emergencia" placeholder="%">
                        </div>
                    </div>
                </div>
            </div>

            <!-- 4. ESCALA DE GLASGOW -->
            <div class="msp-col-6">
                <div class="msp-section">
                    <div class="msp-section-title">4. ESCALA DE GLASGOW</div>
                    <div class="msp-row">
                        <div class="msp-col-4">
                            <label class="msp-field-label">Ocular (1-4)</label>
                            <select class="msp-select msp-mb-10" name="glasgow_ocular" id="g_ocular"
                                onchange="calcularGlasgow()">
                                <option value="4">4 - Espontánea</option>
                                <option value="3">3 - Al sonido</option>
                                <option value="2">2 - A la presión</option>
                                <option value="1">1 - Ninguna</option>
                            </select>
                        </div>
                        <div class="msp-col-4">
                            <label class="msp-field-label">Verbal (1-5)</label>
                            <select class="msp-select msp-mb-10" name="glasgow_verbal" id="g_verbal"
                                onchange="calcularGlasgow()">
                                <option value="5">5 - Orientado</option>
                                <option value="4">4 - Confuso</option>
                                <option value="3">3 - Palabras</option>
                                <option value="2">2 - Sonidos</option>
                                <option value="1">1 - Ninguna</option>
                            </select>
                        </div>
                        <div class="msp-col-4">
                            <label class="msp-field-label">Motor (1-6)</label>
                            <select class="msp-select msp-mb-10" name="glasgow_motor" id="g_motor"
                                onchange="calcularGlasgow()">
                                <option value="6">6 - Obedece</option>
                                <option value="5">5 - Localiza</option>
                                <option value="4">4 - Flexión N.</option>
                                <option value="3">3 - Flexión A.</option>
                                <option value="2">2 - Extensión</option>
                                <option value="1">1 - Ninguna</option>
                            </select>
                        </div>
                        <div class="msp-col-12 msp-text-center">
                            <label class="msp-field-label">TOTAL GLASGOW</label>
                            <input type="text" class="msp-input msp-text-center msp-bold" name="glasgow_total"
                                id="glasgow_total" readonly value="15" style="font-size: 20px; color: #2196F3;">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 5. DIAGNÓSTICO -->
        <?php include 'partials/diagnostics.php'; ?>

        <!-- 6. ATENCIÓN Y PROCEDIMIENTOS -->
        <div class="msp-section">
            <div class="msp-section-title">6. ATENCIÓN Y PROCEDIMIENTOS</div>
            <div class="msp-form-group">
                <label class="msp-field-label">Procedimientos Realizados en Emergencia</label>
                <textarea class="msp-textarea" name="procedimientos_emergencia" rows="3"></textarea>
            </div>
            <div class="msp-form-group">
                <label class="msp-field-label">Tratamiento Suministrado en Emergencia</label>
                <textarea class="msp-textarea" name="tratamiento_emergencia" rows="3"></textarea>
            </div>
        </div>

        <!-- 7. DESTINO -->
        <div class="msp-section">
            <div class="msp-section-title">7. DESTINO</div>
            <div class="msp-row">
                <div class="msp-col-4">
                    <div class="msp-form-group">
                        <label class="msp-field-label">Destino Final</label>
                        <select class="msp-select" name="destino">
                            <option value="ALTA">Alta Médica</option>
                            <option value="HOSPITALIZACION">Hospitalización</option>
                            <option value="UCI">UCI</option>
                            <option value="QUIROFANO">Quirófano</option>
                            <option value="REFERENCIA">Referencia / Derivación</option>
                            <option value="FALLECIDO">Fallecido</option>
                        </select>
                    </div>
                </div>
                <div class="msp-col-8">
                    <div class="msp-form-group">
                        <label class="msp-field-label">Observaciones de Destino</label>
                        <input type="text" class="msp-input" name="observaciones_destino">
                    </div>
                </div>
            </div>
        </div>



        <!-- BOTONES -->
        <!-- BOTONES OCULTOS -->
        <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12" id="guardar" style="display: none;">
            <button class="btn btn-primary btn-lg" type="submit" id="btnGuardarP">
                <i class="fa fa-save"></i> GUARDAR EMERGENCIA 008
            </button>
            <button class="btn btn-danger btn-lg" onclick="cancelarform()" type="button">
                <i class="fa fa-arrow-circle-left"></i> Cancelar
            </button>
        </div>

    </div>
</form>

<script>
    function calcularGlasgow() {
        var ocular = parseInt(document.getElementById('g_ocular').value) || 0;
        var verbal = parseInt(document.getElementById('g_verbal').value) || 0;
        var motor = parseInt(document.getElementById('g_motor').value) || 0;
        var total = ocular + verbal + motor;
        document.getElementById('glasgow_total').value = total;
    }

    function actualizarBadgeTriaje(valor) {
        var badge = document.getElementById('badge-triaje');
        badge.style.display = 'block';
        badge.className = 'msp-mt-10'; // reset

        if (valor === 'ROJO') {
            badge.classList.add('triaje-rojo');
            badge.innerText = 'PRIORIDAD I - CRÍTICO';
        } else if (valor === 'NARANJA') {
            badge.classList.add('triaje-naranja');
            badge.innerText = 'PRIORIDAD II - EMERGENCIA';
        } else if (valor === 'AMARILLO') {
            badge.classList.add('triaje-amarillo');
            badge.innerText = 'PRIORIDAD III - URGENCIA';
        } else if (valor === 'VERDE') {
            badge.classList.add('triaje-verde');
            badge.innerText = 'PRIORIDAD IV - MENOR';
        } else if (valor === 'AZUL') {
            badge.classList.add('triaje-azul');
            badge.innerText = 'PRIORIDAD V - NO URGENTE';
        }
    }

    // Inicializar badge
    document.addEventListener('DOMContentLoaded', function () {
        var select = document.getElementById('clasificacion_triaje');
        if (select) actualizarBadgeTriaje(select.value);
    });
</script>