document.addEventListener('DOMContentLoaded', function () {
  const searchBar = document.getElementById('searchBar');
  const songNames = document.querySelectorAll('h1[style="font-size: 28px;"]');
  const descriptions = document.querySelectorAll('p[style="font-size: 20px;"]');
  const songContainers = document.querySelectorAll('.movie');

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

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

        audio.classList.toggle('d-none');

        if (audio.paused) {
          audio.play();
        } else {
          audio.pause();
        }
      });
    });
  searchBar.addEventListener('input', function() {
        const searchText = searchBar.value.toLowerCase();

        songNames.forEach((song, index) => {
            const songName = song.textContent.toLowerCase();
            const description = descriptions[index].textContent.toLowerCase();

            if (songName.includes(searchText) || description.includes(searchText)) {
                song.parentElement.parentElement.style.display = 'block';
            } else {
                song.parentElement.parentElement.style.display = 'none';
            }
        });
    });
  });