<?php
// FORMATO: HC MEDICINA FAMILIAR
// Historia Clínica completa para Medicina Familiar
?>
<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="HC_MED_FAMILIAR">

    <!-- ENCABEZADO OFICIAL -->
    <div style="background: linear-gradient(135deg, #1565C0, #0D47A1); padding: 14px 18px; text-align: center; font-weight: bold; border-radius: 6px; margin-bottom: 15px; color: #fff; font-size: 13pt; letter-spacing: 1px; box-shadow: 0 3px 10px rgba(13,71,161,0.3);">
        <i class="fa fa-home" style="margin-right: 8px;"></i> HISTORIA CLÍNICA &mdash; MEDICINA FAMILIAR
    </div>

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

    <div class="msp-container">

        <!-- 1. DATOS DE IDENTIFICACIÓN -->
        <div class="msp-section">
            <div class="msp-section-title" style="background: linear-gradient(90deg, #1565C0, #1976D2); color: #fff; border-radius: 4px; padding: 8px 12px;">
                <i class="fa fa-id-card"></i> 1. DATOS DE IDENTIFICACIÓN
            </div>
            <div class="msp-row" style="margin-top: 8px;">
                <div class="msp-col-6">
                    <label class="msp-field-label">Nombre Completo</label>
                    <input type="text" class="msp-input" name="nombre_completo" placeholder="Apellidos y Nombres" readonly id="hcmf_nombre">
                </div>
                <div class="msp-col-3">
                    <label class="msp-field-label">Edad</label>
                    <input type="text" class="msp-input" name="edad_paciente" readonly id="hcmf_edad">
                </div>
                <div class="msp-col-3">
                    <label class="msp-field-label">Sexo</label>
                    <select class="msp-select" name="sexo_paciente">
                        <option value="">Seleccione...</option>
                        <option value="Masculino">Masculino</option>
                        <option value="Femenino">Femenino</option>
                        <option value="Otro">Otro</option>
                    </select>
                </div>
            </div>
            <div class="msp-row" style="margin-top: 6px;">
                <div class="msp-col-3">
                    <label class="msp-field-label">Estado Civil</label>
                    <input type="text" class="msp-input" name="estado_civil_paciente" placeholder="Estado civil">
                </div>
                <div class="msp-col-3">
                    <label class="msp-field-label">Ocupación</label>
                    <input type="text" class="msp-input" name="ocupacion_paciente" placeholder="Ocupación">
                </div>
                <div class="msp-col-3">
                    <label class="msp-field-label">Dirección</label>
                    <input type="text" class="msp-input" name="direccion_paciente" placeholder="Dirección">
                </div>
                <div class="msp-col-3">
                    <label class="msp-field-label">Teléfono</label>
                    <input type="text" class="msp-input" name="telefono_paciente" placeholder="Teléfono">
                </div>
            </div>
            <div class="msp-row" style="margin-top: 6px;">
                <div class="msp-col-4">
                    <label class="msp-field-label">Fecha de Consulta</label>
                    <input type="date" class="msp-input" name="fecha_consulta" value="<?php echo date('Y-m-d'); ?>">
                </div>
            </div>
        </div>

        <!-- 2. MOTIVO DE CONSULTA -->
        <div class="msp-section">
            <div class="msp-section-title" style="background: linear-gradient(90deg, #1565C0, #1976D2); color: #fff; border-radius: 4px; padding: 8px 12px;">
                <i class="fa fa-commenting"></i> 2. MOTIVO DE CONSULTA
            </div>
            <textarea class="msp-textarea" name="motivo_consulta" rows="3" required placeholder="Describa el motivo principal de consulta del paciente..."></textarea>
        </div>

        <!-- 3. ENFERMEDAD ACTUAL -->
        <div class="msp-section">
            <div class="msp-section-title" style="background: linear-gradient(90deg, #1565C0, #1976D2); color: #fff; border-radius: 4px; padding: 8px 12px;">
                <i class="fa fa-medkit"></i> 3. ENFERMEDAD ACTUAL
            </div>
            <textarea class="msp-textarea" name="enfermedad_actual" rows="4" placeholder="Cronología, localización, características, intensidad, causa aparente, factores que agravan o mejoran, síntomas asociados, evolución..."></textarea>
        </div>

        <!-- 4. ANTECEDENTES PERSONALES PATOLÓGICOS -->
        <div class="msp-section">
            <div class="msp-section-title" style="background: linear-gradient(90deg, #1565C0, #1976D2); color: #fff; border-radius: 4px; padding: 8px 12px;">
                <i class="fa fa-heartbeat"></i> 4. ANTECEDENTES PERSONALES PATOLÓGICOS
            </div>
            <textarea class="msp-textarea" name="antecedentes_patologicos" rows="3" placeholder="Enfermedades previas, hospitalizaciones, cirugías, alergias, medicamentos crónicos, transfusiones..."></textarea>
        </div>

        <!-- 5. ANTECEDENTES PERSONALES NO PATOLÓGICOS -->
        <div class="msp-section">
            <div class="msp-section-title" style="background: linear-gradient(90deg, #1565C0, #1976D2); color: #fff; border-radius: 4px; padding: 8px 12px;">
                <i class="fa fa-user"></i> 5. ANTECEDENTES PERSONALES NO PATOLÓGICOS
            </div>
            <textarea class="msp-textarea" name="antecedentes_no_patologicos" rows="3" placeholder="Hábitos: alimentación, ejercicio, tabaquismo, alcoholismo, drogas, inmunizaciones, vivienda, saneamiento..."></textarea>
        </div>

        <!-- 6. ANTECEDENTES GINECO-OBSTÉTRICOS -->
        <div class="msp-section">
            <div class="msp-section-title" style="background: linear-gradient(90deg, #AD1457, #C2185B); color: #fff; border-radius: 4px; padding: 8px 12px;">
                <i class="fa fa-venus"></i> 6. ANTECEDENTES GINECO-OBSTÉTRICOS (si aplica)
            </div>
            <textarea class="msp-textarea" name="antecedentes_gineco" rows="3" placeholder="Menarca, ciclos menstruales, FUM, gestas, partos, cesáreas, abortos, FPP, métodos anticonceptivos, Papanicolaou, mamografía..."></textarea>
        </div>

        <!-- 7. ANTECEDENTES HEREDOFAMILIARES -->
        <div class="msp-section">
            <div class="msp-section-title" style="background: linear-gradient(90deg, #1565C0, #1976D2); color: #fff; border-radius: 4px; padding: 8px 12px;">
                <i class="fa fa-users"></i> 7. ANTECEDENTES HEREDOFAMILIARES
            </div>
            <textarea class="msp-textarea" name="antecedentes_heredofamiliares" rows="3" placeholder="Diabetes, hipertensión, cáncer, cardiopatías, enfermedades mentales, enfermedades infecciosas, malformaciones congénitas, otros..."></textarea>
        </div>

        <!-- 8. FAMILIOGRAMA -->
        <div class="msp-section">
            <div class="msp-section-title" style="background: linear-gradient(90deg, #2E7D32, #388E3C); color: #fff; border-radius: 4px; padding: 8px 12px;">
                <i class="fa fa-sitemap"></i> 8. FAMILIOGRAMA
            </div>
            <div style="background: #E8F5E9; border: 1px solid #A5D6A7; border-radius: 6px; padding: 12px; margin-bottom: 10px;">
                <p style="margin: 0 0 8px 0; font-weight: bold; color: #1B5E20;"><i class="fa fa-info-circle"></i> Leyenda de Símbolos del Familiograma:</p>
                <div style="display: flex; flex-wrap: wrap; gap: 10px; font-size: 11px;">
                    <span style="background:#fff; padding:4px 10px; border-radius:20px; border:1px solid #ccc;">□ <b>Hombre</b></span>
                    <span style="background:#fff; padding:4px 10px; border-radius:20px; border:1px solid #ccc;">○ <b>Mujer</b></span>
                    <span style="background:#fff; padding:4px 10px; border-radius:20px; border:1px solid #ccc;">— <b>Unión/Matrimonio</b></span>
                    <span style="background:#fff; padding:4px 10px; border-radius:20px; border:1px solid #ccc;">// <b>Separación/Divorcio</b></span>
                    <span style="background:#fff; padding:4px 10px; border-radius:20px; border:1px solid #ccc;">≈ <b>Convivencia</b></span>
                    <span style="background:#fff; padding:4px 10px; border-radius:20px; border:1px solid #ccc;">⚡ <b>Conflicto</b></span>
                    <span style="background:#fff; padding:4px 10px; border-radius:20px; border:1px solid #ccc;">✕ <b>Fallecido/a</b></span>
                    <span style="background:#fff; padding:4px 10px; border-radius:20px; border:1px solid #ccc;">◊ <b>Embarazo</b></span>
                    <span style="background:#fff; padding:4px 10px; border-radius:20px; border:1px solid #ccc;">△ <b>Aborto</b></span>
                    <span style="background:#fff; padding:4px 10px; border-radius:20px; border:1px solid #ccc;">↔ <b>Relación cercana</b></span>
                    <span style="background:#fff; padding:4px 10px; border-radius:20px; border:1px solid #ccc;">⇿ <b>Relación distante</b></span>
                    <span style="background:#fff; padding:4px 10px; border-radius:20px; border:1px solid #ccc;">☆ <b>Paciente índice</b></span>
                </div>
            </div>
            <textarea class="msp-textarea" name="familiograma" rows="6" placeholder="Describa la estructura familiar utilizando los símbolos de la leyenda. Indique relaciones, enfermedades de cada miembro, edades, fallecimientos y causas...&#10;&#10;Ejemplo:&#10;□ Padre (65a) - HTA, DM2&#10;○ Madre (60a) - Sana&#10;☆ □ Paciente (35a) — ○ Esposa (33a)&#10;   |— ○ Hija (8a) Sana&#10;   |— □ Hijo (5a) Asma"></textarea>
        </div>

        <!-- 9. DISPENSARIZACIÓN -->
        <div class="msp-section">
            <div class="msp-section-title" style="background: linear-gradient(90deg, #E65100, #EF6C00); color: #fff; border-radius: 4px; padding: 8px 12px;">
                <i class="fa fa-th-list"></i> 9. DISPENSARIZACIÓN
            </div>
            <div style="padding: 10px;">
                <table class="table table-bordered" style="margin-bottom: 0;">
                    <thead>
                        <tr style="background: #FFF3E0;">
                            <th style="width: 15%; text-align: center;">Grupo</th>
                            <th style="width: 55%;">Descripción</th>
                            <th style="width: 30%; text-align: center;">Selección</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="text-center" style="font-weight: bold; color: #2E7D32;">I</td>
                            <td>Sano — Sin factores de riesgo</td>
                            <td class="text-center"><label style="cursor:pointer;"><input type="radio" name="dispensarizacion" value="I"> Grupo I</label></td>
                        </tr>
                        <tr>
                            <td class="text-center" style="font-weight: bold; color: #F9A825;">II</td>
                            <td>Con Riesgo — Presenta factores de riesgo sin enfermedad</td>
                            <td class="text-center"><label style="cursor:pointer;"><input type="radio" name="dispensarizacion" value="II"> Grupo II</label></td>
                        </tr>
                        <tr>
                            <td class="text-center" style="font-weight: bold; color: #EF6C00;">III</td>
                            <td>Enfermo Controlado — Enfermedad crónica compensada</td>
                            <td class="text-center"><label style="cursor:pointer;"><input type="radio" name="dispensarizacion" value="III"> Grupo III</label></td>
                        </tr>
                        <tr>
                            <td class="text-center" style="font-weight: bold; color: #C62828;">IV</td>
                            <td>Enfermo Descompensado — Enfermedad crónica descompensada o discapacidad</td>
                            <td class="text-center"><label style="cursor:pointer;"><input type="radio" name="dispensarizacion" value="IV"> Grupo IV</label></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 10. REVISIÓN POR APARATOS Y SISTEMAS -->
        <div class="msp-section">
            <div class="msp-section-title" style="background: linear-gradient(90deg, #1565C0, #1976D2); color: #fff; border-radius: 4px; padding: 8px 12px;">
                <i class="fa fa-stethoscope"></i> 10. REVISIÓN POR APARATOS Y SISTEMAS
            </div>
            <textarea class="msp-textarea" name="revision_aparatos_sistemas" rows="4" placeholder="Órganos de los sentidos, respiratorio, cardiovascular, digestivo, genitourinario, músculo-esquelético, endocrino, nervioso, hemo-linfático, piel y faneras..."></textarea>
        </div>

        <!-- 11. EXPLORACIÓN FÍSICA -->
        <div class="msp-section">
            <div class="msp-section-title" style="background: linear-gradient(90deg, #1565C0, #1976D2); color: #fff; border-radius: 4px; padding: 8px 12px;">
                <i class="fa fa-user-md"></i> 11. EXPLORACIÓN FÍSICA
            </div>
            <!-- Signos Vitales -->
            <div class="msp-row" style="margin-top: 8px;">
                <div class="msp-col-3">
                    <label class="msp-field-label">TA (mmHg)</label>
                    <input type="text" class="msp-input" name="ef_ta" placeholder="120/80">
                </div>
                <div class="msp-col-3">
                    <label class="msp-field-label">FC (lpm)</label>
                    <input type="text" class="msp-input" name="ef_fc" placeholder="72">
                </div>
                <div class="msp-col-3">
                    <label class="msp-field-label">FR (rpm)</label>
                    <input type="text" class="msp-input" name="ef_fr" placeholder="18">
                </div>
                <div class="msp-col-3">
                    <label class="msp-field-label">Temp (°C)</label>
                    <input type="text" class="msp-input" name="ef_temp" placeholder="36.5">
                </div>
            </div>
            <div class="msp-row" style="margin-top: 6px;">
                <div class="msp-col-3">
                    <label class="msp-field-label">SatO₂ (%)</label>
                    <input type="text" class="msp-input" name="ef_sato2" placeholder="98">
                </div>
                <div class="msp-col-3">
                    <label class="msp-field-label">Peso (kg)</label>
                    <input type="text" class="msp-input" name="ef_peso" placeholder="70" onchange="calcularIMC_hcmf()">
                </div>
                <div class="msp-col-3">
                    <label class="msp-field-label">Talla (m)</label>
                    <input type="text" class="msp-input" name="ef_talla" placeholder="1.70" onchange="calcularIMC_hcmf()">
                </div>
                <div class="msp-col-3">
                    <label class="msp-field-label">IMC (kg/m²)</label>
                    <input type="text" class="msp-input" name="ef_imc" readonly style="background: #E3F2FD; font-weight: bold;">
                </div>
            </div>
            <div style="margin-top: 8px;">
                <label class="msp-field-label">Hallazgos de la Exploración Física</label>
                <textarea class="msp-textarea" name="hallazgos_exploracion" rows="4" placeholder="Cabeza, cuello, tórax, abdomen, extremidades, neurológico, piel..."></textarea>
            </div>
        </div>

        <!-- 12. SÍNDROME GERIÁTRICO -->
        <div class="msp-section">
            <div class="msp-section-title" style="background: linear-gradient(90deg, #6A1B9A, #7B1FA2); color: #fff; border-radius: 4px; padding: 8px 12px;">
                <i class="fa fa-wheelchair"></i> 12. SÍNDROME GERIÁTRICO (marcar lo que aplique)
            </div>
            <div style="padding: 10px; display: flex; flex-wrap: wrap; gap: 8px;">
                <label style="display:inline-flex; align-items:center; background:#F3E5F5; padding:6px 14px; border-radius:20px; cursor:pointer; border:1px solid #CE93D8; font-size:12px;">
                    <input type="checkbox" name="sg_caidas" value="1" style="margin-right:6px;"> Caídas recurrentes
                </label>
                <label style="display:inline-flex; align-items:center; background:#F3E5F5; padding:6px 14px; border-radius:20px; cursor:pointer; border:1px solid #CE93D8; font-size:12px;">
                    <input type="checkbox" name="sg_incontinencia" value="1" style="margin-right:6px;"> Incontinencia urinaria/fecal
                </label>
                <label style="display:inline-flex; align-items:center; background:#F3E5F5; padding:6px 14px; border-radius:20px; cursor:pointer; border:1px solid #CE93D8; font-size:12px;">
                    <input type="checkbox" name="sg_deterioro_cognitivo" value="1" style="margin-right:6px;"> Deterioro cognitivo
                </label>
                <label style="display:inline-flex; align-items:center; background:#F3E5F5; padding:6px 14px; border-radius:20px; cursor:pointer; border:1px solid #CE93D8; font-size:12px;">
                    <input type="checkbox" name="sg_depresion" value="1" style="margin-right:6px;"> Depresión
                </label>
                <label style="display:inline-flex; align-items:center; background:#F3E5F5; padding:6px 14px; border-radius:20px; cursor:pointer; border:1px solid #CE93D8; font-size:12px;">
                    <input type="checkbox" name="sg_fragilidad" value="1" style="margin-right:6px;"> Fragilidad
                </label>
                <label style="display:inline-flex; align-items:center; background:#F3E5F5; padding:6px 14px; border-radius:20px; cursor:pointer; border:1px solid #CE93D8; font-size:12px;">
                    <input type="checkbox" name="sg_polifarmacia" value="1" style="margin-right:6px;"> Polifarmacia
                </label>
                <label style="display:inline-flex; align-items:center; background:#F3E5F5; padding:6px 14px; border-radius:20px; cursor:pointer; border:1px solid #CE93D8; font-size:12px;">
                    <input type="checkbox" name="sg_dependencia" value="1" style="margin-right:6px;"> Dependencia funcional (Barthel/Katz)
                </label>
            </div>
        </div>

        <!-- 13. IMPRESIÓN DIAGNÓSTICA -->
        <div class="msp-section">
            <div class="msp-section-title" style="background: linear-gradient(90deg, #B71C1C, #C62828); color: #fff; border-radius: 4px; padding: 8px 12px;">
                <i class="fa fa-search-plus"></i> 13. IMPRESIÓN DIAGNÓSTICA
            </div>
            <!-- CIE-10 -->
            <?php include 'partials/diagnostics.php'; ?>
            <textarea class="msp-textarea" name="impresion_diagnostica" rows="3" placeholder="Descripción adicional de la impresión diagnóstica..."></textarea>
        </div>

        <!-- 14. PLAN DE MANEJO -->
        <div class="msp-section">
            <div class="msp-section-title" style="background: linear-gradient(90deg, #1565C0, #1976D2); color: #fff; border-radius: 4px; padding: 8px 12px;">
                <i class="fa fa-list-ol"></i> 14. PLAN DE MANEJO
            </div>
            <textarea class="msp-textarea" name="plan_manejo" rows="5" placeholder="Plan diagnóstico, terapéutico y educacional. Prescripciones, indicaciones, referencia, próxima cita..."></textarea>
            <div class="msp-row" style="margin-top: 8px;">
                <div class="msp-col-4">
                    <label class="msp-field-label">Próxima Cita</label>
                    <input type="date" class="msp-input" name="proxima_cita">
                </div>
            </div>
        </div>

        <!-- 15. NOTAS Y OBSERVACIONES ADICIONALES -->
        <div class="msp-section">
            <div class="msp-section-title" style="background: linear-gradient(90deg, #37474F, #455A64); color: #fff; border-radius: 4px; padding: 8px 12px;">
                <i class="fa fa-pencil-square-o"></i> 15. NOTAS Y OBSERVACIONES ADICIONALES
            </div>
            <textarea class="msp-textarea" name="notas_observaciones" rows="3" placeholder="Observaciones clínicas adicionales, plan de seguimiento, consideraciones especiales..."></textarea>
        </div>

        <!-- BOTONES (gestionados por sistema de pestañas) -->
        <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 msp-btn-primary" type="submit" id="btnGuardarP">
                <i class="fa fa-save"></i> GUARDAR HC MEDICINA FAMILIAR
            </button>
            <button class="btn btn-danger btn-lg msp-btn-danger" onclick="cancelarform()" type="button">
                <i class="fa fa-arrow-circle-left"></i> Cancelar
            </button>
        </div>

    </div>
</form>

<script>
// Calcular IMC automáticamente
function calcularIMC_hcmf() {
    var peso = parseFloat(document.querySelector('[name="ef_peso"]').value);
    var talla = parseFloat(document.querySelector('[name="ef_talla"]').value);
    if (peso > 0 && talla > 0) {
        var imc = (peso / (talla * talla)).toFixed(2);
        document.querySelector('[name="ef_imc"]').value = imc;
    }
}

// Auto-rellenar datos del paciente desde el header global
$(document).ready(function() {
    setTimeout(function() {
        var nombrePaciente = $('#lbl_paciente_global').text();
        if (nombrePaciente && nombrePaciente !== 'Cargando...') {
            $('#hcmf_nombre').val(nombrePaciente);
        }
        var edadSpan = $('#edad').text();
        if (edadSpan) {
            $('#hcmf_edad').val(edadSpan);
        }
    }, 1500);
});
</script>
