document.addEventListener('DOMContentLoaded', () => {
  // Función para parsear fecha de input y evitar desfase de zona horaria
  function parseInputDate(str) {
    const [year, month, day] = str.split('-');
    return new Date(Number(year), Number(month) - 1, Number(day));
  }
  console.log("🚀 dashboard.js conectado");
  cargarDashboard(); // carga inicial sin filtros

  // Sidebar toggle funcionalidad
  const sidebarToggle = document.getElementById('sidebarToggle');
  const sidebar = document.getElementById('sidebar');
  const mainContent = document.querySelector('.main-content');
  if (sidebarToggle && sidebar) {
    sidebarToggle.addEventListener('click', () => {
      // Si está en modo responsive (<992px), sobreponer el sidebar
      if (window.innerWidth < 992) {
        sidebar.classList.toggle('show');
        // Agregar fondo semitransparente
        if (sidebar.classList.contains('show')) {
          sidebar.style.position = 'fixed';
          sidebar.style.left = '0';
          sidebar.style.top = '0';
          sidebar.style.height = '100vh';
          sidebar.style.zIndex = '2000';
          sidebar.style.boxShadow = '2px 0 10px rgba(0,0,0,0.2)';
          // Crear overlay
          let overlay = document.createElement('div');
          overlay.id = 'sidebar-overlay';
          overlay.style.position = 'fixed';
          overlay.style.top = '0';
          overlay.style.left = '0';
          overlay.style.width = '100vw';
          overlay.style.height = '100vh';
          overlay.style.background = 'rgba(0,0,0,0.3)';
          overlay.style.zIndex = '1999';
          overlay.onclick = () => {
            sidebar.classList.remove('show');
            document.body.removeChild(overlay);
          };
          document.body.appendChild(overlay);
        } else {
          sidebar.style.position = '';
          sidebar.style.left = '';
          sidebar.style.top = '';
          sidebar.style.height = '';
          sidebar.style.zIndex = '';
          sidebar.style.boxShadow = '';
          let overlay = document.getElementById('sidebar-overlay');
          if (overlay) document.body.removeChild(overlay);
        }
      } else {
        // Desktop: alterna clase para ocultar/mostrar
        sidebar.classList.toggle('show');
        if (mainContent) {
          mainContent.classList.toggle('sidebar-open');
        }
      }
    });
    // Cerrar sidebar si se redimensiona a desktop
    window.addEventListener('resize', () => {
      if (window.innerWidth >= 992) {
        let overlay = document.getElementById('sidebar-overlay');
        if (overlay) document.body.removeChild(overlay);
        sidebar.classList.remove('show');
        sidebar.style.position = '';
        sidebar.style.left = '';
        sidebar.style.top = '';
        sidebar.style.height = '';
        sidebar.style.zIndex = '';
        sidebar.style.boxShadow = '';
        if (mainContent) mainContent.classList.remove('sidebar-open');
      }
    });
  }

  const btnFiltro = document.getElementById('btnFiltrarFechas');
  if (btnFiltro) {
    btnFiltro.addEventListener('click', () => {
      const inicio = document.getElementById('fechaInicio').value;
      const fin = document.getElementById('fechaFin').value;
      const rangoActivo = document.getElementById('rangoActivo');

      if (!inicio || !fin) {
        alert("Por favor selecciona un rango de fechas válido.");
        return;
      }

      // Mostrar texto debajo de los botones de filtro rápido
      if (rangoActivo) {
  const desde = parseInputDate(inicio).toLocaleDateString('es-MX');
  const hasta = parseInputDate(fin).toLocaleDateString('es-MX');
  rangoActivo.textContent = `🔍 Mostrando registros del ${desde} al ${hasta}`;
  rangoActivo.style.display = 'block';
      }

      // Mostrar checkbox y actualizar tooltip con la fecha de inicio
      const filaCheckbox = document.getElementById('filaCheckboxFiltro');
      const btnAyudaFiltro = document.getElementById('btnAyudaFiltro');
      if (filaCheckbox) {
        filaCheckbox.style.display = '';
      }
      if (btnAyudaFiltro) {
        const tooltipText = `Contabilizar a gente registrada antes del [${inicio}] 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);
        
        // Inicializar o actualizar el tooltip de Bootstrap
        const tooltipInstance = bootstrap.Tooltip.getInstance(btnAyudaFiltro);
        if (tooltipInstance) {
          tooltipInstance.dispose();
        }
        new bootstrap.Tooltip(btnAyudaFiltro);
      }

      cargarDashboard(inicio, fin);
    });
  }

  // Listener global para limpiar filtro
  const btnLimpiar = document.getElementById('btnLimpiarFiltro');
  if (btnLimpiar) {
    btnLimpiar.addEventListener('click', () => {
      document.getElementById('fechaInicio').value = '';
      document.getElementById('fechaFin').value = '';
      const rangoActivo = document.getElementById('rangoActivo');
      if (rangoActivo) rangoActivo.textContent = '';

      // Ocultar checkbox al limpiar filtro
      const filaCheckbox = document.getElementById('filaCheckboxFiltro');
      if (filaCheckbox) {
        filaCheckbox.style.display = 'none';
      }

      // Volver a activar el checkbox de incluir asignados previos
      const checkboxIncluir = document.getElementById('incluirAsignadosPrevios');
      if (checkboxIncluir) {
        checkboxIncluir.checked = true;
      }

      cargarDashboard(); // vuelve al estado original sin filtro
    });
  }

  // Quick filter buttons (creados en markup)
  const btnSemana = document.getElementById('btnSemana');
  const btn2Semanas = document.getElementById('btn2Semanas');
  const btnMes = document.getElementById('btnMes');

  function setRangoAndLoad(inicio, fin) {
    document.getElementById('fechaInicio').value = inicio;
    document.getElementById('fechaFin').value = fin;
    // Mostrar texto debajo de los botones de filtro rápido
    const rangoActivo = document.getElementById('rangoActivo');
    if (rangoActivo) {
  const desde = parseInputDate(inicio).toLocaleDateString('es-MX');
  const hasta = parseInputDate(fin).toLocaleDateString('es-MX');
  rangoActivo.textContent = `🔍 Mostrando registros del ${desde} al ${hasta}`;
  rangoActivo.style.display = 'block';
    }
    
    // Mostrar checkbox y actualizar tooltip con la fecha de inicio
    const filaCheckbox = document.getElementById('filaCheckboxFiltro');
    const btnAyudaFiltro = document.getElementById('btnAyudaFiltro');
    if (filaCheckbox) {
      filaCheckbox.style.display = '';
    }
    if (btnAyudaFiltro) {
      const tooltipText = `Contabilizar a gente registrada antes del [${inicio}] 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);
      
      // Inicializar o actualizar el tooltip de Bootstrap
      const tooltipInstance = bootstrap.Tooltip.getInstance(btnAyudaFiltro);
      if (tooltipInstance) {
        tooltipInstance.dispose();
      }
      new bootstrap.Tooltip(btnAyudaFiltro);
    }
    
    cargarDashboard(inicio, fin);
  }

  if (btnSemana) {
    btnSemana.addEventListener('click', () => {
      const hoy = new Date();
      // Obtener el día de la semana (lunes=1, domingo=7)
      let diaSemana = hoy.getDay();
      diaSemana = diaSemana === 0 ? 7 : diaSemana; // domingo=7
      // Calcular lunes
      const lunes = new Date(hoy);
      lunes.setDate(hoy.getDate() - diaSemana + 1);
      // Calcular domingo
      const domingo = new Date(lunes);
      domingo.setDate(lunes.getDate() + 6);
      setRangoAndLoad(lunes.toISOString().slice(0,10), domingo.toISOString().slice(0,10));
    });
  }

  if (btn2Semanas) {
    btn2Semanas.addEventListener('click', () => {
      const hoy = new Date();
      // Día de la semana actual (lunes=1, domingo=7)
      let diaSemana = hoy.getDay();
      diaSemana = diaSemana === 0 ? 7 : diaSemana;
      // Lunes de la semana actual
      const lunesActual = new Date(hoy);
      lunesActual.setDate(hoy.getDate() - diaSemana + 1);
      // Lunes de la semana anterior
      const lunesAnterior = new Date(lunesActual);
      lunesAnterior.setDate(lunesActual.getDate() - 7);
      // Domingo de la semana actual
      const domingoActual = new Date(lunesActual);
      domingoActual.setDate(lunesActual.getDate() + 6);
      setRangoAndLoad(lunesAnterior.toISOString().slice(0,10), domingoActual.toISOString().slice(0,10));
    });
  }

  if (btnMes) {
    btnMes.addEventListener('click', () => {
      const now = new Date();
      const inicio = new Date(now.getFullYear(), now.getMonth(), 1); // primer día del mes actual
      const fin = new Date(now.getFullYear(), now.getMonth() + 1, 0); // último día del mes actual
      setRangoAndLoad(inicio.toISOString().slice(0,10), fin.toISOString().slice(0,10));
    });
  }

  // Botón Semana anterior
  const btnSemanaAnterior = document.getElementById('btnSemanaAnterior');
  if (btnSemanaAnterior) {
    btnSemanaAnterior.addEventListener('click', () => {
      const hoy = new Date();
      // Obtener el lunes de la semana actual
      const diaSemana = hoy.getDay() === 0 ? 7 : hoy.getDay(); // domingo=7
      const lunesActual = new Date(hoy);
      lunesActual.setDate(hoy.getDate() - diaSemana + 1);
      // Semana anterior: lunes a domingo
      const lunesAnterior = new Date(lunesActual);
      lunesAnterior.setDate(lunesActual.getDate() - 7);
      const domingoAnterior = new Date(lunesAnterior);
      domingoAnterior.setDate(lunesAnterior.getDate() + 6);
      setRangoAndLoad(lunesAnterior.toISOString().slice(0,10), domingoAnterior.toISOString().slice(0,10));
    });
  }

  // Botón Mes anterior
  const btnMesAnterior = document.getElementById('btnMesAnterior');
  if (btnMesAnterior) {
    btnMesAnterior.addEventListener('click', () => {
      const hoy = new Date();
      const mesActual = hoy.getMonth();
      const anioActual = hoy.getFullYear();
      // Si es enero, el mes anterior es diciembre del año anterior
      const mesAnterior = mesActual === 0 ? 11 : mesActual - 1;
      const anioAnterior = mesActual === 0 ? anioActual - 1 : anioActual;
      const primerDia = new Date(anioAnterior, mesAnterior, 1);
      const ultimoDia = new Date(anioAnterior, mesAnterior + 1, 0);
      setRangoAndLoad(primerDia.toISOString().slice(0,10), ultimoDia.toISOString().slice(0,10));
    });
  }

  // Listener para el checkbox "Incluir asignados previos"
  const checkboxIncluir = document.getElementById('incluirAsignadosPrevios');
  if (checkboxIncluir) {
    checkboxIncluir.addEventListener('change', () => {
      const inicio = document.getElementById('fechaInicio').value;
      const fin = document.getElementById('fechaFin').value;
      
      // Solo recargar si hay filtro activo
      if (inicio && fin) {
        cargarDashboard(inicio, fin);
      }
    });
  }

});

function cargarDashboard(inicio = null, fin = null) {
  let url = '../../backend/dashboard/get_dashboard.php';
  if (inicio && fin) {
    const incluirAnteriores = document.getElementById('incluirAsignadosPrevios').checked ? 1 : 0;
    url += `?inicio=${inicio}&fin=${fin}&incAnt=${incluirAnteriores}`;
  }

  fetch(url)
    .then(res => {
      if (!res.ok) {
        throw new Error(`HTTP error! status: ${res.status}`);
      }
      return res.text(); // Primero obtenemos texto para debug
    })
    .then(text => {
      console.log("📄 Respuesta cruda del servidor:", text);
      try {
        const data = JSON.parse(text);
        console.log("📦 Respuesta del backend:", data);
        if (!data.success) return;

        const tabla = document.getElementById('tabla-aspirantes');
        const tbody = tabla ? tabla.querySelector('tbody') : null;
      const cardsContainer = document.getElementById('dashboard-cards');

      if (!cardsContainer) return;

      // Función para obtener color según estado
      function getEstadoColor(estado) {
        switch (estado.toLowerCase()) {
          case 'asignado': return 'info';
          case 'revision': return 'warning';
          case 'llamada':
          case 'llamada2': return 'primary';
          case 'entrevista':
          case 'entrevista1':
          case 'entrevista2': return 'secondary';
          case 'contratado': return 'success';
          case 'rechazado': return 'danger';
          default: return 'dark';
        }
      }

      // Siempre vaciamos las tarjetas
      cardsContainer.innerHTML = '';

      // ✅ Mostrar tabla solo cuando NO hay filtro activo
      if (!inicio && !fin && tbody) {
        tbody.innerHTML = '';
        data.recientes.forEach(asp => {
          const fechaFormateada = asp.ultima_modificacion
            ? new Date(asp.ultima_modificacion).toLocaleDateString('es-MX', {
                year: 'numeric',
                month: 'short',
                day: 'numeric'
              })
            : 'Sin registro';

          const tr = document.createElement('tr');
          tr.style.cursor = 'pointer';
          tr.innerHTML = `
            <td>${asp.nombre_completo}</td>
            <td>${asp.puesto}</td>
            <td><span class="badge bg-${getEstadoColor(asp.estado)}">${asp.estado}</span></td>
            <td>${fechaFormateada}</td>
          `;
          
          // Efecto hover
          tr.addEventListener('mouseenter', function() {
            this.style.backgroundColor = '#f0f0f0';
          });
          tr.addEventListener('mouseleave', function() {
            this.style.backgroundColor = '';
          });
          
          // Hacer clickeable para redirigir a candidate-detail.php
          tr.addEventListener('click', function() {
            window.location.href = `../recruiter/candidate-detail.php?id=${asp.id}`;
          });
          
          tbody.appendChild(tr);
        });
      }

      // ✅ Tarjetas (siempre)
      const stats = data.totales;
      
      /*
      const colorMap = {
        'primary': '#0d6efd',
        'secondary': '#6c757d',
        'success': '#198754',
        'danger': '#dc3545',
        'warning': '#ffc107',
        'info': '#0dcaf0',
        'dark': '#212529'
      };*/
      
      const tarjetas = [
        {
          label: 'Asignados',
          color: '#1E5AA8', // primary
          value: stats.asignados,
          icon: 'fas fa-user-tie'
        },
        {
          label: 'Pendientes',
          color: '#3B7CA8', // info
          value: stats.pendientes ?? 0,
          icon: 'fas fa-clock'
        },
        {
          label: 'En proceso',
          color: '#D29E00', // warning
          value: stats.en_proceso,
          icon: 'fas fa-spinner'
        },
        {
          label: 'Contratados',
          color: '#1F8A5C', // success
          value: stats.contratados,
          icon: 'fas fa-user-check'
        },
        {
          label: 'Rechazados',
          color: '#C44545', // danger
          value: stats.rechazados,
          icon: 'fas fa-user-times'
        },
        {
          label: 'En el banco',
          color: '#3E4C59', // color personalizado
          value: stats.en_banco ?? stats.banco ?? 0,
          icon: 'fas fa-university'
        }
      ];



      tarjetas.forEach(t => {
        const card = document.createElement('div');
        card.className = 'col-md-6 col-lg-4 mb-4';
        const displayValue = (t.value ?? 0);
        
        // Crear gradient: 70% color + 30% blanco
        const gradientBg = `linear-gradient(to right, ${t.color} 70%, white 70%)`;
        
        card.innerHTML = `
          <div class="card shadow h-100 dashboard-metric-card" 
               style="background: ${gradientBg}; 
                      background-size: 100% 100%;
                      background-position: 0% 0%;
                      transition: transform 0.3s ease, background-size 0.5s ease-in-out; 
                      cursor: pointer;">
            <div class="card-body py-3 d-flex align-items-center justify-content-between">
              <div class="text-white text-start d-flex align-items-center" style="flex: 0 0 70%; padding-right: 1rem;">
                <i class="${t.icon}" style="color: white; margin-right: 0.6rem; font-size: 1.8rem;"></i>
                <div class="label" 
                style="font-family: 'Poppins', sans-serif;
            font-size: 1.6rem;
            font-weight: 600;
            letter-spacing: 0.4px;
            text-transform: capitalize;">
  ${t.label}
</div>

              </div>
              <div class="text-end" style="flex: 0 0 25%;">
                <div class="metric-value" style="font-size: 2.2rem; font-weight: 700; color: ${t.color}; transition: color 0.3s ease;">${displayValue}</div>
              </div>
            </div>
          </div>
        `;
        
        const cardElement = card.querySelector('.dashboard-metric-card');
        const valueElement = card.querySelector('.metric-value');
        
        // Animación JS: gradiente progresivo en hover
        let fillInterval = null;
        cardElement.addEventListener('mouseenter', () => {
          cardElement.style.transform = 'scale(1.05)';
          let percent = 70;
          valueElement.style.color = t.color;
          fillInterval = setInterval(() => {
            percent += 1.5; // velocidad de llenado aumentada
            if (percent >= 100) {
              percent = 100;
              clearInterval(fillInterval);
              valueElement.style.color = 'white';
            }
            cardElement.style.background = `linear-gradient(to right, ${t.color} ${percent}%, white ${percent}%)`;
            if (percent === 100) {
              cardElement.style.background = `linear-gradient(to right, ${t.color} 100%, ${t.color} 100%)`;
            }
          }, 15); // cada 15ms (más rápido)
        });

        cardElement.addEventListener('mouseleave', () => {
          cardElement.style.transform = 'scale(1)';
          clearInterval(fillInterval);
          cardElement.style.background = gradientBg;
          valueElement.style.color = t.color;
        });

        // Agregar evento click para la card de Asignados
        if (t.label === 'Asignados') {
          cardElement.addEventListener('click', () => {
            mostrarModalAsignados(inicio, fin);
          });
        }

        // Agregar evento click para la card de Pendientes
        if (t.label === 'Pendientes') {
          cardElement.addEventListener('click', () => {
            mostrarModalPendientes(inicio, fin);
          });
        }

        // Agregar evento click para la card de En proceso
        if (t.label === 'En proceso') {
          cardElement.addEventListener('click', () => {
            mostrarModalEnProceso(inicio, fin);
          });
        }

        // Agregar evento click para la card de Contratados
        if (t.label === 'Contratados') {
          cardElement.addEventListener('click', () => {
            mostrarModalContratados(inicio, fin);
          });
        }

        // Agregar evento click para la card de Rechazados
        if (t.label === 'Rechazados') {
          cardElement.addEventListener('click', () => {
            mostrarModalRechazados(inicio, fin);
          });
        }

        // Agregar evento click para la card de En el banco
        if (t.label === 'En el banco') {
          cardElement.addEventListener('click', () => {
            mostrarModalBanco(inicio, fin);
          });
        }
        
        cardsContainer.appendChild(card);
      });
      } catch (parseError) {
        console.error('❌ Error al parsear JSON:', parseError);
        console.error('Respuesta recibida:', text);
      }
    })
    .catch(err => console.error('❌ Error al cargar dashboard:', err));
}

// Función para mostrar modal de Asignados
function mostrarModalAsignados(inicio, fin) {
  let url = '../../backend/dashboard/get_lista_asignadosPR.php';
  if (inicio && fin) {
    url += `?inicio=${inicio}&fin=${fin}`;
  }

  fetch(url)
    .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.style.cursor = 'pointer';
          item.innerHTML = `<strong>${e.nombre}</strong>`;
          const span = document.createElement('span');
          span.className = 'badge bg-secondary';
          span.textContent = e.fecha;
          item.appendChild(span);
          
          // Efecto hover
          item.addEventListener('mouseenter', function() {
            this.style.backgroundColor = '#f0f0f0';
          });
          item.addEventListener('mouseleave', function() {
            this.style.backgroundColor = '';
          });
          
          // Hacer clickeable para redirigir a candidate-detail.php
          item.addEventListener('click', function() {
            window.location.href = `../recruiter/candidate-detail.php?id=${e.id}`;
          });
          
          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);
    })
    .catch(err => console.error('Error al cargar asignados:', err));
}

