<?php
session_start();
$rolesPermitidos = ['capturista', 'capturistaRH', 'capturista_rrhh', 'adminTi'];
if (!isset($_SESSION['rol']) || !in_array($_SESSION['rol'], $rolesPermitidos)) {
    header('Location: ../../index.php');
    exit();
}

require_once __DIR__ . '/../includes/valida_posiciones.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']
    ];
}

$attuid = $_SESSION['attuid'] ?? '';
$esRegional = false;
$pdvs = [];

$sqlRegional = "SELECT puesto FROM reclutadores WHERE attuid = ? AND rol IN ('capturista', 'capturista_rrhh')";
$stmt = $conn->prepare($sqlRegional);
$stmt->bind_param("s", $attuid);
$stmt->execute();
$result = $stmt->get_result();
$usuario = $result->fetch_assoc();

if ($usuario && strtolower($usuario['puesto']) === 'regional') {
    $esRegional = true;

    // Obtener PDVs sugeridos desde sectoresdPDVs
    $stmtPDVs = $conn->prepare("SELECT Tiendas FROM sectoresdPDVs WHERE ATTUIDEncargado = ?");
    $stmtPDVs->bind_param("s", $attuid);
    $stmtPDVs->execute();
    $resultPDVs = $stmtPDVs->get_result();
    $row = $resultPDVs->fetch_assoc();

    if ($row && !empty($row['Tiendas'])) {
        $pdvs = explode(',', $row['Tiendas']);
    }
}

?>

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <title>Capturar Aspirante</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <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>

<div class="d-flex min-vh-100" id="wrapper">
  <?php include('../includes/sidebar.php'); ?>
  <div id="page-content-wrapper" class="w-100">
    <?php include('../includes/topbar.php'); ?>

    <main class="p-4">
      <div class="container-fluid">
        <div class="text-center mb-4">
          <h2>Capturar Nuevo Aspirante</h2>
          <p class="text-muted">Completa la información para registrar un aspirante</p>
        </div>

        <div class="card shadow-sm">
          <div class="card-body p-4">

          <form id="formCaptura">
              <!-- Información Personal -->
              <h5 class="mb-3 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>
                  <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>
                  <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>
                  <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>
                  <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>
                  <div class="row g-3">
                    <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>

                    <?php if ($esRegional): ?>
                    <div class="col-md-6">
                        <label for="pdv_sugerido" class="form-label">PDV Sugerido *</label>
                        <select class="form-select" id="pdv_sugerido" name="pdv_sugerido" required>
                          <option value="" disabled selected>Selecciona un PDV</option>
                          <?php foreach ($pdvs as $pdv): ?>
                            <option value="<?= htmlspecialchars(trim($pdv)) ?>"><?= htmlspecialchars(trim($pdv)) ?></option>
                          <?php endforeach; ?>
                        </select>
                    </div>
                    <?php endif; ?>
                  </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>

              <!-- EDUCACIÓN (hacer opcional) -->
              <h5 class="mb-3 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]">
                    <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]">
                    <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]">
                    <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>

                <!-- Aquí agregarás dinámicamente con JS las experiencias educativas -->
              </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>

              <!-- EXPERIENCIA LABORAL (hacer opcional) -->
              <h5 class="mb-3 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]">
                    <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]">
                    <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]">
                    <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>

                <!-- Aquí agregarás dinámicamente con JS las experiencias laborales -->
              </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">Registrar Aspirante</button>
              </div>

            </form>

          </div>
        </div>
      </div>
    </main>

  </div>
</div>

<script src="../assets/js/applicant.js"></script>


<!-- Modal de Confirmación de Folio -->
<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 text-center">
        <p>El aspirante fue registrado exitosamente.</p>
        <p class="mb-0">Folio asignado:</p>
        <h5 class="text-primary fw-bold" id="folioGenerado"></h5>
        <p class="mt-3">Recuerda enviar el CV a la dirección de correo electrónico del reclutador.</p>
        <p class="mt-3 text-danger fw-semibold">
          Favor de adjuntar CV a <a href="mailto:rh@rocasamexico.com">rh@rocasamexico.com</a>
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-success" data-bs-dismiss="modal">Cerrar</button>
      </div>
    </div>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
  const modal = document.getElementById('modalFolioGenerado');
  if (modal) {
    modal.addEventListener('hidden.bs.modal', function () {
      location.reload(); // Recargar al cerrar el modal
    });
  }
});
</script>

</body>
</html>