/*LOGIN VALIDATION*/
document.getElementById("loginForm").addEventListener("submit", function(e) {
  e.preventDefault();

  const username = document.getElementById("username").value.trim();
  const password = document.getElementById("password").value.trim();
  const errorBox = document.getElementById("errorBox");

  errorBox.style.display = "none";
  errorBox.innerText = "";

  if (!username || !password) {
    showError("Username dan password harus diisi");
    return;
  }

  if (password.length < 6) {
    showError("Password minimal 6 karakter");
    return;
  }

  const usersData = localStorage.getItem("users");
  const users = usersData ? JSON.parse(usersData) : [];

  const user = users.find(u => u.username === username);

  if (!user) {
    showError("Username tidak ditemukan");
    return;
  }

  if (user.password !== password) {
    showError("Password salah");
    return;
  }

  // Login sukses
  localStorage.setItem("loggedInUser", JSON.stringify(user));
  window.location.href = "mainboard.html";
});

function showError(msg) {
  const errorBox = document.getElementById("errorBox");
  errorBox.innerText = msg;
  errorBox.style.display = "block";
}

function toggleDemo() {
  const box = document.getElementById("demoBox");
  const btn = document.querySelector(".demo-toggle");

  box.classList.toggle("show");

  // Ubah teks tombol
  if (box.classList.contains("show")) {
    btn.textContent = "Sembunyikan Demo Akun ▲";
  } else {
    btn.textContent = "Lihat Demo Akun ▼";
  }
}


/* GLITTER EFFECT*/

document.addEventListener("DOMContentLoaded", function () {
  const card = document.querySelector(".login-card");

  if (!card) return;

  // Tambah glitter 20x
  for (let i = 0; i < 20; i++) {
    const g = document.createElement("div");
    g.className = "glitter";

    // Random posisi ledakan glitter
    g.style.setProperty("--x", (Math.random() * 200 - 100) + "px");
    g.style.setProperty("--y", (Math.random() * 200 - 100) + "px");

    g.style.left = (Math.random() * 100) + "%";
    g.style.top = (Math.random() * 100) + "%";

    g.style.animationDelay = (Math.random() * 2) + "s";

    card.appendChild(g);
  }
});