<?php
session_start();
if (!isset($_SESSION['rol']) || !in_array($_SESSION['rol'], ['admin', 'adminTi', 'coordinador'])) {
  header('Location: ../../index.php');
  exit();
}
?>

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <title>Panel Admin - Aspirantes</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- Bootstrap 5 + FontAwesome + MDB -->
  <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://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.4.0/mdb.min.css" rel="stylesheet" />
  <link href="../assets/css/recruiter.css" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <style>
    /* Truncar texto largo en el select de reclutadores */
    #leyendaReclutadores {
      display: inline-block;
      max-width: 210px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: middle;
    }
    @media (max-width: 600px) {
      #leyendaReclutadores {
        max-width: 90px;
      }
    }
    /* Responsive para filtros */
    @media (max-width: 991px) {
      .row.mb-3 > div {
        min-width: 100% !important;
        margin-bottom: 12px;
      }
      #dropdownReclutadores, .form-control[type="date"] {
        width: 100% !important;
        min-width: 0 !important;
        font-size: 0.98rem;
      }
      #btnFiltrar, #btnQuitarFiltro {
        width: 100% !important;
        min-width: 0 !important;
        font-size: 0.98rem;
      }
    }
    @media (max-width: 600px) {
      .row.mb-3 {
        flex-direction: column !important;
        gap: 0 !important;
      }
      .row.mb-3 > div {
        margin-bottom: 16px;
      }
      #dropdownReclutadores, .form-control[type="date"] {
        font-size: 0.95rem;
        padding: 8px 6px;
      }
      #btnFiltrar, #btnQuitarFiltro {
        font-size: 0.95rem;
        padding: 8px 6px;
      }
    }
    /* Igualar altura del select de reclutadores con los inputs de fecha */
    #dropdownReclutadores {
      height: 50px;
      min-height: 50px;
      padding-top: 8px;
      padding-bottom: 8px;
      display: flex;
      align-items: center;
      font-size: 0.8rem;
    }
    /* Decoración moderna para los filtros */
    .form-control[type="date"] {
      border-radius: 10px;
      border: 2px solid #b6c7e3;
      box-shadow: 0 1px 6px rgba(30,90,168,0.07);
      font-size: 1.08rem;
      padding: 10px 14px;
      transition: border-color 0.2s;
    }
    .form-control[type="date"]:focus {
      border-color: #1E5AA8;
      outline: none;
      box-shadow: 0 2px 12px rgba(30,90,168,0.12);
    }
    #dropdownReclutadores {
      border-radius: 10px;
      border: 2px solid #b6c7e3;
      background: #f8f9fa;
      color: #1E5AA8;
      font-weight: 500;
      box-shadow: 0 1px 6px rgba(30,90,168,0.07);
      transition: border-color 0.2s, background 0.2s;
    }
    #dropdownReclutadores:focus {
      border-color: #1E5AA8;
      background: #e3f0ff;
    }
    #listaReclutadores .dropdown-menu {
      border-radius: 10px;
      box-shadow: 0 2px 12px rgba(30,90,168,0.10);
      border: 1px solid #e0e7ef;
    }
    #listaReclutadores .form-check-input {
      accent-color: #1E5AA8;
    }
    #listaReclutadores .form-check-label {
      font-weight: 500;
      color: #3B7CA8;
    }
    #btnFiltrar {
      background: linear-gradient(90deg, #1E5AA8 60%, #3B7CA8 100%);
      border: none;
      font-weight: 600;
      letter-spacing: 0.5px;
      box-shadow: 0 2px 8px rgba(30,90,168,0.10);
      border-radius: 10px;
      transition: background 0.2s;
      color: #fff;
    }
    #btnFiltrar:hover {
      background: linear-gradient(90deg, #3B7CA8 0%, #1E5AA8 100%);
      color: #fff;
    }
    #btnQuitarFiltro {
      border-radius: 10px;
      font-weight: 500;
      color: #1E5AA8;
      border: 2px solid #b6c7e3;
      background: #f8f9fa;
      transition: border-color 0.2s, background 0.2s;
    }
    #btnQuitarFiltro:hover {
      background: #e3f0ff;
      border-color: #1E5AA8;
      color: #3B7CA8;
    }
    .card.shadow-sm {
      transition: box-shadow 0.2s, transform 0.2s;
      box-shadow: 0 8px 32px rgba(30,90,168,0.25);
    }
    .card.shadow-sm:hover {
      box-shadow: 0 24px 64px rgba(30,90,168,0.35);
      transform: translateY(-16px);
      z-index: 2;
    }
    /* Prevenir cierre del dropdown al hacer clic en checkboxes */
    #listaReclutadores .dropdown-item {
      cursor: pointer;
    }
    #listaReclutadores .dropdown-item:hover {
      background-color: #f8f9fa;
    }
  </style>
</head>
<body class="bg-light">
<div class="d-flex">
  <?php include '../includes/sidebar.php'; ?>
  <div class="main-content" id="mainContent">
    <?php include '../includes/topbar.php'; ?>
    <div class="container-fluid p-4">
      <h2 class="mb-4 fw-bold">Resumen de aspirantes</h2>
      <!-- FILTROS -->
      <div class="row mb-3">
        <div class="col-md-3">
          <label for="fechaInicio" class="form-label">Desde:</label>
          <input type="date" id="fechaInicio" class="form-control">
        </div>
        <div class="col-md-3">
          <label for="fechaFin" class="form-label">Hasta:</label>
          <input type="date" id="fechaFin" class="form-control">
        </div>
        <div class="col-md-3">
          <label class="form-label">Reclutadores:</label>
          <div class="dropdown">
            <button class="btn btn-outline-secondary dropdown-toggle w-100" type="button" id="dropdownReclutadores" data-bs-toggle="dropdown" aria-expanded="false">
              <i class="fas fa-users me-2"></i><span id="leyendaReclutadores">Seleccionar reclutadores</span>
            </button>
            <ul class="dropdown-menu w-100" aria-labelledby="dropdownReclutadores" id="listaReclutadores" style="max-height: 300px; overflow-y: auto;">
              <!-- Reclutadores cargados dinámicamente -->
            </ul>
          </div>
        </div>
  <div class="col-md-3 d-flex align-items-end gap-2">
          <button class="btn btn-primary w-50" id="btnFiltrar">
            <i class="fas fa-filter me-2"></i>Filtrar
          </button>
          <button class="btn btn-outline-secondary w-50" id="btnQuitarFiltro">
            <i class="fas fa-times-circle me-2"></i>Quitar
          </button>
        </div>
      </div>

      <!-- Botones de filtro rápido -->
      <div class="row mb-3">
        <div class="col-12">
          <div class="d-flex flex-wrap gap-2">
            <button class="btn btn-primary" id="btnEstaSemana" style="background: linear-gradient(90deg, #1E5AA8 60%, #3B7CA8 100%); border: none; font-weight: 600; letter-spacing: 0.5px; box-shadow: 0 2px 8px rgba(30,90,168,0.10); border-radius: 10px; padding: 10px 20px;">
              <i class="fas fa-calendar-week me-2"></i>Esta semana
            </button>
            <button class="btn btn-primary" id="btnSemanaAnterior" style="background: linear-gradient(90deg, #1E5AA8 60%, #3B7CA8 100%); border: none; font-weight: 600; letter-spacing: 0.5px; box-shadow: 0 2px 8px rgba(30,90,168,0.10); border-radius: 10px; padding: 10px 20px;">
              <i class="fas fa-calendar-minus me-2"></i>Semana anterior
            </button>
            <button class="btn btn-primary" id="btnEsteMes" style="background: linear-gradient(90deg, #1E5AA8 60%, #3B7CA8 100%); border: none; font-weight: 600; letter-spacing: 0.5px; box-shadow: 0 2px 8px rgba(30,90,168,0.10); border-radius: 10px; padding: 10px 20px;">
              <i class="fas fa-calendar-alt me-2"></i>Este mes
            </button>
            <button class="btn btn-primary" id="btnMesAnterior" style="background: linear-gradient(90deg, #1E5AA8 60%, #3B7CA8 100%); border: none; font-weight: 600; letter-spacing: 0.5px; box-shadow: 0 2px 8px rgba(30,90,168,0.10); border-radius: 10px; padding: 10px 20px;">
              <i class="fas fa-calendar-times me-2"></i>Mes anterior
            </button>
          </div>
        </div>
      </div>

      <!-- MÉTRICAS -->
      <div class="row g-4 mb-4" id="metricas">
        <!-- Cards generados con JS -->
      </div>
      <!-- Checkbox debajo de las cards -->
      <div class="mb-3" style="display: none;">
        <div class="d-flex align-items-center">
          <input type="checkbox" id="incluirAnteriores" class="form-check-input me-2" checked>
          <label for="incluirAnteriores" class="form-check-label me-3">Incluir aspirantes asignados antes del filtro</label>
          <button type="button" class="btn btn-sm btn-outline-secondary" id="btnAyudaFiltro" data-bs-toggle="tooltip" data-bs-placement="right" title="Al activar esta opción, se incluirán en los conteos todos los aspirantes asignados antes del rango de fechas seleccionado. Al desactivarla, solo se contabilizarán los aspirantes cuya fecha de registro esté dentro del rango de fechas especificado.">
            <i class="fas fa-question"></i>
          </button>
        </div>
      </div>
      <!-- CATÁLOGO DE PROCEDENCIA DE CV (Acordeón) -->
      <div class="accordion mb-4" id="acordeonProcedenciaCV">
        <div class="accordion-item">
          <h2 class="accordion-header" id="headingProcedenciaCV">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseProcedenciaCV" aria-expanded="false" aria-controls="collapseProcedenciaCV">
              Procedencia de CV (Histórico)
            </button>
          </h2>
          <div id="collapseProcedenciaCV" class="accordion-collapse collapse" aria-labelledby="headingProcedenciaCV" data-bs-parent="#acordeonProcedenciaCV">
            <div class="accordion-body p-0">
              <div class="table-responsive">
                <table class="table table-hover mb-0">
                  <thead class="table-light">
                    <tr>
                      <th>Procedencia</th>
                      <th>Total</th>
                    </tr>
                  </thead>
                  <tbody id="tabla-procedencia-cv">
                    <!-- Rellenado con JS -->
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- TABLA DE RECLUTADORES -->
<script>
// Cargar catálogo de Procedencia de CV
function cargarCatalogoProcedenciaCV() {
  const fechaInicio = document.getElementById('fechaInicio').value;
  const fechaFin = document.getElementById('fechaFin').value;
  let url = '../../backend/admin/get_catalogo_procedencia_cv.php';
  const tbody = document.getElementById('tabla-procedencia-cv');
  // Mostrar spinner de carga
  tbody.innerHTML = '<tr><td colspan="2" class="text-center py-4"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">Cargando...</span></div></td></tr>';
  if (fechaInicio && fechaFin) {
    url += `?inicio=${fechaInicio}&fin=${fechaFin}`;
  }
  fetch(url)
    .then(r => r.json())
    .then(data => {
      tbody.innerHTML = '';
      if (!data.success || !data.data.length) {
        tbody.innerHTML = '<tr><td colspan="2" class="text-center">Sin datos</td></tr>';
        return;
      }
      data.data.forEach(row => {
        const tr = document.createElement('tr');
        tr.innerHTML = `<td>${row.nombre}</td><td>${row.total}</td>`;
        tbody.appendChild(tr);
      });
    })
    .catch(() => {
      tbody.innerHTML = '<tr><td colspan="2" class="text-center">Error al cargar</td></tr>';
    });
}

