import { todasVacantes } from './carga.js';

export function mostrarDetallePDV(pdvSeleccionado, zonaSeleccionada) {
  const contenedor = document.getElementById('contenidoDetallePDV');
  const vacantes = todasVacantes.filter(v => v.zona === zonaSeleccionada && v.pdv === pdvSeleccionado);

  if (vacantes.length === 0) {
    contenedor.innerHTML = `<div class="alert alert-warning text-center">No hay registros para este PDV.</div>`;
  } else {
    contenedor.innerHTML = `
      <h5 class="mb-3 text-primary">PDV: ${pdvSeleccionado}</h5>
      <div class="row row-cols-1 row-cols-md-2 g-3">
        ${vacantes.map(v => {
          const ocupado = !!v.curp;
          const clase = ocupado ? 'border-success' : 'border-secondary';
          const icono = ocupado ? 'fa-user-check text-success' : 'fa-user-times text-secondary';
          const titulo = ocupado ? `Ocupado por: ${v.nombre}` : 'Vacante disponible';
          const enlace = ocupado ? `onclick="window.location.href='../plantilla/detalle-empleado.php?curp=${v.curp}'"` : '';

          return `
            <div class="col">
              <div class="card ${clase} border-2 h-100" style="cursor:${ocupado ? 'pointer' : 'default'}" ${enlace}>
                <div class="card-body">
                  <h6 class="card-title"><i class="fas ${icono} me-2"></i>${v.puesto}</h6>
                  <p class="card-text">${titulo}</p>
                </div>
              </div>
            </div>
          `;
        }).join('')}
      </div>
    `;
  }

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