// Función para mostrar modal de Pendientes
function mostrarModalPendientes(inicio, fin) {
  let url = '../../backend/dashboard/get_lista_pendientesPR.php';
  if (inicio && fin) {
    const incluirAnteriores = document.getElementById('incluirAsignadosPrevios').checked ? 1 : 0;
    url += `?inicio=${inicio}&fin=${fin}&incAnt=${incluirAnteriores}`;
  }
  


  fetch(url)
    .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.style.cursor = 'pointer';
          item.innerHTML = `<strong>${e.nombre}</strong>`;
          const span = document.createElement('span');
          span.className = 'badge bg-secondary';
          span.textContent = e.fecha;
          item.appendChild(span);
          
          // Efecto hover
          item.addEventListener('mouseenter', function() {
            this.style.backgroundColor = '#f0f0f0';
          });
          item.addEventListener('mouseleave', function() {
            this.style.backgroundColor = '';
          });
          
          // Hacer clickeable para redirigir a candidate-detail.php
          item.addEventListener('click', function() {
            window.location.href = `../recruiter/candidate-detail.php?id=${e.id}`;
          });
          
          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);
    })
    .catch(err => console.error('Error al cargar pendientes:', err));
}

// Función para mostrar modal de En Proceso
function mostrarModalEnProceso(inicio, fin) {
  let url = '../../backend/dashboard/get_estatus_en_procesoPR.php';
  if (inicio && fin) {
    const incluirAnteriores = document.getElementById('incluirAsignadosPrevios').checked ? 1 : 0;
    url += `?inicio=${inicio}&fin=${fin}&incAnt=${incluirAnteriores}`;
  }

  fetch(url)
    .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-warning 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', () => {
        let urlDetalle = '../../backend/dashboard/get_lista_en_procesoPR.php';
        if (inicio && fin) {
          const incluirAnteriores = document.getElementById('incluirAsignadosPrevios').checked ? 1 : 0;
          urlDetalle += `?inicio=${inicio}&fin=${fin}&incAnt=${incluirAnteriores}`;
        }
        fetch(urlDetalle)
          .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 limpiar texto
            function limpiarTexto(texto) {
              return texto.replace(/[^a-zA-Z0-9áéíóúñÁÉÍÓÚÑ\s]/g, '').trim();
            }

            // Función para renderizar el contenido
            function renderizarDetalle(datos) {
              contenedor.innerHTML = '';
              
              // Combinar todos los aspirantes en un solo array (sin mostrar reclutador)
              const todosAspirantes = [];
              for (const reclutador in datos) {
                todosAspirantes.push(...datos[reclutador]);
              }

              if (todosAspirantes.length === 0) {
                contenedor.innerHTML = '<p class="text-muted">No se encontraron resultados.</p>';
                return;
              }

              const card = document.createElement('div');
              card.className = 'mb-4';

              const cardContent = document.createElement('div');
              cardContent.className = 'border rounded p-3 shadow-sm';

              const ul = document.createElement('ul');
              ul.className = 'list-group';

              todosAspirantes.forEach(a => {
                const li = document.createElement('li');
                li.className = 'list-group-item d-flex justify-content-between align-items-center';
                li.style.cursor = 'pointer';
                li.style.fontFamily = "'Segoe UI', sans-serif";
                li.style.color = '#4b4b4b';
                
                const nombreSpan = document.createElement('span');
                nombreSpan.className = 'fw-semibold';
                nombreSpan.textContent = a.nombre;
                
                const estatusSpan = document.createElement('span');
                estatusSpan.className = 'badge bg-info';
                estatusSpan.textContent = a.estatus;
                
                li.appendChild(nombreSpan);
                li.appendChild(estatusSpan);
                
                // Efecto hover
                li.addEventListener('mouseenter', function() {
                  this.style.backgroundColor = '#f0f0f0';
                });
                li.addEventListener('mouseleave', function() {
                  this.style.backgroundColor = '';
                });
                
                // Hacer clickeable para redirigir a candidate-detail.php
                li.addEventListener('click', function() {
                  window.location.href = `../recruiter/candidate-detail.php?id=${a.id}`;
                });
                
                ul.appendChild(li);
              });

              cardContent.appendChild(ul);
              card.appendChild(cardContent);
              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();
                
                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);
                }
              });

              // Configurar botón de exportar a Excel
              const btnExportar = document.getElementById('btnExportarExcelEnProceso');
              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 || '';
                
                // Combinar todos los aspirantes para exportar
                const todosAspirantes = [];
                for (const reclutador in datosCompletos) {
                  todosAspirantes.push(...datosCompletos[reclutador]);
                }
                
                // 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:#D29E00; color:white; font-size:18px; text-align:left;">ASPIRANTES EN PROCESO</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>Estatus</th></tr>
                  </thead>
                  <tbody>
                `;
                
                todosAspirantes.forEach(item => {
                  html += `<tr><td>${item.nombre}</td><td>${item.estatus}</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_en_proceso_${fechaInicio}_a_${fechaFin}.xls`;
                link.click();
                URL.revokeObjectURL(link.href);
              });
            }, 300);
          })
          .catch(err => console.error('Error al cargar detalle en proceso:', err));
      });
    })
    .catch(err => console.error('Error al cargar estatus en proceso:', err));
}

// Función para mostrar modal de Contratados
function mostrarModalContratados(inicio, fin) {
  let url = '../../backend/dashboard/get_lista_contratadosPR.php';
  if (inicio && fin) {
    const incluirAnteriores = document.getElementById('incluirAsignadosPrevios').checked ? 1 : 0;
    url += `?inicio=${inicio}&fin=${fin}&incAnt=${incluirAnteriores}`;
  }

  fetch(url)
    .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.style.cursor = 'pointer';
          item.innerHTML = `<strong>${e.nombre}</strong>`;
          const span = document.createElement('span');
          span.className = 'badge bg-secondary';
          span.textContent = e.fecha;
          item.appendChild(span);
          
          // Efecto hover
          item.addEventListener('mouseenter', function() {
            this.style.backgroundColor = '#f0f0f0';
          });
          item.addEventListener('mouseleave', function() {
            this.style.backgroundColor = '';
          });
          
          // Hacer clickeable para redirigir a candidate-detail.php
          item.addEventListener('click', function() {
            window.location.href = `../recruiter/candidate-detail.php?id=${e.id}`;
          });
          
          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();
          
          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('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);
    })
    .catch(err => console.error('Error al cargar contratados:', err));
}

// Función para mostrar modal de Rechazados
function mostrarModalRechazados(inicio, fin) {
  let url = '../../backend/dashboard/get_lista_rechazadosPR.php';
  if (inicio && fin) {
    const incluirAnteriores = document.getElementById('incluirAsignadosPrevios').checked ? 1 : 0;
    url += `?inicio=${inicio}&fin=${fin}&incAnt=${incluirAnteriores}`;
  }

  fetch(url)
    .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.style.cursor = 'pointer';
          item.innerHTML = `<strong>${e.nombre}</strong>`;
          const span = document.createElement('span');
          span.className = 'badge bg-secondary';
          span.textContent = e.fecha;
          item.appendChild(span);
          
          // Efecto hover
          item.addEventListener('mouseenter', function() {
            this.style.backgroundColor = '#f0f0f0';
          });
          item.addEventListener('mouseleave', function() {
            this.style.backgroundColor = '';
          });
          
          // Hacer clickeable para redirigir a candidate-detail.php
          item.addEventListener('click', function() {
            window.location.href = `../recruiter/candidate-detail.php?id=${e.id}`;
          });
          
          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();
          
          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('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);
    })
    .catch(err => console.error('Error al cargar rechazados:', err));
}

// Función para mostrar modal de En el Banco
function mostrarModalBanco(inicio, fin) {
  let url = '../../backend/dashboard/get_lista_bancoPR.php';
  if (inicio && fin) {
    const incluirAnteriores = document.getElementById('incluirAsignadosPrevios').checked ? 1 : 0;
    url += `?inicio=${inicio}&fin=${fin}&incAnt=${incluirAnteriores}`;
  }

  fetch(url)
    .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;
          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}</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);
    })
    .catch(err => console.error('Error al cargar banco:', err));
}
