<?php
// Vista de Posiciones: muestra personas en Plantilla con Estatus ACTIVO y posicionCode vacío
session_start();
if (!isset($_SESSION['attuid'])) {
    header('Location: ../../index.php');
    exit();
}

// Incluir sidebar y topbar (estructura igual que dashboard.php)
require_once '../includes/sidebar.php';
// Topbar con dropdown de usuario/cerrar sesión
include_once '../includes/topbar.php';

// Conexión a la base de datos
require_once '../../backend/db/conexion.php';

$sql = "SELECT CURP, NOMBRES, `APELLIDO PATERNO`, `APELLIDO MATERNO` FROM Plantilla WHERE ESTATUS = 'ACTIVO' AND (posicionCode IS NULL OR posicionCode = '')";
$result = $conn->query($sql);
?>
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <title>Posiciones sin Código</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- Bootstrap + FontAwesome + DataTables -->
  <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.4.0/css/all.min.css" rel="stylesheet" />
  <link href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css" rel="stylesheet" />
  <link href="../assets/css/recruiter.css" rel="stylesheet" />
</head>
<body class="bg-light">
<div class="bg-light">
  <?php require_once '../includes/sidebar.php'; ?>
  <div class="main-content flex-grow-1 px-4 py-4">
    <?php include_once '../includes/topbar.php'; ?>
    <div class="container-fluid">
      <h2 class="mb-4 text-primary"><i class="fas fa-clipboard-list me-2"></i>Personas en Plantilla sin Código de Posición</h2>
      <div class="table-responsive">
        <table id="tablaPosiciones" class="table table-striped table-bordered table-hover align-middle text-center">
          <thead class="table-dark">
            <tr>
              <th>Nombre Completo</th>
              <th>CURP</th>
              <th>Acciones</th>
            </tr>
          </thead>
          <tbody>
          <?php if ($result && $result->num_rows > 0):
            while ($row = $result->fetch_assoc()): ?>
              <tr>
                <td><?= htmlspecialchars($row['NOMBRES'] . ' ' . $row['APELLIDO PATERNO'] . ' ' . $row['APELLIDO MATERNO']) ?></td>
                <td><?= htmlspecialchars($row['CURP']) ?></td>
                <td>
                  <button class="btn btn-primary btn-sm btn-asignar" data-nombre="<?= htmlspecialchars($row['NOMBRES']) ?>" data-apellido-paterno="<?= htmlspecialchars($row['APELLIDO PATERNO']) ?>" data-apellido-materno="<?= htmlspecialchars($row['APELLIDO MATERNO']) ?>" data-curp="<?= htmlspecialchars($row['CURP']) ?>">
                    <i class="fas fa-tasks me-1"></i>Asignar
                  </button>
                </td>
              </tr>
            <?php endwhile;
          else: ?>
            <tr><td colspan="3">No hay personas sin código de posición.</td></tr>
          <?php endif; ?>
          </tbody>
        </table>
      </div>
      <?php include_once '../includes/modals/modal-vacantes-solo.php'; ?>
    </div>
  </div>
