<script>
document.addEventListener('DOMContentLoaded', () => {
  const initializeSliders = () => {
    const sliderClasses = ['bt-product-quickview-gallery-slider', 'bt-product-quickview-gallery-slider-thumb']; // Array of main slider class names

    const sliderSelector = sliderClasses.map(cls => `.${cls}`).join(', ');

    const debounce = (fn, threshold) => {
      let timeout;
      threshold = threshold || 200;
      return function debounced(...args) {
        clearTimeout(timeout);
        const context = this;
        timeout = setTimeout(() => {
          fn.apply(context, args);
        }, threshold);
      };
    };

    const initSlider = (sliderElement) => {
      const sliderId = sliderElement.id;
      const allInstances = window.bricksData?.splideInstances;
      let mySlider = false;

      for (const key in allInstances) {
        if (key === sliderId) {
          mySlider = allInstances[key];
          break;
        }
      }

      if (!mySlider) {
        for (const key in allInstances) {
          const instance = allInstances[key];
          if (instance.root === sliderElement) {
            mySlider = instance;
            break;
          }
        }
      }

      if (mySlider) {
        const progressBar = document.querySelector(`.bt-slider-progressbar[bt-data-slider="${sliderElement.getAttribute('bt-data-slider')}"]`);
        if (progressBar) {
          const progressType = progressBar.getAttribute('bt-data-progress-type');

          if (progressType === 'progress') {
            const updateProgressBar = () => {
              const end = mySlider.Components.Controller.getEnd() + 1;
              const rate = Math.min((mySlider.index + 1) / end, 1);
              progressBar.style.width = String(100 * rate) + '%';
            };

            mySlider.on('mounted move', updateProgressBar);
            updateProgressBar();
          } else if (progressType === 'animated') {
            const interval = mySlider.options.interval || 3000;

            function startProgressBar() {
              progressBar.style.transitionDuration = interval + 'ms';
              progressBar.style.width = '100%';
            }

            function resetProgressBar() {
              progressBar.style.transitionDuration = '0ms';
              progressBar.style.width = '0%';
              setTimeout(startProgressBar, 10);
            }

            mySlider.on('autoplay:playing', function () {
              startProgressBar();
            });

            mySlider.on('move', function () {
              resetProgressBar();
            });

            startProgressBar();
          }
        }

        const myPrevBtn = document.querySelector(`.bt-slidernav-prev[bt-data-slider="${sliderElement.getAttribute('bt-data-slider')}"]`);
        const myNextBtn = document.querySelector(`.bt-slidernav-next[bt-data-slider="${sliderElement.getAttribute('bt-data-slider')}"]`);

        const updateButtonStates = () => {
          const totalSlides = mySlider.length;
          const slidesPerPage = mySlider.options.perPage || 1;
          const lastSlideIndex = totalSlides - slidesPerPage;

          if (mySlider.options.type === 'loop') {
            if (myPrevBtn) myPrevBtn.disabled = false;
            if (myNextBtn) myNextBtn.disabled = false;
          } else {
            if (myPrevBtn) {
              myPrevBtn.disabled = mySlider.index === 0;
            }
            if (myNextBtn) {
              myNextBtn.disabled = mySlider.index >= lastSlideIndex;
            }
          }
        };

        if (myPrevBtn && myNextBtn) {
          myPrevBtn.addEventListener('click', function () {
            mySlider.go('-1');
          });
          myNextBtn.addEventListener('click', function () {
            mySlider.go('+1');
          });

          mySlider.on('mounted moved', updateButtonStates);
          updateButtonStates();
        }

        const fractionsElement = document.querySelector(`[bt-data-slider="${sliderElement.getAttribute('bt-data-slider')}"][bt-data-fractions="true"]`);
        if (fractionsElement) {
          const updateFractions = () => {
            const currentIndex = mySlider.index + 1;
            const totalSlides = mySlider.length;
            fractionsElement.innerText = `${currentIndex}/${totalSlides}`;
          };

          mySlider.on('mounted move', updateFractions);
          updateFractions();
        }

        window.addEventListener('resize', debounce(() => {
          mySlider.options = mySlider.options;
          updateButtonStates();
        }, 300));
      }
    };

    const sliders = document.querySelectorAll(sliderSelector);
    sliders.forEach((sliderElement) => {
      initSlider(sliderElement);
    });

    const syncInit = (mainSliderId, thumbSliderId) => {
      const main = bricksData.splideInstances[mainSliderId],
        thumbnail = bricksData.splideInstances[thumbSliderId];

      main.sync(thumbnail);
    };

    const syncSliders = () => {
      const mainSliders = document.querySelectorAll(`[bt-data-sync="main"]`);
      mainSliders.forEach(mainSlider => {
        const mainSliderSyncValue = mainSlider.getAttribute('bt-data-slider');

        const thumbSliders = document.querySelectorAll(`[bt-data-sync="${mainSliderSyncValue}"]`);
        thumbSliders.forEach(thumbSlider => {
          const mainSliderId = mainSlider.dataset.scriptId;
          const thumbSliderId = thumbSlider.dataset.scriptId;
          
          setTimeout(() => {
            syncInit(mainSliderId, thumbSliderId);
          }, 0);

          window.addEventListener("resize", debounce(() => {
            syncInit(mainSliderId, thumbSliderId);
          }, 300));
        });
      });
    };

    syncSliders();
  };

  // Call on initial DOMContentLoaded
  setTimeout(initializeSliders, 250);

  
  // Call after AJAX popup content is loaded
  document.addEventListener('bricks/ajax/popup/loaded', (event) => {
    const popupId = event.detail.popupId;
    if (popupId == 1867) {
      setTimeout(initializeSliders, 250);  // Delay for popup content to be fully available
    }
  });
  
});
</script>