<!-- /views/form_apoderado.php -->
<div class="row g-3">
    <div class="col-md-4">
        <label for="apoderado_run" class="form-label">
            <i class="bi bi-person-vcard text-primary me-1"></i>
            RUN del Familiar
        </label>
        <div class="input-group">
            <input 
                type="text" 
                class="form-control" 
                id="apoderado_run" 
                placeholder="12.345.678-9"
                data-validate="rut"
                maxlength="12"
            >
            <button 
                class="btn btn-outline-secondary" 
                type="button" 
                id="btnBusquedaAvanzadaApoderado"
                title="Buscar por nombre o apellido"
            >
                <i class="bi bi-search"></i>
            </button>
        </div>
        <div class="field-feedback"></div>
        <small class="text-muted">
            El sistema verificará automáticamente si el familiar existe
        </small>
    </div>
    <div class="col-md-4">
        <label for="apoderado_nombre" class="form-label">Nombres</label>
        <input type="text" class="form-control" id="apoderado_nombre">
        <div id="apoderado_nombre_feedback" class="invalid-feedback"></div>
    </div>
    <div class="col-md-4">
        <label for="apoderado_ap_paterno" class="form-label">Apellido Paterno</label>
        <input type="text" class="form-control" id="apoderado_ap_paterno">
        <div id="apoderado_ap_paterno_feedback" class="invalid-feedback"></div>
    </div>
    <div class="col-md-4">
        <label for="apoderado_ap_materno" class="form-label">Apellido Materno</label>
        <input type="text" class="form-control" id="apoderado_ap_materno">
    </div>
    <div class="col-md-8">
        <label for="apoderado_domicilio" class="form-label">Domicilio</label>
        <small class="ms-2"><a href="#" id="btnCopiarDomicilioAlumno" class="text-decoration-none">(Copiar domicilio del alumno)</a></small>
        <input type="text" class="form-control" id="apoderado_domicilio">
    </div>
    <div class="col-md-4">
        <label for="apoderado_parentesco" class="form-label">Parentesco</label>
        <input type="text" class="form-control" id="apoderado_parentesco">
    </div>
    <div class="col-md-4">
        <label for="apoderado_parentesco_especifico" class="form-label">Parentesco específico para este alumno</label>
        <input type="text" class="form-control" id="apoderado_parentesco_especifico" placeholder="Ej: PADRE, TÍO, ABUELO...">
        <div class="form-text">Si se especifica, este parentesco se usará solo para este alumno</div>
    </div>
    <div class="col-md-4">
        <label for="apoderado_telefono" class="form-label">
            <i class="bi bi-telephone text-primary me-1"></i>
            Teléfono
        </label>
        <input 
            type="tel" 
            class="form-control" 
            id="apoderado_telefono"
            data-validate="phone"
            placeholder="912345678"
            maxlength="15"
        >
        <div class="field-feedback"></div>
    </div>
    <div class="col-md-4">
        <label for="apoderado_telefono2" class="form-label">Teléfono 2 (Opcional)</label>
        <input 
            type="tel" 
            class="form-control" 
            id="apoderado_telefono2"
            data-validate="phone"
            placeholder="912345678"
            maxlength="15"
        >
        <div class="field-feedback"></div>
    </div>
    <div class="col-md-4">
        <label for="apoderado_email" class="form-label">
            <i class="bi bi-envelope text-primary me-1"></i>
            Email
        </label>
        <input 
            type="email" 
            class="form-control" 
            id="apoderado_email"
            data-validate="email"
            placeholder="usuario@ejemplo.cl"
        >
        <div class="field-feedback"></div>
    </div>
    <div class="col-md-4">
        <label for="apoderado_escolaridad" class="form-label">Escolaridad</label>
        <input type="text" class="form-control" id="apoderado_escolaridad">
    </div>
    <div class="col-md-4">
        <label for="apoderado_profesion" class="form-label">Profesión</label>
        <input type="text" class="form-control" id="apoderado_profesion">
    </div>
    <div class="col-md-4">
        <label for="apoderado_actividad_laboral" class="form-label">Actividad Laboral</label>
        <input type="text" class="form-control" id="apoderado_actividad_laboral">
    </div>
