<!-- Botón para abrir el modal -->
<div class="mb-3">
  <button class="btn btn-primary btn-ver-vacantes" id="modalVacantesBtn" data-bs-toggle="modal" data-bs-target="#modalVacantes">
    <i class="fas fa-briefcase me-2"></i>Ver vacantes disponibles
  </button>
</div>

<!-- Modal de Vacantes -->
<div class="modal fade" id="modalVacantes" tabindex="-1" aria-labelledby="modalVacantesLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalVacantesLabel">Seleccionar Vacante Disponible</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
      </div>
      <div class="modal-body">

        <!-- Filtro de zona y contadores -->
        <div class="row mb-3">
          <div class="col-md-6">
            <label for="selectZona" class="form-label">Selecciona una zona:</label>
            <select id="selectZona" class="form-select mb-2">
              <option value="">-- Mostrar todas --</option>
            </select>
            <input type="text" id="inputBusquedaPDV" class="form-control" placeholder="Buscar por nombre de PDV...">
          </div>
        <div class="col-md-6 d-flex align-items-end justify-content-end">
          <div class="w-100">
            <div class="row">
              <div class="col-6">
                <p class="mb-1 fw-bold">Total vacantes: <span id="contadorTotal">0</span></p>
                <p class="mb-0">Tiempo completo: <span id="totalCompleto">0</span></p>
                <p class="mb-0">Tiempo parcial: <span id="totalParcial">0</span></p>
              </div>
              <div class="col-6">
                <p class="mb-1 fw-bold">En zona: <span id="contadorZona">0</span></p>
                <p class="mb-0">Tiempo completo: <span id="zonaCompleto">0</span></p>
                <p class="mb-0">Tiempo parcial: <span id="zonaParcial">0</span></p>
              </div>
            </div>
          </div>
        </div>
       </div>

        <!-- Tabla de vacantes -->
        <div class="table-responsive">
          <table class="table table-bordered table-striped align-middle">
            <thead class="table-light">
              <tr>
                <th>PDV</th>
                <th>Puesto</th>
                <th>Tipo</th>
                <th>Modalidad</th>
                <th>Acción</th>
              </tr>
            </thead>
            <tbody id="tablaVacantesBody">
              <tr>
                <td colspan="4" class="text-center">Cargando vacantes...</td>
              </tr>
            </tbody>
          </table>
        </div>

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

<!-- Script -->
<script>
let todasLasVacantes = [];
let sectores = [];

