document.addEventListener('DOMContentLoaded', function () {
  const movieContainers = document.querySelectorAll('.movie');

  movieContainers.forEach(function (container) {
    container.addEventListener('click', function () {
      const audio = this.querySelector('audio');

      // Pause all other audio elements except the one clicked
      movieContainers.forEach(function (otherContainer) {
        const otherAudio = otherContainer.querySelector('audio');
        if (otherAudio !== audio && !otherAudio.paused) {
          otherAudio.pause();
          otherAudio.classList.add('d-none');
        }
      });

      // Play or pause the audio based on its current state
      if (audio.paused) {
        audio.play();
      } else {
        audio.pause();
      }

      // Toggle the display of the audio element
      audio.classList.toggle('d-none');
    });
  });
});