@include('inc.header-inc');


  <div class="container-fluid">
   
    
    <form id="changepass-form" method="POST" class="row g-3 col-md-9 ms-3 row border p-2 rounded">
  
        <div id="alert"></div>
        <div id="alert-container"></div>
    <div class="col-12 w-50">
        <label for="inputAddress" class="form-label">Old Password</label>
        <div class="position-relative">
          <input type="password" name="oldpass" class="form-control" id="old-pasword" placeholder="Input Old Password"  required>
           <i class='bx bx-show-alt position-absolute top-50 end-0 translate-middle-y me-2 fs-4' onclick="showpassword(this,'#old-pasword')"
          style="cursor:pointer"></i>
        </div>
      </div>
    <div class="col-12 w-50" >
      <label for="inputAddress" class="form-label">New Password</label>
        <div class="position-relative">
          <input type="password" name="newpass" class="form-control" id="new-password" placeholder="Input New Password"  required>
           <i class='bx bx-show-alt position-absolute top-50 end-0 translate-middle-y me-2 fs-4' onclick="showpassword(this,'#new-password')"
          style="cursor:pointer"></i>
        </div>
    </div>
    <div class="col-12 w-100">
      <label for="inputAddress" class="form-label">Re-type New Password</label>
        <div class="position-relative">
          <input type="password" name="confirmpass" class="form-control" id="retype-password" placeholder="Input Old Password"  required>
           <i class='bx bx-show-alt position-absolute top-50 end-0 translate-middle-y me-2 fs-4' onclick="showpassword(this,'#retype-password')"
          style="cursor:pointer"></i>
        </div>
    </div>
    <br>
    <div class="col-12 text-center">
      <button type="submit" class="btn btn-primary ">Update</button>
    </div>
  </form>

</div>


<script>
$(document).ready(function() {
    $('#changepass-form').submit(function(event) {
        event.preventDefault();

        var oldpass = $('input[name=oldpass]').val();
        var newpass = $('input[name=newpass]').val();
        var confirmpass = $('input[name=confirmpass]').val();

        $.ajax({
            url: '{{ route("change-password") }}',
            type: 'POST',
            dataType: 'json',
            data: {
                'oldpass': oldpass,
                'newpass': newpass,
                'confirmpass': confirmpass,
                '_token': '{{ csrf_token() }}'
            },

            success: function(data) {
              toastr.options = {
                "progressBar" : true,
                "closeButton" : true,
              }
                if (data.success) {
                  toastr.options = {
                  "positionClass": "toast-top-right",
                  "showDuration": "300",
                  "hideDuration": "3000",
                  "timeOut": "5000",
                  "extendedTimeOut": "1000",
                  "showEasing": "swing",
                  "hideEasing": "linear",
                  "showMethod": "fadeIn",
                  "hideMethod": "fadeOut",
                  "progressBar" : true,
                  "closeButton" : true
              };
                  toastr.success(data.success);
                    
                }
                setTimeout(() => {
                 // Disable the file input element
                window.location.href = '/login';
                 }, 3000);
                
            },
              
            error: function(data) {
              if (data.responseJSON.error) {
                var errorMsg = data.responseJSON.error;
                var errorAlert = '<div class="alert alert-danger alert-dismissible fade show" role="alert">'
                    + '<strong>Error!</strong> ' + errorMsg
                    + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>'
                    + '</div>';
                $('#alert-container').html(errorAlert);
                setTimeout(function(){
            $('.alert').alert('close');
            }, 2000);
              }
            }
        });
    });
});

function showpassword(maintarget,id){
        if($(id).attr('type') == 'password'){
            $(maintarget).removeClass('bx-show-alt');
            $(maintarget).addClass('bx-hide');
            $(id).attr('type','text');
        }else{
            $(maintarget).addClass('bx-show-alt');
            $(maintarget).removeClass('bx-hide');
            $(id).attr('type','password');
        }
    }
</script>


  @include('inc.footer-inc')
@include('inc.modal.modalloader')