/* Add custom JS code below */ 
/* DOTS / Salla Raed / 6 category sections / v2.1
   Paste in the CUSTOM JAVASCRIPT field as plain JS (without <script> tags).
   Remove the previous 6-category layout JS first.
*/
(function () {
  'use strict';

  if (window.DOTS_SIX_CATEGORIES_V21) return;
  window.DOTS_SIX_CATEGORIES_V21 = true;

  const ids = [
    '1351316877', '886624704', '2088991247',
    '1746635032', '863499620', '1737660521'
  ];
  const gridId = 'dots-six-categories-grid';
  let observer = null;
  let completed = false;
  let queued = false;

  function locate() {
    return ids.map(id =>
      document.querySelector('section[component-id="' + id + '"]')
    );
  }

  // Can be run manually from the browser console to verify the setup.
  window.DOTS_SIX_CATEGORIES_DEBUG = function () {
    const elements = locate();
    const grid = document.getElementById(gridId);
    const result = {
      scriptLoaded: true,
      found: elements.filter(Boolean).length,
      missing: ids.filter((_, i) => !elements[i]),
      gridCreated: !!grid,
      sectionsInsideGrid: grid ? grid.querySelectorAll('section[component-id]').length : 0
    };
    console.table(result);
    return result;
  };

  function sizing() {
    const grid = document.getElementById(gridId);
    if (!grid) return;
    const mobile = window.innerWidth < 768;
    const slides = window.innerWidth < 640 ? 2 : 3;

    // Keep the fundamental 2-column layout even if the theme overrides CSS.
    grid.style.display = 'grid';
    grid.style.gridTemplateColumns = mobile ? 'minmax(0, 1fr)' : 'repeat(2, minmax(0, 1fr))';
    grid.style.width = '100%';
    grid.style.maxWidth = '1500px';
    grid.style.margin = '0 auto';
    grid.style.direction = 'rtl';
    grid.style.gap = mobile ? '24px' : '32px';

    grid.querySelectorAll('section[component-id]').forEach(section => {
      const host = section.querySelector('salla-slider');
      if (!host) return;
      host.setAttribute('slides-per-view', String(slides));
      const wrap = host.querySelector('.swiper.s-slider-container');
      const swiper = wrap && wrap.swiper;
      if (swiper && !swiper.destroyed) {
        swiper.params.slidesPerView = slides;
        swiper.params.slidesPerGroup = 1;
        swiper.params.spaceBetween = 12;
        swiper.update();
        if (swiper.navigation && typeof swiper.navigation.update === 'function') {
          swiper.navigation.update();
        }
      }
      if (typeof host.update === 'function') {
        try { Promise.resolve(host.update()).catch(() => {}); } catch (_) {}
      }
    });
  }

  function build() {
    if (completed) return true;
    const sections = locate();
    if (sections.some(el => !el)) return false;

    // Unlike v1, this DOES NOT require the six sections to be adjacent
    // or to share one parent. Other homepage blocks are left untouched.
    let grid = document.getElementById(gridId);
    if (!grid) {
      grid = document.createElement('div');
      grid.id = gridId;
      grid.className = 'dots-six-categories-grid';
      const first = sections[0];
      first.parentNode.insertBefore(grid, first);
    }

    // Use the exact order requested by the merchant.
    sections.forEach(section => grid.appendChild(section));
    completed = true;
    if (observer) { observer.disconnect(); observer = null; }
    sizing();

    // Salla sliders hydrate asynchronously; update once they are ready.
    sections.forEach(section => {
      const slider = section.querySelector('salla-slider');
      if (slider) {
        slider.addEventListener('afterInit', sizing, { once: true });
        if (typeof slider.componentOnReady === 'function') {
          Promise.resolve(slider.componentOnReady()).then(sizing).catch(() => {});
        }
      }
    });

    requestAnimationFrame(() => requestAnimationFrame(sizing));
    window.addEventListener('load', sizing, { once: true });
    window.addEventListener('resize', sizing, { passive: true });
    console.info('[DOTS] Six category sections grouped successfully (v2.1)');
    return true;
  }

  function attempt() {
    if (queued || completed) return;
    queued = true;
    requestAnimationFrame(() => {
      queued = false;
      build();
    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', attempt, { once: true });
  } else {
    attempt();
  }

  // When Raed renders home sections after the custom JS has already loaded.
  const observeFrom = document.body || document.documentElement;
  if (observeFrom && !completed) {
    observer = new MutationObserver(attempt);
    observer.observe(observeFrom, { childList: true, subtree: true });
  }
  window.addEventListener('load', attempt, { once: true });
})();