/* =====================================================
   🚀 NexToLearn - Main JavaScript File
   Author: Abdul Moiz
   Description: Handles form validation, UI interactivity,
                and dashboard behavior.
===================================================== */

// 🌗 Theme Toggle
const themeToggle = document.createElement("button");
themeToggle.innerText = "🌓 Theme";
themeToggle.style.position = "fixed";
themeToggle.style.bottom = "15px";
themeToggle.style.right = "15px";
themeToggle.style.padding = "8px 12px";
themeToggle.style.borderRadius = "8px";
themeToggle.style.border = "none";
themeToggle.style.cursor = "pointer";
themeToggle.style.background = "#38bdf8";
themeToggle.style.color = "white";
document.body.appendChild(themeToggle);

themeToggle.addEventListener("click", () => {
  document.body.classList.toggle("light-theme");
  if (document.body.classList.contains("light-theme")) {
    localStorage.setItem("theme", "light");
  } else {
    localStorage.setItem("theme", "dark");
  }
});

window.addEventListener("load", () => {
  const savedTheme = localStorage.getItem("theme");
  if (savedTheme === "light") {
    document.body.classList.add("light-theme");
  }
});

// 🎓 Simple Login Validation
const loginForm = document.querySelector("form[action='dashboard.php']");
if (loginForm) {
  loginForm.addEventListener("submit", (e) => {
    const email = loginForm.querySelector("input[name='email']");
    const password = loginForm.querySelector("input[name='password']");

    if (!email.value || !password.value) {
      e.preventDefault();
      alert("Please enter both email and password.");
    } else {
      alert("✅ Logging in as " + email.value);
    }
  });
}

// 🧾 Signup Form Validation
const signupForm = document.querySelector("form[action='dashboard.php'][method='POST']");
if (signupForm && signupForm.querySelector("input[name='name']")) {
  signupForm.addEventListener("submit", (e) => {
    const name = signupForm.querySelector("input[name='name']").value.trim();
    const email = signupForm.querySelector("input[name='email']").value.trim();
    const password = signupForm.querySelector("input[name='password']").value.trim();

    if (!name || !email || !password) {
      e.preventDefault();
      alert("⚠️ All fields are required!");
    } else {
      alert("🎉 Account created successfully for " + name + "!");
    }
  });
}

// 📣 Dashboard Welcome Message
if (window.location.pathname.includes("dashboard.php")) {
  window.addEventListener("load", () => {
    alert("🎓 Welcome to NexToLearn Dashboard!");
  });
}

// 📱 Responsive Menu (optional future use)
const nav = document.querySelector("nav");
if (nav) {
  const toggleBtn = document.createElement("button");
  toggleBtn.textContent = "☰ Menu";
  toggleBtn.style.marginLeft = "10px";
  toggleBtn.onclick = () => {
    nav.classList.toggle("open");
  };
  document.querySelector("header")?.appendChild(toggleBtn);
}

// Course tabs functionality
const courseTabs = document.querySelectorAll('.course-tab');
const courseCards = document.querySelectorAll('.course-card');

courseTabs.forEach(tab => {
    tab.addEventListener('click', function() {
        const category = this.getAttribute('data-category');

        // Update active tab
        courseTabs.forEach(t => t.classList.remove('active'));
        this.classList.add('active');

        // Show/hide courses based on category
        courseCards.forEach(card => {
            if (category === 'all' || card.getAttribute('data-category') === category) {
                card.style.display = 'block';
            } else {
                card.style.display = 'none';
            }
        });
    });
});

// Auth button functionality
const loginBtn = document.querySelector('.btn-outline');
const signupBtn = document.querySelector('.btn-primary');

if (loginBtn) {
    loginBtn.addEventListener('click', function() {
        alert('Login functionality would be implemented here.');
    });
}

if (signupBtn) {
    signupBtn.addEventListener('click', function() {
        alert('Sign up functionality would be implemented here.');
    });
}

// CTA button functionality
const ctaBtn = document.querySelector('.cta .btn-primary');
if (ctaBtn) {
    ctaBtn.addEventListener('click', function() {
        alert('Account creation would be implemented here.');
    });
}

// Enroll button functionality
const enrollButtons = document.querySelectorAll('.course-card .btn-primary');
enrollButtons.forEach(button => {
    button.addEventListener('click', function(e) {
        e.stopPropagation();
        const courseTitle = this.closest('.course-card').querySelector('.course-title').textContent;
        alert(`Enrollment process for: ${courseTitle}`);
    });
});