document.addEventListener('DOMContentLoaded', function() {
  if (typeof Splide !== 'undefined') {
    // Initialize the Splide slider
    var splide = new Splide('.splide', {
      // Add your Splide options here
      arrows: false, // Disable built-in arrows if using custom arrows
    });

    // Define the SlideNumber plugin using a function expression
    const SlideNumber = function(Splide, Components, options = { doubleDigit: false }) {
      const { track } = Components.Elements;
      let currentSlide;
      let totalSlides;
      let navContainer;

      function mount() {
        // Find or create the custom navigation container with ID 'slider-progress'
        navContainer = document.querySelector('#slider-progress');
        if (!navContainer) {
          navContainer = document.createElement('div');
          navContainer.id = 'slider-progress';
          track.parentElement.insertBefore(navContainer, track.nextSibling);
        }

        // Create elements for current slide and total slides
        currentSlide = navContainer.querySelector('.current-slide');
        totalSlides = navContainer.querySelector('.total-slides');

        if (!currentSlide) {
          currentSlide = document.createElement('div');
          currentSlide.className = 'current-slide';
          navContainer.appendChild(currentSlide);
        }

        if (!totalSlides) {
          totalSlides = document.createElement('div');
          totalSlides.className = 'total-slides';
          navContainer.appendChild(totalSlides);
        }

        // Set the total slides text
        totalSlides.textContent = formatNumber(Splide.length);

        // Listen to events to update the slide numbers
        Splide.on('mounted move moved updated', update);

        // Add event listeners to custom arrows
        const prevArrow = document.querySelector('.fr-slider__custom-arrow--prev');
        const nextArrow = document.querySelector('.fr-slider__custom-arrow--next');

        if (prevArrow) {
          prevArrow.addEventListener('click', function() {
            Splide.go('<');
          });
        }

        if (nextArrow) {
          nextArrow.addEventListener('click', function() {
            Splide.go('>');
          });
        }

        // Event delegation for progress bar buttons
        const progressButtonsContainer = document.querySelector('.fr-slider__progress-buttons');
        if (progressButtonsContainer) {
          progressButtonsContainer.addEventListener('click', function(event) {
            const button = event.target.closest('.fr-slider__progress-button');
            if (button) {
              const index = parseInt(button.getAttribute('data-index'), 10);
              Splide.go(index);
            }
          });
        }

        // Update slide numbers after mounting
        update();
      }

      function update() {
        // Update the current slide text
        const currentIndex = Splide.index + 1;
        currentSlide.textContent = formatNumber(currentIndex);
      }

      function formatNumber(number) {
        // Format the number based on the doubleDigit option
        return options.doubleDigit ? String(number).padStart(2, '0') : String(number);
      }

      return {
        mount,
      };
    };

    // Add the SlideNumber plugin to the Splide instance with the desired options
    splide.on('mounted', function() {
      const slideNumberInstance = SlideNumber(splide, splide.Components, { doubleDigit: true });
      slideNumberInstance.mount();
    });

    // Mount the Splide slider
    splide.mount();
  }
});