/* ========== APPLICATION MODAL FUNCTIONALITY ========== */
const applicationModal = document.getElementById("applicationModal");
const modalClose = document.getElementById("modalClose");
const applicationForm = document.getElementById("applicationForm");
const applyButtons = document.querySelectorAll(".btn-primary");
const resumeInput = document.getElementById("resume");
const fileName = document.getElementById("fileName");

let currentJobTitle = "";

// Open modal when clicking Apply Now
applyButtons.forEach((button) => {
  button.addEventListener("click", function (e) {
    e.preventDefault();
    const jobCard = this.closest(".job-card");
    currentJobTitle = jobCard.querySelector("h3").textContent;
    openModal();
  });
});

// Close modal
modalClose.addEventListener("click", closeModal);

// Close modal when clicking outside
applicationModal.addEventListener("click", function (e) {
  if (e.target === applicationModal) {
    closeModal();
  }
});

// Close modal with Escape key
document.addEventListener("keydown", function (e) {
  if (e.key === "Escape" && applicationModal.classList.contains("active")) {
    closeModal();
  }
});

// Handle file input
resumeInput.addEventListener("change", function () {
  if (this.files && this.files[0]) {
    fileName.textContent = this.files[0].name;
  } else {
    fileName.textContent = "No file chosen";
  }
});

// Handle form submission
applicationForm.addEventListener("submit", function (e) {
  e.preventDefault();

  const formData = {
    jobTitle: currentJobTitle,
    fullName: document.getElementById("fullName").value,
    email: document.getElementById("email").value,
    phone: document.getElementById("phone").value,
    portfolio: document.getElementById("portfolio").value,
    resume: resumeInput.files[0]?.name || "No file",
  };

  console.log("Application submitted:", formData);

  alert(
    `Thank you for applying to ${currentJobTitle}!\n\nWe have received your application and will get back to you soon.`
  );

  closeModal();
  applicationForm.reset();
  fileName.textContent = "No file chosen";
});

function openModal() {
  applicationModal.classList.add("active");
  document.body.style.overflow = "hidden";
}

function closeModal() {
  applicationModal.classList.remove("active");
  document.body.style.overflow = "";
}