// Llamar al cargar panel y al filtrar
document.addEventListener('DOMContentLoaded', cargarCatalogoProcedenciaCV);
document.getElementById('btnFiltrar').addEventListener('click', cargarCatalogoProcedenciaCV);
document.getElementById('btnQuitarFiltro').addEventListener('click', () => {
  // Limpiar fechas
  document.getElementById('fechaInicio').value = '';
  document.getElementById('fechaFin').value = '';
  cargarCatalogoProcedenciaCV();
});
</script>
      <div class="card">
        <div class="card-header bg-white">
          <h5 class="mb-0">Registro por Reclutador</h5>
        </div>
        <div class="card-body p-0">
          <div class="table-responsive">
            <table class="table table-hover mb-0">
            <thead class="table-light">
                <tr>
                    <th>Reclutador</th>
                    <th>Rol</th>
                    <th>En Proceso</th>
                    <th>Rechazados</th>
                    <!-- <th>Acciones</th> -->
                </tr>
            </thead>
              <tbody id="tabla-reclutadores">
                <!-- Rellenado con JS -->
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div><!-- /container-fluid -->
  </div><!-- /main-content -->
</div><!-- /d-flex -->

<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.4.0/mdb.min.js"></script>
<script>
function actualizarLeyendaReclutadores() {
  const checkboxes = document.querySelectorAll('#listaReclutadores input[type="checkbox"]');
  const seleccionados = Array.from(checkboxes).filter(cb => cb.checked);
  const leyenda = document.getElementById('leyendaReclutadores');
  if (!leyenda) return;
  if (seleccionados.length === 0) {
    leyenda.textContent = 'Seleccionar';
  } else if (seleccionados.length === checkboxes.length) {
    leyenda.textContent = 'Todos';
  } else if (seleccionados.length === 1) {
    // Buscar el nombre del reclutador
    const label = seleccionados[0].parentElement.querySelector('label');
    leyenda.textContent = label ? label.textContent.trim() : '1 seleccionado';
  } else {
    leyenda.textContent = `${seleccionados.length} seleccionados`;
  }
}

