Embed

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Réserver un massage – SenS</title>
  <style>
    :root {
      --bg: #f7f4ef;
      --card: #ffffff;
      --text: #2e2a25;
      --muted: #6e675f;
      --line: #ddd6cd;
      --accent: #8b5e3c;
      --accent-dark: #6f4a2d;
      --ok: #1d7a46;
      --error: #b33a3a;
      --shadow: 0 10px 30px rgba(0,0,0,0.08);
      --radius: 18px;
    }

    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      background: linear-gradient(180deg, #f7f4ef 0%, #f2ede6 100%);
      color: var(--text);
    }

    .wrap {
      max-width: 980px;
      margin: 0 auto;
      padding: 32px 18px 60px;
    }

    .hero {
      margin-bottom: 22px;
    }

    .hero h1 {
      margin: 0 0 8px;
      font-size: 34px;
      line-height: 1.15;
    }

    .hero p {
      margin: 0;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.55;
    }

    .grid {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 20px;
    }

    .card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 22px;
    }

    .section-title {
      margin: 0 0 16px;
      font-size: 20px;
    }

    .summary-title {
      margin: 0 0 10px;
      font-size: 24px;
    }

    .summary-desc {
      margin: 0 0 18px;
      color: var(--muted);
      line-height: 1.6;
    }

    .meta {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-bottom: 18px;
    }

    .meta-box {
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 12px;
      background: #faf8f5;
    }

    .meta-label {
      display: block;
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 6px;
    }

    .meta-value {
      font-size: 16px;
      font-weight: bold;
    }

    .field {
      margin-bottom: 14px;
    }

    .field label {
      display: block;
      margin-bottom: 7px;
      font-size: 14px;
      font-weight: bold;
    }

    .field input,
    .field textarea,
    .field select {
      width: 100%;
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: 12px;
      font-size: 15px;
      background: #fff;
      color: var(--text);
    }

    .field textarea {
      min-height: 92px;
      resize: vertical;
    }

    .slots {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
      gap: 10px;
      margin-top: 8px;
    }

    .slot-btn {
      border: 1px solid var(--line);
      background: #fff;
      color: var(--text);
      border-radius: 12px;
      padding: 12px 8px;
      cursor: pointer;
      font-size: 15px;
      transition: 0.2s ease;
    }

    .slot-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    .slot-btn.active {
      background: var(--accent);
      border-color: var(--accent);
      color: #fff;
      font-weight: bold;
    }

    .btn {
      width: 100%;
      border: 0;
      background: var(--accent);
      color: #fff;
      border-radius: 14px;
      padding: 14px 18px;
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
      transition: 0.2s ease;
    }

    .btn:hover { background: var(--accent-dark); }
    .btn:disabled {
      background: #b5a89c;
      cursor: not-allowed;
    }

    .info,
    .error,
    .success {
      border-radius: 12px;
      padding: 12px 14px;
      margin-bottom: 14px;
      font-size: 14px;
      line-height: 1.5;
      display: none;
    }

    .info {
      background: #f3f0ea;
      border: 1px solid var(--line);
      color: var(--muted);
    }

    .error {
      background: #fff1f1;
      border: 1px solid #f0caca;
      color: var(--error);
    }

    .success {
      background: #eef9f2;
      border: 1px solid #c6e8d1;
      color: var(--ok);
    }

    .small {
      color: var(--muted);
      font-size: 13px;
      margin-top: 8px;
      line-height: 1.5;
    }

    .loading {
      opacity: 0.7;
      pointer-events: none;
    }

    @media (max-width: 860px) {
      .grid {
        grid-template-columns: 1fr;
      }

      .meta {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="hero">
      <h1>Réserver votre séance</h1>
      <p>Choisissez une date, un créneau disponible, puis renseignez vos coordonnées pour confirmer votre réservation.</p>
    </div>

    <div class="grid">
      <section class="card">
        <h2 class="summary-title" id="massageTitle">Chargement…</h2>
        <p class="summary-desc" id="massageDescription">Veuillez patienter pendant le chargement de la prestation.</p>

        <div class="meta">
          <div class="meta-box">
            <span class="meta-label">Type</span>
            <span class="meta-value" id="massageType">—</span>
          </div>
          <div class="meta-box">
            <span class="meta-label">Durée</span>
            <span class="meta-value" id="massageDuration">—</span>
          </div>
          <div class="meta-box">
            <span class="meta-label">Tarif</span>
            <span class="meta-value" id="massagePrice">—</span>
          </div>
        </div>

        <div class="info" id="infoBox"></div>
        <div class="error" id="errorBox"></div>
        <div class="success" id="successBox"></div>

        <div class="field">
          <label for="dateReservation">Date souhaitée</label>
          <input type="date" id="dateReservation" />
        </div>

        <div class="field">
          <label>Créneaux disponibles</label>
          <div id="slotsContainer" class="slots"></div>
          <div class="small">Les créneaux affichés tiennent compte des indisponibilités déjà présentes dans votre agenda.</div>
        </div>
      </section>

      <section class="card">
        <h2 class="section-title">Vos coordonnées</h2>

        <form id="reservationForm">
          <div class="field">
            <label for="prenom">Prénom</label>
            <input type="text" id="prenom" required />
          </div>

          <div class="field">
            <label for="nom">Nom</label>
            <input type="text" id="nom" required />
          </div>

          <div class="field">
            <label for="telephone">Téléphone</label>
            <input type="tel" id="telephone" required />
          </div>

          <div class="field">
            <label for="email">Email</label>
            <input type="email" id="email" required />
          </div>

          <div class="field">
            <label for="commentaire">Commentaire</label>
            <textarea id="commentaire" placeholder="Précision utile, demande particulière, première séance, etc."></textarea>
          </div>

          <button type="submit" class="btn" id="submitBtn" disabled>Confirmer la réservation</button>
          <p class="small">En validant, vous demandez la réservation du créneau sélectionné. Une confirmation s’affichera immédiatement si tout est OK.</p>
        </form>
      </section>
    </div>
  </div>

  <script>
// =========================
// CONFIGURATION
// =========================
const API_URL = 'https://script.google.com/macros/s/AKfycbyblsP2OMQ_NZdG6QprtWwKNStxPDO0aFESz-fFfUz_K05KsvSyYokZ3pGu96jcnc9e/exec';

// Paramètre URL
const params = new URLSearchParams(window.location.search);
const codeWeb = params.get('codeWeb') || 'm6s-court';

let selectedSlot = null;
let loadedMassage = null;

// =========================
// ELEMENTS DOM
// =========================
const els = {
  title: document.getElementById('massageTitle'),
  desc: document.getElementById('massageDescription'),
  type: document.getElementById('massageType'),
  duration: document.getElementById('massageDuration'),
  price: document.getElementById('massagePrice'),
  date: document.getElementById('dateReservation'),
  slots: document.getElementById('slotsContainer'),
  form: document.getElementById('reservationForm'),
  submit: document.getElementById('submitBtn'),
  info: document.getElementById('infoBox'),
  error: document.getElementById('errorBox'),
  success: document.getElementById('successBox'),
  prenom: document.getElementById('prenom'),
  nom: document.getElementById('nom'),
  telephone: document.getElementById('telephone'),
  email: document.getElementById('email'),
  commentaire: document.getElementById('commentaire'),
};

// =========================
// UI HELPERS
// =========================
function showBox(el, message) {
  el.style.display = 'block';
  el.textContent = message;
}

function hideBox(el) {
  el.style.display = 'none';
  el.textContent = '';
}

function clearMessages() {
  hideBox(els.info);
  hideBox(els.error);
  hideBox(els.success);
}

function setLoading(isLoading) {
  document.body.classList.toggle('loading', isLoading);
  els.submit.disabled = isLoading || !selectedSlot;
}

// =========================
// DATE HELPERS
// =========================
function getMinDate() {
  const now = new Date();
  now.setDate(now.getDate() + 1);
  return now.toISOString().split('T')[0];
}

function getMaxDate() {
  const now = new Date();
  now.setDate(now.getDate() + 60);
  return now.toISOString().split('T')[0];
}

// =========================
// API
// =========================
async function apiGet(action, extraParams = {}) {
  const url = new URL(API_URL);
  url.searchParams.set('action', action);

  Object.entries(extraParams).forEach(([key, value]) => {
    url.searchParams.set(key, value);
  });

  const response = await fetch(url.toString(), { method: 'GET' });
  return response.json();
}

async function apiPost(payload) {
  const response = await fetch(API_URL, {
    method: 'POST',
    headers: { 'Content-Type': 'text/plain;charset=utf-8' },
    body: JSON.stringify(payload),
  });

  return response.json();
}

// =========================
// RENDER
// =========================
function renderMassage(massage) {
  if (!massage) return;

  loadedMassage = massage;
  els.title.textContent = massage.nomMassage || 'Prestation';
  els.desc.textContent = massage.descriptionCourte || 'Aucune description disponible.';
  els.type.textContent = massage.typePrestation || '—';
  els.duration.textContent = massage.dureeMinutes ? `${massage.dureeMinutes} min` : '—';
  els.price.textContent = typeof massage.tarif !== 'undefined' ? `${massage.tarif} €` : '—';
}

function renderSlots(slots) {
  els.slots.innerHTML = '';
  selectedSlot = null;
  els.submit.disabled = true;

  if (!slots || slots.length === 0) {
    showBox(els.info, 'Aucun créneau disponible pour cette date.');
    return;
  }

  hideBox(els.info);

  slots.forEach(slot => {
    const button = document.createElement('button');
    button.type = 'button';
    button.className = 'slot-btn';
    button.textContent = slot;

    button.addEventListener('click', () => {
      document.querySelectorAll('.slot-btn').forEach(btn => btn.classList.remove('active'));
      button.classList.add('active');
      selectedSlot = slot;
      els.submit.disabled = false;
      hideBox(els.error);
    });

    els.slots.appendChild(button);
  });
}

// =========================
// LOAD DATA
// =========================
async function loadMassage(retryCount = 0) {
  clearMessages();
  showBox(els.info, 'Chargement de la prestation…');
  setLoading(true);

  try {
    const result = await apiGet('getMassage', { codeWeb });

    if (!result.success || !result.massage) {
      throw new Error(result.message || 'Impossible de charger la prestation.');
    }

    renderMassage(result.massage);
    hideBox(els.info);
  } catch (error) {
    if (retryCount < 2) {
      await new Promise(resolve => setTimeout(resolve, 800));
      return loadMassage(retryCount + 1);
    }

    showBox(els.error, error.message || 'Erreur lors du chargement.');
  } finally {
    setLoading(false);
  }
}

async function loadSlotsForDate(retryCount = 0) {
  clearMessages();
  selectedSlot = null;
  els.submit.disabled = true;
  els.slots.innerHTML = '';

  const date = els.date.value;
  if (!date) return;

  showBox(els.info, 'Recherche des créneaux…');
  setLoading(true);

  try {
    const result = await apiGet('getSlots', { codeWeb, date });

    if (!result.success) {
      showBox(els.info, result.message || 'Aucun créneau disponible.');
      return;
    }

    renderSlots(result.slots);
    hideBox(els.info);
  } catch (error) {
    if (retryCount < 2) {
      await new Promise(resolve => setTimeout(resolve, 800));
      return loadSlotsForDate(retryCount + 1);
    }

    showBox(els.error, error.message || 'Erreur chargement créneaux.');
  } finally {
    setLoading(false);
  }
}

// =========================
// SUBMIT
// =========================
async function handleSubmit(event) {
  event.preventDefault();
  clearMessages();

  if (!els.date.value) {
    showBox(els.error, 'Choisissez une date.');
    return;
  }

  if (!selectedSlot) {
    showBox(els.error, 'Choisissez un créneau.');
    return;
  }

  const payload = {
    action: 'createReservation',
    codeWeb,
    date: els.date.value,
    heureDebut: selectedSlot,
    client: {
      prenom: els.prenom.value.trim(),
      nom: els.nom.value.trim(),
      telephone: els.telephone.value.trim(),
      email: els.email.value.trim(),
      commentaire: els.commentaire.value.trim(),
    },
  };

  setLoading(true);

  try {
    const result = await apiPost(payload);

    if (!result.success) {
      throw new Error(result.message || 'Erreur réservation.');
    }

    showBox(
      els.success,
      `Réservation confirmée le ${result.reservation.date} à ${result.reservation.heureDebut}`
    );

    els.form.reset();
    selectedSlot = null;
    els.submit.disabled = true;
    els.slots.innerHTML = '';
  } catch (error) {
    showBox(els.error, error.message || 'Erreur.');
  } finally {
    setLoading(false);
  }
}

// =========================
// INIT (IMPORTANT POUR DURABLE)
// =========================
let hasInitialized = false;

function init() {
  if (hasInitialized) return;
  hasInitialized = true;

  els.date.min = getMinDate();
  els.date.max = getMaxDate();
  els.date.addEventListener('change', loadSlotsForDate);
  els.form.addEventListener('submit', handleSubmit);
  loadMassage();
}

function bootReservationPage() {
  setTimeout(() => {
    init();
  }, 500);
}

if (document.readyState === 'complete' || document.readyState === 'interactive') {
  bootReservationPage();
} else {
  document.addEventListener('DOMContentLoaded', bootReservationPage, { once: true });
  window.addEventListener('load', bootReservationPage, { once: true });
}

// Filet de sécurité pour les embeds / chargements tardifs Durable
setTimeout(() => {
  init();
}, 1500);
</script>
</body>
</html>

Synergies en Soi

Offrez-vous une expérience de profonde relaxation avec un expert du massage énergétique, spécialisé en Médecine Traditionnelle Chinoise (MTC). 

Synergies en Soi, prend soin de votre équilibre et veille à l'harmonie de votre corps et de votre esprit.

Découvrez les bienfaits d'un massage énergétique chez Synergies en Soi et offrez-vous un moment de détente et de régénération.