</div>
<!-- Scripts: jQuery debe ir primero -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
  $(document).ready(function() {
    $.fn.dataTable.ext.errMode = 'none'; // Oculta los warnings de DataTables
    $('#tablaPosiciones').DataTable({
      language: {
        url: '../assets/i18n/es-ES.json'
      },
      pageLength: 25
    });
    // Variables globales para vacantes
    let todasVacantes = [];
    let vacantesFiltradas = [];

    // Variables para sectores
    let sectoresPDV = [];

    // Variables para persona seleccionada
    let personaSeleccionada = { nombre: '', apellido_paterno: '', apellido_materno: '', curp: '' };

    // Abrir modal de vacantes al hacer clic en Asignar
    $(document).on('click', '.btn-asignar', function() {
      // Guardar datos de la persona seleccionada
      personaSeleccionada.nombre = $(this).data('nombre');
      personaSeleccionada.apellido_paterno = $(this).data('apellido-paterno');
      personaSeleccionada.apellido_materno = $(this).data('apellido-materno');
      personaSeleccionada.curp = $(this).data('curp');

      // Limpiar select y tabla
      $('#selectZona').empty().append('<option value="">-- Mostrar todas --</option>');
      $('#inputBusquedaPDV').val("");
      $('#tablaVacantesBody').html('<tr><td colspan="5" class="text-center">Cargando vacantes...</td></tr>');

      // Mostrar contadores
      $('.modal-vacantes-contadores').css('display','');

      // Cargar sectores (zonas)
      $.get('../../backend/vacantes/get_sectores_con_pdvs.php', function(resp) {
        if (resp && resp.success && Array.isArray(resp.sectores)) {
          sectoresPDV = resp.sectores;
          sectoresPDV.forEach(function(sector) {
            $('#selectZona').append('<option value="'+sector.sector+'">'+sector.sector+'</option>');
          });
        }
      }, 'json');

      // Cargar vacantes
      $.get('../../backend/vacantes/get_vacantes_disponibles.php', function(resp) {
        todasVacantes = Array.isArray(resp) ? resp : (resp && Array.isArray(resp.vacantes) ? resp.vacantes : []);
        vacantesFiltradas = todasVacantes;
        renderVacantes();
        actualizarContadores();
      }, 'json');

      var modalVacantes = document.getElementById('modalVacantes');
      if (modalVacantes) {
        var instancia = bootstrap.Modal.getOrCreateInstance(modalVacantes);
        instancia.show();
      } else {
        alert('No se encontró el modal de vacantes.');
      }
    });

    // Filtro por zona usando sectores y PDVs (reforzado)
    function validarZona() {
      const zona = $('#selectZona').val();
      if (!zona) {
        Swal.fire({
          icon: 'info',
          title: 'Zona no seleccionada',
          text: 'Por favor selecciona una zona para filtrar las vacantes, o deja la opción por defecto para ver todas.',
          confirmButtonText: 'Entendido'
        });
        vacantesFiltradas = todasVacantes;
        renderVacantes();
        actualizarContadores();
        return;
      }
      if (sectoresPDV.length > 0) {
        // Buscar el sector seleccionado
        const sector = sectoresPDV.find(s => s.sector === zona);
        if (sector && Array.isArray(sector.tiendas)) {
          // Filtrar vacantes por PDV que pertenezcan al sector
          vacantesFiltradas = todasVacantes.filter(v => sector.tiendas.includes(v.pdv || v.PDV || v.pdv_nombre || v.nombre_pdv || ''));
        } else {
          vacantesFiltradas = [];
        }
      } else {
        vacantesFiltradas = todasVacantes;
      }
      renderVacantes();
      actualizarContadores();
    }

    $(document).on('change input', '#selectZona', validarZona);

    // Filtro por búsqueda de PDV
    $(document).on('input', '#inputBusquedaPDV', function() {
      const texto = $(this).val().toLowerCase();
      vacantesFiltradas = todasVacantes.filter(v => {
        const nombrePDV = (v.pdv || v.PDV || v.pdv_nombre || v.nombre_pdv || '').toLowerCase();
        return nombrePDV.includes(texto);
      });
      renderVacantes();
      actualizarContadores();
    });

    // Renderizar vacantes en la tabla
    function renderVacantes() {
      if (vacantesFiltradas.length > 0) {
        let html = '';
        vacantesFiltradas.forEach(function(vac, idx) {
          html += '<tr>' +
            '<td>'+(vac.pdv || vac.PDV || vac.pdv_nombre || vac.nombre_pdv || '')+'</td>' +
            '<td>'+(vac.puesto || vac.PUESTO || vac.NombrePuesto || '')+'</td>' +
            '<td>'+(vac.codigo || vac.Codigo || '')+'</td>' +
            '<td>'+(vac.modalidad || vac.MODALIDAD || '')+'</td>' +
            '<td><button class="btn btn-success btn-sm btn-seleccionar-vacante" data-idx="'+idx+'">Seleccionar</button></td>' +
          '</tr>';
        });
        $('#tablaVacantesBody').html(html);
      } else {
        $('#tablaVacantesBody').html('<tr><td colspan="5" class="text-center">Sin vacantes disponibles.</td></tr>');
      }
    }

    // Actualizar contadores
    function actualizarContadores() {
      // Total
      $('#contadorTotal').text(todasVacantes.length);
      $('#totalCompleto').text(todasVacantes.filter(v => (v.modalidad || v.MODALIDAD || '').toLowerCase().includes('completo')).length);
      $('#totalParcial').text(todasVacantes.filter(v => (v.modalidad || v.MODALIDAD || '').toLowerCase().includes('parcial')).length);
      // Zona
      const zona = $('#selectZona').val();
      const vacZona = zona ? todasVacantes.filter(v => (v.zona || v.ZONA || v.pdv_zona || '') == zona) : todasVacantes;
      $('#contadorZona').text(vacZona.length);
      $('#zonaCompleto').text(vacZona.filter(v => (v.modalidad || v.MODALIDAD || '').toLowerCase().includes('completo')).length);
      $('#zonaParcial').text(vacZona.filter(v => (v.modalidad || v.MODALIDAD || '').toLowerCase().includes('parcial')).length);
    }

    // Modal de confirmación de vacante
    if ($('#modalVacantes').length && !$('#modalConfirmarVacante').length) {
      $('body').append(`
        <div class="modal fade" id="modalConfirmarVacante" tabindex="-1" aria-labelledby="modalConfirmarVacanteLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header bg-warning text-dark">
                <h5 class="modal-title" id="modalConfirmarVacanteLabel">
                  <i class="fas fa-clipboard-check me-2"></i>Confirmar Vacante Seleccionada
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
              </div>
              <div class="modal-body">
                <p>Por favor confirma los datos de la vacante seleccionada:</p>
                <ul class="list-group mb-3">
                  <li class="list-group-item"><strong>Código:</strong> <span id="confVacanteCodigo"></span></li>
                  <li class="list-group-item"><strong>Puesto:</strong> <span id="confVacantePuesto"></span></li>
                  <li class="list-group-item"><strong>PDV:</strong> <span id="confVacantePDV"></span></li>
                </ul>
                <div class="d-flex justify-content-end gap-2">
                  <button type="button" class="btn btn-danger" id="btnCorregirVacante"><i class="fas fa-exclamation-triangle me-1"></i>Corregir</button>
                  <button type="button" class="btn btn-success" id="btnConfirmarVacante"><i class="fas fa-check me-1"></i>Confirmar</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      `);
    }

    // Abrir modal de confirmación al seleccionar vacante
    $(document).on('click', '.btn-seleccionar-vacante', function() {
      const idx = $(this).data('idx');
      const vac = vacantesFiltradas[idx];
      $('#confVacanteCodigo').text(vac.codigo || vac.Codigo || '');
      $('#confVacantePuesto').text(vac.puesto || vac.PUESTO || vac.NombrePuesto || '');
      $('#confVacantePDV').text(vac.pdv || vac.PDV || vac.pdv_nombre || vac.nombre_pdv || '');
      const modalConfirm = new bootstrap.Modal(document.getElementById('modalConfirmarVacante'));
      modalConfirm.show();
      // Guardar idx seleccionado para confirmar
      $('#btnConfirmarVacante').data('idx', idx);
    });

    // Botón Corregir: cerrar modal y mostrar SweetAlert
    $(document).on('click', '#btnCorregirVacante', function() {
      const modalConfirm = bootstrap.Modal.getInstance(document.getElementById('modalConfirmarVacante'));
      modalConfirm.hide();
      Swal.fire({
        icon: 'info',
        title: 'Acción requerida',
        text: 'Realiza el cambio de vacante desde la sección Vacantes.',
        confirmButtonText: 'Entendido'
      });
    });

    // Botón Confirmar: guardar selección en Plantilla y recargar
    $(document).on('click', '#btnConfirmarVacante', function() {
      const idx = $(this).data('idx');
      const vac = vacantesFiltradas[idx];
      // Usar los datos guardados de la persona seleccionada
      const datosAsignacion = {
        curp: personaSeleccionada.curp,
        codigo: vac.codigo || vac.Codigo || '',
        puesto: vac.puesto || vac.PUESTO || vac.NombrePuesto || '',
        pdv: vac.pdv || vac.PDV || vac.pdv_nombre || vac.nombre_pdv || ''
      };
      console.log('Datos enviados a asignar_vacante.php:', datosAsignacion);
      $.post('../../backend/plantilla/asignar_vacante.php', datosAsignacion, function(resp) {
        const modalConfirm = bootstrap.Modal.getInstance(document.getElementById('modalConfirmarVacante'));
        modalConfirm.hide();
        if (resp && resp.success) {
          Swal.fire({
            icon: 'success',
            title: 'Vacante asignada',
            text: 'La vacante ha sido asignada correctamente.',
            confirmButtonText: 'Aceptar'
          }).then(() => {
            location.reload();
          });
        } else {
          Swal.fire({
            icon: 'error',
            title: 'Error',
            text: resp.message || 'No se pudo asignar la vacante.',
            confirmButtonText: 'Cerrar'
          });
        }
      }, 'json');
    });

    // Bloqueo de navegación para roles afectados
    <?php
    $rolesNoBloqueados = ['adminTi', 'contabilidad', 'subdistribuidor'];
    $bloquearNavegacion = true;
    if (isset($_SESSION['rol']) && in_array($_SESSION['rol'], $rolesNoBloqueados)) {
        $bloquearNavegacion = false;
    }
    ?>
    var bloquearNavegacion = <?php echo $bloquearNavegacion ? 'true' : 'false'; ?>;
    var personasSinCodigo = <?php echo ($result && $result->num_rows > 0) ? 'true' : 'false'; ?>;
    if (bloquearNavegacion && personasSinCodigo) {
      // Deshabilitar todos los enlaces del sidebar excepto el de cerrar sesión
      $(".sidebar a").each(function() {
        if ($(this).attr('href') && $(this).attr('href').includes('logout.php')) {
          $(this).css('pointer-events', 'auto').css('opacity', '1');
        } else {
          $(this).on('click', function(e) {
            e.preventDefault();
            Swal.fire({
              icon: 'warning',
              title: 'Acción bloqueada',
              text: 'Debes asignar una posición antes de continuar.',
              confirmButtonText: 'Entendido'
            });
          }).css('pointer-events', 'none').css('opacity', '0.5');
        }
      });
      // Habilitar explícitamente el toggle y el logout en todo el documento
      $(".dropdown-toggle, #userDropdown, a[href*='logout.php']").css('pointer-events', 'auto').css('opacity', '1');
      // Bloquear el resto de enlaces y botones excepto el toggle, logout, botón Asignar y botones de Confirmar/Corregir vacante
      $("a, button").not(function(){
        // Permitir el toggle si tiene data-bs-toggle="dropdown" o aria-expanded
        // Permitir el botón Asignar y los botones de confirmación/corrección de vacante
        return $(this).hasClass('dropdown-toggle') ||
               $(this).attr('id') === 'userDropdown' ||
               $(this).attr('href')?.includes('logout.php') ||
               $(this).attr('data-bs-toggle') === 'dropdown' ||
               $(this).attr('aria-expanded') !== undefined ||
               $(this).hasClass('btn-asignar') ||
               $(this).attr('id') === 'btnConfirmarVacante' ||
               $(this).attr('id') === 'btnCorregirVacante';
      }).each(function() {
        $(this).on('click', function(e) {
          e.preventDefault();
          Swal.fire({
            icon: 'warning',
            title: 'Acción bloqueada',
            text: 'Debes asignar una posición antes de continuar.',
            confirmButtonText: 'Entendido'
          });
        }).css('pointer-events', 'none').css('opacity', '0.5');
      });
    }
  });
</script>
</body>
</html>
