const leftArrow = document.getElementById("leftArrow");
const rightArrow = document.getElementById("rightArrow");
const slider = document.getElementById("slider");

let slideIndex = 0;
let slideWidth = 550; // Ukuran slide pada layar non-ponsel
let timer;

// Panggil fungsi handleResize setelah elemen slider dibuat
fetchTestimonialsData().then(() => {
  handleResize();
});

leftArrow.style.visibility = "hidden";
updateArrowVisibility();

leftArrow.onclick = function () {
  if (slideIndex > 0) {
    slideIndex--;
    slider.style.left = -slideIndex * slideWidth + "px";
  }

  updateArrowVisibility();
  resetTimer();
};

rightArrow.onclick = function () {
  const numSlides = slider.children.length;
  if (slideIndex < numSlides - 1) {
    slideIndex++;
    slider.style.left = -slideIndex * slideWidth + "px";
  }

  updateArrowVisibility();
  resetTimer();
};

// Tambahkan fungsi handleResize untuk mengatur tata letak responsif
function handleResize() {
  const windowWidth = window.innerWidth;

  if (windowWidth < 768) {
    slideWidth = windowWidth;
  } else {
    slideWidth = 550; // Ukuran slide pada layar non-ponsel
  }

  slider.style.width = slideWidth * slider.children.length + "px";

  Array.from(slider.children).forEach((slide) => {
    slide.style.width = slideWidth + "px";
  });

  slider.style.left = -slideIndex * slideWidth + "px";
}

function fetchTestimonialsData() {
  return new Promise((resolve, reject) => {
    // Mengambil data testimoni dari database (gunakan metode yang sesuai seperti AJAX atau fetch API)
    // Misalnya, menggunakan fetch API:
    fetch('url_ke_endpoint_data_testimoni')
      .then(response => response.json())
      .then(data => {
        // Menggunakan data testimoni untuk membuat elemen slide
        data.forEach(testimonial => {
          const slide = document.createElement('div');
          slide.classList.add('slide');
  
          const profile = document.createElement('div');
          profile.classList.add('profile');
          // Tambahkan konten profil seperti gambar dan nama pengguna ke elemen profile
  
          const content = document.createElement('div');
          content.classList.add('content');
          // Tambahkan konten testimonial seperti komentar dan rating ke elemen content
  
          slide.appendChild(profile);
          slide.appendChild(content);
  
          slider.appendChild(slide);
        });
  
        updateArrowVisibility();
        startAutoSlide(); // Start automatic sliding

        resolve();
      })
      .catch(error => {
        console.error('Terjadi kesalahan saat mengambil data testimoni:', error);
        reject(error);
      });
  });
}

function updateArrowVisibility() {
  const numSlides = slider.children.length;

  if (numSlides <= 1) {
    leftArrow.style.visibility = "hidden";
    rightArrow.style.visibility = "hidden";
} else if (slideIndex === 0) {
    leftArrow.style.visibility = "hidden";
    rightArrow.style.visibility = "visible";
    } else if (slideIndex === numSlides - 1) {
    leftArrow.style.visibility = "visible";
    rightArrow.style.visibility = "hidden";
    } else {
    leftArrow.style.visibility = "visible";
    rightArrow.style.visibility = "visible";
    }
    }
    
    function startAutoSlide() {
    timer = setInterval(() => {
    const numSlides = slider.children.length;
    if (slideIndex < numSlides - 1) {
    slideIndex++;
    slider.style.left = -slideIndex * slideWidth + "px";
    } else {
    slideIndex = 0;
    slider.style.left = "0px";
    }
    updateArrowVisibility();
    }, 3000); // Change slide every 3 seconds (adjust as needed)
    }
    
    function resetTimer() {
    clearInterval(timer);
    startAutoSlide();
    }
    
    // Panggil fungsi handleResize saat ukuran jendela berubah
    window.addEventListener("resize", handleResize);
    
    // Trigger right arrow click event secara otomatis setelah 3 detik
    setTimeout(() => {
    rightArrow.click();
    }, 3000);