nodebb-plugin-onekite-calendar 1.0.0

package/public/client.js

@@ -0,0 +1,1801 @@
+/* global FullCalendar, ajaxify */
+
+define('forum/calendar-onekite', ['alerts', 'bootbox', 'hooks'], function (alerts, bootbox, hooks) {
+  'use strict';
+
+  // Ensure small UI tweaks are applied even when themes override bootstrap defaults.
+  (function ensureOneKiteStyles() {
+    try {
+      if (document.getElementById('onekite-inline-styles')) return;
+      const style = document.createElement('style');
+      style.id = 'onekite-inline-styles';
+      style.textContent = `
+        /* Fix clipped time text in selects on desktop */
+        .onekite-time-select.form-select {
+          min-height: 38px;
+          padding-top: .375rem;
+          padding-bottom: .375rem;
+          line-height: 1.25;
+          font-size: 0.95rem;
+          width: 100%;
+          max-width: 100%;
+          box-sizing: border-box;
+          padding-right: 1.75rem; /* leave room for caret */
+          min-width: 0;
+          text-overflow: clip;
+          white-space: nowrap;
+        }
+      `;
+      document.head.appendChild(style);
+    } catch (e) {
+      // ignore
+    }
+  })();
+
+  // Prevent the reservation dialog from opening twice due to select/dateClick
+  // interactions or quick re-renders.
+  let isDialogOpen = false;
+
+  function escapeHtml(str) {
+    return String(str)
+      .replace(/&/g, '&')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#39;');
+  }
+
+  function pad2(n) { return String(n).padStart(2, '0'); }
+
+  function toDateInputValue(d) {
+    const dt = (d instanceof Date) ? d : new Date(d);
+    return `${dt.getFullYear()}-${pad2(dt.getMonth() + 1)}-${pad2(dt.getDate())}`;
+  }
+
+  function roundTo5Minutes(dt) {
+    const d = new Date(dt);
+    const m = d.getMinutes();
+    const rounded = Math.round(m / 5) * 5;
+    d.setMinutes(rounded, 0, 0);
+    return d;
+  }
+
+  function timeString(dt) {
+    const d = (dt instanceof Date) ? dt : new Date(dt);
+    return `${pad2(d.getHours())}:${pad2(d.getMinutes())}`;
+  }
+
+  // Build an ISO datetime *with timezone* from local date/time inputs.
+  // This avoids ambiguity when the server runs in UTC and prevents
+  // "single-day" events (07:00→23:59 local) from spilling into the next day
+  // when rendered back to the browser.
+  function buildLocalIso(dateStr, timeStr) {
+    try {
+      const d = new Date(`${dateStr}T${timeStr}`);
+      return d.toISOString();
+    } catch (e) {
+      return `${dateStr}T${timeStr}`;
+    }
+  }
+
+  function seTimeOptions(selected, include2359) {
+    const opts = [];
+    for (let h = 7; h < 24; h++) {
+      for (let m = 0; m < 60; m += 5) {
+        const t = `${pad2(h)}:${pad2(m)}`;
+        opts.push(`<option value="${t}" ${t === selected ? 'selected' : ''}>${t}</option>`);
+      }
+    }
+    if (include2359) {
+      const t = '23:59';
+      opts.push(`<option value="${t}" ${t === selected ? 'selected' : ''}>${t}</option>`);
+    }
+    return opts.join('');
+  }
+
+  async function openSpecialEventDialog(selectionInfo) {
+    const start = selectionInfo.start;
+    // FullCalendar can omit `end` for certain interactions. Also, for all-day
+    // selections, `end` is exclusive (next day at 00:00). We normalise below
+    // so a single-day click always defaults to a single-day range.
+    const end = selectionInfo.end;
+
+    // Prefer event times starting at 07:00 for day-clicks (all-day selections).
+    let seStart = new Date(start);
+    // If `end` is missing, start with the same day.
+    let seEnd = end ? new Date(end) : new Date(seStart);
+
+    const msSpan = seEnd.getTime() - seStart.getTime();
+    const isAllDaySelection = selectionInfo && (selectionInfo.allDay || (
+      seStart.getHours() === 0 && seStart.getMinutes() === 0 &&
+      seEnd.getHours() === 0 && seEnd.getMinutes() === 0
+    ));
+
+    // For all-day selections, the simplest robust check is:
+    // does (end - 1ms) fall on the same calendar day as start?
+    const endMinus1 = isAllDaySelection ? new Date(seEnd.getTime() - 1) : null;
+    const isSingleDayAllDay = isAllDaySelection && (!end || (endMinus1 && toDateInputValue(seStart) === toDateInputValue(endMinus1)));
+
+    if (isSingleDayAllDay) {
+      // Keep same day; default to a "one day" block (07:00 → 07:00).
+      // We keep end date equal to start date in the modal. On submit,
+      // if end <= start we automatically roll end by +1 day.
+      seStart.setHours(7, 0, 0, 0);
+      seEnd = new Date(seStart);
+      seEnd.setHours(7, 0, 0, 0);
+    } else if (isAllDaySelection) {
+      // Multi-day all-day selection: start at 07:00 on first day, end at 07:00 on last day
+      // (end date shown is the last selected day; submit logic will roll if needed).
+      seStart.setHours(7, 0, 0, 0);
+      const lastDay = endMinus1 ? new Date(endMinus1) : new Date(seEnd);
+      seEnd = new Date(lastDay);
+      seEnd.setHours(7, 0, 0, 0);
+    } else {
+      seStart = roundTo5Minutes(seStart);
+      seEnd = roundTo5Minutes(seEnd);
+      if (seStart.getHours() < 7) {
+        seStart.setHours(7, 0, 0, 0);
+        if (seEnd <= seStart) {
+          seEnd = new Date(seStart);
+          seEnd.setHours(8, 0, 0, 0);
+        }
+      }
+    }
+
+    const seStartTime = timeString(seStart);
+    const seEndTime = timeString(seEnd);
+    const html = `
+      <div class="mb-3">
+        <label class="form-label">Titre</label>
+        <input type="text" class="form-control" id="onekite-se-title" placeholder="Ex: ..." />
+      </div>
+      <div class="row g-2">
+        <div class="col-12 col-md-6">
+          <label class="form-label">Début</label>
+          <div class="row g-2 align-items-end">
+            <div class="col-12 col-sm-7">
+              <input type="date" class="form-control" id="onekite-se-start-date" value="${escapeHtml(toDateInputValue(seStart))}" />
+            </div>
+            <div class="col-12 col-sm-5">
+              <select class="form-select onekite-time-select" id="onekite-se-start-time">${seTimeOptions(seStartTime, false)}</select>
+            </div>
+          </div>
+        </div>
+        <div class="col-12 col-md-6">
+          <label class="form-label">Fin</label>
+          <div class="row g-2 align-items-end">
+            <div class="col-12 col-sm-7">
+              <input type="date" class="form-control" id="onekite-se-end-date" value="${escapeHtml(toDateInputValue(seEnd))}" />
+            </div>
+            <div class="col-12 col-sm-5">
+              <select class="form-select onekite-time-select" id="onekite-se-end-time">${seTimeOptions(seEndTime, true)}</select>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="mt-3">
+        <label class="form-label">Adresse</label>
+        <div class="input-group">
+          <input type="text" class="form-control" id="onekite-se-address" placeholder="Adresse complète" />
+          <button class="btn btn-outline-secondary" type="button" id="onekite-se-geocode">Rechercher</button>
+        </div>
+        <div id="onekite-se-map" style="height:220px; border:1px solid #ddd; border-radius:6px; margin-top:0.5rem;"></div>
+        <input type="hidden" id="onekite-se-lat" />
+        <input type="hidden" id="onekite-se-lon" />
+      </div>
+      <div class="mt-3">
+        <label class="form-label">Notes (facultatif)</label>
+        <textarea class="form-control" id="onekite-se-notes" rows="3" placeholder="..."></textarea>
+      </div>
+    `;
+
+    return await new Promise((resolve) => {
+      let resolved = false;
+      const dialog = bootbox.dialog({
+        title: 'Créer un évènement',
+        message: html,
+        buttons: {
+          cancel: {
+            label: 'Annuler',
+            className: 'btn-secondary',
+            callback: () => {
+              resolved = true;
+              resolve(null);
+            },
+          },
+          ok: {
+            label: 'Créer',
+            className: 'btn-primary',
+            callback: () => {
+              const title = (document.getElementById('onekite-se-title')?.value || '').trim();
+              const sd = (document.getElementById('onekite-se-start-date')?.value || '').trim();
+              const st = (document.getElementById('onekite-se-start-time')?.value || '').trim();
+              const ed = (document.getElementById('onekite-se-end-date')?.value || '').trim();
+              const et = (document.getElementById('onekite-se-end-time')?.value || '').trim();
+              // If the user keeps the same day but chooses an end time earlier than
+              // (or equal to) the start time (default 07:00 → 07:00), interpret
+              // it as an overnight/24h range and roll the end date by +1 day.
+              let startVal = '';
+              let endVal = '';
+              try {
+                if (sd && st) {
+                  const startDt = new Date(`${sd}T${st}`);
+                  startVal = startDt.toISOString();
+                  if (ed && et) {
+                    let endDt = new Date(`${ed}T${et}`);
+                    if (!isNaN(startDt) && !isNaN(endDt) && endDt.getTime() <= startDt.getTime()) {
+                      // Only auto-roll when user kept the same end date.
+                      if (ed === sd) {
+                        endDt = new Date(endDt.getTime() + 24 * 60 * 60 * 1000);
+                      }
+                    }
+                    endVal = endDt.toISOString();
+                  }
+                }
+              } catch (e) {
+                startVal = (sd && st) ? buildLocalIso(sd, st) : '';
+                endVal = (ed && et) ? buildLocalIso(ed, et) : '';
+              }
+              const address = (document.getElementById('onekite-se-address')?.value || '').trim();
+              const notes = (document.getElementById('onekite-se-notes')?.value || '').trim();
+              const lat = (document.getElementById('onekite-se-lat')?.value || '').trim();
+              const lon = (document.getElementById('onekite-se-lon')?.value || '').trim();
+              resolved = true;
+              resolve({ title, start: startVal, end: endVal, address, notes, lat, lon });
+              return true;
+            },
+          },
+        },
+      });
+
+      // If the modal is closed via ESC, backdrop click, or the "X" button,
+      // Bootbox does not trigger our cancel callback. Ensure we always resolve
+      // and release the global lock.
+      try {
+        dialog.on('hidden.bs.modal', () => {
+          if (resolved) return;
+          resolved = true;
+          resolve(null);
+        });
+      } catch (e) {
+        // ignore
+      }
+
+      // init leaflet
+      dialog.on('shown.bs.modal', () => {
+      setTimeout(async () => {
+
+        try {
+          const mapEl = document.getElementById('onekite-se-map');
+          if (!mapEl) return;
+          const L = await loadLeaflet();
+          const map = L.map(mapEl).setView([46.5, 2.5], 5);
+          L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '&copy; OpenStreetMap' }).addTo(map);
+          setTimeout(() => { try { map.invalidateSize(); } catch (e) {} }, 100);
+          let marker = null;
+          function setMarker(lat, lon) {
+            if (marker) map.removeLayer(marker);
+            marker = L.marker([lat, lon], { draggable: true }).addTo(map);
+            marker.on('dragend', () => {
+              const p = marker.getLatLng();
+              document.getElementById('onekite-se-lat').value = String(p.lat);
+              document.getElementById('onekite-se-lon').value = String(p.lng);
+            });
+            document.getElementById('onekite-se-lat').value = String(lat);
+            document.getElementById('onekite-se-lon').value = String(lon);
+            map.setView([lat, lon], 14);
+          }
+          const geocodeBtn = document.getElementById('onekite-se-geocode');
+          const addrInput = document.getElementById('onekite-se-address');
+          try {
+            attachAddressAutocomplete(addrInput, (h) => {
+              if (h && Number.isFinite(h.lat) && Number.isFinite(h.lon)) {
+                setMarker(h.lat, h.lon);
+              }
+            });
+          } catch (e) {}
+          geocodeBtn?.addEventListener('click', async () => {
+            const q = (addrInput?.value || '').trim();
+            if (!q) return;
+            const hit = await geocodeAddress(q);
+            if (hit && hit.lat && hit.lon) {
+              setMarker(hit.lat, hit.lon);
+            } else {
+              showAlert('error', 'Adresse introuvable.');
+            }
+          });
+        } catch (e) {
+          // ignore leaflet errors
+        }
+            }, 50);
+    });
+    });
+  }
+
+  async function openMapViewer(title, address, lat, lon) {
+    const mapId = `onekite-map-view-${Date.now()}-${Math.floor(Math.random()*10000)}`;
+    const safeAddr = (address || '').trim();
+    const html = `
+      ${safeAddr ? `<div class="mb-2">${escapeHtml(safeAddr)}</div>` : ''}
+      <div id="${mapId}" style="height:260px; border:1px solid #ddd; border-radius:6px;"></div>
+    `;
+    const dialog = bootbox.dialog({
+      title: title || 'Carte',
+      message: html,
+      buttons: { close: { label: 'Fermer', className: 'btn-secondary' } },
+    });
+    dialog.on('shown.bs.modal', () => {
+    setTimeout(async () => {
+
+      try {
+        const el = document.getElementById(mapId);
+        if (!el) return;
+        const L = await loadLeaflet();
+        const map = L.map(el);
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '&copy; OpenStreetMap' }).addTo(map);
+          setTimeout(() => { try { map.invalidateSize(); } catch (e) {} }, 100);
+
+        async function setAt(lat2, lon2) {
+          map.setView([lat2, lon2], 14);
+          L.marker([lat2, lon2]).addTo(map);
+        }
+
+        const hasCoords = Number.isFinite(lat) && Number.isFinite(lon);
+        if (hasCoords) {
+          await setAt(lat, lon);
+          return;
+        }
+        if (safeAddr) {
+          const hit = await geocodeAddress(safeAddr);
+          if (hit && hit.lat && hit.lon) {
+            await setAt(hit.lat, hit.lon);
+            return;
+          }
+        }
+        map.setView([46.5, 2.5], 5);
+      } catch (e) {
+        // ignore leaflet errors
+      }
+        }, 50);
+  });
+  }
+
+  // Click handler for map links in popups
+  document.addEventListener('click', (ev) => {
+    const a = ev.target && ev.target.closest ? ev.target.closest('a.onekite-map-link') : null;
+    if (!a) return;
+    ev.preventDefault();
+    const addr = a.getAttribute('data-address') || a.textContent || '';
+    const lat = parseFloat(a.getAttribute('data-lat'));
+    const lon = parseFloat(a.getAttribute('data-lon'));
+    openMapViewer('Adresse', addr, lat, lon);
+  });
+  // Close any open Bootbox modal when navigating to a user profile from within a modal
+  document.addEventListener('click', (ev) => {
+    const a = ev.target && ev.target.closest ? ev.target.closest('a.onekite-user-link') : null;
+    if (!a) return;
+    const inModal = !!(a.closest && a.closest('.modal, .bootbox'));
+    if (!inModal) return;
+    const href = a.getAttribute('href');
+    if (!href) return;
+    ev.preventDefault();
+    try { bootbox.hideAll(); } catch (e) {}
+    setTimeout(() => { window.location.href = href; }, 50);
+  });
+
+
+
+  function statusLabel(s) {
+    const map = {
+      pending: 'En attente',
+      awaiting_payment: 'Validée – paiement en attente',
+      paid: 'Payée',
+      rejected: 'Rejetée',
+      expired: 'Expirée',
+    };
+    return map[String(s || '')] || String(s || '');
+  }
+
+  function showAlert(type, msg) {
+    try {
+      if (alerts && typeof alerts[type] === 'function') {
+        alerts[type](msg);
+        return;
+      }
+    } catch (e) {}
+    alert(msg);
+  }
+
+  async function fetchJson(url, opts) {
+    const res = await fetch(url, {
+      credentials: 'same-origin',
+      headers: (() => {
+        const headers = { 'Content-Type': 'application/json' };
+        const token =
+          (window.config && (window.config.csrf_token || window.config.csrfToken)) ||
+          (window.ajaxify && window.ajaxify.data && window.ajaxify.data.csrf_token) ||
+          (document.querySelector('meta[name="csrf-token"]') && document.querySelector('meta[name="csrf-token"]').getAttribute('content')) ||
+          (document.querySelector('meta[name="csrf_token"]') && document.querySelector('meta[name="csrf_token"]').getAttribute('content')) ||
+          (typeof app !== 'undefined' && app && app.csrfToken) ||
+          null;
+        if (token) headers['x-csrf-token'] = token;
+        return headers;
+      })(),
+      ...opts,
+    });
+    if (!res.ok) {
+      let payload = null;
+      try { payload = await res.json(); } catch (e) {}
+      const err = new Error(`${res.status}`);
+      err.status = res.status;
+      err.payload = payload;
+      throw err;
+    }
+    return await res.json();
+  }
+
+  // Simple in-memory cache for JSON endpoints (used for events prefetch + ETag).
+  const jsonCache = new Map(); // url -> { etag, data, ts }
+
+  function scheduleRefetch(cal) {
+    try {
+      if (!cal || typeof cal.refetchEvents !== 'function') return;
+      clearTimeout(window.__onekiteRefetchTimer);
+      window.__onekiteRefetchTimer = setTimeout(() => {
+        try { cal.refetchEvents(); } catch (e) {}
+      }, 150);
+    } catch (e) {}
+  }
+
+  async function fetchJsonCached(url, opts) {
+    const cached = jsonCache.get(url);
+    const headers = Object.assign({}, (opts && opts.headers) || {});
+    if (cached && cached.etag) {
+      headers['If-None-Match'] = cached.etag;
+    }
+    let res;
+    try {
+      res = await fetch(url, {
+        credentials: 'same-origin',
+        headers: (() => {
+          // reuse csrf header builder (fetchJson) by calling it indirectly
+          const base = { 'Content-Type': 'application/json' };
+          const token =
+            (window.config && (window.config.csrf_token || window.config.csrfToken)) ||
+            (window.ajaxify && window.ajaxify.data && window.ajaxify.data.csrf_token) ||
+            (document.querySelector('meta[name="csrf-token"]') && document.querySelector('meta[name="csrf-token"]').getAttribute('content')) ||
+            (document.querySelector('meta[name="csrf_token"]') && document.querySelector('meta[name="csrf_token"]').getAttribute('content')) ||
+            (typeof app !== 'undefined' && app && app.csrfToken) ||
+            null;
+          if (token) base['x-csrf-token'] = token;
+          return Object.assign(base, headers);
+        })(),
+        ...opts,
+      });
+    } catch (e) {
+      // If offline and we have cache, use it.
+      if (cached && cached.data) return cached.data;
+      throw e;
+    }
+
+    if (res.status === 304 && cached && cached.data) {
+      return cached.data;
+    }
+
+    if (!res.ok) {
+      let payload = null;
+      try { payload = await res.json(); } catch (e) {}
+      const err = new Error(`${res.status}`);
+      err.status = res.status;
+      err.payload = payload;
+      throw err;
+    }
+
+    const data = await res.json();
+    const etag = res.headers.get('ETag') || '';
+    jsonCache.set(url, { etag, data, ts: Date.now() });
+    return data;
+  }
+
+  async function loadCapabilities() {
+    return await fetchJson('/api/v3/plugins/calendar-onekite/capabilities');
+  }
+
+  // Leaflet (OpenStreetMap) helpers - loaded lazily only when needed.
+  let leafletPromise = null;
+  function loadLeaflet() {
+    if (leafletPromise) return leafletPromise;
+    leafletPromise = new Promise((resolve, reject) => {
+      try {
+        if (window.L && window.L.map) {
+          resolve(window.L);
+          return;
+        }
+
+        const cssId = 'onekite-leaflet-css';
+        const jsId = 'onekite-leaflet-js';
+
+        if (!document.getElementById(cssId)) {
+          const link = document.createElement('link');
+          link.id = cssId;
+          link.rel = 'stylesheet';
+          link.href = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css';
+          document.head.appendChild(link);
+        }
+
+        const existing = document.getElementById(jsId);
+        if (existing) {
+          existing.addEventListener('load', () => resolve(window.L));
+          existing.addEventListener('error', () => reject(new Error('leaflet-load-failed')));
+          return;
+        }
+
+        const script = document.createElement('script');
+        script.id = jsId;
+        script.async = true;
+        script.src = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js';
+        script.onload = () => resolve(window.L);
+        script.onerror = () => reject(new Error('leaflet-load-failed'));
+        document.head.appendChild(script);
+      } catch (e) {
+        reject(e);
+      }
+    });
+    return leafletPromise;
+  }
+
+  async function geocodeAddress(query) {
+    const q = String(query || '').trim();
+    if (!q) return null;
+    const url = `https://nominatim.openstreetmap.org/search?format=jsonv2&limit=1&q=${encodeURIComponent(q)}`;
+    const res = await fetch(url, {
+      method: 'GET',
+      headers: {
+        'Accept': 'application/json',
+        'Accept-Language': 'fr',
+      },
+    });
+    if (!res.ok) return null;
+    const arr = await res.json();
+    if (!Array.isArray(arr) || !arr.length) return null;
+    const hit = arr[0];
+    const lat = Number(hit.lat);
+    const lon = Number(hit.lon);
+    if (!Number.isFinite(lat) || !Number.isFinite(lon)) return null;
+    return { lat, lon, displayName: hit.display_name || q };
+  }
+
+async function searchAddresses(query, limit) {
+  const q = String(query || '').trim();
+  const lim = Math.min(10, Math.max(1, Number(limit) || 5));
+  if (q.length < 3) return [];
+  const url = `https://nominatim.openstreetmap.org/search?format=jsonv2&addressdetails=1&limit=${lim}&q=${encodeURIComponent(q)}`;
+  const res = await fetch(url, {
+    method: 'GET',
+    headers: {
+      'Accept': 'application/json',
+      'Accept-Language': 'fr',
+    },
+  });
+  if (!res.ok) return [];
+  const arr = await res.json();
+  if (!Array.isArray(arr)) return [];
+  return arr.map((hit) => {
+    const lat = Number(hit.lat);
+    const lon = Number(hit.lon);
+    return {
+      displayName: hit.display_name || q,
+      lat: Number.isFinite(lat) ? lat : null,
+      lon: Number.isFinite(lon) ? lon : null,
+    };
+  }).filter(h => h && h.displayName);
+}
+
+function attachAddressAutocomplete(inputEl, onPick) {
+  if (!inputEl) return;
+  // Avoid double attach
+  if (inputEl.getAttribute('data-onekite-autocomplete') === '1') return;
+  inputEl.setAttribute('data-onekite-autocomplete', '1');
+
+  const wrapper = document.createElement('div');
+  wrapper.style.position = 'relative';
+  inputEl.parentNode && inputEl.parentNode.insertBefore(wrapper, inputEl);
+  wrapper.appendChild(inputEl);
+
+  const menu = document.createElement('div');
+  menu.className = 'onekite-autocomplete-menu';
+  menu.style.position = 'absolute';
+  menu.style.left = '0';
+  menu.style.right = '0';
+  menu.style.top = '100%';
+  menu.style.zIndex = '2000';
+  menu.style.background = '#fff';
+  menu.style.border = '1px solid rgba(0,0,0,.15)';
+  menu.style.borderTop = '0';
+  menu.style.maxHeight = '220px';
+  menu.style.overflowY = 'auto';
+  menu.style.display = 'none';
+  menu.style.borderRadius = '0 0 .375rem .375rem';
+  wrapper.appendChild(menu);
+
+  let timer = null;
+  let lastQuery = '';
+  let busy = false;
+
+  function hide() {
+    menu.style.display = 'none';
+    menu.innerHTML = '';
+  }
+
+  function show(hits) {
+    if (!hits || !hits.length) {
+      hide();
+      return;
+    }
+    menu.innerHTML = '';
+    hits.forEach((h) => {
+      const btn = document.createElement('button');
+      btn.type = 'button';
+      btn.className = 'onekite-autocomplete-item';
+      btn.textContent = h.displayName;
+      btn.style.display = 'block';
+      btn.style.width = '100%';
+      btn.style.textAlign = 'left';
+      btn.style.padding = '.35rem .5rem';
+      btn.style.border = '0';
+      btn.style.background = 'transparent';
+      btn.style.cursor = 'pointer';
+      btn.addEventListener('click', () => {
+        inputEl.value = h.displayName;
+        hide();
+        try { onPick && onPick(h); } catch (e) {}
+      });
+      btn.addEventListener('mouseenter', () => { btn.style.background = 'rgba(0,0,0,.05)'; });
+      btn.addEventListener('mouseleave', () => { btn.style.background = 'transparent'; });
+      menu.appendChild(btn);
+    });
+    menu.style.display = 'block';
+  }
+
+  async function run(q) {
+    if (busy) return;
+    busy = true;
+    try {
+      const hits = await searchAddresses(q, 6);
+      // Don't show stale results
+      if (String(inputEl.value || '').trim() !== q) return;
+      show(hits);
+    } catch (e) {
+      hide();
+    } finally {
+      busy = false;
+    }
+  }
+
+  inputEl.addEventListener('input', () => {
+    const q = String(inputEl.value || '').trim();
+    lastQuery = q;
+    if (timer) clearTimeout(timer);
+    if (q.length < 3) {
+      hide();
+      return;
+    }
+    timer = setTimeout(() => run(lastQuery), 250);
+  });
+
+  inputEl.addEventListener('focus', () => {
+    const q = String(inputEl.value || '').trim();
+    if (q.length >= 3) {
+      if (timer) clearTimeout(timer);
+      timer = setTimeout(() => run(q), 150);
+    }
+  });
+
+  // Close when clicking outside
+  document.addEventListener('click', (e) => {
+    try {
+      if (!wrapper.contains(e.target)) hide();
+    } catch (err) {}
+  });
+
+  inputEl.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') hide();
+  });
+}
+
+
+  async function loadItems() {
+    try {
+      return await fetchJson('/api/v3/plugins/calendar-onekite/items');
+    } catch (e) {
+      return [];
+    }
+  }
+
+  async function requestReservation(payload) {
+    return await fetchJson('/api/v3/plugins/calendar-onekite/reservations', {
+      method: 'POST',
+      body: JSON.stringify(payload),
+    });
+  }
+
+  async function approveReservation(rid, payload) {
+    return await fetchJson(`/api/v3/plugins/calendar-onekite/reservations/${rid}/approve`, {
+      method: 'PUT',
+      body: JSON.stringify(payload || {}),
+    });
+  }
+
+  async function cancelReservation(rid) {
+    return await fetchJson(`/api/v3/plugins/calendar-onekite/reservations/${rid}/cancel`, {
+      method: 'PUT',
+    });
+  }
+
+  async function refuseReservation(rid, payload) {
+    return await fetchJson(`/api/v3/plugins/calendar-onekite/reservations/${rid}/refuse`, {
+      method: 'PUT',
+      body: JSON.stringify(payload || {}),
+    });
+  }
+
+  function formatDt(d) {
+    // UI requirement: show dates only (no hours)
+    try {
+      return new Date(d).toLocaleDateString('fr-FR');
+    } catch (e) {
+      return String(d);
+    }
+  }
+
+
+  function formatDtWithTime(d) {
+    try {
+      return new Date(d).toLocaleString('fr-FR', { dateStyle: 'short', timeStyle: 'short' });
+    } catch (e) {
+      return String(d);
+    }
+  }
+
+
+  
+  function toLocalYmd(date) {
+    const d = new Date(date);
+    const pad = (n) => String(n).padStart(2, '0');
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+  }
+
+function toDatetimeLocalValue(date) {
+    const d = new Date(date);
+    const pad = (n) => String(n).padStart(2, '0');
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+  }
+
+  async function openReservationDialog(selectionInfo, items) {
+    const start = selectionInfo.start;
+    const end = selectionInfo.end;
+
+    // days (end is exclusive in FullCalendar)
+    const msPerDay = 24 * 60 * 60 * 1000;
+    const days = Math.max(1, Math.round((end.getTime() - start.getTime()) / msPerDay));
+
+    // Fetch existing events overlapping the selection to disable already reserved items.
+    let blocked = new Set();
+    try {
+      const qs = new URLSearchParams({ start: selectionInfo.startStr, end: selectionInfo.endStr });
+      const evs = await fetchJson(`/api/v3/plugins/calendar-onekite/events?${qs.toString()}`);
+      (evs || []).forEach((ev) => {
+        const st = (ev.extendedProps && ev.extendedProps.status) || '';
+        if (!['pending', 'awaiting_payment', 'approved', 'paid'].includes(st)) return;
+        const ids = (ev.extendedProps && ev.extendedProps.itemIds) || (ev.extendedProps && ev.extendedProps.itemId ? [ev.extendedProps.itemId] : []);
+        ids.forEach((id) => blocked.add(String(id)));
+      });
+    } catch (e) {}
+
+    // Price display: prices are returned in cents; show euros (price / 100)
+    const fmtPrice = (p) => {
+      const n = typeof p === 'number' ? p : parseFloat(String(p || '0'));
+      const val = (isNaN(n) ? 0 : n) / 100;
+      // Keep 2 decimals if needed
+      return val.toLocaleString('fr-FR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+    };
+
+    const rows = items.map((it, idx) => {
+      const id = String(it.id);
+      const disabled = blocked.has(id);
+      const priceTxt = fmtPrice(it.price || 0);
+      const safeName = String(it.name).replace(/</g, '&lt;').replace(/>/g, '&gt;');
+      return `
+        <div class="d-flex align-items-center py-1 ${disabled ? 'opacity-50' : ''}" style="border-bottom: 1px solid var(--bs-border-color, #ddd);">
+          <div style="width: 26px;">
+            ${disabled ? '' : `<input type="checkbox" class="form-check-input onekite-item-cb" data-id="${id}" data-name="${safeName}" data-price="${String(it.price || 0)}">`}
+          </div>
+          <div class="flex-grow-1">
+            <div><strong>${safeName}</strong></div>
+            <div class="text-muted" style="font-size: 12px;">${priceTxt} € / jour</div>
+          </div>
+        </div>
+      `;
+    }).join('');
+
+    const messageHtml = `
+      <div class="mb-2"><strong>Période</strong><br>${formatDt(start)} → ${formatDt(end)} <span class="text-muted">(${days} jour${days > 1 ? 's' : ''})</span></div>
+      <div class="mb-2"><strong>Matériel</strong></div>
+      <div id="onekite-items" class="mb-2" style="max-height: 320px; overflow: auto; border: 1px solid var(--bs-border-color, #ddd); border-radius: 6px; padding: 6px;">
+        ${rows}
+      </div>
+      <div class="d-flex justify-content-between align-items-center">
+        <div class="text-muted">Total estimé</div>
+        <div id="onekite-total" style="font-size: 18px;"><strong>0,00 €</strong></div>
+      </div>
+      <div class="text-muted" style="font-size: 12px;">Les matériels grisés sont déjà réservés ou en attente.</div>
+    `;
+
+    return new Promise((resolve) => {
+      let settled = false;
+      const safeResolve = (v) => {
+        if (settled) { return; }
+        settled = true;
+        resolve(v);
+      };
+      const dlg = bootbox.dialog({
+        title: 'Demander une réservation',
+        message: messageHtml,
+        buttons: {
+          cancel: {
+            label: 'Annuler',
+            className: 'btn-secondary',
+            callback: function () {
+              resolve(null);
+            },
+          },
+          ok: {
+            label: 'Envoyer',
+            className: 'btn-primary',
+            callback: function () {
+              const cbs = Array.from(document.querySelectorAll('.onekite-item-cb')).filter(cb => cb.checked);
+              if (!cbs.length) {
+                showAlert('error', 'Choisis au moins un matériel.');
+                return false;
+              }
+              const itemIds = cbs.map(cb => cb.getAttribute('data-id'));
+              const itemNames = cbs.map(cb => cb.getAttribute('data-name'));
+              const sum = cbs.reduce((acc, cb) => acc + (parseFloat(cb.getAttribute('data-price') || '0') || 0), 0);
+              const total = (sum / 100) * days;
+              resolve({ itemIds, itemNames, total, days });
+            },
+          },
+        },
+      });
+
+      // live total update
+      setTimeout(() => {
+        const totalEl = document.getElementById('onekite-total');
+        function refreshTotal() {
+          const cbs = Array.from(document.querySelectorAll('.onekite-item-cb')).filter(cb => cb.checked);
+          const sum = cbs.reduce((acc, cb) => acc + (parseFloat(cb.getAttribute('data-price') || '0') || 0), 0);
+          const total = (sum / 100) * days;
+          if (totalEl) {
+            totalEl.innerHTML = `<strong>${total.toLocaleString('fr-FR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} €</strong>`;
+          }
+        }
+        document.querySelectorAll('.onekite-item-cb').forEach(cb => cb.addEventListener('change', refreshTotal));
+        refreshTotal();
+      }, 0);
+    });
+  }
+
+  async function init(selector) {
+    const el = document.querySelector(selector);
+    if (!el) {
+      return;
+    }
+
+    if (typeof FullCalendar === 'undefined') {
+      showAlert('error', 'FullCalendar non chargé');
+      return;
+    }
+
+    const items = await loadItems();
+    const caps = await loadCapabilities().catch(() => ({}));
+    const canCreateSpecial = !!caps.canCreateSpecial;
+    const canDeleteSpecial = !!caps.canDeleteSpecial;
+
+    // Current creation mode: reservation (location) or special (event).
+    // Persist the user's last choice so actions (create/approve/refuse/refetch) don't reset it.
+    const modeStorageKey = (() => {
+      try {
+        const uid = (typeof app !== 'undefined' && app && app.user && (app.user.uid || app.user.uid === 0)) ? String(app.user.uid)
+          : (window.ajaxify && window.ajaxify.data && (window.ajaxify.data.uid || window.ajaxify.data.uid === 0)) ? String(window.ajaxify.data.uid)
+          : '0';
+        return `onekiteCalendarMode:${uid}`;
+      } catch (e) {
+        return 'onekiteCalendarMode:0';
+      }
+    })();
+
+    function loadSavedMode() {
+      try {
+        const v = (window.localStorage && window.localStorage.getItem(modeStorageKey)) || '';
+        return (v === 'special' || v === 'reservation') ? v : 'reservation';
+      } catch (e) {
+        return 'reservation';
+      }
+    }
+
+    function saveMode(v) {
+      try {
+        if (!window.localStorage) return;
+        window.localStorage.setItem(modeStorageKey, v);
+      } catch (e) {
+        // ignore
+      }
+    }
+
+    let mode = loadSavedMode();
+    // Avoid showing the "mode évènement" hint multiple times (desktop + mobile handlers)
+    let lastModeHintAt = 0;
+
+    function refreshDesktopModeButton() {
+      try {
+        const btn = document.querySelector('#onekite-calendar .fc-newSpecial-button');
+        if (!btn) return;
+
+        const isSpecial = mode === 'special';
+        const label = isSpecial ? 'Évènement ✓' : 'Évènement';
+
+        // Ensure a single canonical .fc-button-text (prevents "ÉvènementÉvènement" after rerenders)
+        let span = btn.querySelector('.fc-button-text');
+        if (!span) {
+          span = document.createElement('span');
+          span.className = 'fc-button-text';
+          // Remove stray text nodes before inserting span
+          [...btn.childNodes].forEach((n) => {
+            if (n && n.nodeType === Node.TEXT_NODE) n.remove();
+          });
+          btn.appendChild(span);
+        } else {
+          // Remove any stray text nodes beside the span
+          [...btn.childNodes].forEach((n) => {
+            if (n && n.nodeType === Node.TEXT_NODE && n.textContent.trim()) n.remove();
+          });
+        }
+
+        span.textContent = label;
+        btn.classList.toggle('onekite-active', isSpecial);
+      } catch (e) {}
+    }
+
+    function setMode(next, opts) {
+      if (next !== 'reservation' && next !== 'special') return;
+      mode = next;
+      saveMode(mode);
+
+      // Reset any pending selection/dialog state when switching modes
+      try { if (mode === 'reservation') { calendar.unselect(); isDialogOpen = false; } } catch (e) {}
+
+      const silent = !!(opts && opts.silent);
+      if (!silent && mode === 'special') {
+        const now = Date.now();
+        if (now - lastModeHintAt > 1200) {
+          lastModeHintAt = now;
+          showAlert('success', 'Mode évènement : sélectionnez une date ou une plage');
+        }
+      }
+      refreshDesktopModeButton();
+      try {
+        const mb = document.querySelector('#onekite-mobile-controls .onekite-mode-btn');
+        if (mb) {
+          const isSpecial = mode === 'special';
+          mb.textContent = isSpecial ? 'Mode évènement ✓' : 'Mode évènement';
+          mb.classList.toggle('onekite-active', isSpecial);
+        }
+      } catch (e) {}
+    }
+
+    // Inject lightweight responsive CSS once.
+    try {
+      const styleId = 'onekite-responsive-css';
+      if (!document.getElementById(styleId)) {
+        const st = document.createElement('style');
+        st.id = styleId;
+        st.textContent = `
+          /* Prevent accidental horizontal scroll on small screens */
+          #onekite-calendar, #onekite-calendar * { box-sizing: border-box; }
+          #onekite-calendar { width: 100%; max-width: 100%; overflow-x: hidden; }
+
+          @media (max-width: 576px) {
+            #onekite-calendar .fc .fc-toolbar-title { font-size: 1.05rem; }
+            #onekite-calendar .fc .fc-button { padding: .25rem .45rem; font-size: .85rem; }
+            #onekite-calendar .fc .fc-daygrid-day-number { font-size: .8rem; }
+            #onekite-calendar .fc .fc-daygrid-event { font-size: .75rem; }
+            #onekite-calendar .fc .fc-timegrid-event { font-size: .75rem; }
+            #onekite-calendar .fc .fc-col-header-cell-cushion { font-size: .8rem; }
+          }
+
+          @media (max-width: 576px) and (orientation: landscape) {
+            #onekite-calendar .fc .fc-toolbar-title { font-size: 1rem; }
+            #onekite-calendar .fc .fc-button { padding: .2rem .4rem; font-size: .8rem; }
+          }
+        
+          /* Violet action button (events mode) */
+          #onekite-calendar .fc .fc-newSpecial-button,
+          .onekite-btn-violet {
+            background: #6f42c1 !important;
+            border-color: #6f42c1 !important;
+            color: #fff !important;
+          }
+          /* Active state */
+          #onekite-calendar .fc .fc-newSpecial-button.onekite-active,
+          .onekite-btn-violet.onekite-active {
+            filter: brightness(0.95);
+            box-shadow: 0 0 0 0.15rem rgba(111,66,193,.25);
+          }
+`;
+        document.head.appendChild(st);
+      }
+    } catch (e) {}
+
+    function isMobileNow() {
+      return !!(window.matchMedia && window.matchMedia('(max-width: 576px)').matches);
+    }
+
+    function isLandscapeNow() {
+      return !!(window.matchMedia && window.matchMedia('(orientation: landscape)').matches);
+    }
+
+    function computeAspectRatio() {
+      const mobile = isMobileNow();
+      if (!mobile) return 1.35;
+      return isLandscapeNow() ? 1.6 : 0.9;
+    }
+
+    const headerToolbar = isMobileNow() ? {
+      left: 'prev,next',
+      center: 'title',
+      right: 'today',
+    } : {
+      left: 'prev,next today',
+      center: 'title',
+      // Only month + week (no day view)
+      right: (canCreateSpecial ? 'newSpecial ' : '') + 'dayGridMonth,timeGridWeek',
+    };
+
+    const calendar = new FullCalendar.Calendar(el, {
+      initialView: 'dayGridMonth',
+      height: 'auto',
+      contentHeight: 'auto',
+      aspectRatio: computeAspectRatio(),
+      dayMaxEvents: true,
+      locale: 'fr',
+      headerToolbar: headerToolbar,
+      // Keep titles short on mobile to avoid horizontal overflow
+      titleFormat: isMobileNow() ? { year: 'numeric', month: 'short' } : undefined,
+      customButtons: canCreateSpecial ? {
+        newSpecial: {
+          text: 'Évènement',
+          click: () => {
+            setMode((mode === 'special') ? 'reservation' : 'special');
+          },
+        },
+      } : {},
+      // We display the time ourselves inside the title for "special" events,
+      // to match reservation icons and avoid FullCalendar's fixed-width time column.
+      displayEventTime: false,
+      selectable: true,
+      selectMirror: true,
+      events: async function (info, successCallback, failureCallback) {
+        try {
+          // Abort previous in-flight events fetch to avoid "double refresh" effects.
+          if (window.__onekiteEventsAbort) {
+            try { window.__onekiteEventsAbort.abort(); } catch (e) {}
+          }
+          const abort = new AbortController();
+          window.__onekiteEventsAbort = abort;
+
+          const qs = new URLSearchParams({ start: info.startStr, end: info.endStr });
+          const url = `/api/v3/plugins/calendar-onekite/events?${qs.toString()}`;
+          const data = await fetchJsonCached(url, { signal: abort.signal });
+
+          // Prefetch adjacent range (previous/next) for snappier navigation.
+          try {
+            const spanMs = (info.end && info.start) ? (info.end.getTime() - info.start.getTime()) : 0;
+            if (spanMs > 0 && spanMs < 1000 * 3600 * 24 * 120) {
+              const prevStart = new Date(info.start.getTime() - spanMs);
+              const prevEnd = new Date(info.start.getTime());
+              const nextStart = new Date(info.end.getTime());
+              const nextEnd = new Date(info.end.getTime() + spanMs);
+              const toStr = (d) => new Date(d.getTime()).toISOString();
+              const qPrev = new URLSearchParams({ start: toStr(prevStart), end: toStr(prevEnd) });
+              const qNext = new URLSearchParams({ start: toStr(nextStart), end: toStr(nextEnd) });
+              fetchJsonCached(`/api/v3/plugins/calendar-onekite/events?${qPrev.toString()}`).catch(() => {});
+              fetchJsonCached(`/api/v3/plugins/calendar-onekite/events?${qNext.toString()}`).catch(() => {});
+            }
+          } catch (e) {}
+
+          // IMPORTANT: align "special" event display exactly like reservation icons.
+          // We inject the clock + time range directly into the event title so FC
+          // doesn't reserve a separate time column (which creates a leading gap).
+          const mapped = (Array.isArray(data) ? data : []).map((ev) => {
+            try {
+              if (ev && ev.extendedProps && ev.extendedProps.type === 'special' && ev.start && ev.end) {
+                // Force the same visual layout as reservations in month view
+                // (avoid the "dot" layout which introduces a leading gap).
+                ev.display = 'block';
+
+                const s = new Date(ev.start);
+                const e = new Date(ev.end);
+                const ts = `${pad2(s.getHours())}:${pad2(s.getMinutes())}`;
+                const te = `${pad2(e.getHours())}:${pad2(e.getMinutes())}`;
+                const baseTitle = (ev.title || '').trim();
+                // Avoid double prefix on rerenders
+                const prefix = `🕒 ${ts}-${te} `;
+                if (!baseTitle.startsWith('🕒 ')) {
+                  ev.title = `${prefix}${baseTitle}`.trim();
+                }
+              }
+            } catch (e2) {}
+            return ev;
+          });
+
+          successCallback(mapped);
+        } catch (e) {
+          failureCallback(e);
+        }
+      },
+      eventDidMount: function (arg) {
+        // Keep special event colors consistent.
+        try {
+          const ev = arg && arg.event;
+          if (!ev) return;
+          if (ev.extendedProps && ev.extendedProps.type === 'special') {
+            const el2 = arg.el;
+            if (el2 && el2.style) {
+              el2.style.backgroundColor = '#8e44ad';
+              el2.style.borderColor = '#8e44ad';
+              el2.style.color = '#ffffff';
+            }
+          }
+        } catch (e) {}
+      },
+      select: async function (info) {
+        if (isDialogOpen) {
+          return;
+        }
+        isDialogOpen = true;
+        try {
+          if (mode === 'special' && canCreateSpecial) {
+            const payload = await openSpecialEventDialog(info);
+            if (!payload) {
+              calendar.unselect();
+              isDialogOpen = false;
+              return;
+            }
+            await fetchJson('/api/v3/plugins/calendar-onekite/special-events', {
+              method: 'POST',
+              body: JSON.stringify(payload),
+            }).catch(async () => {
+              return await fetchJson('/api/v3/plugins/calendar-onekite/special-events', {
+                method: 'POST',
+                body: JSON.stringify(payload),
+              });
+            });
+            showAlert('success', 'Évènement créé.');
+            calendar.refetchEvents();
+            calendar.unselect();
+            isDialogOpen = false;
+            return;
+          }
+
+          if (!items || !items.length) {
+            showAlert('error', 'Aucun matériel disponible (items HelloAsso non chargés).');
+            calendar.unselect();
+            isDialogOpen = false;
+            return;
+          }
+          const chosen = await openReservationDialog(info, items);
+          if (!chosen || !chosen.itemIds || !chosen.itemIds.length) {
+            calendar.unselect();
+            isDialogOpen = false;
+            return;
+          }
+          // Send date strings (no hours) so reservations are day-based.
+          const startDate = toLocalYmd(info.start);
+          const endDate = toLocalYmd(info.end);
+          await requestReservation({
+            start: startDate,
+            end: endDate,
+            itemIds: chosen.itemIds,
+            itemNames: chosen.itemNames,
+            total: chosen.total,
+          });
+          showAlert('success', 'Demande envoyée (en attente de validation).');
+          calendar.refetchEvents();
+          calendar.unselect();
+          isDialogOpen = false;
+        } catch (e) {
+          const code = String((e && (e.status || e.message)) || '');
+          const payload = e && e.payload ? e.payload : null;
+
+          if (code === '403') {
+            const msg = payload && (payload.message || payload.error || payload.msg) ? String(payload.message || payload.error || payload.msg) : '';
+            const c = payload && payload.code ? String(payload.code) : '';
+            if (c === 'NOT_MEMBER' || /adh(é|e)rent/i.test(msg) || /membership/i.test(msg)) {
+              showAlert('error', msg || 'Vous devez être adhérent pour pouvoir effectuer une réservation.');
+            } else {
+              showAlert('error', msg || 'Impossible de créer la demande : droits insuffisants (groupe).');
+            }
+          } else if (code === '409') {
+            showAlert('error', 'Impossible : au moins un matériel est déjà réservé ou en attente sur cette période.');
+          } else {
+            const msgRaw = payload && (payload.message || payload.error || payload.msg)
+              ? String(payload.message || payload.error || payload.msg)
+              : '';
+
+            // NodeBB can return a plain "not-logged-in" string when the user is not authenticated.
+            // We want a user-friendly message consistent with the membership requirement.
+            const msg = (/\bnot-logged-in\b/i.test(msgRaw) || /\[\[error:not-logged-in\]\]/i.test(msgRaw))
+              ? 'Vous devez être adhérent Onekite'
+              : msgRaw;
+
+            showAlert('error', msg || ((e && (e.status === 401 || e.status === 403)) ? 'Vous devez être adhérent Onekite' : 'Erreur lors de la création de la demande.'));
+          }
+          calendar.unselect();
+          isDialogOpen = false;
+        }
+      },
+      dateClick: async function (info) {
+        // One-day selection convenience
+        const start = info.date;
+
+        // In "special event" mode, a simple click should propose a one-day event (not two days in the modal)
+        if (mode === 'special' && canCreateSpecial) {
+          if (isDialogOpen) {
+            return;
+          }
+          isDialogOpen = true;
+          try {
+            // Default to a one-day block: 07:00 -> 07:00 (end rolled to +1 day on submit).
+            const start2 = new Date(start);
+            start2.setHours(7, 0, 0, 0);
+            const end2 = new Date(start);
+            end2.setHours(7, 0, 0, 0);
+            const payload = await openSpecialEventDialog({ start: start2, end: end2, allDay: false });
+            if (!payload) {
+              isDialogOpen = false;
+              return;
+            }
+            await fetchJson('/api/v3/plugins/calendar-onekite/special-events', {
+              method: 'POST',
+              body: JSON.stringify(payload),
+            }).catch(async () => {
+              return await fetchJson('/api/v3/plugins/calendar-onekite/special-events', {
+                method: 'POST',
+                body: JSON.stringify(payload),
+              });
+            });
+            showAlert('success', 'Évènement créé.');
+            calendar.refetchEvents();
+          } finally {
+            isDialogOpen = false;
+          }
+          return;
+        }
+
+        const end = new Date(start.getTime() + 24 * 60 * 60 * 1000);
+        calendar.select(start, end);
+      },
+
+      eventClick: async function (info) {
+        if (isDialogOpen) return;
+        isDialogOpen = true;
+        const ev = info.event;
+        const p0 = ev.extendedProps || {};
+
+        // Load full details lazily (events list is lightweight for perf).
+        let p = p0;
+        try {
+          if (p0.type === 'reservation' && p0.rid) {
+            const details = await fetchJson(`/api/v3/plugins/calendar-onekite/reservations/${encodeURIComponent(String(p0.rid))}`);
+            p = Object.assign({}, p0, details);
+          } else if (p0.type === 'special' && p0.eid) {
+            const details = await fetchJson(`/api/v3/plugins/calendar-onekite/special-events/${encodeURIComponent(String(p0.eid))}`);
+            p = Object.assign({}, p0, details, {
+              // keep backward compat with older field names used by templates below
+              pickupAddress: details.address || details.pickupAddress || p0.pickupAddress,
+              pickupLat: details.lat || details.pickupLat || p0.pickupLat,
+              pickupLon: details.lon || details.pickupLon || p0.pickupLon,
+            });
+          }
+        } catch (e) {
+          // ignore detail fetch errors; fall back to minimal props
+          p = p0;
+        }
+
+        try {
+          if (p.type === 'special') {
+          const username = String(p.username || '').trim();
+          const userLine = username
+            ? `<div class="mb-2"><strong>Créé par</strong><br><a class="onekite-user-link" href="${window.location.origin}/user/${encodeURIComponent(username)}">${escapeHtml(username)}</a></div>`
+            : '';
+          const addr = String(p.pickupAddress || '').trim();
+          const lat = Number(p.pickupLat);
+          const lon = Number(p.pickupLon);
+          const hasCoords = Number.isFinite(lat) && Number.isFinite(lon);
+          const notes = String(p.notes || '').trim();
+          const addrHtml = addr
+            ? (hasCoords
+              ? `<a href="#" class="onekite-map-link" data-address="${escapeHtml(addr)}" data-lat="${escapeHtml(String(lat))}" data-lon="${escapeHtml(String(lon))}">${escapeHtml(addr)}</a>`
+              : `${escapeHtml(addr)}`)
+            : '';
+          const html = `
+            <div class="mb-2"><strong>Titre</strong><br>${escapeHtml(p.title || ev.title || '')}</div>
+            ${userLine}
+            <div class="mb-2"><strong>Période</strong><br>${escapeHtml(formatDtWithTime(ev.start))} → ${escapeHtml(formatDtWithTime(ev.end))}</div>
+            ${addr ? `<div class="mb-2"><strong>Adresse</strong><br>${addrHtml}</div>` : ''}
+            ${notes ? `<div class="mb-2"><strong>Notes</strong><br>${escapeHtml(notes).replace(/\n/g,'<br>')}</div>` : ''}
+          `;
+          const canDel = !!(p.canDeleteSpecial || canDeleteSpecial);
+          bootbox.dialog({
+            title: 'Évènement',
+            message: html,
+            buttons: {
+              close: { label: 'Fermer', className: 'btn-secondary' },
+              ...(canDel ? {
+                del: {
+                  label: 'Supprimer',
+                  className: 'btn-danger',
+                  callback: async () => {
+                    try {
+                      const eid = String(p.eid || ev.id).replace(/^special:/, '');
+                      await fetchJson(`/api/v3/plugins/calendar-onekite/special-events/${encodeURIComponent(eid)}`, { method: 'DELETE' });
+                      showAlert('success', 'Évènement supprimé.');
+                      calendar.refetchEvents();
+                    } catch (e) {
+                      showAlert('error', 'Suppression impossible.');
+                    }
+                  },
+                },
+              } : {}),
+            },
+          });
+          return;
+        }
+        const rid = p.rid || ev.id;
+        const status = p.status || '';
+
+        // Reserved-by line (user profile link)
+        const username = String(p.username || p.user || p.reservedBy || p.ownerUsername || '').trim();
+        const userLine = username
+          ? `<div class="mb-2"><strong>Réservée par</strong><br><a class="onekite-user-link" href="${window.location.origin}/user/${encodeURIComponent(username)}">${escapeHtml(username)}</a></div>`
+          : '';
+        const itemsHtml = (() => {
+        const names = Array.isArray(p.itemNames) ? p.itemNames : (typeof p.itemNames === 'string' && p.itemNames.trim() ? p.itemNames.split(',').map(s=>s.trim()).filter(Boolean) : (p.itemName ? [p.itemName] : []));
+        if (names.length) {
+          return `<ul style="margin:0 0 0 1.1rem; padding:0;">${names.map(n => `<li>${String(n).replace(/</g,'&lt;').replace(/>/g,'&gt;')}</li>`).join('')}</ul>`;
+        }
+        return String(ev.title || '').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+      })();
+        const period = `${formatDt(ev.start)} → ${formatDt(ev.end)}`;
+
+        const approvedBy = String(p.approvedByUsername || '').trim();
+        const validatedByHtml = approvedBy
+          ? `<div class=\"mb-2\"><strong>Validée par</strong><br><a href=\"https://www.onekite.com/user/${encodeURIComponent(approvedBy)}\">${escapeHtml(approvedBy)}</a></div>`
+          : '';
+
+        // Pickup details (address / time / notes) shown once validated
+        const pickupAddress = String(p.pickupAddress || '').trim();
+        const pickupTime = String(p.pickupTime || '').trim();
+        const notes = String(p.notes || '').trim();
+        const lat = Number(p.pickupLat);
+        const lon = Number(p.pickupLon);
+        const hasCoords = Number.isFinite(lat) && Number.isFinite(lon);
+        const osmLink = hasCoords
+          ? `https://www.openstreetmap.org/?mlat=${encodeURIComponent(String(lat))}&mlon=${encodeURIComponent(String(lon))}#map=17/${encodeURIComponent(String(lat))}/${encodeURIComponent(String(lon))}`
+          : '';
+        const pickupHtml = (pickupAddress || pickupTime || notes)
+          ? `
+            <div class="mb-2">
+              <strong>Récupération</strong><br>
+              ${pickupAddress ? `${escapeHtml(pickupAddress)}<br>` : ''}
+              ${pickupTime ? `Heure : ${escapeHtml(pickupTime)}<br>` : ''}
+              ${hasCoords ? `<a href="${osmLink}" target="_blank" rel="noopener">Voir sur la carte</a><br>` : ''}
+              ${notes ? `<div class="mt-1"><strong>Notes</strong><br>${escapeHtml(notes)}</div>` : ''}
+            </div>
+          `
+          : '';
+
+        const canModerate = !!p.canModerate;
+        const isPending = status === 'pending';
+
+        const refusedReason = String(p.refusedReason || p.refuseReason || '').trim();
+        const refusedReasonHtml = (status === 'refused' && refusedReason)
+          ? `<div class="mb-2"><strong>Raison du refus</strong><br>${escapeHtml(refusedReason)}</div>`
+          : '';
+
+        const baseHtml = `
+          ${userLine}
+          <div class="mb-2"><strong>Matériel</strong><br>${itemsHtml}</div>
+          <div class="mb-2"><strong>Période</strong><br>${period}</div>
+          ${validatedByHtml}
+          ${pickupHtml}
+          ${refusedReasonHtml}
+          <div class="text-muted" style="font-size: 12px;">Statut: ${statusLabel(status)}</div>
+        `;
+
+        const uidNow = String((window.config && window.config.uid) || (typeof app !== 'undefined' && app && app.user && app.user.uid) || (typeof ajaxify !== 'undefined' && ajaxify && ajaxify.data && ajaxify.data.uid) || '');
+        const ownerUid = String(ev.extendedProps && ev.extendedProps.uid ? ev.extendedProps.uid : '');
+        const isOwner = uidNow && ownerUid && uidNow === ownerUid;
+        const showModeration = canModerate && isPending;
+        const showCancel = isOwner && ['pending', 'awaiting_payment'].includes(status);
+        const paymentUrl = String((p && p.paymentUrl) || '');
+        const showPay = isOwner && status === 'awaiting_payment' && /^https?:\/\//i.test(paymentUrl);
+        const buttons = {
+          close: { label: 'Fermer', className: 'btn-secondary' },
+        };
+        if (showPay) {
+          buttons.pay = {
+            label: 'Payer maintenant',
+            className: 'btn-primary',
+            callback: () => {
+              try {
+                window.open(paymentUrl, '_blank', 'noopener');
+              } catch (e) {}
+              return false;
+            },
+          };
+        }
+        if (showCancel) {
+          buttons.cancel = {
+            label: 'Annuler',
+            className: 'btn-outline-warning',
+            callback: async () => {
+              try {
+                await cancelReservation(rid);
+                showAlert('success', 'Réservation annulée.');
+                calendar.refetchEvents();
+              } catch (e) {
+                showAlert('error', 'Annulation impossible.');
+              }
+            },
+          };
+        }
+        if (showModeration) {
+          buttons.refuse = {
+            label: 'Refuser',
+            className: 'btn-outline-danger',
+            callback: async () => {
+              const html = `
+                <div class="mb-3">
+                  <label class="form-label">Raison du refus</label>
+                  <textarea class="form-control" id="onekite-refuse-reason" rows="3" placeholder="Ex: matériel indisponible, dates impossibles, dossier incomplet..."></textarea>
+                </div>
+              `;
+              return await new Promise((resolve) => {
+                bootbox.dialog({
+                  title: 'Refuser la réservation',
+                  message: html,
+                  buttons: {
+                    cancel: { label: 'Annuler', className: 'btn-secondary', callback: () => resolve(false) },
+                    ok: {
+                      label: 'Refuser',
+                      className: 'btn-danger',
+                      callback: async () => {
+                        try {
+                          const reason = (document.getElementById('onekite-refuse-reason')?.value || '').trim();
+                          await refuseReservation(rid, { reason });
+                          showAlert('success', 'Demande refusée.');
+                          calendar.refetchEvents();
+                          resolve(true);
+                        } catch (e) {
+                          showAlert('error', 'Refus impossible.');
+                          resolve(false);
+                        }
+                        return false;
+                      },
+                    },
+                  },
+                });
+              });
+            },
+          };
+          buttons.approve = {
+            label: 'Valider',
+            className: 'btn-success',
+            callback: async () => {
+              const itemNames = Array.isArray(p.itemNames) && p.itemNames.length
+                ? p.itemNames
+                : (typeof p.itemNames === 'string' && p.itemNames.trim() ? p.itemNames.split(',').map(s=>s.trim()).filter(Boolean) : (p.itemName ? [p.itemName] : []));
+              const itemsListHtml = itemNames.length
+                ? `<div class="mb-2"><strong>Matériel</strong><ul style="margin:0.25rem 0 0 1.1rem; padding:0;">${itemNames.map(n => `<li>${String(n).replace(/</g, '&lt;').replace(/>/g, '&gt;')}</li>`).join('')}</ul></div>`
+                : '';
+              const opts = (() => {
+                const out = [];
+                for (let h = 7; h < 24; h++) {
+                  for (let m = 0; m < 60; m += 5) {
+                    out.push(`${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`);
+                  }
+                }
+                return out;
+              })().map(t => `<option value="${t}" ${t === '07:00' ? 'selected' : ''}>${t}</option>`).join('');
+              const html = `
+                ${itemsListHtml}
+                <div class="mb-3">
+                  <label class="form-label">Adresse de récupération</label>
+                  <div class="input-group">
+                    <input type="text" class="form-control" id="onekite-pickup-address" placeholder="Adresse complète" />
+                    <button class="btn btn-outline-secondary" type="button" id="onekite-geocode">Rechercher</button>
+                  </div>
+                  <div id="onekite-map" style="height:220px; border:1px solid #ddd; border-radius:6px; margin-top:0.5rem;"></div>
+                  <div class="form-text" id="onekite-map-help">Vous pouvez déplacer le marqueur pour ajuster la position.</div>
+                  <input type="hidden" id="onekite-pickup-lat" />
+                  <input type="hidden" id="onekite-pickup-lon" />
+                </div>
+                <div class="mb-3">
+                  <label class="form-label">Notes (facultatif)</label>
+                  <textarea class="form-control" id="onekite-notes" rows="3" placeholder="Ex: code portail, personne à contacter, horaires..."></textarea>
+                </div>
+                <div class="mb-2">
+                  <label class="form-label">Heure de récupération</label>
+                  <select class="form-select" id="onekite-pickup-time">${opts}</select>
+                </div>
+              `;
+              const dlg = bootbox.dialog({
+                title: 'Valider la demande',
+                message: html,
+                buttons: {
+                  cancel: { label: 'Annuler', className: 'btn-secondary' },
+                  ok: {
+                    label: 'Valider',
+                    className: 'btn-success',
+                    callback: async () => {
+                      try {
+                        const pickupAddress = (document.getElementById('onekite-pickup-address')?.value || '').trim();
+                        const notes = (document.getElementById('onekite-notes')?.value || '').trim();
+                        const pickupTime = (document.getElementById('onekite-pickup-time')?.value || '').trim();
+                        const pickupLat = (document.getElementById('onekite-pickup-lat')?.value || '').trim();
+                        const pickupLon = (document.getElementById('onekite-pickup-lon')?.value || '').trim();
+                        await approveReservation(rid, { pickupAddress, notes, pickupTime, pickupLat, pickupLon });
+                        showAlert('success', 'Demande validée.');
+                        calendar.refetchEvents();
+                      } catch (e) {
+                        showAlert('error', 'Validation impossible.');
+                      }
+                    },
+                  },
+                },
+              });
+
+              // Init Leaflet map once the modal is visible.
+              dlg.on('shown.bs.modal', async () => {
+                try {
+                  const L = await loadLeaflet();
+                  const mapEl = document.getElementById('onekite-map');
+                  if (!mapEl) return;
+
+                  const map = L.map(mapEl, { scrollWheelZoom: false });
+                  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                    maxZoom: 19,
+                    attribution: '&copy; OpenStreetMap',
+                  }).addTo(map);
+
+                  // Default view (France-ish)
+                  map.setView([46.7, 2.5], 5);
+
+                  let marker = null;
+                  function setMarker(lat, lon, zoom) {
+                    const ll = [lat, lon];
+                    if (!marker) {
+                      marker = L.marker(ll, { draggable: true }).addTo(map);
+                      marker.on('dragend', () => {
+                        const p2 = marker.getLatLng();
+                        document.getElementById('onekite-pickup-lat').value = String(p2.lat);
+                        document.getElementById('onekite-pickup-lon').value = String(p2.lng);
+                      });
+                    } else {
+                      marker.setLatLng(ll);
+                    }
+                    document.getElementById('onekite-pickup-lat').value = String(lat);
+                    document.getElementById('onekite-pickup-lon').value = String(lon);
+                    if (zoom) {
+                      map.setView(ll, zoom);
+                    } else {
+                      map.panTo(ll);
+                    }
+                  }
+
+                  map.on('click', (e) => {
+                    if (e && e.latlng) {
+                      setMarker(e.latlng.lat, e.latlng.lng, map.getZoom());
+                    }
+                  });
+
+                  const geocodeBtn = document.getElementById('onekite-geocode');
+                  const addrInput = document.getElementById('onekite-pickup-address');
+
+                  try {
+                    attachAddressAutocomplete(addrInput, (h) => {
+                      if (h && Number.isFinite(h.lat) && Number.isFinite(h.lon)) {
+                        setMarker(h.lat, h.lon, 16);
+                      }
+                    });
+                  } catch (e) {}
+
+                  async function runGeocode() {
+                    try {
+                      const addr = (addrInput?.value || '').trim();
+                      if (!addr) return;
+                      const hit = await geocodeAddress(addr);
+                      if (!hit) {
+                        showAlert('error', 'Adresse introuvable.');
+                        return;
+                      }
+                      setMarker(hit.lat, hit.lon, 16);
+                    } catch (e) {
+                      showAlert('error', 'Recherche adresse impossible.');
+                    }
+                  }
+
+                  if (geocodeBtn) {
+                    geocodeBtn.addEventListener('click', runGeocode);
+                  }
+                  if (addrInput) {
+                    addrInput.addEventListener('keydown', (e) => {
+                      if (e.key === 'Enter') {
+                        e.preventDefault();
+                        runGeocode();
+                      }
+                    });
+                  }
+                } catch (e) {
+                  // Leaflet load errors shouldn't block moderation
+                }
+              });
+            },
+          };
+        }
+
+        bootbox.dialog({
+          title: 'Réservation',
+          message: baseHtml,
+          buttons,
+        });
+        } finally {
+          isDialogOpen = false;
+        }
+      },
+    });
+
+    // Expose for live updates
+    try { window.oneKiteCalendar = calendar; } catch (e) {}
+
+    calendar.render();
+
+    refreshDesktopModeButton();
+
+
+    // Mobile controls: view (month/week) + mode (reservation/event) without bloating the header.
+    try {
+      const controlsId = 'onekite-mobile-controls';
+      const old = document.getElementById(controlsId);
+      if (old) old.remove();
+
+      if (isMobileNow()) {
+        const controls = document.createElement('div');
+        controls.id = controlsId;
+        controls.className = 'mt-2 d-flex flex-wrap gap-2 align-items-center';
+
+        const viewGroup = document.createElement('div');
+        viewGroup.className = 'btn-group btn-group-sm';
+        viewGroup.setAttribute('role', 'group');
+
+        const btnMonth = document.createElement('button');
+        btnMonth.type = 'button';
+        btnMonth.className = 'btn btn-outline-secondary';
+        btnMonth.textContent = 'Mois';
+
+        const btnWeek = document.createElement('button');
+        btnWeek.type = 'button';
+        btnWeek.className = 'btn btn-outline-secondary';
+        btnWeek.textContent = 'Semaine';
+
+        function refreshViewButtons() {
+          const v = calendar.view && calendar.view.type;
+          btnMonth.classList.toggle('active', v === 'dayGridMonth');
+          btnWeek.classList.toggle('active', v === 'timeGridWeek');
+        }
+
+        btnMonth.addEventListener('click', () => {
+          calendar.changeView('dayGridMonth');
+          refreshViewButtons();
+        });
+        btnWeek.addEventListener('click', () => {
+          calendar.changeView('timeGridWeek');
+          refreshViewButtons();
+        });
+
+        viewGroup.appendChild(btnMonth);
+        viewGroup.appendChild(btnWeek);
+        controls.appendChild(viewGroup);
+
+        if (canCreateSpecial) {
+          const modeBtn = document.createElement('button');
+          modeBtn.type = 'button';
+          modeBtn.className = 'btn btn-sm onekite-btn-violet onekite-mode-btn';
+          function refreshModeBtn() {
+            const isSpecial = mode === 'special';
+            modeBtn.textContent = isSpecial ? 'Mode évènement ✓' : 'Mode évènement';
+            modeBtn.classList.toggle('active', isSpecial);
+            // Keep violet, only toggle active class
+            modeBtn.classList.toggle('onekite-active', isSpecial);
+          }
+          modeBtn.addEventListener('click', () => {
+            setMode((mode === 'special') ? 'reservation' : 'special');
+            refreshModeBtn();
+          });
+          refreshModeBtn();
+          controls.appendChild(modeBtn);
+        }
+
+        el.parentNode && el.parentNode.insertBefore(controls, el.nextSibling);
+        refreshViewButtons();
+      }
+    } catch (e) {}
+
+    // Update sizing when rotating/resizing (especially on mobile landscape).
+    try {
+      let lastMobile = isMobileNow();
+      let lastLandscape = isLandscapeNow();
+      window.addEventListener('resize', () => {
+        const mobile = isMobileNow();
+        const landscape = isLandscapeNow();
+        if (mobile !== lastMobile || landscape !== lastLandscape) {
+          lastMobile = mobile;
+          lastLandscape = landscape;
+          calendar.setOption('aspectRatio', computeAspectRatio());
+          calendar.setOption('titleFormat', mobile ? { year: 'numeric', month: 'short' } : undefined);
+        }
+        try { calendar.updateSize(); } catch (err) {}
+      
+        try { refreshDesktopModeButton(); } catch (e) {}
+      });
+    } catch (e) {}
+  }
+
+  // Auto-init on /calendar when ajaxify finishes rendering.
+  function autoInit(data) {
+    try {
+      const tpl = data && data.template ? data.template.name : (ajaxify && ajaxify.data && ajaxify.data.template ? ajaxify.data.template.name : '');
+      if (tpl === 'calendar-onekite') {
+        init('#onekite-calendar');
+      }
+    } catch (e) {}
+  }
+
+  if (hooks && typeof hooks.on === 'function') {
+    hooks.on('action:ajaxify.end', autoInit);
+  }
+
+  // In case the page is served as the initial load (no ajaxify navigation)
+  // call once after current tick.
+  setTimeout(() => autoInit({ template: (ajaxify && ajaxify.data && ajaxify.data.template) || { name: '' } }), 0);
+
+
+
+// Live refresh when a reservation changes (e.g., payment confirmed by webhook)
+try {
+  if (!window.__oneKiteSocketBound && typeof socket !== 'undefined' && socket && typeof socket.on === 'function') {
+    window.__oneKiteSocketBound = true;
+    socket.on('event:calendar-onekite.reservationUpdated', function () {
+      try {
+        const cal = window.oneKiteCalendar;
+        scheduleRefetch(cal);
+      } catch (e) {}
+    });
+  }
+} catch (e) {}
+
+  return {
+    init,
+  };
+});