<?php
// ANEXO 1: FICHA 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="ANEXO_1">

    <!-- ENCABEZADO OFICIAL -->
    <div class="header-anexo1" style="background-color: #5D4037; color: white; padding: 10px; font-weight: bold;">
        ANEXO 1: FICHA FAMILIAR
    </div>

    <!-- DATOS DEL PACIENTE (CABEZA DE FAMILIA) -->
    <?php include 'partials/patient_header.php'; ?>

    <div class="msp-container">

        <!-- 1. DATOS GEOGRÁFICOS -->
        <div class="msp-section">
            <div class="msp-section-title">1. DATOS DE LA VIVIENDA Y UBICACIÓN</div>

            <div class="msp-form-group">
                <label class="msp-field-label">Dirección Exacta</label>
                <input type="text" class="msp-input" name="direccion"
                    placeholder="Calle principal, secundaria, número...">
            </div>

            <div class="msp-form-group msp-mt-10">
                <label class="msp-field-label">Referencia de Ubicación</label>
                <input type="text" class="msp-input" name="referencia" placeholder="Frente a, cerca de...">
            </div>
        </div>

        <!-- 2. COMPOSICIÓN FAMILIAR -->
        <div class="msp-section">
            <div class="msp-section-title">2. Estructura Familiar</div>
            <div class="msp-row">
                <div class="msp-col-6">
                    <label class="msp-field-label">Tipo de Familia</label>
                    <select class="msp-select" name="tipo_familia">
                        <option value="NUCLEAR">Nuclear</option>
                        <option value="EXTENSA">Extensa</option>
                        <option value="MONOPARENTAL">Monoparental</option>
                        <option value="UNIPERSONAL">Unipersonal</option>
                    </select>
                </div>
                <div class="msp-col-6">
                    <label class="msp-field-label">Ciclo Vital Familiar</label>
                    <select class="msp-select" name="ciclo_vital_familiar">
                        <option value="FORMACION">Formación de Pareja</option>
                        <option value="EXPANSION">Expansión (Hijos)</option>
                        <option value="CONSOLIDACION">Consolidación</option>
                        <option value="DISPERSION">Dispersión (Salida hijos)</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- 3. RIESGOS -->
        <div class="msp-section">
            <div class="msp-section-title">3. IDENTIFICACIÓN DE RIESGOS</div>

            <div class="msp-form-group">
                <label class="msp-field-label">Riesgos Biológicos</label>
                <textarea class="msp-textarea" name="riesgos_biologicos" rows="3"
                    placeholder="Discapacidades, enfermedades crónicas, embarazos..."></textarea>
            </div>

            <div class="msp-form-group msp-mt-10">
                <label class="msp-field-label">Riesgos Socioeconómicos</label>
                <textarea class="msp-textarea" name="riesgos_socioeconomicos" rows="3"
                    placeholder="Desempleo, pobreza, hacinamiento..."></textarea>
            </div>
        </div>

        <!-- BOTONES -->
        <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12" id="guardar"
            style="text-align: center; margin-top: 20px; display: none;">
            <button class="btn btn-primary btn-lg msp-btn-primary" type="submit" id="btnGuardarP">
                <i class="fa fa-save"></i> GUARDAR FICHA 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>