andaquenosabesna/public/invitados.js

(function () {
  var $ = function (id) { return document.getElementById(id); };
  var P = new URLSearchParams(location.search), n = (P.get('n') || '').trim(), fe = (P.get('f') || '').trim(), k = n && fe ? n + fe : '';
  var f = $('g'), st = $('st'), hola = $('hola'), malo = $('malo'), intro = $('intro'), cita = $('cita'), paso = $('paso');
  var steps = Array.prototype.slice.call(f.querySelectorAll('fieldset.sec'));
  var cur = 0, t0 = Date.now(), busy = false, KEY = 'aqnsn-ficha-' + k.slice(0, 40);
  function say(m, ok) { st.textContent = m; st.className = 'status ' + (ok ? 'ok' : 'err'); }
  function store(op, v) { try { return op === 'get' ? localStorage.getItem(KEY) : op === 'set' ? localStorage.setItem(KEY, v) : localStorage.removeItem(KEY); } catch (e) { return null; } }
  var okMail = function (v) { return /^[^@\s]+@[^@\s]+\.[^@\s]{2,}$/.test(v); };
  if (!k) { malo.hidden = false; return; }

  function show(i) {
    cur = i;
    steps.forEach(function (s, j) { s.hidden = j !== i; });
    paso.textContent = 'Paso ' + (i + 1) + ' de ' + steps.length;
    say('', true);
    var top = hola.getBoundingClientRect().top + window.scrollY - 12;
    window.scrollTo({ top: Math.max(0, top), behavior: 'smooth' });
  }
  // valida los campos obligatorios del paso actual; devuelve true si todo está bien
  function validar(i) {
    var s = steps[i], els = s.querySelectorAll('input[required],textarea[required]');
    for (var j = 0; j < els.length; j++) {
      var el = els[j], bad = el.type === 'checkbox' ? !el.checked : !el.value.trim();
      if (bad) { el.focus(); say(el.type === 'checkbox' ? 'Marca las dos casillas finales para poder enviar la ficha.' : 'Faltan respuestas obligatorias (las marcadas con *).', false); return false; }
    }
    var m = s.querySelector('input[type=email]');
    if (m && !okMail(m.value.trim())) { m.focus(); say('El correo no parece válido.', false); return false; }
    return true;
  }
  f.addEventListener('click', function (e) {
    var b = e.target.closest && e.target.closest('button.next,button.prev');
    if (!b) return;
    if (b.classList.contains('prev')) show(cur - 1);
    else if (validar(cur)) show(cur + 1);
  });
  // Intro/Enter dentro de un campo de una sola línea avanza en vez de enviar a medias
  f.addEventListener('keydown', function (e) {
    if (e.key === 'Enter' && e.target.tagName === 'INPUT' && e.target.type !== 'checkbox' && cur < steps.length - 1) { e.preventDefault(); if (validar(cur)) show(cur + 1); }
  });

  fetch('/api/invitados/check?n=' + encodeURIComponent(n) + '&f=' + encodeURIComponent(fe), { cache: 'no-store' })
    .then(function (r) { return r.json(); })
    .then(function (j) {
      if (!j.ok) { malo.hidden = false; return; }
      hola.textContent = 'Hola, ' + j.nombre + '. ¡Gracias por querer venir al programa!';
      var d = new Date(j.cita * 1000), o = { timeZone: 'Europe/Madrid' };
      var dia = d.toLocaleDateString('es-ES', Object.assign({ weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }, o)).replace(',', '');
      var hora = d.toLocaleTimeString('es-ES', Object.assign({ hour: '2-digit', minute: '2-digit' }, o));
      cita.textContent = '📅 Recuerda que grabamos el ' + dia + ' a las ' + hora + ' (hora de Madrid), y te enviaremos por correo la dirección del estudio.';
      hola.hidden = false; cita.hidden = false; intro.hidden = false; f.hidden = false;
      try { var s = JSON.parse(store('get') || '{}'); Object.keys(s).forEach(function (nm) { if (f.elements[nm] && f.elements[nm].type !== 'checkbox') f.elements[nm].value = s[nm]; }); } catch (e) {}
      show(0);
      window.scrollTo(0, 0);
    })
    .catch(function () { malo.hidden = false; });

  var timer;
  f.addEventListener('input', function () {
    clearTimeout(timer);
    timer = setTimeout(function () {
      var d = {};
      Array.prototype.forEach.call(f.elements, function (el) { if (el.name && el.type !== 'checkbox' && el.name !== 'web' && el.value) d[el.name] = el.value; });
      store('set', JSON.stringify(d));
    }, 600);
  });

  f.addEventListener('submit', function (e) {
    e.preventDefault();
    if (busy) return;
    for (var i = 0; i < steps.length; i++) { if (!validar(i)) { if (i !== cur) show(i); return; } }
    var resp = {};
    Array.prototype.forEach.call(f.elements, function (el) { if (/^q\d+$/.test(el.name)) resp[el.name] = el.value.trim(); });
    busy = true; say('Enviando…', true);
    fetch('/api/invitados', { method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ n: n, f: fe, email: f.email.value.trim(), resp: resp, consent: true, web: f.web.value || '', t: Date.now() - t0 }) })
      .then(function (r) { return r.json().catch(function () { return {}; }).then(function (j) { return { ok: r.ok && j.ok, j: j }; }); })
      .then(function (x) {
        if (x.ok) { store('del'); f.reset(); steps.forEach(function (s) { s.hidden = true; }); paso.hidden = true; f.querySelector('.note:last-of-type').hidden = true; say(f.getAttribute('data-ok'), true); }
        else say((x.j && x.j.error) || 'No se pudo enviar. Escríbenos a andaquenosabesnada@gmail.com.', false);
      })
      .catch(function () { say('No se pudo enviar. Escríbenos a andaquenosabesnada@gmail.com.', false); })
      .then(function () { busy = false; });
  });
})();