<?php
session_start();
if (!isset($_SESSION['attuid'])) {
    header('Location: ../../../index.php');
    exit();
}
?>

<?php
require_once('../../backend/db/conexion.php');
$ubicaciones = [];
$result = $conn->query("SELECT id, municipio, estado FROM catalogo_ubicaciones ORDER BY municipio ASC");
while ($row = $result->fetch_assoc()) {
    $ubicaciones[] = [
        'id' => $row['id'],
        'nombre' => $row['municipio'] . ', ' . $row['estado']
    ];
}

// Obtener procedencias de CV
$procedencias_cv = [];
$result_procedencia = $conn->query("SELECT id, nombre FROM Procedencia_CV ORDER BY nombre ASC");
while ($row = $result_procedencia->fetch_assoc()) {
    $procedencias_cv[] = [
        'id' => $row['id'],
        'nombre' => $row['nombre']
    ];
}
?>


<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Postular a Vacante - Sistema de Reclutamiento</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="../assets/css/styles.css" rel="stylesheet">
    <link href="../assets/css/mobile.css" rel="stylesheet">
    <!-- Librería para máscaras de input -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
</head>
<body class="bg-light">
    <div class="container py-5">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <!-- Encabezado -->
                <div class="text-center mb-5">
                    <img src="../assets/img/Logos/LOGO NEGRO Y AZUL rectangulo.png" alt="Logo Empresa" class="mb-3 company-logo">
                    <h1 class="h3 mb-3">Formulario de Aplicación</h1>
                    <p class="text-muted">Complete todos los campos obligatorios (*) para postularse a nuestra bolsa de trabajo</p>
                </div>

                <!-- Formulario -->
                <div class="card shadow-sm">
                    <div class="card-body p-4">
                        <form id="applicationForm" method="POST" action="/backend/perfil/guardar_aspirante.php" enctype="multipart/form-data">
                            <!-- Sección 1: Información Personal -->
                            <h5 class="mb-4 border-bottom pb-2">
                                <i class="fas fa-user-circle text-primary me-2"></i>Información Personal
                            </h5>
                            <div class="row g-3 mb-4">
                                <div class="col-md-4">
                                    <label for="nombre" class="form-label">Nombre(s) *</label>
                                    <input type="text" class="form-control" id="nombre" name="nombre" required>
                                    <div class="invalid-feedback">Por favor ingrese su nombre</div>
                                </div>
                                <div class="col-md-4">
                                    <label for="apellido_paterno" class="form-label">Apellido Paterno *</label>
                                    <input type="text" class="form-control" id="apellido_paterno" name="apellido_paterno" required>
                                    <div class="invalid-feedback">Por favor ingrese su apellido paterno</div>
                                </div>
                                <div class="col-md-4">
                                    <label for="apellido_materno" class="form-label">Apellido Materno *</label>
                                    <input type="text" class="form-control" id="apellido_materno" name="apellido_materno" required>
                                    <div class="invalid-feedback">Por favor ingrese su apellido materno</div>
                                </div>
                                <div class="col-md-6">
                                    <label for="correo" class="form-label">Correo Electrónico </label>
                                    <input type="email" class="form-control" id="correo" name="correo" >
                                    <div class="invalid-feedback">Por favor ingrese un email válido</div>
                                </div>
                                <div class="col-md-6">
                                    <label for="telefono" class="form-label">Teléfono/Celular *</label>
                                    <input type="tel" class="form-control" id="telefono" name="telefono" placeholder="(999) 1234 567" maxlength="15" required>
                                    <div class="invalid-feedback">Por favor ingrese un teléfono válido en formato (999) 1234 567</div>
                                </div>
                                <div class="col-md-6">
                                    <label for="ubicacion" class="form-label">Ubicación *</label>
                                    <select class="form-select" id="ubicacion" name="ubicacion" required>
                                        <option value="" selected disabled>Seleccione una ubicación</option>
                                       <?php foreach ($ubicaciones as $ubicacion): ?>
                                            <option value="<?= $ubicacion['id'] ?>"><?= htmlspecialchars($ubicacion['nombre']) ?></option>
                                        <?php endforeach; ?>

                                    </select>
                                    <div class="invalid-feedback">Por favor seleccione una ubicación</div>
                                </div>

                                <div class="col-md-6">
                                    <label for="procedencia_cv" class="form-label">Procedencia de CV *</label>
                                    <div style="position: relative;">
                                        <select class="form-select" id="procedencia_cv" name="procedencia_cv" required style="min-width: 220px; width: auto; max-width: 100%;">
                                            <option value="" selected disabled>Seleccione una procedencia</option>
                                            <?php foreach ($procedencias_cv as $procedencia): ?>
                                                <option value="<?= $procedencia['id'] ?>"><?= htmlspecialchars($procedencia['nombre']) ?></option>
                                            <?php endforeach; ?>
                                        </select>
                                        <span id="procedencia_cv_sizer" style="visibility:hidden;white-space:pre;position:absolute;top:0;left:0;font-size:1rem;font-family:inherit;"></span>
                                    </div>
                                    <div class="invalid-feedback">Por favor seleccione la procedencia del CV</div>
                                </div>
    <script>
    // Adaptar el ancho del select de Procedencia de CV al dato más largo
    document.addEventListener('DOMContentLoaded', function() {
        const select = document.getElementById('procedencia_cv');
        const sizer = document.getElementById('procedencia_cv_sizer');
        if (select && sizer) {
            let max = '';
            for (let i = 0; i < select.options.length; i++) {
                if (select.options[i].text.length > max.length) {
                    max = select.options[i].text;
                }
            }
            sizer.textContent = max;
            // Sumar un poco de espacio extra
            select.style.width = (sizer.offsetWidth + 48) + 'px';
            // Ajustar también al cambiar selección (por si cambia el texto visible)
            select.addEventListener('change', function() {
                sizer.textContent = select.options[select.selectedIndex].text;
                select.style.width = (sizer.offsetWidth + 48) + 'px';
            });
        }
    });
    </script>

                                <div class="mb-4">
                                    <label for="cv_pdf" class="form-label">Currículum Vitae (PDF) </label>
                                    <input class="form-control" type="file" id="cv_pdf" name="cv_pdf" accept=".pdf" >
                                    <div class="invalid-feedback">Por favor suba su CV en formato PDF.</div>
                                  </div>
                                  
                            </div>
                
                            <!-- Sección 2: Vacante -->
                            <h5 class="mb-4 border-bottom pb-2">
                                <i class="fas fa-briefcase text-primary me-2"></i>Vacante de Interés
                            </h5>
                            <div class="row g-3 mb-4">
                                <div class="col-md-6">
                                    <label for="puesto" class="form-label">Puesto *</label>
                                    <select class="form-select" id="puesto" name="puesto" required>
                                        <option value="" selected disabled>Seleccione un puesto</option>
                                        <option value="Gerente">Gerente</option>
                                        <option value="Ejecutivo">Ejecutivo</option>
                                        <option value="Lider de ventas callcenter">Líder de ventas callcenter</option>
                                        <option value="Asesor de callcenter">Asesor de callcenter</option>
                                        <option value="Administrativo">Administrativo</option>
                                    </select>
                                    <div class="invalid-feedback">Por favor seleccione un puesto</div>
                                </div>
                            </div>

                
                            <!-- Sección 3: Educación -->
                            <h5 class="mb-4 border-bottom pb-2">
                                <i class="fas fa-graduation-cap text-primary me-2"></i>Educación
                            </h5>
                            <div id="educationContainer">
                                <div class="education-item row g-3 mb-3">
                                    <div class="col-md-6">
                                        <label for="institucion_0" class="form-label">Institución *</label>
                                        <input type="text" class="form-control" id="institucion_0" name="education[0][institucion]" required>
                                        <div class="invalid-feedback">Por favor ingrese la institución</div>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="titulo_0" class="form-label">Título Obtenido *</label>
                                        <input type="text" class="form-control" id="titulo_0" name="education[0][titulo]" required>
                                        <div class="invalid-feedback">Por favor ingrese el título obtenido</div>
                                    </div>
                                    <div class="col-md-4">
                                        <label for="inicio_0" class="form-label">Fecha de Inicio *</label>
                                        <input type="month" class="form-control" id="inicio_0" name="education[0][inicio]" required>
                                        <div class="invalid-feedback">Por favor ingrese la fecha de inicio</div>
                                    </div>
                                    <div class="col-md-4">
                                        <label for="fin_0" class="form-label">Fecha de Término</label>
                                        <input type="month" class="form-control" id="fin_0" name="education[0][fin]">
                                    </div>
                                    <div class="col-md-4">
                                        <label for="actualmente_0" class="form-label">¿Estudia actualmente aquí?</label>
                                        <select class="form-select" id="actualmente_0" name="education[0][actualmente]">
                                            <option value="0">No</option>
                                            <option value="1">Sí</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <button type="button" id="addEducation" class="btn btn-sm btn-outline-primary mb-4">
                                <i class="fas fa-plus me-1"></i>Agregar Otro Nivel Educativo
                            </button>
                
                            <!-- Sección 4: Experiencia Laboral -->
                            <h5 class="mb-4 border-bottom pb-2">
                                <i class="fas fa-briefcase text-primary me-2"></i>Experiencia Laboral
                            </h5>
                            <div id="experienceContainer">
                                <div class="experience-item row g-3 mb-3">
                                    <div class="col-md-6">
                                        <label for="empresa_0" class="form-label">Empresa *</label>
                                        <input type="text" class="form-control" id="empresa_0" name="experience[0][empresa]" required>
                                        <div class="invalid-feedback">Por favor ingrese la empresa</div>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="puesto_0" class="form-label">Puesto *</label>
                                        <input type="text" class="form-control" id="puesto_0" name="experience[0][puesto]" required>
                                        <div class="invalid-feedback">Por favor ingrese el puesto</div>
                                    </div>
                                    <div class="col-md-4">
                                        <label for="inicio_exp_0" class="form-label">Fecha de Inicio *</label>
                                        <input type="month" class="form-control" id="inicio_exp_0" name="experience[0][inicio]" required>
                                        <div class="invalid-feedback">Por favor ingrese la fecha de inicio</div>
                                    </div>
                                    <div class="col-md-4">
                                        <label for="fin_exp_0" class="form-label">Fecha de Término</label>
                                        <input type="month" class="form-control" id="fin_exp_0" name="experience[0][fin]">
                                    </div>
                                    <div class="col-md-4">
                                        <label for="trabaja_actualmente_0" class="form-label">¿Trabaja Actualmente?</label>
                                        <select class="form-select" id="trabaja_actualmente_0" name="experience[0][trabaja_actualmente]">
                                            <option value="0">No</option>
                                            <option value="1">Sí</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <button type="button" id="addExperience" class="btn btn-sm btn-outline-primary mb-4">
                                <i class="fas fa-plus me-1"></i>Agregar Otra Experiencia
                            </button>
                
                            <div class="text-center">
                                <button type="submit" class="btn btn-primary">Enviar Aplicación</button>
                            </div>
                
                            <div class="text-center mt-4">
                                <button type="button" class="btn btn-secondary" id="btnVolver">
                                    <i class="fas fa-arrow-left me-2"></i>Regresar al menú anterior
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

            </div>
        </div>
    </div>
               <!-- Modal de Confirmación -->
        <div class="modal fade" id="modalFolioGenerado" tabindex="-1" aria-labelledby="folioModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title" id="folioModalLabel"><i class="fas fa-check-circle me-2"></i>Aspirante Registrado</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Cerrar"></button>
            </div>
            <div class="modal-body">
                <p>El aspirante fue registrado exitosamente.</p>
                <p class="mb-0">Folio asignado:</p>
                <h5 class="text-primary fw-bold" id="folioGenerado"></h5>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-success" data-bs-dismiss="modal">Cerrar</button>
            </div>
            </div>
        </div>
        </div>
 
  <!--  Modal Aviso de Privacidad 
    <div class="modal fade" id="privacyModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Aviso de Privacidad</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>De conformidad con la Ley Federal de Protección de Datos Personales en Posesión de los Particulares, hacemos de su conocimiento que los datos personales que nos proporcione serán tratados de manera confidencial y utilizados únicamente para los procesos de reclutamiento y selección de personal.</p>
                    <p><strong>Responsable:</strong> [Nombre de la Empresa]</p>
                    <p><strong>Datos recabados:</strong> Los incluidos en este formulario, así como los contenidos en los documentos que nos proporcione.</p>
                    <p><strong>Finalidad:</strong> Evaluación de su perfil profesional para posibles vacantes actuales o futuras.</p>
                    <p><strong>Derechos ARCO:</strong> Usted tiene derecho de acceder, rectificar y cancelar sus datos personales, así como de oponerse al tratamiento de los mismos.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Entendido</button>
                </div>
            </div>
        </div>
    </div> -->
    
    <div id="alert-container"></div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="../assets/js/applicant.js"></script>

    <script>
    document.getElementById('btnVolver').addEventListener('click', function () {
        window.location.href = '../recruiter/dashboard.php';
    });
</script>


</body>
</html>

</body>
</html>