<div class="modal fade" id="statusModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header"><h5 class="modal-title">Cambiar estatus</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
      <form onsubmit="return false;">
          <select class="form-select mb-3" name="nuevo_estatus">
            <option selected disabled>Seleccionar estatus</option>
            <?php foreach ($siguienteOpciones as $op): ?>
              <option value="<?= $op ?>"><?= $estatusLabels[$op] ?? $op ?></option>
            <?php endforeach; ?>
          </select>
          <textarea class="form-control" rows="3" name="comentarios" placeholder="Comentarios…"></textarea>
        </form>
      </div>
      <div class="modal-footer">
        <button class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button>
        <button class="btn btn-primary">Guardar</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal Referencias AT&T -->
<div class="modal fade" id="modalReferenciasATTT" tabindex="-1" aria-labelledby="referenciasATTTLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="referenciasATTTLabel">Estatus de referencias AT&T</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <form id="formReferenciasATTT">
          <div class="form-check">
            <input class="form-check-input" type="radio" name="referenciaATTT" value="APTO" id="opcion_apto">
            <label class="form-check-label" for="opcion_apto">APTO</label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="referenciaATTT" value="NO APTO" id="opcion_noapto">
            <label class="form-check-label" for="opcion_noapto">NO APTO</label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="referenciaATTT" value="RECONTRATABLE" id="opcion_recontratable">
            <label class="form-check-label" for="opcion_recontratable">RECONTRATABLE</label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="referenciaATTT" value="NO RECONTRATABLE" id="opcion_norecontratable">
            <label class="form-check-label" for="opcion_norecontratable">NO RECONTRATABLE</label>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button>
        <button type="button" class="btn btn-primary" id="btnGuardarReferencia">Guardar</button>
      </div>
    </div>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
  let estatusPendiente = null;

  document.querySelector('#statusModal .btn-primary').addEventListener('click', () => {
    const estatus = document.querySelector('select[name="nuevo_estatus"]').value;
    const comentario = document.querySelector('textarea[name="comentarios"]').value;
    const id = <?= $id ?>;

    const estatusActual = document.getElementById('estatus_actual')?.value?.trim();
    const vacantePuesto = document.getElementById('vacante_puesto')?.value?.trim();
    const vacantePdv = document.getElementById('vacante_pdv')?.value?.trim();

    console.log('DEBUG ▶️', { estatus, comentario, estatusActual, vacantePuesto, vacantePdv });

    if (!estatus || !comentario) {
      Swal.fire('Campos incompletos', 'Por favor, complete todos los campos.', 'warning');
      return;
    }

    if (estatusActual === 'visita' && estatus === 'contratado') {
      if (!vacantePuesto || !vacantePdv) {
        Swal.fire('Vacante requerida', 'No puedes contratar a este candidato sin haber asignado una vacante.', 'warning');
        return;
      }

      estatusPendiente = { id, estatus, comentario };
      const modal = new bootstrap.Modal(document.getElementById('modalReferenciasATTT'));
      modal.show();
      return;
    }

    enviarCambioEstatus(id, estatus, comentario);
  });

  document.getElementById('btnGuardarReferencia').addEventListener('click', () => {
    const seleccion = document.querySelector('input[name="referenciaATTT"]:checked')?.value;

    if (!seleccion) {
      Swal.fire('Selecciona una opción', 'Debes marcar una referencia antes de continuar.', 'info');
      return;
    }

    const { id, estatus, comentario } = estatusPendiente;
    enviarCambioEstatus(id, estatus, comentario, seleccion);
  });

  function enviarCambioEstatus(id, estatus, comentario, referenciaATTT = null) {
    fetch('../../backend/recruiter/actualizar_estatus.php', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        aspirante_id: id,
        estatus: estatus,
        comentario: comentario,
        referenciaATTT: referenciaATTT
      })
    })
    .then(res => res.text())
    .then(text => {
      console.log('📦 Texto recibido:', text);
      try {
        const data = JSON.parse(text);
        console.log('✅ JSON parseado:', data);
        if (data.success) {
          Swal.fire({
            icon: 'success',
            title: '¡Éxito!',
            text: 'Estatus actualizado con éxito'
          }).then(() => location.reload());
        } else {
          console.error('❌ Error en backend:', data.message);
          Swal.fire('Error al actualizar', data.message, 'error');
        }
      } catch (e) {
        console.error('❌ JSON inválido. Texto recibido:', text);
        Swal.fire('Respuesta inválida', 'El backend no respondió con un JSON válido. Revisa la consola.', 'error');
      }
    })
    .catch(err => {
      console.error('Error en fetch:', err);
      Swal.fire('Error de red', 'Ocurrió un error al actualizar el estatus.', 'error');
    });
  }
});
</script>