document.addEventListener('DOMContentLoaded', () => {
  // ✅ Limpiar inputs al cargar la página (una sola vez)
  document.getElementById('fechaInicio').value = '';
  document.getElementById('fechaFin').value = '';
  // Cargar lista de reclutadores PRIMERO, luego cargar el panel
  cargarReclutadores()
    .then(() => {
      // Una vez cargados los reclutadores, cargar el panel
      cargarPanel();
    })
    .catch(err => {
      console.error('Error al inicializar la página:', err);
      alert('Error al cargar la página. Por favor, recarga.');
    });

  // ✅ Funciones auxiliares para calcular fechas
  function obtenerLunesDeEstaSemana() {
    const hoy = new Date();
    const dia = hoy.getDay(); // 0=Domingo, 1=Lunes, ..., 6=Sábado
    const diferencia = dia === 0 ? -6 : 1 - dia; // Si es domingo, retroceder 6 días
    const lunes = new Date(hoy);
    lunes.setDate(hoy.getDate() + diferencia);
    return lunes.toISOString().split('T')[0];
  }

  function obtenerDomingoDeEstaSemana() {
    const hoy = new Date();
    const dia = hoy.getDay();
    const diferencia = dia === 0 ? 0 : 7 - dia;
    const domingo = new Date(hoy);
    domingo.setDate(hoy.getDate() + diferencia);
    return domingo.toISOString().split('T')[0];
  }

  function obtenerLunesDeSemanaAnterior() {
    const hoy = new Date();
    const dia = hoy.getDay();
    const diferencia = dia === 0 ? -13 : -6 - dia; // Retroceder a lunes de semana anterior
    const lunes = new Date(hoy);
    lunes.setDate(hoy.getDate() + diferencia);
    return lunes.toISOString().split('T')[0];
  }

  function obtenerDomingoDeSemanaAnterior() {
    const hoy = new Date();
    const dia = hoy.getDay();
    const diferencia = dia === 0 ? -7 : -dia; // Retroceder a domingo de semana anterior
    const domingo = new Date(hoy);
    domingo.setDate(hoy.getDate() + diferencia);
    return domingo.toISOString().split('T')[0];
  }

  function obtenerPrimerDiaMesActual() {
    const hoy = new Date();
    return new Date(hoy.getFullYear(), hoy.getMonth(), 1).toISOString().split('T')[0];
  }

  function obtenerUltimoDiaMesActual() {
    const hoy = new Date();
    return new Date(hoy.getFullYear(), hoy.getMonth() + 1, 0).toISOString().split('T')[0];
  }

  function obtenerPrimerDiaMesAnterior() {
    const hoy = new Date();
    return new Date(hoy.getFullYear(), hoy.getMonth() - 1, 1).toISOString().split('T')[0];
  }

  function obtenerUltimoDiaMesAnterior() {
    const hoy = new Date();
    return new Date(hoy.getFullYear(), hoy.getMonth(), 0).toISOString().split('T')[0];
  }

  // ✅ Botón "Esta semana"
  document.getElementById('btnEstaSemana').addEventListener('click', () => {
    document.getElementById('fechaInicio').value = obtenerLunesDeEstaSemana();
    document.getElementById('fechaFin').value = obtenerDomingoDeEstaSemana();
    document.getElementById('btnFiltrar').click();
  });

  // ✅ Botón "Semana anterior"
  document.getElementById('btnSemanaAnterior').addEventListener('click', () => {
    document.getElementById('fechaInicio').value = obtenerLunesDeSemanaAnterior();
    document.getElementById('fechaFin').value = obtenerDomingoDeSemanaAnterior();
    document.getElementById('btnFiltrar').click();
  });

  // ✅ Botón "Este mes"
  document.getElementById('btnEsteMes').addEventListener('click', () => {
    document.getElementById('fechaInicio').value = obtenerPrimerDiaMesActual();
    document.getElementById('fechaFin').value = obtenerUltimoDiaMesActual();
    document.getElementById('btnFiltrar').click();
  });

  // ✅ Botón "Mes anterior"
  document.getElementById('btnMesAnterior').addEventListener('click', () => {
    document.getElementById('fechaInicio').value = obtenerPrimerDiaMesAnterior();
    document.getElementById('fechaFin').value = obtenerUltimoDiaMesAnterior();
    document.getElementById('btnFiltrar').click();
  });
  document.getElementById('btnQuitarFiltro').addEventListener('click', () => {
    // Limpiar fechas
    document.getElementById('fechaInicio').value = '';
    document.getElementById('fechaFin').value = '';
    // Marcar TODOS los checkboxes de reclutadores (valor por defecto)
    document.querySelectorAll('#listaReclutadores input[type="checkbox"]').forEach(cb => {
      cb.checked = true;
    });
    actualizarLeyendaReclutadores();

    // Volver a activar el checkbox de incluir anteriores
    const checkboxIncluirAnt = document.getElementById('incluirAnteriores');
    if (checkboxIncluirAnt) {
      checkboxIncluirAnt.checked = true;
    }

    // Ocultar el checkbox de incluir anteriores
    const divIncluirAnt = document.getElementById('incluirAnteriores').closest('.mb-3');
    divIncluirAnt.style.display = 'none';
    // Volver a cargar sin filtros
    cargarPanel();
  });
  // ✅ Evento al hacer clic en "Filtrar"
  document.getElementById('btnFiltrar').addEventListener('click', () => {
  actualizarLeyendaReclutadores();
    const fechaInicio = document.getElementById('fechaInicio').value;
    const fechaFin = document.getElementById('fechaFin').value;
    // Validar que haya al menos un reclutador seleccionado
    const reclutadoresSeleccionados = document.querySelectorAll('#listaReclutadores input[type="checkbox"]:checked');
    if (reclutadoresSeleccionados.length === 0) {
      alert('Debes seleccionar al menos un reclutador');
      return;
    }
    // Validar que si hay una fecha, estén ambas
    if ((fechaInicio && !fechaFin) || (!fechaInicio && fechaFin)) {
      alert('Por favor selecciona ambas fechas o deja ambas vacías.');
      return;
    }
    if (fechaInicio && fechaFin && fechaFin < fechaInicio) {
      alert('La fecha fin no puede ser anterior a la fecha de inicio.');
      return;
    }

    // Mostrar u ocultar el checkbox según si hay filtro de fecha
    const divIncluirAnt = document.getElementById('incluirAnteriores').closest('.mb-3');
    if (fechaInicio && fechaFin) {
      divIncluirAnt.style.display = 'block';
      // Actualizar el tooltip del botón [?] igual que en dashboard
      const btnAyudaFiltro = document.getElementById('btnAyudaFiltro');
      if (btnAyudaFiltro) {
        const tooltipText = `Contabilizar a gente registrada antes del [${fechaInicio}] para la cantidad de aspirantes pendientes, en proceso, contratados, rechazados y mandados hacia el banco`;
        btnAyudaFiltro.setAttribute('data-bs-original-title', tooltipText);
        btnAyudaFiltro.setAttribute('title', tooltipText);
        const tooltipInstance = bootstrap.Tooltip.getInstance(btnAyudaFiltro);
        if (tooltipInstance) {
          tooltipInstance.dispose();
        }
        new bootstrap.Tooltip(btnAyudaFiltro);
      }
    } else {
      divIncluirAnt.style.display = 'none';
    }

    cargarPanel(fechaInicio, fechaFin);
  });

  // ✅ Evento al cambiar el checkbox "Incluir anteriores"
  document.getElementById('incluirAnteriores').addEventListener('change', () => {
    const fechaInicio = document.getElementById('fechaInicio').value;
    const fechaFin = document.getElementById('fechaFin').value;
    
    // Solo recargar si hay fechas aplicadas
    if (fechaInicio && fechaFin) {
      cargarPanel(fechaInicio, fechaFin);
    }
  });

  // Inicializar tooltips de Bootstrap
  const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
  const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
});

// Función para cargar reclutadores desde el endpoint
function cargarReclutadores() {
  return fetch('../../backend/admin/get_reclutadores.php?roles=reclutador,admin&exclude_attuids=KA0707,EC420T')
    .then(r => r.json())
    .then(data => {
      if (!data.success || !data.reclutadores) {
        throw new Error('No se pudieron cargar los reclutadores');
      }
      
      const lista = document.getElementById('listaReclutadores');
      lista.innerHTML = '';
      
      data.reclutadores.forEach(reclutador => {
        const li = document.createElement('li');
        li.className = 'dropdown-item';
        li.innerHTML = `
          <div class="form-check">
            <input class="form-check-input" type="checkbox" value="${reclutador.attuid}" id="rec_${reclutador.attuid}" checked>
            <label class="form-check-label" for="rec_${reclutador.attuid}">
              ${reclutador.nombre_completo}
            </label>
          </div>
        `;
        // Prevenir que el dropdown se cierre al hacer clic
        li.addEventListener('click', (e) => {
          e.stopPropagation();
        });
        // Evento para actualizar la leyenda al cambiar selección
        li.querySelector('input[type="checkbox"]').addEventListener('change', actualizarLeyendaReclutadores);
        lista.appendChild(li);
      });
      actualizarLeyendaReclutadores();
    })
    .catch(err => {
      console.error('Error al cargar reclutadores:', err);
      throw err;
    });
}


function limpiarTexto(texto) {
  return texto
    .toUpperCase()
    .normalize("NFD")
    .replace(/[\u0300-\u036f]/g, "") // elimina acentos
    .replace(/[^\w\s]/gi, ''); // elimina caracteres especiales
}

