student-web-if-development-kit/groups/ApeNameTeamE/assets/js/carousel.js

// =====================================================
// carousel.js — Swiper.js Carousel Testimoni
// Touch-friendly, auto-play, responsive breakpoints
// + DUKUNGAN MULTI-BAHASA (ID/EN) Terintegrasi
// =====================================================

let testimoniSwiper = null;
let allTestimoniData = []; // Simpan data di memori agar tidak perlu loading ulang saat ganti bahasa

// 1. Variabel penampung bahasa yang terhubung otomatis dengan tombol ID/EN
let activeCarouselLang = localStorage.getItem('if_untan_lang') || document.documentElement.lang || 'id';

// 2. Tangkap event perubahan bahasa secara langsung dari localization.js
document.addEventListener('languageChanged', (e) => {
  // Update bahasa
  if (e.detail && e.detail.lang) {
    activeCarouselLang = e.detail.lang;
  } else if (typeof window.getLang === 'function') {
    activeCarouselLang = window.getLang();
  } else {
    activeCarouselLang = document.documentElement.lang || 'id';
  }

  // Jika data sudah ada, langsung cetak ulang testimoninya
  if (allTestimoniData && allTestimoniData.length > 0) {
    renderTestimoniSlides(allTestimoniData);
    initSwiper(allTestimoniData.length); // Swiper harus di-restart agar animasinya tidak rusak
  }
});

/** Render slide testimoni ke dalam swiper-wrapper */
function renderTestimoniSlides(data) {
  const wrapper = document.getElementById('testimonial-wrapper');
  if (!wrapper) return;
  
  const lang = activeCarouselLang; // Gunakan bahasa terbaru

  wrapper.innerHTML = data.map(t => {
    // Logika Pintar: Cek mode bahasa. Jika 'en' dan teks terjemahannya ada, pakai bahasa Inggris.
    // Jika tidak, tetap tampilkan teks bahasa Indonesia (sebagai cadangan).
    const beasiswaName = (lang === 'en' && t.nama_beasiswa_en) ? t.nama_beasiswa_en : t.nama_beasiswa;
    const quote = (lang === 'en' && t.kutipan_en) ? t.kutipan_en : t.kutipan;

    return `
      <div class="swiper-slide" style="height:auto;">
        <div class="testimonial-card">
          <img
            src="${t.foto}"
            alt="Foto ${t.nama}"
            class="testimonial-avatar"
            loading="lazy"
            onerror="
              this.style.display='none';
              this.nextElementSibling.style.display='flex';
            "
          >
          <div
            class="testimonial-avatar"
            style="
              display:none;
              background:linear-gradient(135deg,#003150,#4a6bc5);
              align-items:center;
              justify-content:center;
              color:white;
              font-size:22px;
              font-weight:700;
            "
          >
            ${t.nama.charAt(0).toUpperCase()}
          </div>

          <div class="testimonial-name">${t.nama}</div>
          <div class="testimonial-beasiswa">${beasiswaName}</div>
          <p class="testimonial-quote">"${quote}"</p>
        </div>
      </div>
    `;
  }).join('');
}

/** Inisialisasi Swiper setelah slide di-render */
function initSwiper(count) {
  // Bersihkan swiper lama jika ada (penting agar tidak menumpuk saat ganti bahasa)
  if (testimoniSwiper) {
    testimoniSwiper.destroy(true, true);
    testimoniSwiper = null;
  }

  testimoniSwiper = new Swiper('.testimonial-swiper', {
    slidesPerView: 1,
    spaceBetween: 24,
    loop: count > 3,
    centerInsufficientSlides: true,
    autoplay: {
      delay: 4500,
      disableOnInteraction: false,
      pauseOnMouseEnter: true,
    },
    pagination: {
      el: '.testimonial-pagination',
      clickable: true,
    },
    grabCursor: true,
    breakpoints: {
      640:  { slidesPerView: 2 },
      1024: { slidesPerView: 3 },
    },
    // Dukungan Aksesibilitas Dinamis (VoiceOver / Screen Reader)
    a11y: {
      prevSlideMessage: activeCarouselLang === 'en' ? 'Previous slide' : 'Slide sebelumnya',
      nextSlideMessage: activeCarouselLang === 'en' ? 'Next slide' : 'Slide berikutnya',
    },
  });
}

/** Fetch data testimoni dan render */
async function initCarousel() {
  const section = document.getElementById('testimonial');

  try {
    const res = await fetch('data/testimoni.json');
    if (!res.ok) throw new Error(`HTTP ${res.status}`);

    const data = await res.json();
    allTestimoniData = data; // Simpan ke variabel global

    if (!data || data.length === 0) {
      section?.classList.add('hidden');
      return;
    }

    renderTestimoniSlides(data);
    requestAnimationFrame(() => initSwiper(data.length));

  } catch {
    section?.classList.add('hidden');
  }
}

document.addEventListener('DOMContentLoaded', initCarousel);