Ouvert maintenant · ferme dans

{%- comment -%} NAHNAH AI · Ouvert maintenant · ferme dans {%- endcomment -%}
<div class="nn-compte-a-rebours-horaires-ouverture" data-jours="{{ section.settings.jours | escape }}" data-ouverture="{{ section.settings.ouverture }}" data-fermeture="{{ section.settings.fermeture }}" style="--nn-fond: {{ section.settings.couleur_fond }}; --nn-texte: {{ section.settings.couleur_texte }}; --nn-ouvert: {{ section.settings.couleur_ouvert }}; --nn-ferme: {{ section.settings.couleur_ferme }};" hidden>
  <span class="nn-compte-a-rebours-horaires-ouverture__point" aria-hidden="true"></span>
  <span class="nn-compte-a-rebours-horaires-ouverture__nom">{{ section.settings.nom | escape }}</span>
  <span class="nn-compte-a-rebours-horaires-ouverture__etat" aria-live="polite"></span>
</div>
{% schema %}
{"name":"Horaires en direct","settings":[
{"type":"text","id":"nom","label":"Nom (boutique, service client…)","default":"Service client"},
{"type":"text","id":"jours","label":"Jours ouverts (1 = lundi … 7 = dimanche, séparés par des virgules)","default":"1,2,3,4,5"},
{"type":"range","id":"ouverture","label":"Heure d'ouverture","min":0,"max":23,"step":1,"unit":"h","default":9},
{"type":"range","id":"fermeture","label":"Heure de fermeture","min":1,"max":24,"step":1,"unit":"h","default":18},
{"type":"color","id":"couleur_fond","label":"Fond","default":"#FFFFFF"},
{"type":"color","id":"couleur_texte","label":"Texte","default":"#111827"},
{"type":"color","id":"couleur_ouvert","label":"Couleur ouvert","default":"#16A34A"},
{"type":"color","id":"couleur_ferme","label":"Couleur fermé","default":"#DC2626"}],
"presets":[{"name":"Ouvert maintenant · ferme dans"}]}
{% endschema %}

{% stylesheet %}
/* Pastille d'état avec point qui pulse */
.nn-compte-a-rebours-horaires-ouverture{display:inline-flex;align-items:center;gap:10px;margin:12px 16px;padding:8px 16px;border-radius:999px;background:var(--nn-fond);color:var(--nn-texte);box-shadow:0 1px 3px rgba(0,0,0,.12);font-size:14px}
.nn-compte-a-rebours-horaires-ouverture__point{width:10px;height:10px;border-radius:50%;background:var(--nn-ferme);position:relative}
.nn-compte-a-rebours-horaires-ouverture.est-ouvert .nn-compte-a-rebours-horaires-ouverture__point{background:var(--nn-ouvert)}
.nn-compte-a-rebours-horaires-ouverture.est-ouvert .nn-compte-a-rebours-horaires-ouverture__point::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--nn-ouvert);animation:nn-compte-a-rebours-horaires-ouverture-pulse 2s ease-out infinite}
.nn-compte-a-rebours-horaires-ouverture__nom{font-weight:600}
.nn-compte-a-rebours-horaires-ouverture__etat{opacity:.8}
@keyframes nn-compte-a-rebours-horaires-ouverture-pulse{to{transform:scale(2.6);opacity:0}}
@media (prefers-reduced-motion: reduce){.nn-compte-a-rebours-horaires-ouverture__point::after{animation:none!important;display:none}}
{% endstylesheet %}

{% javascript %}
// Calcule l'état ouvert/fermé et le temps avant le prochain changement
(function () {
  var noms = ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'];
  document.querySelectorAll('.nn-compte-a-rebours-horaires-ouverture').forEach(function (bloc) {
    // Jours au format 1 = lundi … 7 = dimanche, convertis vers getDay()
    var jours = (bloc.getAttribute('data-jours') || '').split(',').map(function (j) { return parseInt(j, 10) % 7; }).filter(function (j) { return !isNaN(j); });
    var ouv = parseInt(bloc.getAttribute('data-ouverture'), 10), fer = parseInt(bloc.getAttribute('data-fermeture'), 10);
    if (!jours.length || isNaN(ouv) || isNaN(fer) || fer <= ouv) { return; }
    var etat = bloc.querySelector('.nn-compte-a-rebours-horaires-ouverture__etat');
    function duree(ms) { var m = Math.ceil(ms / 60000), h = Math.floor(m / 60); return (h ? h + ' h ' : '') + (m % 60) + ' min'; }
    function maj() {
      var n = new Date();
      var debut = new Date(n); debut.setHours(ouv, 0, 0, 0);
      var fin = new Date(n); fin.setHours(fer, 0, 0, 0);
      if (jours.indexOf(n.getDay()) > -1 && n >= debut && n < fin) {
        bloc.classList.add('est-ouvert');
        etat.textContent = 'Ouvert · ferme dans ' + duree(fin - n);
      } else {
        bloc.classList.remove('est-ouvert');
        // Prochaine ouverture : aujourd'hui plus tard ou un jour suivant
        var p = new Date(debut);
        if (!(jours.indexOf(n.getDay()) > -1 && n < debut)) {
          do { p.setDate(p.getDate() + 1); } while (jours.indexOf(p.getDay()) < 0);
        }
        var reste = p - n;
        etat.textContent = reste < 6 * 3600000 ? 'Fermé · ouvre dans ' + duree(reste) : 'Fermé · ouvre ' + (p.getDate() === new Date(n.getTime() + 86400000).getDate() ? 'demain' : noms[p.getDay()]) + ' à ' + ouv + ' h';
      }
      bloc.hidden = false;
    }
    maj();
    setInterval(maj, 30000);
  });
})();
{% endjavascript %}