function cargarPanel(fechaInicio = '', fechaFin = '') {
  let url = '../../backend/admin/get_panel_admin.php';
  
  // Obtener los reclutadores seleccionados
  const reclutadoresSeleccionados = [];
  document.querySelectorAll('#listaReclutadores input[type="checkbox"]:checked').forEach(cb => {
    reclutadoresSeleccionados.push(cb.value);
  });

  // Obtener el valor del checkbox "Incluir aspirantes anteriores"
  const incluirAnteriores = document.getElementById('incluirAnteriores').checked;

  // Preparar opciones de fetch
  const fetchOptions = {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      inicio: fechaInicio,
      fin: fechaFin,
      reclutadores: reclutadoresSeleccionados,
      incAnt: incluirAnteriores
    })
  };

  console.log('Enviando datos:', {
    inicio: fechaInicio,
    fin: fechaFin,
    reclutadores: reclutadoresSeleccionados,
    incAnt: incluirAnteriores
  });

  fetch(url, fetchOptions)
    .then(r => r.json())
    .then(data => {
      console.log('Respuesta del servidor:', data);
      if (!data.success) {
        alert('No se pudo cargar la información' + (data.message ? ': ' + data.message : ''));
        return;
      }
      
      // MÉTRICAS
      const metricas = document.getElementById('metricas');
      metricas.innerHTML = `
        <div class="col-md-4">
          <div class="card shadow-sm card-asignados" style="border: 3px solid #1E5AA8; border-radius: 8px; cursor: pointer; min-height: 160px; overflow: hidden;">
            <div class="card-header text-white text-center py-3 d-flex align-items-center justify-content-center" style="background-color: #1E5AA8;">
              <i class="fas fa-user-tie" style="font-size:1.2rem; margin-right:10px;"></i><strong style="font-size:1.2rem;">Asignados</strong>
            </div>
            <div class="card-body d-flex align-items-center justify-content-center" style="background-color: white;">
              <p class="display-6 mb-0 fw-bold" style="color: #1E5AA8; font-size:3rem;">${data.totales.asignados || 0}</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card shadow-sm card-pendientes" style="border: 3px solid #3B7CA8; border-radius: 8px; cursor: pointer; min-height: 160px; overflow: hidden;">
            <div class="card-header text-white text-center py-3 d-flex align-items-center justify-content-center" style="background-color: #3B7CA8;">
              <i class="fas fa-clock" style="font-size:1.2rem; margin-right:10px;"></i><strong style="font-size:1.2rem;">Pendientes</strong>
            </div>
            <div class="card-body d-flex align-items-center justify-content-center" style="background-color: white;">
              <p class="display-6 mb-0 fw-bold" style="color: #3B7CA8; font-size:3rem;">${data.totales.pendientes || 0}</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card shadow-sm card-en-proceso" style="border: 3px solid #D29E00; border-radius: 8px; cursor: pointer; min-height: 160px; overflow: hidden;">
            <div class="card-header text-white text-center py-3 d-flex align-items-center justify-content-center" style="background-color: #D29E00;">
              <i class="fas fa-spinner" style="font-size:1.2rem; margin-right:10px;"></i><strong style="font-size:1.2rem;">En Proceso</strong>
            </div>
            <div class="card-body d-flex align-items-center justify-content-center" style="background-color: white;">
              <p class="display-6 mb-0 fw-bold" style="color: #D29E00; font-size:3rem;">${data.totales.en_proceso}</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card shadow-sm card-contratados" style="border: 3px solid #1F8A5C; border-radius: 8px; cursor: pointer; min-height: 160px; overflow: hidden;">
            <div class="card-header text-white text-center py-3 d-flex align-items-center justify-content-center" style="background-color: #1F8A5C;">
              <i class="fas fa-user-check" style="font-size:1.2rem; margin-right:10px;"></i><strong style="font-size:1.2rem;">Contratados</strong>
            </div>
            <div class="card-body d-flex align-items-center justify-content-center" style="background-color: white;">
              <p class="display-6 mb-0 fw-bold" style="color: #1F8A5C; font-size:3rem;">${data.totales.contratados}</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card shadow-sm card-rechazados" style="border: 3px solid #C44545; border-radius: 8px; cursor: pointer; min-height: 160px; overflow: hidden;">
            <div class="card-header text-white text-center py-3 d-flex align-items-center justify-content-center" style="background-color: #C44545;">
              <i class="fas fa-user-times" style="font-size:1.2rem; margin-right:10px;"></i><strong style="font-size:1.2rem;">Rechazados</strong>
            </div>
            <div class="card-body d-flex align-items-center justify-content-center" style="background-color: white;">
              <p class="display-6 mb-0 fw-bold" style="color: #C44545; font-size:3rem;">${data.totales.rechazados}</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card shadow-sm card-banco" style="border: 3px solid #3E4C59; border-radius: 8px; cursor: pointer; min-height: 160px; overflow: hidden;">
            <div class="card-header text-white text-center py-3 d-flex align-items-center justify-content-center" style="background-color: #3E4C59;">
              <i class="fas fa-university" style="font-size:1.2rem; margin-right:10px;"></i><strong style="font-size:1.2rem;">En el Banco</strong>
            </div>
            <div class="card-body d-flex align-items-center justify-content-center" style="background-color: white;">
              <p class="display-6 mb-0 fw-bold" style="color: #3E4C59; font-size:3rem;">${data.totales.en_banco || 0}</p>
            </div>
          </div>
        </div>
      `;

      
      // Evento al hacer clic en tarjeta "En Proceso"
      const cardEnProceso = document.querySelector('.card-en-proceso');
      if (cardEnProceso) {
        cardEnProceso.addEventListener('click', () => {
            const inicio = document.getElementById('fechaInicio').value;
            const fin = document.getElementById('fechaFin').value;

            // Obtener los reclutadores seleccionados
            const reclutadoresSeleccionados = [];
            document.querySelectorAll('#listaReclutadores input[type="checkbox"]:checked').forEach(cb => {
              reclutadoresSeleccionados.push(cb.value);
            });

            // Obtener el valor del checkbox "Incluir aspirantes anteriores"
            const incluirAnteriores = document.getElementById('incluirAnteriores').checked;

            let url = '../../backend/admin/get_estatus_en_proceso.php';
            
            fetch(url, {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json'
              },
              body: JSON.stringify({
                inicio: inicio,
                fin: fin,
                reclutadores: reclutadoresSeleccionados,
                incAnt: incluirAnteriores
              })
            })
              .then(r => r.json())
              .then(res => {
                if (!res.success) return alert('No se pudo obtener el desglose.');

                const lista = document.getElementById('listaEstatusProceso');
                lista.innerHTML = '';

                res.data.forEach(e => {
                  const item = document.createElement('li');
                  item.className = 'list-group-item d-flex justify-content-between align-items-center';
                  item.textContent = e.estatus;
                  const span = document.createElement('span');
                  span.className = 'badge bg-dark rounded-pill';
                  span.textContent = e.total;
                  item.appendChild(span);
                  lista.appendChild(item);
                });

                const modal = new bootstrap.Modal(document.getElementById('modalEstatusProceso'));
                modal.show();

                // Activar botón "Ver detalles"
                const viejoBtn = document.getElementById('btnDetalleProceso');
                const nuevoBtn = viejoBtn.cloneNode(true);
                viejoBtn.parentNode.replaceChild(nuevoBtn, viejoBtn);

                nuevoBtn.addEventListener('click', () => {
                  // Obtener los reclutadores seleccionados
                  const reclutadoresSeleccionados = [];
                  document.querySelectorAll('#listaReclutadores input[type="checkbox"]:checked').forEach(cb => {
                    reclutadoresSeleccionados.push(cb.value);
                  });

                  // Obtener el valor del checkbox "Incluir aspirantes anteriores"
                  const incluirAnteriores = document.getElementById('incluirAnteriores').checked;

                  let urlDetalle = '../../backend/admin/get_detalle_en_proceso.php';
                  
                  fetch(urlDetalle, {
                    method: 'POST',
                    headers: {
                      'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                      inicio: inicio,
                      fin: fin,
                      reclutadores: reclutadoresSeleccionados,
                      incAnt: incluirAnteriores
                    })
                  })
                    .then(r => r.json())
                    .then(res => {
                      if (!res.success) return alert('No se pudo cargar el detalle');
                      const contenedor = document.getElementById('contenidoDetalleProceso');
                      contenedor.innerHTML = '';

                      // Guardar datos completos para búsqueda
                      const datosCompletos = res.data;

                      // Función para renderizar el contenido
                      function renderizarDetalle(datos) {
                        contenedor.innerHTML = '';
                        for (const reclutador in datos) {
                          const aspirantes = datos[reclutador];
                          const card = document.createElement('div');
                          card.className = 'mb-4 border-start border-4 border-primary ps-3';

                          card.innerHTML = `
                            <div class="border rounded p-3 shadow-sm">
                              <h5 class="text-primary fw-bold">
                                ${limpiarTexto(reclutador)} 
                                <span class="badge bg-primary">${aspirantes.length}</span>
                              </h5>
                              <ul class="list-group mt-2">
                                ${aspirantes.map(a => `
                                  <li class="list-group-item d-flex justify-content-between align-items-center" style="font-family: 'Segoe UI', sans-serif; color: #4b4b4b;">
                                    <span class="fw-semibold">${a.nombre}</span>
                                    <span class="badge bg-info">${a.estatus}</span>
                                  </li>
                                `).join('')}
                              </ul>
                            </div>
                          `;

                          contenedor.appendChild(card);
                        }
                      }

                      // Renderizar todos inicialmente
                      renderizarDetalle(datosCompletos);

                      // Ocultar el primer modal y mostrar el segundo
                      bootstrap.Modal.getInstance(document.getElementById('modalEstatusProceso')).hide();
                      new bootstrap.Modal(document.getElementById('modalDetalleProceso')).show();

                      // Configurar búsqueda después de mostrar modal
                      setTimeout(() => {
                        const buscarInput = document.getElementById('buscarDetalleProceso');
                        buscarInput.value = '';
                        
                        // Remover eventos anteriores
                        const nuevoInput = buscarInput.cloneNode(true);
                        buscarInput.parentNode.replaceChild(nuevoInput, buscarInput);
                        
                        // Agregar evento de búsqueda
                        nuevoInput.addEventListener('keyup', function() {
                          const termino = this.value.toLowerCase().trim();
                          console.log('Buscando en detalle:', termino);
                          
                          if (termino === '') {
                            renderizarDetalle(datosCompletos);
                          } else {
                            // Filtrar datos por nombre
                            const datosFiltrados = {};
                            for (const reclutador in datosCompletos) {
                              const aspirantesFiltrados = datosCompletos[reclutador].filter(item => 
                                item.nombre.toLowerCase().includes(termino)
                              );
                              if (aspirantesFiltrados.length > 0) {
                                datosFiltrados[reclutador] = aspirantesFiltrados;
                              }
                            }
                            renderizarDetalle(datosFiltrados);
                            console.log('Reclutadores con resultados:', Object.keys(datosFiltrados).length);
                          }
                        });
                      }, 300);
                    });
                });
              })
              .catch(err => {
                console.error(err);
                alert('Error al obtener el desglose por estatus.');
              });
          });
        }


          
            // Clic en tarjeta "Rechazados"
          const cardRechazados = document.querySelector('.card-rechazados');
          if (cardRechazados) {
            cardRechazados.addEventListener('click', () => {
            const inicio = document.getElementById('fechaInicio').value;
            const fin = document.getElementById('fechaFin').value;

            // Obtener los reclutadores seleccionados
            const reclutadoresSeleccionados = [];
            document.querySelectorAll('#listaReclutadores input[type="checkbox"]:checked').forEach(cb => {
              reclutadoresSeleccionados.push(cb.value);
            });

            // Obtener el valor del checkbox "Incluir aspirantes anteriores"
            const incluirAnteriores = document.getElementById('incluirAnteriores').checked;

            let url = '../../backend/admin/get_lista_rechazados.php';
            
            fetch(url, {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json'
              },
              body: JSON.stringify({
                inicio: inicio,
                fin: fin,
                reclutadores: reclutadoresSeleccionados,
                incAnt: incluirAnteriores
              })
            })
              .then(r => r.json())
              .then(res => {
                if (!res.success) return alert('No se pudo obtener la lista.');
                const lista = document.getElementById('listaRechazados');
                lista.innerHTML = '';
                
                // Guardar datos completos
                const todosLosDatos = res.data;
                
                // Función para renderizar la lista
                function renderizarLista(datos) {
                  lista.innerHTML = '';
                  datos.forEach(e => {
                    const item = document.createElement('li');
                    item.className = 'list-group-item d-flex justify-content-between align-items-center';
                    item.innerHTML = `<strong>${e.nombre}</strong>`;
                    const span = document.createElement('span');
                    span.className = 'badge bg-secondary';
                    span.textContent = e.fecha;
                    item.appendChild(span);
                    lista.appendChild(item);
                  });
                }
                
                // Renderizar todos inicialmente
                renderizarLista(todosLosDatos);
                
                // Mostrar modal
                const modal = new bootstrap.Modal(document.getElementById('modalRechazados'));
                modal.show();
                
                // Configurar búsqueda después de mostrar modal
                setTimeout(() => {
                  const buscarInput = document.getElementById('buscarRechazados');
                  buscarInput.value = '';
                  buscarInput.focus();
                  
                  // Remover eventos anteriores
                  const nuevoInput = buscarInput.cloneNode(true);
                  buscarInput.parentNode.replaceChild(nuevoInput, buscarInput);
                  
                  // Agregar evento de búsqueda
                  nuevoInput.addEventListener('keyup', function() {
                    const termino = this.value.toLowerCase().trim();
                    console.log('Buscando:', termino);
                    
                    if (termino === '') {
                      renderizarLista(todosLosDatos);
                    } else {
                      const filtrados = todosLosDatos.filter(item => 
                        item.nombre.toLowerCase().includes(termino)
                      );
                      renderizarLista(filtrados);
                      console.log('Encontrados:', filtrados.length);
                    }
                  });
                  
                  // Configurar botón de exportar a Excel
                  const btnExportar = document.getElementById('btnExportarExcelRechazados');
                  const nuevoBoton = btnExportar.cloneNode(true);
                  btnExportar.parentNode.replaceChild(nuevoBoton, btnExportar);
                  
                  nuevoBoton.addEventListener('click', function() {
                    const inicio = document.getElementById('fechaInicio')?.value || '';
                    const fin = document.getElementById('fechaFin')?.value || '';
                    
                    // Crear tabla HTML para Excel
                    let html = '<table border="1" style="border-collapse: collapse; font-family: Arial;">';
                    html += `
                      <thead>
                        <tr><th colspan="2" style="background:#dc3545; color:white; font-size:18px; text-align:left;">ASPIRANTES RECHAZADOS</th></tr>
                        <tr><th colspan="2">Rango: ${inicio || 'Sin inicio'} a ${fin || 'Sin fin'}</th></tr>
                        <tr><th colspan="2">&nbsp;</th></tr>
                        <tr style="font-weight:bold; background:#f9f9f9;"><th>Nombre</th><th>Fecha</th></tr>
                      </thead>
                      <tbody>
                    `;
                    
                    todosLosDatos.forEach(item => {
                      html += `<tr><td>${item.nombre}</td><td>${item.fecha}</td></tr>`;
                    });
                    
                    html += '</tbody></table>';
                    
                    // Descargar archivo
                    const blob = new Blob([html], { type: 'application/vnd.ms-excel' });
                    const link = document.createElement('a');
                    link.href = URL.createObjectURL(blob);
                    const fechaInicio = inicio ? inicio.replaceAll('-', '') : 'SIN_FECHA';
                    const fechaFin = fin ? fin.replaceAll('-', '') : 'SIN_FECHA';
                    link.download = `aspirantes_rechazados_${fechaInicio}_a_${fechaFin}.xls`;
                    link.click();
                    URL.revokeObjectURL(link.href);
                  });
                }, 300);
              });
          });
        }

          // Clic en tarjeta "Asignados"
          const cardAsignados = document.querySelector('.card-asignados');
          if (cardAsignados) {
            cardAsignados.addEventListener('click', () => {
            const inicio = document.getElementById('fechaInicio').value;
            const fin = document.getElementById('fechaFin').value;

            // Obtener los reclutadores seleccionados
            const reclutadoresSeleccionados = [];
            document.querySelectorAll('#listaReclutadores input[type="checkbox"]:checked').forEach(cb => {
              reclutadoresSeleccionados.push(cb.value);
            });

            // Obtener el valor del checkbox "Incluir aspirantes anteriores"
            const incluirAnteriores = document.getElementById('incluirAnteriores').checked;

            let url = '../../backend/admin/get_lista_asignados.php';

            fetch(url, {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json'
              },
              body: JSON.stringify({
                inicio: inicio,
                fin: fin,
                reclutadores: reclutadoresSeleccionados,
                incAnt: incluirAnteriores
              })
            })
              .then(r => r.json())
              .then(res => {
                if (!res.success) return alert('No se pudo obtener la lista.');
                const lista = document.getElementById('listaAsignados');
                lista.innerHTML = '';
                
                // Guardar datos completos
                const todosLosDatos = res.data;
                
                // Función para renderizar la lista
                function renderizarLista(datos) {
                  lista.innerHTML = '';
                  datos.forEach(e => {
                    const item = document.createElement('li');
                    item.className = 'list-group-item d-flex justify-content-between align-items-center';
                    item.innerHTML = `<strong>${e.nombre}</strong>`;
                    const span = document.createElement('span');
                    span.className = 'badge bg-secondary';
                    span.textContent = e.fecha;
                    item.appendChild(span);
                    lista.appendChild(item);
                  });
                }
                
                // Renderizar todos inicialmente
                renderizarLista(todosLosDatos);
                
                // Mostrar modal
                const modal = new bootstrap.Modal(document.getElementById('modalAsignados'));
                modal.show();
                
                // Configurar búsqueda después de mostrar modal
                setTimeout(() => {
                  const buscarInput = document.getElementById('buscarAsignados');
                  buscarInput.value = '';
                  buscarInput.focus();
                  
                  // Remover eventos anteriores
                  const nuevoInput = buscarInput.cloneNode(true);
                  buscarInput.parentNode.replaceChild(nuevoInput, buscarInput);
                  
                  // Agregar evento de búsqueda
                  nuevoInput.addEventListener('keyup', function() {
                    const termino = this.value.toLowerCase().trim();
                    
                    if (termino === '') {
                      renderizarLista(todosLosDatos);
                    } else {
                      const filtrados = todosLosDatos.filter(item => 
                        item.nombre.toLowerCase().includes(termino)
                      );
                      renderizarLista(filtrados);
                    }
                  });
                  
                  // Configurar botón de exportar a Excel
                  const btnExportar = document.getElementById('btnExportarExcelAsignados');
                  const nuevoBoton = btnExportar.cloneNode(true);
                  btnExportar.parentNode.replaceChild(nuevoBoton, btnExportar);
                  
                  nuevoBoton.addEventListener('click', function() {
                    const inicio = document.getElementById('fechaInicio')?.value || '';
                    const fin = document.getElementById('fechaFin')?.value || '';
                    
                    // Crear tabla HTML para Excel
                    let html = '<table border="1" style="border-collapse: collapse; font-family: Arial;">';
                    html += `
                      <thead>
                        <tr><th colspan="2" style="background:#1E5AA8; color:white; font-size:18px; text-align:left;">ASPIRANTES ASIGNADOS</th></tr>
                        <tr><th colspan="2">Rango: ${inicio || 'Sin inicio'} a ${fin || 'Sin fin'}</th></tr>
                        <tr><th colspan="2">&nbsp;</th></tr>
                        <tr style="font-weight:bold; background:#f9f9f9;"><th>Nombre</th><th>Fecha</th></tr>
                      </thead>
                      <tbody>
                    `;
                    
                    todosLosDatos.forEach(item => {
                      html += `<tr><td>${item.nombre}</td><td>${item.fecha}</td></tr>`;
                    });
                    
                    html += '</tbody></table>';
                    
                    // Descargar archivo
                    const blob = new Blob([html], { type: 'application/vnd.ms-excel' });
                    const link = document.createElement('a');
                    link.href = URL.createObjectURL(blob);
                    const fechaInicio = inicio ? inicio.replaceAll('-', '') : 'SIN_FECHA';
                    const fechaFin = fin ? fin.replaceAll('-', '') : 'SIN_FECHA';
                    link.download = `aspirantes_asignados_${fechaInicio}_a_${fechaFin}.xls`;
                    link.click();
                    URL.revokeObjectURL(link.href);
                  });
                }, 300);
              });
            });
          }

          // Clic en tarjeta "Pendientes"
          const cardPendientes = document.querySelector('.card-pendientes');
          if (cardPendientes) {
            cardPendientes.addEventListener('click', () => {
            const inicio = document.getElementById('fechaInicio').value;
            const fin = document.getElementById('fechaFin').value;

            // Obtener los reclutadores seleccionados
            const reclutadoresSeleccionados = [];
            document.querySelectorAll('#listaReclutadores input[type="checkbox"]:checked').forEach(cb => {
              reclutadoresSeleccionados.push(cb.value);
            });

            // Obtener el valor del checkbox "Incluir aspirantes anteriores"
            const incluirAnteriores = document.getElementById('incluirAnteriores').checked;

            let url = '../../backend/admin/get_lista_pendientes.php';

            fetch(url, {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json'
              },
              body: JSON.stringify({
                inicio: inicio,
                fin: fin,
                reclutadores: reclutadoresSeleccionados,
                incAnt: incluirAnteriores
              })
            })
              .then(r => r.json())
              .then(res => {
                if (!res.success) return alert('No se pudo obtener la lista.');
                const lista = document.getElementById('listaPendientes');
                lista.innerHTML = '';
                
                // Guardar datos completos
                const todosLosDatos = res.data;
                
                // Función para renderizar la lista
                function renderizarLista(datos) {
                  lista.innerHTML = '';
                  datos.forEach(e => {
                    const item = document.createElement('li');
                    item.className = 'list-group-item d-flex justify-content-between align-items-center';
                    item.innerHTML = `<strong>${e.nombre}</strong>`;
                    const span = document.createElement('span');
                    span.className = 'badge bg-secondary';
                    span.textContent = e.fecha;
                    item.appendChild(span);
                    lista.appendChild(item);
                  });
                }
                
                // Renderizar todos inicialmente
                renderizarLista(todosLosDatos);
                
                // Mostrar modal
                const modal = new bootstrap.Modal(document.getElementById('modalPendientes'));
                modal.show();
                
                // Configurar búsqueda después de mostrar modal
                setTimeout(() => {
                  const buscarInput = document.getElementById('buscarPendientes');
                  buscarInput.value = '';
                  buscarInput.focus();
                  
                  // Remover eventos anteriores
                  const nuevoInput = buscarInput.cloneNode(true);
                  buscarInput.parentNode.replaceChild(nuevoInput, buscarInput);
                  
                  // Agregar evento de búsqueda
                  nuevoInput.addEventListener('keyup', function() {
                    const termino = this.value.toLowerCase().trim();
                    
                    if (termino === '') {
                      renderizarLista(todosLosDatos);
                    } else {
                      const filtrados = todosLosDatos.filter(item => 
                        item.nombre.toLowerCase().includes(termino)
                      );
                      renderizarLista(filtrados);
                    }
                  });
                  
                  // Configurar botón de exportar a Excel
                  const btnExportar = document.getElementById('btnExportarExcelPendientes');
                  const nuevoBoton = btnExportar.cloneNode(true);
                  btnExportar.parentNode.replaceChild(nuevoBoton, btnExportar);
                  
                  nuevoBoton.addEventListener('click', function() {
                    const inicio = document.getElementById('fechaInicio')?.value || '';
                    const fin = document.getElementById('fechaFin')?.value || '';
                    
                    // Crear tabla HTML para Excel
                    let html = '<table border="1" style="border-collapse: collapse; font-family: Arial;">';
                    html += `
                      <thead>
                        <tr><th colspan="2" style="background:#3B7CA8; color:white; font-size:18px; text-align:left;">ASPIRANTES PENDIENTES</th></tr>
                        <tr><th colspan="2">Rango: ${inicio || 'Sin inicio'} a ${fin || 'Sin fin'}</th></tr>
                        <tr><th colspan="2">&nbsp;</th></tr>
                        <tr style="font-weight:bold; background:#f9f9f9;"><th>Nombre</th><th>Fecha</th></tr>
                      </thead>
                      <tbody>
                    `;
                    
                    todosLosDatos.forEach(item => {
                      html += `<tr><td>${item.nombre}</td><td>${item.fecha}</td></tr>`;
                    });
                    
                    html += '</tbody></table>';
                    
                    // Descargar archivo
                    const blob = new Blob([html], { type: 'application/vnd.ms-excel' });
                    const link = document.createElement('a');
                    link.href = URL.createObjectURL(blob);
                    const fechaInicio = inicio ? inicio.replaceAll('-', '') : 'SIN_FECHA';
                    const fechaFin = fin ? fin.replaceAll('-', '') : 'SIN_FECHA';
                    link.download = `aspirantes_pendientes_${fechaInicio}_a_${fechaFin}.xls`;
                    link.click();
                    URL.revokeObjectURL(link.href);
                  });
                }, 300);
              });
            });
          }

          // Clic en tarjeta "En el Banco"
          const cardBanco = document.querySelector('.card-banco');
          if (cardBanco) {
            cardBanco.addEventListener('click', () => {
            const inicio = document.getElementById('fechaInicio').value;
            const fin = document.getElementById('fechaFin').value;

            // Obtener los reclutadores seleccionados
            const reclutadoresSeleccionados = [];
            document.querySelectorAll('#listaReclutadores input[type="checkbox"]:checked').forEach(cb => {
              reclutadoresSeleccionados.push(cb.value);
            });

            // Obtener el valor del checkbox "Incluir aspirantes anteriores"
            const incluirAnteriores = document.getElementById('incluirAnteriores').checked;

            let url = '../../backend/admin/get_lista_banco.php';

            fetch(url, {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json'
              },
              body: JSON.stringify({
                inicio: inicio,
                fin: fin,
                reclutadores: reclutadoresSeleccionados,
                incAnt: incluirAnteriores
              })
            })
              .then(r => r.json())
              .then(res => {
                if (!res.success) return alert('No se pudo obtener la lista.');
                const lista = document.getElementById('listaBanco');
                lista.innerHTML = '';
                
                // Guardar datos completos
                const todosLosDatos = res.data;
                
                // Función para renderizar la lista
                function renderizarLista(datos) {
                  lista.innerHTML = '';
                  datos.forEach(e => {
                    const item = document.createElement('li');
                    item.className = 'list-group-item d-flex justify-content-between align-items-center';
                    item.innerHTML = `<strong>${e.nombre}</strong>`;
                    const span = document.createElement('span');
                    span.className = 'badge bg-secondary';
                    span.textContent = e.fecha_ingreso;
                    item.appendChild(span);
                    lista.appendChild(item);
                  });
                }
                
                // Renderizar todos inicialmente
                renderizarLista(todosLosDatos);
                
                // Mostrar modal
                const modal = new bootstrap.Modal(document.getElementById('modalBanco'));
                modal.show();
                
                // Configurar búsqueda después de mostrar modal
                setTimeout(() => {
                  const buscarInput = document.getElementById('buscarBanco');
                  buscarInput.value = '';
                  buscarInput.focus();
                  
                  // Remover eventos anteriores
                  const nuevoInput = buscarInput.cloneNode(true);
                  buscarInput.parentNode.replaceChild(nuevoInput, buscarInput);
                  
                  // Agregar evento de búsqueda
                  nuevoInput.addEventListener('keyup', function() {
                    const termino = this.value.toLowerCase().trim();
                    
                    if (termino === '') {
                      renderizarLista(todosLosDatos);
                    } else {
                      const filtrados = todosLosDatos.filter(item => 
                        item.nombre.toLowerCase().includes(termino)
                      );
                      renderizarLista(filtrados);
                    }
                  });
                  
                  // Configurar botón de exportar a Excel
                  const btnExportar = document.getElementById('btnExportarExcelBanco');
                  const nuevoBoton = btnExportar.cloneNode(true);
                  btnExportar.parentNode.replaceChild(nuevoBoton, btnExportar);
                  
                  nuevoBoton.addEventListener('click', function() {
                    const inicio = document.getElementById('fechaInicio')?.value || '';
                    const fin = document.getElementById('fechaFin')?.value || '';
                    
                    // Crear tabla HTML para Excel
                    let html = '<table border="1" style="border-collapse: collapse; font-family: Arial;">';
                    html += `
                      <thead>
                        <tr><th colspan="2" style="background:#3E4C59; color:white; font-size:18px; text-align:left;">ASPIRANTES EN EL BANCO</th></tr>
                        <tr><th colspan="2">Rango: ${inicio || 'Sin inicio'} a ${fin || 'Sin fin'}</th></tr>
                        <tr><th colspan="2">&nbsp;</th></tr>
                        <tr style="font-weight:bold; background:#f9f9f9;"><th>Nombre</th><th>Fecha</th></tr>
                      </thead>
                      <tbody>
                    `;
                    
                    todosLosDatos.forEach(item => {
                      html += `<tr><td>${item.nombre}</td><td>${item.fecha_ingreso}</td></tr>`;
                    });
                    
                    html += '</tbody></table>';
                    
                    // Descargar archivo
                    const blob = new Blob([html], { type: 'application/vnd.ms-excel' });
                    const link = document.createElement('a');
                    link.href = URL.createObjectURL(blob);
                    const fechaInicio = inicio ? inicio.replaceAll('-', '') : 'SIN_FECHA';
                    const fechaFin = fin ? fin.replaceAll('-', '') : 'SIN_FECHA';
                    link.download = `aspirantes_banco_${fechaInicio}_a_${fechaFin}.xls`;
                    link.click();
                    URL.revokeObjectURL(link.href);
                  });
                }, 300);
              });
            });
          }

          // Clic en tarjeta "Contratados"
          const cardContratados = document.querySelector('.card-contratados');
          if (cardContratados) {
            cardContratados.addEventListener('click', () => {
            const inicio = document.getElementById('fechaInicio').value;
            const fin = document.getElementById('fechaFin').value;

            // Obtener los reclutadores seleccionados
            const reclutadoresSeleccionados = [];
            document.querySelectorAll('#listaReclutadores input[type="checkbox"]:checked').forEach(cb => {
              reclutadoresSeleccionados.push(cb.value);
            });

            // Obtener el valor del checkbox "Incluir aspirantes anteriores"
            const incluirAnteriores = document.getElementById('incluirAnteriores').checked;

            let url = '../../backend/admin/get_lista_contratados.php';

            fetch(url, {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json'
              },
              body: JSON.stringify({
                inicio: inicio,
                fin: fin,
                reclutadores: reclutadoresSeleccionados,
                incAnt: incluirAnteriores
              })
            })
              .then(r => r.json())
              .then(res => {
                if (!res.success) return alert('No se pudo obtener la lista.');
                const lista = document.getElementById('listaContratados');
                lista.innerHTML = '';
                
                // Guardar datos completos
                const todosLosDatos = res.data;
                
                // Función para renderizar la lista
                function renderizarLista(datos) {
                  lista.innerHTML = '';
                  datos.forEach(e => {
                    const item = document.createElement('li');
                    item.className = 'list-group-item d-flex justify-content-between align-items-center';
                    item.innerHTML = `<strong>${e.nombre}</strong>`;
                    const span = document.createElement('span');
                    span.className = 'badge bg-secondary';
                    span.textContent = e.fecha;
                    item.appendChild(span);
                    lista.appendChild(item);
                  });
                }
                
                // Renderizar todos inicialmente
                renderizarLista(todosLosDatos);
                
                // Mostrar modal
                const modal = new bootstrap.Modal(document.getElementById('modalContratados'));
                modal.show();
                
                // Configurar búsqueda después de mostrar modal
                setTimeout(() => {
                  const buscarInput = document.getElementById('buscarContratados');
                  buscarInput.value = '';
                  buscarInput.focus();
                  
                  // Remover eventos anteriores
                  const nuevoInput = buscarInput.cloneNode(true);
                  buscarInput.parentNode.replaceChild(nuevoInput, buscarInput);
                  
                  // Agregar evento de búsqueda
                  nuevoInput.addEventListener('keyup', function() {
                    const termino = this.value.toLowerCase().trim();
                    console.log('Buscando:', termino);
                    
                    if (termino === '') {
                      renderizarLista(todosLosDatos);
                    } else {
                      const filtrados = todosLosDatos.filter(item => 
                        item.nombre.toLowerCase().includes(termino)
                      );
                      renderizarLista(filtrados);
                      console.log('Encontrados:', filtrados.length);
                    }
                  });
                  
                  // Configurar botón de exportar a Excel
                  const btnExportar = document.getElementById('btnExportarExcelContratados');
                  const nuevoBoton = btnExportar.cloneNode(true);
                  btnExportar.parentNode.replaceChild(nuevoBoton, btnExportar);
                  
                  nuevoBoton.addEventListener('click', function() {
                    const inicio = document.getElementById('fechaInicio')?.value || '';
                    const fin = document.getElementById('fechaFin')?.value || '';
                    
                    // Crear tabla HTML para Excel
                    let html = '<table border="1" style="border-collapse: collapse; font-family: Arial;">';
                    html += `
                      <thead>
                        <tr><th colspan="2" style="background:#28a745; color:white; font-size:18px; text-align:left;">ASPIRANTES CONTRATADOS</th></tr>
                        <tr><th colspan="2">Rango: ${inicio || 'Sin inicio'} a ${fin || 'Sin fin'}</th></tr>
                        <tr><th colspan="2">&nbsp;</th></tr>
                        <tr style="font-weight:bold; background:#f9f9f9;"><th>Nombre</th><th>Fecha</th></tr>
                      </thead>
                      <tbody>
                    `;
                    
                    todosLosDatos.forEach(item => {
                      html += `<tr><td>${item.nombre}</td><td>${item.fecha}</td></tr>`;
                    });
                    
                    html += '</tbody></table>';
                    
                    // Descargar archivo
                    const blob = new Blob([html], { type: 'application/vnd.ms-excel' });
                    const link = document.createElement('a');
                    link.href = URL.createObjectURL(blob);
                    const fechaInicio = inicio ? inicio.replaceAll('-', '') : 'SIN_FECHA';
                    const fechaFin = fin ? fin.replaceAll('-', '') : 'SIN_FECHA';
                    link.download = `aspirantes_contratados_${fechaInicio}_a_${fechaFin}.xls`;
                    link.click();
                    URL.revokeObjectURL(link.href);
                  });
                }, 300);
              });
            });
          }





      // TABLA
        const tabla = document.getElementById('tabla-reclutadores');
        tabla.innerHTML = '';

        // Definir orden personalizado
        const ordenRoles = {
          'reclutador': 1,
          'admin': 2,
          'adminTi': 2, // adminTi mismo nivel que admin
          'coordinador': 3
        };

        // Filtrar y ordenar (excluyendo capturistas)
        // Mostrar solo roles visibles en el panel
        const attuidsExcluidos = new Set(['KA0707', 'EC420T']);
        const reclutadoresOrdenados = data.reclutadores
          .filter(r => (r.rol === 'reclutador' || r.rol === 'admin' || r.rol === 'capturistaRH') && r.activo !== 0 && !attuidsExcluidos.has((r.attuid || '').toUpperCase()))
          .sort((a, b) => {
            const ordenA = ordenRoles[a.rol] ?? 99;
            const ordenB = ordenRoles[b.rol] ?? 99;
            return ordenA - ordenB;
          });

        reclutadoresOrdenados.forEach(r => {
          let rolTexto = r.rol ?? '0';
          let rolBadge = '';

          switch (rolTexto) {
            case 'admin':
              rolBadge = '<span class="badge bg-primary">Admin</span>';
              break;
            case 'adminTi':
              rolBadge = '<span class="badge bg-primary">Admin TI</span>';
              break;
            case 'reclutador':
              rolBadge = '<span class="badge bg-success">Reclutador</span>';
              break;
            case 'coordinador':
              rolBadge = '<span class="badge bg-warning text-dark">Coordinador</span>';
              break;
            case 'capturistaRH':
              rolBadge = '<span class="badge bg-info text-dark">GRPContigo</span>';
              break;
            default:
              rolBadge = '<span class="badge bg-dark">Desconocido</span>';
          }

          const tr = document.createElement('tr');
          tr.innerHTML = `
            <td>${r.nombre_completo}</td>
            <td>${rolBadge}</td>
            <td>${r.en_proceso}</td>
            <td>${r.rechazados}</td>
            <!-- <td>
              <a href="detalle-reclutador.php?attuid=${r.attuid}&inicio=${fechaInicio}&fin=${fechaFin}" class="btn btn-sm btn-outline-primary">Ver todo</a>
            </td> -->
          `;
          tabla.appendChild(tr);
        });

    })
    .catch(err => {
      console.error(err);
      alert('Error al cargar el panel.');
    });
}
</script>
<!-- Modal Estatus -->
<div class="modal fade" id="modalEstatusProceso" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header text-white" style="background-color: #D29E00;">
        <h5 class="modal-title">
          <i class="fas fa-spinner me-2"></i>Estatus de Aspirantes en Proceso
        </h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Cerrar"></button>
      </div>
      <div class="modal-body">
        <ul class="list-group" id="listaEstatusProceso"></ul>
        <button id="btnDetalleProceso" class="btn text-white mt-3" style="background-color: #D29E00;">Ver detalles</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modalDetalleProceso" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header text-white" style="background-color: #D29E00;">
        <h5 class="modal-title">
          <i class="fas fa-list-alt me-2"></i>Detalle de Aspirantes en Proceso
        </h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div class="row mb-3">
          <div class="col-md-8">
            <input type="text" id="buscarDetalleProceso" class="form-control" placeholder="Buscar por nombre...">
          </div>
          <div class="col-md-4 text-end">
            <button id="btnExportarExcel" class="btn text-white" style="background-color: #D29E00;">
              <i class="fas fa-file-excel me-2"></i>Exportar a Excel
            </button>
          </div>
        </div>
        <div id="contenidoDetalleProceso"><!-- Rellenado con JS --></div>
      </div>
    </div>
  </div>
