// booking-form.js
document.addEventListener('DOMContentLoaded', () => {
  const form = document.getElementById('booking-form');
  const resultsEl = document.getElementById('form-results-booking');

  form.addEventListener('submit', async e => {
    e.preventDefault();

    // Mostrar "Sending..."
    resultsEl.textContent = 'Sending...';
    resultsEl.className = '';                 // limpia clases
    resultsEl.classList.remove('d-none');
    resultsEl.style.color = '#6c757d';        // opción gris para enviar
    resultsEl.style.backgroundColor = '#f1f3f5';

    const formData = new FormData(form);

    try {
      const resp = await fetch(form.action, {
        method: form.method,
        body: formData,
        headers: { 'Accept': 'application/json' }
      });
      const json = await resp.json();

      form.reset();

      // Mensaje de éxito
      resultsEl.textContent = json.message;
      resultsEl.className = 'success';
      resultsEl.classList.remove('d-none');

      // Desaparece tras 3s
      setTimeout(() => {
        resultsEl.classList.add('fade-out');
        resultsEl.addEventListener('transitionend', () => {
          resultsEl.classList.add('d-none');
          resultsEl.classList.remove('fade-out');
        }, { once: true });
      }, 3000);

    } catch (err) {
      console.error('Error sending booking form:', err);

      resultsEl.textContent = 'An error occurred. Please try again later.';
      resultsEl.className = '';
      resultsEl.style.color = '#721c24';
      resultsEl.style.backgroundColor = '#f8d7da';
      resultsEl.classList.remove('d-none');

      setTimeout(() => resultsEl.classList.add('d-none'), 5000);
    }
  });
});