@extends('layouts.admin')
@section('content')
<div class="main-content-wrap sidenav-open d-flex flex-column">
<!-- ============ Body content start ============= -->
<div class="main-content">
   <div class="row">
      <div class="col-sm-11">
         <ul class="breadcrumb">
            <li><a href="{{ url('admin/home') }}">Dashboard</a></li>
            <li>Change Password</li>
         </ul>
      </div>
   </div>
   <div class="row">
      <div class="col-md-3 content-container">
         <!-- left-sidebar -->
         @include('admin.accounts.left-sidebar')
      </div>
      <div class="col-md-9">
         <div class="card">
            <form action="{{route('admin.change-password')}}" method="post" id="changePassForm">
               @csrf
               <div class="card-body">
                  <div class="row mb-20">
                     <div class="col-md-12">
                        <h4 class="heading-data text-blue">Profile Information</h4>
                        <div class="bg-white pad-15" style="margin-top:32px;">
                        <div class="row">
                            <div class="col-md-6">
                                 <div class="form-group password-s">
                                   <label for="old_password" class="form-label">Old Password <span class="text-danger">*</span></label>
                                   <input type="password" class="form-control emptyonly" name="old_password" id="old_password" placeholder="*****">
                                   <div class="input-group-append toggle-password"><span class="far fa-eye-slash"></span>
                                   </div>
                                   <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-old_password"></p>
                                 </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group password-s">
                                   <label for="new_password" class="form-label">New Password <span class="text-danger">*</span></label>
                                   <input type="password" class="form-control emptyonly" name="new_password" id="old_password" placeholder="*****">
                                   <div class="input-group-append toggle-password"><span class="far fa-eye-slash"></span>
                                   </div>
                                   <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-new_password"></p>
                                </div>
                            </div>
                               <div class="col-md-6">
                                <div class="form-group password-s">
                                   <label for="password" class="form-label">Confirm New Password <span class="text-danger">*</span></label>
                                   <input type="password" name="confirm_password" class="form-control" placeholder="*****">
                                   <div class="input-group-append toggle-password"><span class="far fa-eye-slash"></span>
                                   </div>
                                   <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-confirm_password"></p>
                                </div>
                             </div>
                        </div>
                         <button type="submit" class="btn btn-blue text-white bg-blue submit-btn">Update</button>
                        </div>
                     </div>
                  </div>
               </div>
            </form>
         </div>
      </div>
   </div>
</div>
</div>
<script>
   $(function(){

   //
    $(document).on('submit', 'form#changePassForm', function (event) {
        event.preventDefault();
        //clearing the error msg
        $('p.error_container').html("");
        $('.error-control').removeClass('border-danger');
             $('.submit-btn').attr('disabled',true);

        var form = $(this);
        var data = new FormData($(this)[0]);
        var url = form.attr("action");

         $.ajax({
             type: form.attr('method'),
             url: url,
             data: data,
             cache: false,
             contentType: false,
             processData: false,
             success: function (response) {
                if(response.success==true){
                    toastr.success("Password changed successfully");
                    setTimeout(() => {
                        location.reload(true);
                    }, 5000);
                }
                else if(response.success=='new_pass'){
                    toastr.error("You can not use new password same as old password");
                    setTimeout(() => {
                        location.reload(true);
                    }, 5000);
                }
                else if(response.success=='oldpmatch'){
                    toastr.error("Please enter the correct old password");
                    setTimeout(() => {
                        location.reload(true);
                    }, 5000);
                }
                if(response.success==false ) {
                    $('.submit-btn').attr('disabled',false);
                    var loadingText = 'Update';
                    for (control in response.errors) {
                         $('#error-' + control).html(response.errors[control]);
                         $('.submit-btn').attr('disabled',false);
                     }
                     if( response.error_type == 'oldpmatch' )
                    {
                        toastr.error("Please enter the correct old password");
                    }
                    if( response.error_type == 'pmatch' )
                    {
                        toastr.error("You can not use new password same as old password");
                    }
                }

             },
             error: function (xhr, textStatus, errorThrown) {
                 alert("Error: " + errorThrown);
             }
         });
         return false;
    });
   });

</script>
@endsection