document.addEventListener("DOMContentLoaded", () => {
  const changePassBtn = document.getElementById("change-pass-btn");
  const successModal = document.getElementById("password-success-modal");

  const passwordInput = document.getElementById("new-password");
  const confirmInput = document.getElementById("confirm-password");

  const passError = document.getElementById("new-password-error");
  const confirmError = document.getElementById("confirm-password-error");

  if (changePassBtn) {
    changePassBtn.addEventListener("click", () => {
      const pass = passwordInput.value.trim();
      const confirmPass = confirmInput.value.trim();

      let hasError = false;

      if (pass === "" || pass.length < 8) {
        passError.classList.remove("hidden");
        passwordInput.classList.add("border-red-500");
        hasError = true;
      } else {
        passError.classList.add("hidden");
        passwordInput.classList.remove("border-red-500");
      }

      if (confirmPass === "" || pass !== confirmPass) {
        confirmError.classList.remove("hidden");
        confirmInput.classList.add("border-red-500");
        hasError = true;
      } else {
        confirmError.classList.add("hidden");
        confirmInput.classList.remove("border-red-500");
      }

      if (!hasError) {
        successModal.classList.remove("hidden");
      }
    });
  }

  [passwordInput, confirmInput].forEach((input) => {
    input.addEventListener("input", () => {
      input.classList.remove("border-red-500");
      const errorId = `${input.id}-error`;
      const errorElement = document.getElementById(errorId);
      if (errorElement) errorElement.classList.add("hidden");
    });
  });
});