document.addEventListener('DOMContentLoaded', () => {
  const modal = document.getElementById('modalVacantes');
  const tablaBody = document.getElementById('tablaVacantesBody');
  const selectZona = document.getElementById('selectZona');
  const inputBusquedaPDV = document.getElementById('inputBusquedaPDV');
  const contadorTotal = document.getElementById('contadorTotal');
  const contadorZona = document.getElementById('contadorZona');
  const totalCompleto = document.getElementById('totalCompleto');
  const totalParcial = document.getElementById('totalParcial');
  const zonaCompleto = document.getElementById('zonaCompleto');
  const zonaParcial = document.getElementById('zonaParcial');

  modal.addEventListener('show.bs.modal', () => {
    tablaBody.innerHTML = `<tr><td colspan="5" class="text-center">Cargando vacantes...</td></tr>`;

    fetch('../../backend/vacantes/get_vacantes_disponibles.php')
      .then(res => res.json())
      .then(data => {
        todasLasVacantes = data.vacantes || [];
        // No renderices aún
        // contadorTotal.textContent = todasLasVacantes.length;
        // renderVacantes(todasLasVacantes);
        // contarModalidad(todasLasVacantes, false);

        return fetch('../../backend/vacantes/get_sectores_con_pdvs.php');
      })
      .then(res => res.json())
      .then(data => {
        sectores = data.sectores || [];
        selectZona.innerHTML = `<option value="">-- Mostrar todas --</option>`;
        sectores.forEach(sector => {
          const opt = document.createElement('option');
          opt.value = sector.sector;
          opt.textContent = sector.sector;
          selectZona.appendChild(opt);
        });
        // Si el usuario es subdistribuidor, fija y deshabilita la zona
          if (rolUsuario === "subdistribuidor" && sectorUsuario) {
               selectZona.querySelector('option[value=""]').remove();
                selectZona.value = sectorUsuario;
                selectZona.disabled = true;
            }

         // --- FILTRO SOLO PARA SUBDISTRIBUIDOR (nuevo) ---
          if (rolUsuario === "subdistribuidor" && sectorUsuario) {
              const pdvsPermitidos = sectores
                  .filter(s => s.sector === sectorUsuario)
                  .flatMap(s => s.tiendas.map(t => t.trim().toUpperCase()));
              todasLasVacantes = todasLasVacantes.filter(v => pdvsPermitidos.includes(v.pdv.trim().toUpperCase()));
          }
        // Ya puedes renderizar las vacantes (filtradas o todas)
        contadorTotal.textContent = todasLasVacantes.length;
        renderVacantes(todasLasVacantes);
        contarModalidad(todasLasVacantes, false);
      })
      .catch(err => {
        console.error(err);
        tablaBody.innerHTML = `<tr><td colspan="5" class="text-danger text-center">Error al cargar datos</td></tr>`;
      });
  });

  selectZona.addEventListener('change', aplicarFiltros);
  inputBusquedaPDV.addEventListener('input', aplicarFiltros);

  function aplicarFiltros() {
    const zona = selectZona.value;
    const busqueda = inputBusquedaPDV.value.trim().toUpperCase();
    let vacantesFiltradas = [...todasLasVacantes];

    if (zona) {
      const pdvsZona = sectores.find(s => s.sector === zona)?.tiendas.map(t => t.trim().toUpperCase()) || [];
      vacantesFiltradas = vacantesFiltradas.filter(v => pdvsZona.includes(v.pdv.trim().toUpperCase()));
    }

    if (busqueda) {
      vacantesFiltradas = vacantesFiltradas.filter(v => v.pdv.toUpperCase().includes(busqueda));
    }

    renderVacantes(vacantesFiltradas);
    contadorZona.textContent = vacantesFiltradas.length;
    contarModalidad(vacantesFiltradas, true);
  }

  function renderVacantes(lista) {
    if (!lista.length) {
      tablaBody.innerHTML = `<tr><td colspan="5" class="text-center text-muted">No hay vacantes disponibles.</td></tr>`;
      return;
    }
    tablaBody.innerHTML = '';
    lista.forEach(vac => {
      const fila = document.createElement('tr');
      fila.innerHTML = `
        <td>${vac.pdv}</td>
        <td>${vac.puesto}</td>
        <td>${vac.codigo.includes("GTE") ? "Gerente" : "Ejecutivo"}</td>
        <td>${vac.modalidad}</td>
        <td>
          <button class="btn btn-success btn-sm" onclick="guardarVacante('${vac.codigo}', '${vac.puesto}', '${vac.pdv}')">
            <i class="fas fa-check me-1"></i>Seleccionar
          </button>
        </td>
      `;
      tablaBody.appendChild(fila);
    });
  }

  function contarModalidad(lista, esZona = false) {
    let completo = 0, parcial = 0;
    lista.forEach(v => {
      if ((v.modalidad || '').toLowerCase().includes('completo')) completo++;
      else parcial++;
    });

    if (esZona) {
      zonaCompleto.textContent = completo;
      zonaParcial.textContent = parcial;
    } else {
      totalCompleto.textContent = completo;
      totalParcial.textContent = parcial;
    }
  }
});

function guardarVacante(codigo, puesto, pdv) {
  const aspiranteID = new URLSearchParams(window.location.search).get('id');
  if (!aspiranteID) {
    alert("ID de aspirante no disponible.");
    return;
  }

  const formData = new FormData();
  formData.append("aspirante_id", aspiranteID);
  formData.append("codigo", codigo);
  formData.append("puesto", puesto);
  formData.append("pdv", pdv);

  fetch("../../backend/aspirantes/guardar_vacante.php", {
    method: "POST",
    body: formData
  })
  .then(res => res.json())
  .then(data => {
    if (data.success) {
      Swal.fire({
        icon: "success",
        title: "✅ Vacante guardada",
        text: "La vacante ha sido asignada correctamente.",
        timer: 1500,
        showConfirmButton: false
      }).then(() => {
        const modal = bootstrap.Modal.getInstance(document.getElementById("modalVacantes"));
        if (modal) modal.hide();

        location.reload();
      });

    } else if (data.message) {
      Swal.fire("❌ Error", data.message, "error");
    } else {
      Swal.fire("❌ Error", data.message || "No se pudo guardar la vacante", "error");
    }
  })
  .catch(err => {
    console.error(err);
    Swal.fire("❌ Error de red", "No se pudo conectar al servidor.", "error");
  });
}

function actualizarTarjetaVacante() {
  const aspiranteID = new URLSearchParams(window.location.search).get('id');
  if (!aspiranteID) return;

  fetch(`../../backend/aspirantes/get_vacante_de_aspirante.php?id=${aspiranteID}`)
    .then(res => res.json())
    .then(data => {
      const vacante = data.data;
      const contenedor = document.getElementById('card-vacante');
      if (!contenedor) return;

      if (data.success && vacante.vacante_puesto && vacante.vacante_pdv) {
        contenedor.innerHTML = `
          <div class="alert alert-info small mt-2">
            <i class="fas fa-briefcase me-1"></i>
            <strong>Vacante asignada:</strong><br>
            ${vacante.vacante_puesto}<br>
            <small class="text-muted">${vacante.vacante_pdv}</small>
          </div>
        `;
      } else {
        contenedor.innerHTML = `
          <p class="text-muted small mt-2">
            <i class="fas fa-briefcase me-1"></i> Vacante por definir
          </p>
        `;
      }
    })
    .catch(err => console.error('❌ Error al actualizar tarjeta de vacante:', err));
}
</script>