</div>

<!-- Modal Rechazados y Contratados -->

<div class="modal fade" id="modalRechazados" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header text-white" style="background-color: #C44545;">
        <h5 class="modal-title">
          <i class="fas fa-user-times me-2"></i>Aspirantes Rechazados
        </h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div class="row mb-3">
          <div class="col-md-8">
            <input type="text" id="buscarRechazados" class="form-control" placeholder="Buscar por nombre...">
          </div>
          <div class="col-md-4 text-end">
            <button id="btnExportarExcelRechazados" class="btn text-white" style="background-color: #C44545;">
              <i class="fas fa-file-excel me-2"></i>Exportar a Excel
            </button>
          </div>
        </div>
        <ul class="list-group" id="listaRechazados"></ul>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modalContratados" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header text-white" style="background-color: #1F8A5C;">
        <h5 class="modal-title">
          <i class="fas fa-user-check me-2"></i>Aspirantes Contratados
        </h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div class="row mb-3">
          <div class="col-md-8">
            <input type="text" id="buscarContratados" class="form-control" placeholder="Buscar por nombre...">
          </div>
          <div class="col-md-4 text-end">
            <button id="btnExportarExcelContratados" class="btn text-white" style="background-color: #1F8A5C;">
              <i class="fas fa-file-excel me-2"></i>Exportar a Excel
            </button>
          </div>
        </div>
        <ul class="list-group" id="listaContratados"></ul>
      </div>
    </div>
  </div>
