$(document).ready(function () {
  const togglePassword = document.querySelector("#togglePassword");
  const password = document.querySelector("#password");

  let pass = togglePassword;

  if (pass) {
    togglePassword.addEventListener("click", function () {
      // toggle the type attribute
      const type = password.getAttribute("type") === "password" ? "text" : "password";
      password.setAttribute("type", type);
      // toggle the eye icon
      if (type === "text") {
        $(this).removeClass("bi-eye");
        $(this).addClass("bi-eye-slash");
      } else {
        $(this).removeClass("bi-eye-slash");
        $(this).addClass("bi-eye");
      }
    });
  }
});

// and busy cursor
$(document).ready(function () {
  // Handle form submission for any form
  $('form').on('submit', function (event) {
    // Disable all submit buttons and update their labels
    $(this).find('button[type="submit"]').prop('disabled', true).text('Please wait...');
    $(this).find('input[type="submit"]').prop('disabled', true).val('Please wait...');
    // Add busy cursor
    $('body').addClass('busy');
  });
});

$(document).ready(function () {

  // Get the fields
  const toggle = document.querySelector("#togglePasswords");
  const passwords = document.querySelectorAll('[type="password"]');


  // listen for click events on the toggle
  toggle.addEventListener("click", function () {
    // loop through each password field
    for (let password of passwords) {
      // if toggle is checked, change type to "text"
      // otherwise, change it back to "password"
      if (toggle.checked) {
        password.type = "text";
      } else {
        password.type = "password";
      }
    }
  });

});

$(document).ready(function () {
  // For each password input
  $('.sme-password').each(function () {
    // Create a new container
    //alert("sme-password");
    //var $inputContainer = $('<div class="input-container"></div>');

    // Move the input into the new container
    //$(this).wrap($inputContainer);

    // Create the toggle image
    //var $togglePassword = $('<img src="images/visible.png" alt="Show Password" class="toggle-password" />');

    // Append the toggle image to the container
    //$(this).after($togglePassword);
  });

  $('.toggle-password').on('click', function () {

    alert("toggle-password");
    // Find the associated password field
    var input = $(this).siblings('.sme-password');

    // Toggle the type attribute between password and text
    //var inputType = input.attr('type') === 'password' ? 'text' : 'password';
    //input.attr('type', inputType);

    // Toggle the icon source based on the input type
    //var iconSrc = inputType === 'password' ? 'images/visible.png' : 'images/visible-slash.png';
    //$(this).attr('src', iconSrc);

    const type = password.getAttribute("type") === "password" ? "text" : "password";

    password.setAttribute("type", type);
    // toggle the eye icon
    if (type === "text") {
      $(this).removeClass("bi-eye");
      $(this).addClass("bi-eye-slash");
    } else {
      $(this).removeClass("bi-eye-slash");
      $(this).addClass("bi-eye");
    }

  });

});


