   <%- header %>
   <!-- pre-rendered navbar inserted -->
   <main class="dashboard-main">
     <%- navbar %>
     <!-- pre-rendered navbar inserted -->

<script src="/js/demo-protection.js"></script>

  <style>
    #loader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #fffffff2;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .toggle-password {
      cursor: pointer;
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
    }

    .position-relative {
      position: relative;
    }
  </style>


 

  <div class="container flex-1 pt-20 w-full my-4">

    <%- include('../partials/utils/title.ejs', {title: "Change Password"}) %>


     <% 
      const breadcrumbs = [
        { label: "Dashboard", href: "/admin/dashboard", icon: "bi bi-house-door" },
         { label: " Change Password" }
      ];
    %>

    <%- include('../partials/utils/breadcrumb', { breadcrumbs }) %>

 
 
 
 

      <div class="  mt-4">
        <div class=" bg-white shadow-md rounded-lg" style="padding: 20px;">
          <form id="changePasswordForm">

            <div class="mb-3 position-relative">
              <label for="oldPassword" class="form-label">Old Password</label>
              <div class="input-group">

                <input type="password" class="form-control" id="oldPassword" name="oldPassword" required>
                <!-- Old Password -->
                <button type="button" onclick="togglePassword('oldPassword', this)" class="btn btn-outline-secondary">
                  Show
                </button>

              </div>
            </div>

            <div class="mb-3 position-relative">
              <label for="newPassword" class="form-label">New Password</label>
              <div class="input-group">

                <input type="password" class="form-control" id="newPassword" name="newPassword" required minlength="6">
                <!-- New Password -->
                <button type="button" onclick="togglePassword('newPassword', this)" class="btn btn-outline-secondary">
                  Show
                </button>

              </div>
            </div>

            <div class="mb-3 position-relative">
              <label for="confirmPassword" class="form-label">Confirm New Password</label>
              <div class="input-group">

                <input type="password" class="form-control" id="confirmPassword" name="confirmPassword" required minlength="6">
                <!-- Confirm Password -->
                <button type="button" onclick="togglePassword('confirmPassword', this)" class="btn btn-outline-secondary">
                  Show
                </button>
              </div>
            </div>

            <button type="submit" class="btn btn-primary">Save Password</button>
          </form>
        </div>
      </div>

    </div>
  </main>

  <script>
    function togglePassword(fieldId, button) {
      const field = document.getElementById(fieldId);
      if (field.type === "password") {
        field.type = "text";
        button.textContent = "Hide";
      } else {
        field.type = "password";
        button.textContent = "Show";
      }
    }



    // $('#changePasswordForm').on('submit', function(e) {
    //   e.preventDefault();

    //   const userId = $('#user_id').val();
    //   const oldPassword = $('#oldPassword').val().trim();
    //   const newPassword = $('#newPassword').val().trim();
    //   const confirmPassword = $('#confirmPassword').val().trim();

    //   if (newPassword.length < 6) {
    //     alert('New password must be at least 6 characters long.');
    //     return;
    //   }

    //   if (newPassword !== confirmPassword) {
    //     alert('New password and confirm password do not match.');
    //     return;
    //   }

    //   // Send API request
    //   $.ajax({
    //     url: '/admin/changePassword', // Your backend API endpoint
    //     method: 'POST',
    //     contentType: 'application/json',
    //     data: JSON.stringify({
    //       user_id: userId,
    //       oldPassword: oldPassword,
    //       newPassword: newPassword
    //     }),
    //     success: function(response) {
    //       alert('Password updated successfully!');
    //       // Optionally redirect or clear form
    //       $('#changePasswordForm')[0].reset();
    //     },
    //     error: function(xhr, status, error) {
    //       console.error(xhr.responseText);
    //       alert('Error updating password: ' + (xhr.responseJSON?.message || 'Unknown error'));
    //     }
    //   });

    // });
    $('#changePasswordForm').on('submit', function(e) {
  e.preventDefault();

  const userId = $('#user_id').val();
  const oldPassword = $('#oldPassword').val().trim();
  const newPassword = $('#newPassword').val().trim();
  const confirmPassword = $('#confirmPassword').val().trim();

  if (newPassword.length < 6) {
    Swal.fire({
      icon: 'warning',
      title: 'Too Short',
      text: 'New password must be at least 6 characters long.',
    });
    return;
  }

  if (newPassword !== confirmPassword) {
    Swal.fire({
      icon: 'error',
      title: 'Mismatch',
      text: 'New password and confirm password do not match.',
    });
    return;
  }
                              document.getElementById("loaderOverlay").style.display = "flex";

  $.ajax({
    url: '/admin/changePassword',
    method: 'POST',
    contentType: 'application/json',
    data: JSON.stringify({
      user_id: userId,
      oldPassword: oldPassword,
      newPassword: newPassword
    }),
    success: function(response) {
                                    document.getElementById("loaderOverlay").style.display = "none";

      Swal.fire({
        icon: 'success',
        title: 'Success',
        text: 'Password updated successfully!',
      }).then(() => {
        $('#changePasswordForm')[0].reset();
      });
    },
    error: function(xhr, status, error) {
                                    document.getElementById("loaderOverlay").style.display = "none";

      Swal.fire({
        icon: 'error',
        title: 'Error',
        text: xhr.responseJSON?.message || 'Unknown error occurred.',
      });
    }
  });
});

  
  </script>

<%- footer %>