</div>

<div class="row mt-3">
    <div class="col-12">
        <fieldset class="border p-3 rounded">
            <legend class="float-none w-auto px-2 form-label fs-6">Rol(es) del familiar</legend>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-check"><input class="form-check-input" type="checkbox" value="APODERADO TITULAR" id="rol_apoderado_titular" name="apoderado_rol[]"><label class="form-check-label" for="rol_apoderado_titular">Apoderado Titular</label></div>
                    <div class="form-check"><input class="form-check-input" type="checkbox" value="APODERADO SUPLENTE" id="rol_apoderado_suplente" name="apoderado_rol[]"><label class="form-check-label" for="rol_apoderado_suplente">Apoderado Suplente</label></div>
                    <div class="form-check"><input class="form-check-input" type="checkbox" value="APODERADO 3" id="rol_apoderado3" name="apoderado_rol[]"><label class="form-check-label" for="rol_apoderado3">Apoderado 3</label></div>
                </div>
                <div class="col-md-6">
                    <div class="form-check"><input class="form-check-input" type="checkbox" value="CONTACTO DE EMERGENCIA 1" id="rol_emergencia1" name="apoderado_rol[]"><label class="form-check-label" for="rol_emergencia1">Contacto de Emergencia 1</label></div>
                    <div class="form-check"><input class="form-check-input" type="checkbox" value="CONTACTO DE EMERGENCIA 2" id="rol_emergencia2" name="apoderado_rol[]"><label class="form-check-label" for="rol_emergencia2">Contacto de Emergencia 2</label></div>
                    <div class="form-check"><input class="form-check-input" type="checkbox" value="CONTACTO DE EMERGENCIA 3" id="rol_emergencia3" name="apoderado_rol[]"><label class="form-check-label" for="rol_emergencia3">Contacto de Emergencia 3</label></div>
                </div>
                <div class="col-md-12">
                    <hr class="my-2">
                </div>
                <div class="col-md-6">
                    <legend class="float-none w-auto px-2 form-label fs-6 pt-0">Parentesco Directo</legend>
                    <div class="form-check"><input class="form-check-input" type="checkbox" value="PADRE" id="rol_padre" name="apoderado_rol[]"><label class="form-check-label" for="rol_padre">Padre</label></div>
                    <div class="form-check"><input class="form-check-input" type="checkbox" value="MADRE" id="rol_madre" name="apoderado_rol[]"><label class="form-check-label" for="rol_madre">Madre</label></div>
                </div>
            </div>
        </fieldset>
    </div>
</div>

<div class="d-flex justify-content-end mt-3">
    <button type="button" class="btn btn-secondary" id="btnCancelarApoderado">Cancelar</button>
    <button type="button" class="btn btn-primary ms-2" id="btnAnadirFamiliar">
        <i class="bi bi-plus-circle-fill me-2"></i>Añadir familiar a la lista</button>
</div>
<!-- Modal Búsqueda Avanzada de Apoderado -->
<div class="modal fade" id="modalBusquedaAvanzadaApoderado" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="bi bi-search me-2"></i>
                    Buscar Familiar por Nombre
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <input 
                        type="text" 
                        id="busquedaAvanzadaInput" 
                        class="form-control form-control-lg"
                        placeholder="Escriba nombre o apellido del familiar..."
                        autocomplete="off"
                    >
                </div>
                <div id="resultadosBusquedaAvanzada" class="mt-3">
                    <div class="text-center text-muted py-4">
                        <i class="bi bi-search fs-1"></i>
                        <p class="mt-2">Escriba para buscar familiares existentes</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
