<script>
const onDOMContentLoaded = () => {
  window.isMuted = true;

  const onVideoPlaying = (event) => {
    const { target: vidElement } = event;
    try {
      updateAudioBtnVisibility(hasAudio(vidElement));
    } catch (_) {}
  }

  function bgMediaPause() {
    setTimeout(() => {
      document
      .querySelectorAll(".swiper-slide:not(.swiper-slide-active) .vidbg-container video, .swiper-slide:not(.swiper-slide-active) audio")
        .forEach((mediaElement) => {
          if (mediaElement.id.startsWith('audio-player')) {
            return;
          }
          try {
            mediaElement.pause();
            mediaElement.removeEventListener('playing', onVideoPlaying);
            mediaElement.removeEventListener('ended', onMediaElementEnded);
          } catch (_) {}
        });
  
      const activeSlide = document.querySelector(".swiper-slide-active");
      let activeSlideHasAudio = false;
      let activeSlideHasVideo = false;
      let videoReadyToLoop = false;
      let audioReadyToLoop = false;
      function onMediaElementEnded(event) {
        let videoElement = activeSlide.querySelector(".vidbg-container video");
        let audioElement = activeSlide.querySelector("audio");
        let videoSourceElement = videoElement ? videoElement.querySelector("source") : null;
        let videoSrc = videoSourceElement ? videoSourceElement.getAttribute('src') : null;
        
        // Only consider the videoElement valid if the src attribute is not "#"
        if (videoSrc === "#") {
            videoElement = null;
        }
      
        if (event.target.tagName.toLowerCase() === 'video') {
          videoReadyToLoop = true;
        } else {
          audioReadyToLoop = true;
        }
      
        if (videoElement && audioElement && videoReadyToLoop && audioReadyToLoop) {
          videoElement.currentTime = 0;
          videoElement.play();
          audioElement.currentTime = 0;
          audioElement.play();
          videoReadyToLoop = false;
          audioReadyToLoop = false;
        } else if (!videoElement && audioElement && audioReadyToLoop) {
          audioElement.currentTime = 0;
          audioElement.play();
          audioReadyToLoop = false;
          audioElement.loop = true; // add this line
        } else if (videoElement && !audioElement && videoReadyToLoop) {
          videoElement.currentTime = 0;
          videoElement.play();
          videoReadyToLoop = false;
          videoElement.loop = true; // add this line
        }
      }
        
        activeSlide
        .querySelectorAll(".vidbg-container video, audio")
        .forEach((mediaElement) => {
          const videoElement = activeSlide.querySelector(".vidbg-container video");
          mediaElement.currentTime = 0;
          mediaElement.muted = isMuted;
          if (mediaElement.tagName.toLowerCase() === 'video') {
            activeSlideHasVideo = true;
            if (hasAudio(mediaElement)) {
              mediaElement.volume = 0.5;
            } else {
              mediaElement.volume = 1.0;
            }
          }
          if (mediaElement.tagName.toLowerCase() === 'audio') {
            activeSlideHasAudio = true;
            mediaElement.volume = 1.0;
          }
          mediaElement.play().catch((error) => {
            console.log('Media play interrupted:', error);
          });
          mediaElement.addEventListener('ended', onMediaElementEnded);
          mediaElement.addEventListener('playing', onVideoPlaying);
        });
      
      updateAudioBtnVisibility(activeSlideHasAudio);
    }, 200);
  }
  function hasAudio(mediaElement) {
    if(mediaElement.tagName === 'AUDIO') {
      return true;
    }
    
    return (
      mediaElement.mozHasAudio ||
      Boolean(mediaElement.webkitAudioDecodedByteCount) ||
      Boolean(mediaElement.audioTracks && mediaElement.audioTracks.length)
    );
  }

  window.updateAudioBtnIcon = function() {
    if (isMuted) {
      volumeToggleButton.innerHTML = '<i class="fas fa-volume-mute"></i>';
    } else {
      volumeToggleButton.innerHTML = '<i class="fas fa-volume-up"></i>';
    }
  }

  function updateAudioBtnVisibility(visible) {
    volumeToggleButton.style.visibility = visible ? "visible" : "hidden";
  }

  const sliders = document.querySelector(".swiper-container");
  const volumeToggleButton = document.getElementById("volume-toggle");
  sliders.zbSwiper.on("slideChange", bgMediaPause);
  updateAudioBtnIcon();

  // Function to mute all media elements
function muteAllMedia() {
  document.querySelectorAll(".vidbg-container video, audio").forEach(mediaElement => {
    if (!mediaElement.id.startsWith("audio-player")) {
      mediaElement.muted = true;
    }
  });
}

  volumeToggleButton.addEventListener("click", function () {
    isMuted = !isMuted;
    const activeSlide = document.querySelector(".swiper-slide-active");

    let activeSlideHasAudio = false;
    activeSlide.querySelectorAll(".vidbg-container video, audio")
      .forEach((mediaElement) => {
        if (!mediaElement.id.startsWith("audio-player")) {
          mediaElement.muted = isMuted;
          if (hasAudio(mediaElement)) {
            activeSlideHasAudio = true;
          }
        }
      });
    updateAudioBtnVisibility(activeSlideHasAudio);
    updateAudioBtnIcon();
  });

  // Event listener for the #sendgift button
const sendGiftButton = document.getElementById("sendgift");
if (sendGiftButton) {
  sendGiftButton.addEventListener("click", function () {
    isMuted = true;
    updateAudioBtnIcon();
    muteAllMedia();
  });
}

// Event listener for the #send-modal button
const sendModalButton = document.getElementById("send-modal");
if (sendModalButton) {
  sendModalButton.addEventListener("click", function () {
    isMuted = true;
    updateAudioBtnIcon();
    muteAllMedia();
  });
}

  bgMediaPause();
}

document.addEventListener("DOMContentLoaded", onDOMContentLoaded);

</script>