document.addEventListener("DOMContentLoaded", function () {
  //sendEmail()
    // Attach an event listener to the button
    const submitButton = document.getElementById("submit-forgot-password");
    const signUpSubmitButton = document.getElementById("SubmitButton");

    const emailInput = document.getElementById("Email");
    const passwordInput = document.querySelector("#PasswordValue");

    if (submitButton && emailInput) {
        submitButton.addEventListener("click", function (event) {
            // Get the value of the email input
            const email = emailInput.value;

            // Email regex pattern
            const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

            // Validate the email
            if (!emailRegex.test(email)) {
                event.preventDefault(); // Prevent further actions
                addError("Please enter a valid email address.");
                setTimeout(function () {
                    $.unblockUI();
                }, 500);
                return;
            }
            clearErrors();
        });
    }


    if(signUpSubmitButton){
      validateUsername();

    }
    if (passwordInput) {
      // Create a wrapper container for proper alignment
      const wrapper = document.createElement("div");
      wrapper.style.position = "relative";
      wrapper.style.display = "inline-block";
      wrapper.style.width = "100%";

      // Move the password input into the wrapper
      passwordInput.parentNode.insertBefore(wrapper, passwordInput);
      wrapper.appendChild(passwordInput);

      // Adjust the input field style for padding to accommodate the icon
      passwordInput.style.paddingRight = "40px";

      // Create the toggle button
      const toggleButton = document.createElement("button");
      toggleButton.type = "button";
      toggleButton.style.position = "absolute";
      toggleButton.style.right = "10px";
      toggleButton.style.top = "50%";
      toggleButton.style.transform = "translateY(-50%)";
      toggleButton.style.border = "none";
      toggleButton.style.background = "transparent";
      toggleButton.style.cursor = "pointer";
      toggleButton.style.padding = "0";
      toggleButton.style.margin = "0";
      toggleButton.style.width = "24px";
      toggleButton.style.height = "24px";
      toggleButton.style.display = "flex";
      toggleButton.style.alignItems = "center";
      toggleButton.style.justifyContent = "center";

      // Add Font Awesome "fa-eye" icon as the default
      toggleButton.innerHTML = '<i class="fa fa-eye"></i>';
      wrapper.appendChild(toggleButton);

      // Toggle password visibility
      toggleButton.addEventListener("click", function () {
        if (passwordInput.type === "password") {
          passwordInput.type = "text";
          toggleButton.innerHTML = '<i class="fa fa-eye-slash"></i>'; // Switch to "fa-eye-slash" icon
        } else {
          passwordInput.type = "password";
          toggleButton.innerHTML = '<i class="fa fa-eye"></i>'; // Switch back to "fa-eye" icon
        }
      });
    }
    
});

<!-- 
function sendEmail(){
  fetch("https://2e20200ce785ead2b307a20cbcfaa5.d7.environment.api.powerplatform.com:443/powerautomate/automations/direct/workflows/cd70e5cf34de475dbab6a301c8b997d2/triggers/manual/paths/invoke/?api-version=1&tenantId=tId&environmentName=2e20200c-e785-ead2-b307-a20cbcfaa5d7", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    to: ["user1@example.com", "user2@example.com"],
    subject: "Welcome!",
    body: "This is the plain text",
    html: "<h2>Hello 👋</h2><p>This email is sent from Power Pages using <strong>ACS</strong></p>"
  })
})
.then(response => response.json())
.then(data => console.log("Email sent:", data))
.catch(error => console.error("Error:", error));
} -->

function addError(message) {
  const errorList = document.querySelector('#loginValidationSummary ul');

  const errorItem = document.createElement('li');

  errorItem.textContent = message;

  errorItem.style.display = "list-item";

  errorList.appendChild(errorItem);

  const errorDiv = document.getElementById('loginValidationSummary');
  errorDiv.classList.remove('validation-summary-valid');
  errorDiv.classList.add('validation-summary-errors');
}

function clearErrors() {
  const errorList = document.querySelector('#loginValidationSummary ul');

  while (errorList.firstChild) {
    errorList.removeChild(errorList.firstChild);
  }

  const errorDiv = document.getElementById('loginValidationSummary');
  errorDiv.classList.remove('validation-summary-errors');
  errorDiv.classList.add('validation-summary-valid');
}




function addUserNameError(message) {
  const errorList = document.querySelector('#ValidationSummary1 ul');

  if ([...errorList.children].some(li => li.textContent === message)) return;

  const errorItem = document.createElement('li');
  errorItem.textContent = message;
  errorItem.style.display = "list-item";

  errorList.appendChild(errorItem);

  const errorDiv = document.getElementById('ValidationSummary1');
  errorDiv.classList.remove('validation-summary-valid');
  errorDiv.classList.add('validation-summary-errors');
}

function clearUserNameErrors() {
  const errorList = document.querySelector('#ValidationSummary1 ul');
  
  while (errorList.firstChild) {
    errorList.removeChild(errorList.firstChild);
  }

  const errorDiv = document.getElementById('ValidationSummary1');
  errorDiv.classList.remove('validation-summary-errors');
  errorDiv.classList.add('validation-summary-valid');
}

function validateUsername() {
  const input = document.getElementById("UserNameTextBox").value;
  const regex = /^[a-zA-Z0-9]+$/; // Alphanumeric only

  clearUserNameErrors(); // Clear previous errors before checking new input

  if (!regex.test(input) && input.length > 0) {
    addUserNameError("Username can only contain letters and numbers.");
    setTimeout(function () {
      $.unblockUI();
    }, 300);
    return
  }
}