/* Add custom JS code below */ 
/* =====================================================================
  DYNAMIC SIZE CHART — JS (single chart for all products)
  Paste into: Salla Customizer > Custom JS
  (no <script> tags needed). Requires size-chart.css to be added too.
  It injects itself right AFTER the element matching CONFIG.anchorSelector.
===================================================================== */

(function () {
  'use strict';

  /* =================== CONFIG (edit here) =================== */
  var CONFIG = {
    // The element the size chart is placed AFTER
    anchorSelector: '.s-product-options-wrapper',

    // 'inches' or 'cm' — which tab is open by default (original: inches)
    defaultUnit: 'inches',

    iconUrl: 'https://cdn.shopify.com/s/files/1/0721/9016/5212/files/scale-icon.svg?v=1748614450',

    labels: { ar: 'جدول القياسات', en: 'Size Chart' },

    // The same two images are shown on every product.
    // Arabic pages use the "ar" image, other languages use "en".
    images: {
      cm: {
        ar: 'https://cdn.files.salla.network/other/1122928650/e0f89a3c-ed0e-4012-8abe-3ceb2b3a9198-original.webp',
        en: 'https://cdn.files.salla.network/other/1122928650/e0f89a3c-ed0e-4012-8abe-3ceb2b3a9198-original.webp'
      },
      inches: {
        ar: 'https://cdn.files.salla.network/other/1122928650/f66e1267-65c4-49f9-a02f-731264b49eac-original.webp',
        en: 'https://cdn.files.salla.network/other/1122928650/f66e1267-65c4-49f9-a02f-731264b49eac-original.webp'
      }
    }
  };
  /* ========================================================== */

  if (window.__scSizeChartInit) return;

  function isProductPage() {
    try {
      if (window.salla && salla.config && salla.config.get('page.slug') === 'product.single') return true;
    } catch (e) {}
    return /\/p\d+(?:[\/?#]|$)/.test(location.pathname);
  }

  function isArabic() {
    var lang = (document.documentElement.lang || '').toLowerCase();
    var dir = (document.documentElement.dir || (document.body && document.body.dir) || '').toLowerCase();
    return lang.indexOf('ar') === 0 || dir === 'rtl';
  }

  function build() {
    var ar = isArabic();
    var cmSrc = ar ? CONFIG.images.cm.ar : CONFIG.images.cm.en;
    var inSrc = ar ? CONFIG.images.inches.ar : CONFIG.images.inches.en;
    var uid = 'sc' + Math.random().toString(36).slice(2, 8);
    var startUnit = CONFIG.defaultUnit === 'cm' ? 'cm' : 'inches';

    var root = document.createElement('div');
    root.className = 'sc-size-chart product-size-info';
    root.setAttribute('data-sc-root', '');

    root.innerHTML =
      '<button type="button" class="sc-toggle" aria-expanded="false" aria-controls="' + uid + '-panel">' +
        '<span class="sc-toggle-label">' +
          '<img class="sc-toggle-icon" src="' + CONFIG.iconUrl + '" alt="" width="20" height="20">' +
          '<span>' + (ar ? CONFIG.labels.ar : CONFIG.labels.en) + '</span>' +
        '</span>' +
        '<svg class="sc-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"></polyline></svg>' +
      '</button>' +
      '<div class="sc-panel" id="' + uid + '-panel" aria-hidden="true">' +
        '<div class="sc-panel-inner">' +
          '<div class="sc-body">' +
            '<div class="sc-tabs">' +
              '<button type="button" class="sc-tab" data-unit="cm" aria-pressed="false">CM</button>' +
              '<button type="button" class="sc-tab" data-unit="inches" aria-pressed="false">INCHES</button>' +
            '</div>' +
            '<div class="sc-image" data-unit="cm"><img src="' + cmSrc + '" alt="CM" loading="lazy"></div>' +
            '<div class="sc-image" data-unit="inches"><img src="' + inSrc + '" alt="INCHES" loading="lazy"></div>' +
          '</div>' +
        '</div>' +
      '</div>';

    var toggle = root.querySelector('.sc-toggle');
    var panel = root.querySelector('.sc-panel');
    var tabs = root.querySelectorAll('.sc-tab');
    var images = root.querySelectorAll('.sc-image');
    var icon = root.querySelector('.sc-toggle-icon');

    if (icon) icon.addEventListener('error', function () { icon.style.display = 'none'; });

    function setUnit(unit) {
      Array.prototype.forEach.call(tabs, function (t) {
        var on = t.getAttribute('data-unit') === unit;
        t.classList.toggle('is-active', on);
        t.setAttribute('aria-pressed', on ? 'true' : 'false');
      });
      Array.prototype.forEach.call(images, function (im) {
        im.classList.toggle('is-active', im.getAttribute('data-unit') === unit);
      });
    }

    toggle.addEventListener('click', function () {
      var open = !root.classList.contains('is-open');
      root.classList.toggle('is-open', open);
      toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
      panel.setAttribute('aria-hidden', open ? 'false' : 'true');
    });

    Array.prototype.forEach.call(tabs, function (t) {
      t.addEventListener('click', function () { setUnit(t.getAttribute('data-unit')); });
    });

    setUnit(startUnit);
    return root;
  }

  function init() {
    if (window.__scSizeChartInit || !isProductPage()) return;
    window.__scSizeChartInit = true;

    var root = build();

    // Salla renders its components late and may re-render them,
    // so keep the block attached right after the anchor.
    var queued = false;
    function ensure() {
      queued = false;
      var anchor = document.querySelector(CONFIG.anchorSelector);
      if (!anchor || !anchor.parentNode) return;
      if (anchor.nextElementSibling !== root) {
        anchor.parentNode.insertBefore(root, anchor.nextSibling);
      }
    }
    function schedule() {
      if (queued) return;
      queued = true;
      (window.requestAnimationFrame || setTimeout)(ensure);
    }

    ensure();
    new MutationObserver(schedule).observe(document.body, { childList: true, subtree: true });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();


document.addEventListener('DOMContentLoaded', function () {
  const popup = document.querySelector('.selia-discount-popup-content');

  if (!popup) return;

  const path = window.location.pathname.replace(/\/+$/, '');

  const isCartPage =
    path === '/cart' ||
    path === '/ar/cart';

  if (!isCartPage) {
    popup.classList.add('selia-hidden-popup');
  }
});

(function () {
  const path = window.location.pathname.replace(/\/+$/, '');

  const isCartPage =
    path === '/cart' ||
    path === '/ar/cart';

  if (isCartPage) return;

  function removePopup() {
    const popupContent = document.querySelector(
      '.selia-discount-popup-content'
    );

    if (!popupContent) return;

    popupContent.classList.add('selia-popup-hidden');

    let parent = popupContent.parentElement;

    while (parent && parent !== document.body) {
      const styles = window.getComputedStyle(parent);

      if (
        styles.position === 'fixed' ||
        styles.backdropFilter !== 'none' ||
        styles.webkitBackdropFilter !== 'none'
      ) {
        parent.classList.add('selia-popup-hidden');
        break;
      }

      parent = parent.parentElement;
    }
  }

  removePopup();

  const observer = new MutationObserver(removePopup);

  observer.observe(document.body, {
    childList: true,
    subtree: true
  });
})();


(function () {
  const path = window.location.pathname.replace(/\/+$/, '');

  const isCartPage =
    path === '/cart' ||
    path === '/ar/cart';

  if (isCartPage) return;

  function hideSeliaPopup() {
    const popup = document.querySelector('.selia-discount-popup-content');

    if (popup) {
      // Hide popup itself
      popup.classList.add('selia-force-hide');

      // Go up through parents and hide popup wrapper / overlay
      let parent = popup.parentElement;

      while (parent && parent !== document.body) {
        const style = window.getComputedStyle(parent);

        const isFullScreenOverlay =
          style.position === 'fixed' ||
          style.position === 'absolute' ||
          parent.classList.contains('fixed') ||
          parent.classList.contains('inset-0');

        if (isFullScreenOverlay) {
          parent.classList.add('selia-force-hide');

          // Remove blur/background directly
          parent.style.setProperty('display', 'none', 'important');
          parent.style.setProperty('backdrop-filter', 'none', 'important');
          parent.style.setProperty('-webkit-backdrop-filter', 'none', 'important');
          parent.style.setProperty('background', 'transparent', 'important');

          break;
        }

        parent = parent.parentElement;
      }
    }

    // Extra protection:
    // Find fullscreen elements containing the popup/discount UI
    document.querySelectorAll('body *').forEach(function (el) {
      const className =
        typeof el.className === 'string'
          ? el.className.toLowerCase()
          : '';

      const id = (el.id || '').toLowerCase();

      const isSeliaElement =
        className.includes('selia') ||
        id.includes('selia');

      if (!isSeliaElement) return;

      const style = window.getComputedStyle(el);

      const hasOverlayBehavior =
        style.position === 'fixed' ||
        style.backdropFilter !== 'none' ||
        style.webkitBackdropFilter !== 'none';

      if (hasOverlayBehavior) {
        el.classList.add('selia-force-hide');
        el.style.setProperty('display', 'none', 'important');
        el.style.setProperty('backdrop-filter', 'none', 'important');
        el.style.setProperty('-webkit-backdrop-filter', 'none', 'important');
      }
    });

    // Restore page scrolling in case popup locked body
    document.documentElement.style.removeProperty('overflow');
    document.body.style.removeProperty('overflow');
  }

  hideSeliaPopup();

  // Popup may be inserted after page load
  const observer = new MutationObserver(function () {
    hideSeliaPopup();
  });

  observer.observe(document.documentElement, {
    childList: true,
    subtree: true
  });
})();