<?php
// FORMATO MSP: PROTOCOLO QUIRÚRGICO DE CIRUGÍA BUCAL
?>
<style>
    /* Estilos Cirugía */
    .qx-section-title {
        background: #37474F;
        color: #fff;
        padding: 5px;
        font-weight: bold;
        margin-top: 10px;
        border-radius: 4px;
    }

    .qx-label {
        font-weight: bold;
        font-size: 11px;
        color: #333;
        display: block;
        margin-bottom: 2px;
    }

    .qx-input {
        width: 100%;
        padding: 4px;
        border: 1px solid #ccc;
        border-radius: 3px;
        font-size: 11px;
    }

    .qx-check-group {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    .qx-alert {
        background: #fee;
        border: 1px solid #fcc;
        padding: 5px;
        color: #c00;
        font-weight: bold;
        font-size: 11px;
    }
</style>

<form name="formulario_odonto" id="formulario_odonto" method="POST">
    <input type="hidden" name="idatencion" id="idatencion" value="<?php echo $_POST['idatencion'] ?? ''; ?>">
    <input type="hidden" name="tipo_formato" value="CIRUGIA">

    <!-- ENCABEZADO -->
    <div class="msp-033-header" style="background: #37474F;">
        PROTOCOLO QUIRÚRGICO DE CIRUGÍA BUCAL
    </div>

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

    <div class="msp-container">

        <!-- 1. EVALUACIÓN PRE-QUIRÚRGICA -->
        <div class="msp-section">
            <div class="qx-section-title">1. EVALUACIÓN DE LABORATORIO Y RIESGO</div>
            <div class="msp-row">
                <div class="msp-col-3">
                    <label class="qx-label">Tiempo de Coagulación</label>
                    <input type="text" class="qx-input" name="qx_coagulacion" placeholder="TC (min)">
                </div>
                <div class="msp-col-3">
                    <label class="qx-label">Tiempo de Sangría</label>
                    <input type="text" class="qx-input" name="qx_sangria" placeholder="TS (min)">
                </div>
                <div class="msp-col-3">
                    <label class="qx-label">INR / TP</label>
                    <input type="text" class="qx-input" name="qx_inr" placeholder="Valor INR">
                </div>
                <div class="msp-col-3">
                    <label class="qx-label">Glucosa (mg/dL)</label>
                    <input type="text" class="qx-input" name="qx_glucosa" placeholder="Glicemia">
                </div>
            </div>
            <div class="msp-row msp-mt-5">
                <div class="msp-col-12">
                    <label class="qx-label" style="color:#D32F2F;">ALERGIAS O RIESGOS CRÍTICOS:</label>
                    <input type="text" class="qx-input" name="qx_riesgos"
                        style="border-color:#D32F2F; background:#FFFDE7;">
                </div>
            </div>
        </div>

        <!-- 2. DIAGNÓSTICO Y PLANIFICACIÓN -->
        <div class="msp-section">
            <div class="qx-section-title">2. DIAGNÓSTICO PRE-OPERATORIO</div>
            <div class="msp-row">
                <div class="msp-col-12">
                    <textarea class="msp-textarea" name="qx_diagnostico" rows="2"
                        placeholder="Diagnóstico e Indicación Quirúrgica..."></textarea>
                </div>
            </div>

            <input type="hidden" name="diagnosticos" id="input_diagnosticos_json">
            <?php include 'partials/diagnostics.php'; ?>
        </div>

        <!-- 3. ACTO QUIRÚRGICO -->
        <div class="msp-section">
            <div class="qx-section-title">3. DETALLES DEL PROCEDIMIENTO</div>

            <div class="msp-row">
                <div class="msp-col-4">
                    <label class="qx-label">Anestesia (Tipo)</label>
                    <select class="qx-input" name="qx_anestesia_tipo">
                        <option value="Lidocaina">Lidocaína 2% c/e</option>
                        <option value="Lidocaina_se">Lidocaína s/e</option>
                        <option value="Mepivacaina">Mepivacaína 3%</option>
                        <option value="Articaina">Articaína 4%</option>
                        <option value="Prilocaina">Prilocaína</option>
                    </select>
                </div>
                <div class="msp-col-4">
                    <label class="qx-label">Técnica Anestésica</label>
                    <input type="text" class="qx-input" name="qx_anestesia_tecnica"
                        placeholder="Ej: Troncular Inferior...">
                </div>
                <div class="msp-col-4">
                    <label class="qx-label">Cantidad (Carpules)</label>
                    <input type="number" class="qx-input" name="qx_anestesia_cantidad" placeholder="1.0">
                </div>
            </div>

            <div class="msp-row msp-mt-10">
                <div class="msp-col-3">
                    <label class="qx-label">Incisión</label>
                    <input type="text" class="qx-input" name="qx_incision" placeholder="Tipo de incisión">
                </div>
                <div class="msp-col-3">
                    <label class="qx-label">Colgajo</label>
                    <input type="text" class="qx-input" name="qx_colgajo" placeholder="Diseño colgajo">
                </div>
                <div class="msp-col-3">
                    <label class="qx-label">Osteotomía</label>
                    <div class="qx-check-group">
                        <label><input type="radio" name="qx_osteotomia" value="SI"> SI</label>
                        <label><input type="radio" name="qx_osteotomia" value="NO" checked> NO</label>
                    </div>
                </div>
                <div class="msp-col-3">
                    <label class="qx-label">Odontosección</label>
                    <div class="qx-check-group">
                        <label><input type="radio" name="qx_odontoseccion" value="SI"> SI</label>
                        <label><input type="radio" name="qx_odontoseccion" value="NO" checked> NO</label>
                    </div>
                </div>
            </div>

            <div class="msp-row msp-mt-10">
                <div class="msp-col-12">
                    <label class="qx-label">Descripción del Procedimiento (Paso a Paso):</label>
                    <textarea class="msp-textarea" name="qx_procedimiento" rows="6"
                        placeholder="Detalle sindesmotomía, luxación, avulsión, tratamiento del lecho, etc..."></textarea>
                </div>
            </div>

            <div class="msp-row msp-mt-10">
                <div class="msp-col-6">
                    <label class="qx-label">Sutura (Tipo y Calibre)</label>
                    <input type="text" class="qx-input" name="qx_sutura_tipo" placeholder="Ej: Seda Negra 3-0">
                </div>
                <div class="msp-col-2">
                    <label class="qx-label">Puntos</label>
                    <input type="number" class="qx-input" name="qx_sutura_puntos" placeholder="#">
                </div>
                <div class="msp-col-4">
                    <label class="qx-label">Complicaciones Intraoperatorias</label>
                    <input type="text" class="qx-input" name="qx_complicaciones" placeholder="Ninguna">
                </div>
            </div>
        </div>

        <!-- 4. PRESCRIPCIÓN Y CUIDADOS -->
        <div class="msp-section">
            <div class="qx-section-title">4. INDICACIONES POST-OPERATORIAS</div>
            <div class="msp-row">
                <div class="msp-col-6">
                    <label class="qx-label">Farmacoterapia (Receta):</label>
                    <textarea class="msp-textarea" name="qx_receta" rows="4"
                        placeholder="Antibióticos, Analgésicos, Antiinflamatorios..."></textarea>
                </div>
                <div class="msp-col-6">
                    <label class="qx-label">Indicaciones al Paciente:</label>
                    <textarea class="msp-textarea" name="qx_indicaciones" rows="4">
1. Morder gaza por 30-45 min.
2. Dieta blanda y fría por 24 horas.
3. No escupir, no usar sorbetes.
4. Higiene oral suave.
5. En caso de sangrado o dolor intenso acudir a emergencia.
                    </textarea>
                </div>
            </div>
        </div>

    </div>

    <script>
        // Logica de Diagnosticos
        if (typeof currentDiagnosticosCIE10 === 'undefined') { var currentDiagnosticosCIE10 = []; }
        function syncDiagnosticosToHidden() {
            if (typeof currentDiagnosticosCIE10 !== 'undefined' && Array.isArray(currentDiagnosticosCIE10)) {
                var json = JSON.stringify(currentDiagnosticosCIE10);
                $("#input_diagnosticos_json").val(json);
            }
        }
        setInterval(syncDiagnosticosToHidden, 1000);
    </script>
</form>