</div>

<!-- Modal Asignados -->
<div class="modal fade" id="modalAsignados" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header text-white" style="background-color: #1E5AA8;">
        <h5 class="modal-title">
          <i class="fas fa-user-tie me-2"></i>Aspirantes Asignados
        </h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div class="row mb-3">
          <div class="col-md-8">
            <input type="text" id="buscarAsignados" class="form-control" placeholder="Buscar por nombre...">
          </div>
          <div class="col-md-4 text-end">
            <button id="btnExportarExcelAsignados" class="btn text-white" style="background-color: #1E5AA8;">
              <i class="fas fa-file-excel me-2"></i>Exportar a Excel
            </button>
          </div>
        </div>
        <ul class="list-group" id="listaAsignados"></ul>
      </div>
    </div>
  </div>
</div>

<!-- Modal Pendientes -->
<div class="modal fade" id="modalPendientes" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header text-white" style="background-color: #3B7CA8;">
        <h5 class="modal-title">
          <i class="fas fa-clock me-2"></i>Aspirantes Pendientes
        </h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div class="row mb-3">
          <div class="col-md-8">
            <input type="text" id="buscarPendientes" class="form-control" placeholder="Buscar por nombre...">
          </div>
          <div class="col-md-4 text-end">
            <button id="btnExportarExcelPendientes" class="btn text-white" style="background-color: #3B7CA8;">
              <i class="fas fa-file-excel me-2"></i>Exportar a Excel
            </button>
          </div>
        </div>
        <ul class="list-group" id="listaPendientes"></ul>
      </div>
    </div>
  </div>
</div>

<!-- Modal En el Banco -->
<div class="modal fade" id="modalBanco" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header text-white" style="background-color: #3E4C59;">
        <h5 class="modal-title">
          <i class="fas fa-university me-2"></i>Aspirantes en el Banco
        </h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div class="row mb-3">
          <div class="col-md-8">
            <input type="text" id="buscarBanco" class="form-control" placeholder="Buscar por nombre...">
          </div>
          <div class="col-md-4 text-end">
            <button id="btnExportarExcelBanco" class="btn text-white" style="background-color: #3E4C59;">
              <i class="fas fa-file-excel me-2"></i>Exportar a Excel
            </button>
          </div>
        </div>
        <ul class="list-group" id="listaBanco"></ul>
      </div>
    </div>
  </div>
</div>

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

</body>
</html>
