const loginModal = document.getElementById("loginModal");
const registerModal = document.getElementById("registerModal");
const registerFormModal = document.getElementById("registerFormModal");

const openLogin = document.getElementById("openLogin");
const closeLogin = document.getElementById("closeLogin");

const openRegister = document.getElementById("openRegister");
const closeRegister = document.getElementById("closeRegister");
const closeRegisterForm = document.getElementById("closeRegisterForm");

const shopOwnerOption = document.getElementById("shopOwnerOption");
const customerOption = document.getElementById("customerOption");

const registerTitle = document.getElementById("registerTitle");
const selectedRole = document.getElementById("selectedRole");

const shopNameField = document.getElementById("shopNameField");
const birField = document.getElementById("birField");

const loginPasswordField = document.getElementById("loginPasswordField");
const passwordField = document.getElementById("passwordField");

const dropdownBtn = document.getElementById("dropdownBtn");
const dropdownMenu = document.getElementById("dropdownMenu");
const selectedRoleText = document.getElementById("selectedRoleText");

const backToLogin = document.getElementById("backToLogin");
const loginRegisterLink = document.getElementById("loginRegisterLink");

const showPassword = document.getElementById("showPassword");
const showPasswordRegister = document.getElementById("showPasswordRegister");

const permitInput = document.getElementById("businessPermitNumber");

const shopType = document.getElementById("shopType");
const mainServices = document.querySelector('textarea[name="main_services"]');
const shopFields = document.getElementById("shopFields");

const options = document.querySelectorAll("#dropdownMenu button");

options.forEach(option => {
    option.addEventListener("click", function () {
        options.forEach(btn => btn.classList.remove("selected"));
        this.classList.add("selected");

        selectedRoleText.textContent = this.textContent;

        // make the top button blue with white text
        dropdownBtn.classList.add("selected-role");

        dropdownMenu.classList.remove("show");
    });
});

const mobileInput = document.getElementById("mobileNumber");

if (mobileInput) {
  mobileInput.addEventListener("input", () => {
    // remove non-numbers while typing
    mobileInput.value = mobileInput.value.replace(/\D/g, "");

    if (mobileInput.value.length === 0) {
      mobileInput.setCustomValidity("Please enter your mobile number.");
    } else if (!/^\d+$/.test(mobileInput.value)) {
      mobileInput.setCustomValidity("Mobile number must contain numbers only.");
    } else if (mobileInput.value.length !== 11) {
      mobileInput.setCustomValidity("Mobile number must be exactly 11 digits.");
    } else if (!/^09\d{9}$/.test(mobileInput.value)) {
      mobileInput.setCustomValidity("Mobile number must start with 09.");
    } else {
      mobileInput.setCustomValidity("");
    }
  });

  mobileInput.addEventListener("invalid", () => {
    if (mobileInput.value.length === 0) {
      mobileInput.setCustomValidity("Please enter your mobile number.");
    } else if (mobileInput.value.length !== 11) {
      mobileInput.setCustomValidity("Mobile number must be exactly 11 digits.");
    } else if (!/^09\d{9}$/.test(mobileInput.value)) {
      mobileInput.setCustomValidity("Mobile number must start with 09.");
    } else {
      mobileInput.setCustomValidity("");
    }
  });
}


if (permitInput) {
  permitInput.addEventListener("input", () => {
    permitInput.value = permitInput.value.replace(/\D/g, "");
  });
}

backToLogin.addEventListener("click", (e) => {
  e.preventDefault();
  registerFormModal.style.display = "none";
  loginModal.style.display = "flex";
});

function closeAllModals() {
  loginModal.style.display = "none";
  registerModal.style.display = "none";
  registerFormModal.style.display = "none";
  dropdownMenu.classList.remove("show");
}

openLogin.addEventListener("click", () => {
  closeAllModals();
  loginModal.style.display = "flex";
});

closeLogin.addEventListener("click", () => {
  loginModal.style.display = "none";
});

openRegister.addEventListener("click", () => {
    closeAllModals();
    selectedRoleText.textContent = "Select role";
    dropdownBtn.classList.remove("selected-role");
    options.forEach(btn => btn.classList.remove("selected"));
    dropdownMenu.classList.remove("show");
    registerModal.style.display = "flex";
});

closeRegister.addEventListener("click", () => {
  registerModal.style.display = "none";
  dropdownMenu.classList.remove("show");
});

closeRegisterForm.addEventListener("click", () => {
  registerFormModal.style.display = "none";
});

loginRegisterLink.addEventListener("click", (e) => {
  e.preventDefault();
  closeAllModals();
  selectedRoleText.textContent = "Select role";
  registerModal.style.display = "flex";
});

dropdownBtn.addEventListener("click", (e) => {
  e.stopPropagation();
  dropdownMenu.classList.toggle("show");
});

document.addEventListener("click", (e) => {
  if (!dropdownBtn.contains(e.target) && !dropdownMenu.contains(e.target)) {
    dropdownMenu.classList.remove("show");
  }
});

function openRegisterForm(role) {
  selectedRole.value = role;

  if (role === "admin") {
    registerTitle.textContent = "Register";
    shopNameField.style.display = "block";
    birField.style.display = "block";
    shopFields.style.display = "block";
    selectedRoleText.textContent = "Shop Owner";

    shopType.required = true;
    mainServices.required = true;
  } else {
    registerTitle.textContent = "Register";
    shopNameField.style.display = "none";
    birField.style.display = "none";
    shopFields.style.display = "none";
    selectedRoleText.textContent = "Customer";

    shopType.required = false;
    mainServices.required = false;
  }

  registerModal.style.display = "none";
  dropdownMenu.classList.remove("show");
  registerFormModal.style.display = "flex";
}
shopOwnerOption.addEventListener("click", () => {
  openRegisterForm("admin");
});

customerOption.addEventListener("click", () => {
  openRegisterForm("customer");
});

if (showPassword) {
  showPassword.addEventListener("change", () => {
    loginPasswordField.type = showPassword.checked ? "text" : "password";
  });
}

if (showPasswordRegister) {
  showPasswordRegister.addEventListener("change", () => {
    passwordField.type = showPasswordRegister.checked ? "text" : "password";
  });
}

window.addEventListener("click", (e) => {
  if (e.target === loginModal) {
    loginModal.style.display = "none";
  }

  if (e.target === registerModal) {
    registerModal.style.display = "none";
    dropdownMenu.classList.remove("show");
  }

  if (e.target === registerFormModal) {
    registerFormModal.style.display = "none";
  }
});

document.addEventListener("keydown", (e) => {
  if (e.key === "Escape") {
    closeAllModals();
  }
});

