{%- comment -%} Florex — Delivery slot picker: дата + слоты по 30 мин, сегодня — только по WhatsApp; выбор обязателен для checkout; занятые слоты блокируются через webhook.florex.es {%- endcomment -%}
{%- liquid
  assign lang = request.locale.iso_code
  case lang
    when 'ru'
      assign t_head = 'Когда доставить заказ?'
      assign t_today = 'Сегодня'
      assign t_tmrw = 'Завтра'
      assign t_other = 'Другая дата'
      assign t_hour = 'Время доставки'
      assign t_closed = 'В этот день доставки нет — выберите другую дату, пожалуйста.'
      assign t_more = 'Показать ещё'
      assign t_today_wa = 'Возможность доставки на сегодня уточните в WhatsApp'
      assign t_wa_btn = 'Написать в WhatsApp'
      assign t_required = 'Пожалуйста, выберите дату и время доставки, чтобы продолжить.'
      assign t_full = 'занято'
      assign t_taken = 'Это время только что заняли — выберите другое, пожалуйста.'
    when 'uk'
      assign t_head = 'Коли доставити замовлення?'
      assign t_today = 'Сьогодні'
      assign t_tmrw = 'Завтра'
      assign t_other = 'Інша дата'
      assign t_hour = 'Час доставки'
      assign t_closed = 'Цього дня доставки немає — оберіть іншу дату, будь ласка.'
      assign t_more = 'Показати ще'
      assign t_today_wa = 'Можливість доставки на сьогодні уточніть у WhatsApp'
      assign t_wa_btn = 'Написати в WhatsApp'
      assign t_required = 'Будь ласка, оберіть дату та час доставки, щоб продовжити.'
      assign t_full = 'зайнято'
      assign t_taken = 'Цей час щойно зайняли — оберіть інший, будь ласка.'
    when 'en'
      assign t_head = 'When would you like your delivery?'
      assign t_today = 'Today'
      assign t_tmrw = 'Tomorrow'
      assign t_other = 'Another date'
      assign t_hour = 'Delivery time'
      assign t_closed = 'No delivery on that day — please pick another date.'
      assign t_more = 'Show more times'
      assign t_today_wa = 'For today, please check delivery availability via WhatsApp'
      assign t_wa_btn = 'Message us on WhatsApp'
      assign t_required = 'Please choose a delivery date and time to continue.'
      assign t_full = 'full'
      assign t_taken = 'That time was just booked — please choose another one.'
    else
      assign t_head = '¿Cuándo quieres recibir tu pedido?'
      assign t_today = 'Hoy'
      assign t_tmrw = 'Mañana'
      assign t_other = 'Otra fecha'
      assign t_hour = 'Hora de entrega'
      assign t_closed = 'Ese día no hay reparto — elige otra fecha, por favor.'
      assign t_more = 'Mostrar más horarios'
      assign t_today_wa = 'Para hoy, consulta la disponibilidad de entrega por WhatsApp'
      assign t_wa_btn = 'Escribir por WhatsApp'
      assign t_required = 'Elige la fecha y la hora de entrega para continuar, por favor.'
      assign t_full = 'completo'
      assign t_taken = 'Ese horario se acaba de reservar — elige otro, por favor.'
  endcase
-%}
<style>
  .fxds{--g:#23463c;--line:#e3dccf;max-width:72rem;margin:0 auto;padding:2.4rem 1.5rem;font-size:1.4rem;color:#2b2b2b;}
  .fxds h2{font-family:var(--font-heading-family, Georgia, serif);color:var(--g);font-size:1.9rem;margin:0 0 1.4rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;}
  .fxds__row{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:1.4rem;align-items:center;}
  .fxds__chip{border:1px solid var(--line);border-radius:999px;background:#fff;padding:.9rem 1.6rem;font-size:1.25rem;cursor:pointer;transition:.15s;color:#2b2b2b;white-space:nowrap;}
  .fxds__chip:hover{border-color:var(--g);}
  .fxds__chip.is-on{background:var(--g);border-color:var(--g);color:#f6f1e8;}
  .fxds__chip[disabled]{opacity:.35;cursor:not-allowed;text-decoration:line-through;}
  .fxds__chip.is-full{opacity:.45;cursor:not-allowed;text-decoration:none;background:#f3f0ea;}
  .fxds__chip.is-full small{display:block;font-size:.85em;letter-spacing:.08em;text-transform:uppercase;opacity:.7;}
  .fxds__date{border:1px solid var(--line);border-radius:999px;padding:.8rem 1.4rem;font-size:1.3rem;background:#fff;display:none;}
  .fxds__date.is-vis{display:inline-block;}
  .fxds__label{letter-spacing:.14em;text-transform:uppercase;font-size:1.1rem;opacity:.6;margin:1.2rem 0 .8rem;}
  .fxds__hours{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:.7rem;}
  .fxds__more{display:block;margin-top:1rem;border:none;background:none;color:var(--g);font-size:1.25rem;letter-spacing:.08em;cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
  .fxds__warn{display:none;background:#fbeeea;border:1px solid #e8c6bc;border-radius:10px;padding:1rem 1.4rem;font-size:1.25rem;color:#8a4a38;margin-bottom:1.2rem;}
  .fxds__warn.is-vis{display:block;}
  .fxds__wa{display:none;background:#eef5ef;border:1px solid #cfe3d2;border-radius:12px;padding:1.4rem 1.6rem;margin-top:.4rem;}
  .fxds__wa.is-vis{display:block;}
  .fxds__wa p{margin:0 0 1rem;font-size:1.3rem;color:#2b4b33;}
  .fxds__wa a{display:inline-flex;align-items:center;gap:.6rem;background:#25d366;color:#fff;border-radius:999px;padding:.9rem 1.8rem;font-size:1.25rem;text-decoration:none;letter-spacing:.04em;}
</style>
<div class="fxds" id="fxds-{{ section.id }}"
  data-closed="{{ section.settings.closed_dates | strip | newline_to_br | replace: '<br />', ',' | replace: '<br>', ',' | escape }}"
  data-slots-api="{{ section.settings.slots_api | default: 'https://webhook.florex.es/slots.php' | escape }}"
  data-full-label="{{ t_full | escape }}">
  <h2>{{ t_head }}</h2>
  <div class="fxds__warn" id="fxds-warn-{{ section.id }}" data-closed-msg="{{ t_closed | escape }}" data-required-msg="{{ t_required | escape }}" data-taken-msg="{{ t_taken | escape }}">{{ t_closed }}</div>
  <div class="fxds__row">
    <button type="button" class="fxds__chip" data-fxds-day="today">{{ t_today }}</button>
    <button type="button" class="fxds__chip" data-fxds-day="tomorrow">{{ t_tmrw }}</button>
    <button type="button" class="fxds__chip" data-fxds-day="custom">{{ t_other }}</button>
    <input type="date" class="fxds__date" id="fxds-date-{{ section.id }}">
  </div>
  <div class="fxds__wa" id="fxds-wa-{{ section.id }}">
    <p>ⓘ {{ t_today_wa }}</p>
    <a href="https://wa.me/34695365462" target="_blank" rel="noopener">✉ {{ t_wa_btn }}</a>
  </div>
  <div id="fxds-hoursblock-{{ section.id }}">
    <div class="fxds__label">{{ t_hour }}</div>
    <div class="fxds__hours" id="fxds-hours-{{ section.id }}"></div>
    <button type="button" class="fxds__more" id="fxds-more-{{ section.id }}" style="display:none">{{ t_more }} ↓</button>
  </div>
</div>
<script>
(function(){
  var root = document.getElementById('fxds-{{ section.id }}');
  if(!root) return;
  var dateInput = document.getElementById('fxds-date-{{ section.id }}');
  var hoursWrap = document.getElementById('fxds-hours-{{ section.id }}');
  var hoursBlock = document.getElementById('fxds-hoursblock-{{ section.id }}');
  var waBlock = document.getElementById('fxds-wa-{{ section.id }}');
  var moreBtn = document.getElementById('fxds-more-{{ section.id }}');
  var warn = document.getElementById('fxds-warn-{{ section.id }}');
  var dayBtns = root.querySelectorAll('[data-fxds-day]');
  var state = {day:'', date:'', slot:'', expanded:false, taken:[]};
  var WA_VALUE = 'A confirmar por WhatsApp';
  var savePending = null;
  var API = root.dataset.slotsApi;
  var FULL = root.dataset.fullLabel;

  var CLOSED = (root.dataset.closed || '').split(',').map(function(s){ return s.trim(); }).filter(Boolean);
  function isClosed(d){ return CLOSED.indexOf(d) > -1; }

  function pad(n){ return (n<10?'0':'')+n; }
  function iso(d){ return d.getFullYear()+'-'+pad(d.getMonth()+1)+'-'+pad(d.getDate()); }
  function todayISO(){ return iso(new Date()); }
  function tomorrowISO(){ var d=new Date(); d.setDate(d.getDate()+1); return iso(d); }
  function fmt(min){ return Math.floor(min/60)+':'+pad(min%60); }

  var SLOTS = [];
  for(var m=8*60; m<22*60; m+=30){ SLOTS.push({start:m, label: fmt(m)+'–'+fmt(m+30)}); }

  dateInput.min = todayISO();

  dayBtns.forEach(function(b){
    if(b.dataset.fxdsDay==='today' && isClosed(todayISO())) b.disabled = true;
    if(b.dataset.fxdsDay==='tomorrow' && isClosed(tomorrowISO())) b.disabled = true;
  });

  function showWarn(kind){
    warn.textContent = kind==='required' ? warn.dataset.requiredMsg
                     : kind==='taken'    ? warn.dataset.takenMsg
                     : warn.dataset.closedMsg;
    warn.classList.add('is-vis');
  }

  function isTaken(label){ return state.taken.indexOf(label) > -1; }

  // Загружаем занятые слоты для даты; возвращает Promise со списком
  function fetchTaken(date){
    if(!API || !date) return Promise.resolve([]);
    return fetch(API + '?date=' + encodeURIComponent(date), {cache:'no-store'})
      .then(function(r){ return r.json(); })
      .then(function(j){ return (j && j.taken) || []; })
      .catch(function(){ return []; });
  }
  function loadTaken(date){
    return fetchTaken(date).then(function(list){
      if(state.date !== date) return;   // пока грузили — дату сменили
      state.taken = list;
      if(state.slot && state.slot !== WA_VALUE && isTaken(state.slot)){
        state.slot = ''; showWarn('taken');
        fetch('/cart/update.js',{method:'POST',headers:{'Content-Type':'application/json'},
          body: JSON.stringify({attributes:{'Hora de entrega': ''}})}).catch(function(){});
      }
      renderHours();
    });
  }

  function save(){
    if(!state.date || !state.slot) return;
    savePending = fetch('/cart/update.js',{method:'POST',headers:{'Content-Type':'application/json'},
      body: JSON.stringify({attributes:{'Fecha de entrega': state.date, 'Hora de entrega': state.slot}})})
      .catch(function(){}).then(function(){ savePending = null; });
  }

  function hasSelection(){ return !!(state.date && state.slot); }

  function proceed(btn){
    var form = btn.closest('form');
    if(form){
      var hidden = document.createElement('input');
      hidden.type='hidden'; hidden.name='checkout'; hidden.value='1';
      form.appendChild(hidden);
      form.submit();
    } else {
      window.location.href = '/checkout';
    }
  }

  document.addEventListener('click', function(e){
    var btn = e.target.closest('button[name="checkout"], input[name="checkout"], a[href="/checkout"], a[href^="/checkout?"]');
    if(!btn) return;
    if(btn.dataset.fxdsOk === '1'){ delete btn.dataset.fxdsOk; return; }
    if(!hasSelection()){
      e.preventDefault(); e.stopPropagation();
      showWarn('required');
      root.scrollIntoView({behavior:'smooth', block:'center'});
      return;
    }
    // Перед чекаутом ещё раз проверяем, что слот свободен
    e.preventDefault(); e.stopPropagation();
    var check = (state.slot === WA_VALUE) ? Promise.resolve([]) : fetchTaken(state.date);
    Promise.all([check, savePending || Promise.resolve()]).then(function(res){
      var taken = res[0];
      if(state.slot !== WA_VALUE && taken.indexOf(state.slot) > -1){
        state.taken = taken; state.slot = '';
        showWarn('taken'); renderHours();
        root.scrollIntoView({behavior:'smooth', block:'center'});
        return;
      }
      proceed(btn);
    });
  }, true);

  function renderHours(){
    var isToday = state.date === todayISO() && state.date !== '';
    waBlock.classList.toggle('is-vis', isToday);
    hoursBlock.style.display = isToday ? 'none' : 'block';
    if(isToday) return;
    hoursWrap.innerHTML='';
    var enabledShown = 0;
    var hiddenAny = false;
    SLOTS.forEach(function(s){
      var full = isTaken(s.label);
      var visible = state.expanded || (enabledShown < 4) || (s.label === state.slot);
      if(!state.expanded && enabledShown < 4 && !full) enabledShown++;
      if(!visible){ hiddenAny = true; return; }
      var b=document.createElement('button');
      b.type='button'; b.className='fxds__chip'; b.textContent=s.label;
      if(full){
        b.classList.add('is-full'); b.disabled = true;
        var sm=document.createElement('small'); sm.textContent=FULL; b.appendChild(sm);
        hoursWrap.appendChild(b);
        return;
      }
      if(s.label === state.slot) b.classList.add('is-on');
      b.addEventListener('click', function(){
        state.slot = s.label; warn.classList.remove('is-vis'); renderHours(); save();
      });
      hoursWrap.appendChild(b);
    });
    moreBtn.style.display = (!state.expanded && hiddenAny) ? 'block' : 'none';
  }

  moreBtn.addEventListener('click', function(){ state.expanded = true; renderHours(); });

  function setDay(day, dateStr){
    if(dateStr && isClosed(dateStr)){
      showWarn('closed');
      if(day==='custom'){ dateInput.value=''; }
      return;
    }
    warn.classList.remove('is-vis');
    state.day=day; state.date=dateStr; state.taken=[];
    dayBtns.forEach(function(b){ b.classList.toggle('is-on', b.dataset.fxdsDay===day); });
    dateInput.classList.toggle('is-vis', day==='custom');
    if(day==='today'){
      state.slot = WA_VALUE;
    } else if(state.slot === WA_VALUE){
      state.slot = '';
    }
    renderHours(); save();
    if(day!=='today') loadTaken(dateStr);
  }

  dayBtns.forEach(function(b){
    b.addEventListener('click', function(){
      if(b.disabled) return;
      var d=b.dataset.fxdsDay;
      if(d==='today') setDay('today', todayISO());
      else if(d==='tomorrow') setDay('tomorrow', tomorrowISO());
      else {
        warn.classList.remove('is-vis');
        state.day='custom';
        dayBtns.forEach(function(x){ x.classList.toggle('is-on', x.dataset.fxdsDay==='custom'); });
        dateInput.classList.add('is-vis');
        if(state.slot === WA_VALUE) state.slot='';
        if(dateInput.value && !isClosed(dateInput.value)){ setDay('custom', dateInput.value); }
        else { waBlock.classList.remove('is-vis'); hoursBlock.style.display='block'; renderHours(); }
        dateInput.focus();
      }
    });
  });
  dateInput.addEventListener('change', function(){ setDay('custom', dateInput.value); });

  fetch('/cart.js').then(function(r){return r.json();}).then(function(c){
    var a=c.attributes||{};
    var f=a['Fecha de entrega'], h=a['Hora de entrega'];
    if(h && h !== WA_VALUE){
      state.slot = h;
      var idx = -1;
      SLOTS.forEach(function(s,i){ if(s.label===h) idx=i; });
      if(idx > 3) state.expanded = true;
    }
    if(f && !isClosed(f)){
      if(f===todayISO()) setDay('today', f);
      else if(f===tomorrowISO()) setDay('tomorrow', f);
      else { dateInput.value=f; setDay('custom', f); }
    } else {
      renderHours();
    }
  }).catch(function(){ renderHours(); });
})();
</script>
{% schema %}
{
  "name": "Florex — Entrega",
  "settings": [
    {
      "type": "textarea",
      "id": "closed_dates",
      "label": "Fechas cerradas (sin reparto)",
      "info": "Una fecha por línea, formato AAAA-MM-DD. Ej.: 2026-08-15"
    },
    {
      "type": "text",
      "id": "slots_api",
      "label": "URL de disponibilidad de horarios",
      "default": "https://webhook.florex.es/slots.php",
      "info": "Endpoint que devuelve los horarios ya reservados. Déjalo vacío para desactivar el bloqueo."
    }
  ],
  "presets": [ { "name": "Florex — Hora de entrega" } ]
}
{% endschema %}
