 <main class="main-wrapper">
    <div class="main-content">
      <button class="btn guestBtn d-flex gap-2 align-items-center" id="backBtn"><img src="./assets/images/arowleft.svg" alt="" width="15px"> Back</button>
		<div class="row">
     <div class="col-md-8 my-2">
      <h3 class="fmon">Change Password</h3>
     </div>
      
    </div>
    <div class="modal-body">
        
      
     
           <form class="row">
            <div class="col-md-6 my-2">
                <label for="currentPassword" class="form-label">Current Password</label>
                <div class="input-group mb-3">
                    <input type="password" id="currentPassword" class="form-control" placeholder="Current Password" aria-label="Current Password" aria-describedby="currentPasswordAddon">
                    <span class="input-group-text bg-dark" id="currentPasswordAddon">
                        <img src="<?= base_url('/assets/images/eye-solid.svg') ?>" alt="Toggle visibility" width="20px" class="toggle-password" data-target="currentPassword">
                    </span>
                </div>
            </div>
            
            <div class="col-md-6 my-2">
                <label for="newPassword" class="form-label">New Password</label>
                <div class="input-group mb-3">
                    <input type="password" id="newPassword" class="form-control" placeholder="New Password" aria-label="New Password" aria-describedby="newPasswordAddon">
                    <span class="input-group-text bg-dark" id="newPasswordAddon">
                        <img src="<?= base_url('/assets/images/eye-solid.svg') ?>" alt="Toggle visibility" width="20px" class="toggle-password" data-target="newPassword">
                    </span>
                </div>
            </div>
            
            <div class="col-md-6 my-2">
                <label for="confirmPassword" class="form-label">Confirm New Password</label>
                <div class="input-group mb-3">
                    <input type="password" id="confirmPassword" class="form-control" placeholder="Confirm New Password" aria-label="Confirm New Password" aria-describedby="confirmPasswordAddon">
                    <span class="input-group-text bg-dark" id="confirmPasswordAddon">
                        <img src="<?= base_url('/assets/images/eye-solid.svg') ?>" alt="Toggle visibility" width="20px" class="toggle-password" data-target="confirmPassword">
                    </span>
                </div>
            </div>
            
    
         
                  <div class="col-md-12 my-2">
                    <div class="row d-flex justify-content-center mb-3">
                      <div class="col-md-12 my-2 d-flex justify-content-center">
                          <a href="<?php echo base_url().'site/password'; ?>" class="btn autBtn py-2 px-5">Submit</a>
                      </div>
                   </div>
                  </div>
           </form>
       <!-- button for attahmnts -->
     
      
  
    </div>
      </div>
  </div>
    
  </main>

  <script>
    // Function to toggle password visibility
document.querySelectorAll('.toggle-password').forEach(item => {
    item.addEventListener('click', function () {
        const targetInput = document.getElementById(this.getAttribute('data-target'));
        
        if (targetInput.type === 'password') {
            targetInput.type = 'text';
        } else {
            targetInput.type = 'password';
        }
    });
});

</script>