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

// =====================================================
// popup.js — Modal Detail Beasiswa
// Tutup via: tombol ×, klik overlay, tekan Escape
// + DUKUNGAN MULTI-BAHASA (ID/EN)
// =====================================================

const overlay   = document.getElementById('popup-overlay');
const modal     = document.getElementById('popup-modal');
const closeBtn  = document.getElementById('popup-close');
const popupBody = document.getElementById('popup-content');

let currentOpenId = null; // Menyimpan status beasiswa mana yang sedang dibuka

// Bertanya langsung ke mesin utama (localization.js)
function getPopupLang() {
  if (typeof window.getLang === 'function') {
    return window.getLang();
  }
  return localStorage.getItem('if_untan_lang') || 'id';
}

// Format tanggal dinamis (ID / EN)
function fmtDate(str, lang) {
  if (!str) return '—';
  const d = new Date(str);
  if (isNaN(d.getTime())) return str;
  return d.toLocaleDateString(lang === 'en' ? 'en-US' : 'id-ID', {
    day: 'numeric',
    month: 'long',
    year: 'numeric'
  });
}

// Kamus Teks Statis Modal
const popupDict = {
  id: {
    req_empty: 'Syarat belum tersedia. Kunjungi sumber resmi.',
    req_title: 'Syarat Umum',
    open_date: 'Tanggal Buka',
    close_date: 'Tanggal Tutup',
    contact: 'Kontak',
    more_info: 'Info Lebih Lanjut',
    no_link: 'Tautan tidak tersedia. Silakan hubungi admin prodi.',
    status_open: 'Buka',
    status_closed: 'Ditutup'
  },
  en: {
    req_empty: 'Requirements not available. Visit official source.',
    req_title: 'General Requirements',
    open_date: 'Open Date',
    close_date: 'Closing Date',
    contact: 'Contact',
    more_info: 'More Information',
    no_link: 'Link unavailable. Please contact department admin.',
    status_open: 'Open',
    status_closed: 'Closed'
  }
};

/**
 * Buka popup modal untuk beasiswa dengan ID tertentu
 */
function openPopup(id) {
  currentOpenId = id;
  const data = window.beasiswaData || [];
  const bsw  = data.find(b => b.id === id);
  if (!bsw) return;

  const lang = getPopupLang();
  const d = popupDict[lang];

  const isBuka = bsw.status === 'Buka' || bsw.status === 'Dibuka';
  const badgeClass = isBuka ? 'badge-buka' : 'badge-ditutup';
  
  // Terjemahkan Status & Kategori
  const statusText = isBuka ? d.status_open : (lang === 'en' && (bsw.status === 'Ditutup' || bsw.status === 'Tutup') ? d.status_closed : bsw.status);
  
  // Menerjemahkan Kategori (Misal: "Beasiswa Swasta" -> "Private Scholarship")
  let kategoriText = bsw.kategori;
  if (lang === 'en') {
    if (bsw.kategori_en) {
        kategoriText = bsw.kategori_en;
    } else if (bsw.kategori.toLowerCase().includes('swasta')) {
        kategoriText = 'Private Scholarship';
    } else if (bsw.kategori.toLowerCase().includes('pemerintah')) {
        kategoriText = 'Government Scholarship';
    }
  }

  // Teks Dinamis (Ambil _en dari JSON jika ada, jika tidak pakai ID)
  const namaText = (lang === 'en' && bsw.nama_en) ? bsw.nama_en : bsw.nama;
  const deskripsiText = (lang === 'en' && bsw.deskripsi_singkat_en) ? bsw.deskripsi_singkat_en : bsw.deskripsi_singkat;
  const syaratData = (lang === 'en' && bsw.syarat_umum_en) ? bsw.syarat_umum_en : (bsw.syarat_umum || []);

  // Bangun list syarat umum
  const syaratItems = syaratData
    .map(s => `
      <li>
        <i class="fas fa-check-circle"></i>
        <span>${s}</span>
      </li>`)
    .join('');

  const syaratHTML = syaratItems
    ? `<ul class="syarat-list">${syaratItems}</ul>`
    : `<p style="font-size:13px;color:#94a3b8;font-style:italic;">${d.req_empty}</p>`;

  const hasUrl = bsw.url_sumber && bsw.url_sumber !== '#';

  // Render konten popup dengan template Anda yang dipertahankan
  popupBody.innerHTML = `
    <div class="popup-body">
      <div class="popup-kategori-row">
        <span class="badge-status ${badgeClass}">${statusText}</span>
        <span class="popup-kategori">${kategoriText}</span>
      </div>

      <h2 id="popup-title" class="popup-title">${namaText}</h2>

      <p class="popup-desc">${deskripsiText}</p>

      <div class="popup-section-title">
        <i class="fas fa-list-check"></i>
        ${d.req_title}
      </div>
      ${syaratHTML}

      <div class="popup-periode">
        <div class="popup-periode-item">
          <label>${d.open_date}</label>
          <span>${fmtDate(bsw.tanggal_buka, lang)}</span>
        </div>
        <div class="popup-periode-item">
          <label>${d.close_date}</label>
          <span style="${!isBuka ? 'color:#EF4444;' : ''}">${fmtDate(bsw.tanggal_tutup, lang)}</span>
        </div>
      </div>

      ${bsw.kontak ? `
      <div class="popup-kontak">
        <i class="fas fa-phone-alt"></i>
        <div>
          <div style="font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px;">${d.contact}</div>
          ${bsw.kontak}
        </div>
      </div>` : ''}

      ${hasUrl
        ? `<a
            href="${bsw.url_sumber}"
            target="_blank"
            rel="noopener noreferrer"
            class="popup-cta"
            aria-label="${d.more_info} ${bsw.nama}"
          >
            ${d.more_info}
            <i class="fas fa-external-link-alt" style="font-size:12px;"></i>
          </a>`
        : `<button class="popup-cta disabled" disabled aria-disabled="true">
            ${d.more_info}
            <i class="fas fa-external-link-alt" style="font-size:12px;"></i>
          </button>
          <p style="text-align:center;font-size:11px;color:#94a3b8;margin-top:8px;">
            ${d.no_link}
          </p>`
      }
    </div>
  `;

  // Tampilkan overlay
  overlay.classList.add('show');
  document.body.style.overflow = 'hidden';

  // Set focus ke modal untuk aksesibilitas
  setTimeout(() => modal.focus(), 50);
}

/** Tutup popup modal */
function closePopup() {
  currentOpenId = null;
  overlay.classList.remove('show');
  document.body.style.overflow = '';
}

// === Event Listeners untuk menutup popup ===
closeBtn?.addEventListener('click', closePopup);
document.getElementById('popup-backdrop')?.addEventListener('click', closePopup);
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape' && overlay.classList.contains('show')) {
    closePopup();
  }
});

// Jika bahasa diganti SAAT popup sedang terbuka, cetak ulang isinya!
document.addEventListener('languageChanged', () => {
  if (currentOpenId && overlay.classList.contains('show')) {
    openPopup(currentOpenId);
  }
});

window.openPopup  = openPopup;
window.closePopup = closePopup;