@extends("front.dashboard.layouts.app")
@section("style")
    <link href="{{ asset('assets/plugins/vectormap/jquery-jvectormap-2.0.2.css') }}" rel="stylesheet"/>
    <link href="{{ asset('assets/plugins/datatable/css/dataTables.bootstrap5.min.css') }}" rel="stylesheet" />
@endsection

@section("wrapper")
    <div class="page-wrapper">
        <div class="page-content">
             <div class="row ">
                <div class="col-md-12">
                    <div class="card radius-10">
                    
                    <form  action="{{ route('user.password.update') }}" onsubmit="form_submit(this);return false;" method="POST" >
                      <input type="hidden" name="id" value="{{ $info->id }}">
   <div class="modal-body py-3">
      @csrf
      <div class="row">
         <div class="col-lg-12">
            
            <div class="border border-1 p-4 rounded">
               <div class="row g-3">
                  
                  <div class="col-12">
                     <label  class="form-label">Old Password<sup class="text-danger">*</sup></label>
                     <input type="password" class="form-control" name="old_password" placeholder="Enter Old Password">
                  </div>
                  <div class="col-12">
                     <label  class="form-label">New Password<sup class="text-danger">*</sup></label>
                     <input type="password" class="form-control" name="password" placeholder="Enter New Password">
                  </div>
                  <div class="col-12">
                     <label  class="form-label">Confirm Password<sup class="text-danger">*</sup></label>
                     <input type="password" class="form-control" name="confirm_password" placeholder="Enter Confirm Password">
                  </div>                  
                
               </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">      
        <button type="submit" class="btn btn-primary">Update <i class="st_loader spinner-border spinner-border-sm" style="display:none;"></i></button>
     </div>
    </form>
  </div>
</div>
</div>
</div>
</div>

@endsection

@section("page-js-script")
<script src="{{ asset('assets/plugins/vectormap/jquery-jvectormap-2.0.2.min.js') }}"></script>
  <script src="{{ asset('assets/plugins/vectormap/jquery-jvectormap-world-mill-en.js') }}"></script>
  <script src="{{ asset('assets/plugins/chartjs/js/Chart.min.js') }}"></script>
  <script src="{{ asset('assets/plugins/chartjs/js/Chart.extension.js') }}"></script>
  <script src="{{ asset('assets/plugins/jquery.easy-pie-chart/jquery.easypiechart.min.js') }}"></script>
  <script src="{{ asset('assets/js/index.js') }}"></script>
  <script src="{{ asset('assets/plugins/datatable/js/jquery.dataTables.min.js') }}"></script>
  <script src="{{ asset('assets/plugins/datatable/js/dataTables.bootstrap5.min.js') }}"></script>
  <script>
  function form_submit(e)
    {
    $(e).find('.st_loader').show();
    $.ajax({  
      url :$(e).attr('action'),  
      method:"POST",  
      dataType:"json",  
      data:$(e).serialize(),
       success: function(data){ 
               if(data.success==1){
                 toastr.success(data.message,'Success');
                 $(e).find('.st_loader').hide();
                 $(e)[0].reset();
                 var surl = "{{ route('user.dashboard') }}";
                 window.setTimeout(function() { window.location = surl; }, 500);
               }else if(data.success==0){
                 toastr.error(data.message,'Error');
                 $(e).find('.st_loader').hide();
               }
             },
             error: function(data){ 
               if(typeof data.responseJSON.status !== 'undefined'){
                 toastr.error(data.responseJSON.error,'Error');
               }else{
                 $.each(data.responseJSON.errors, function( key, value ) {
                     toastr.error(value,'Error');
                 });
               }
               $(e).find('.st_loader').hide();
             } 
    }); 
    }
  </script>
@endsection