@extends('layouts.admin')
@section('content')

 @php
 $EDIT_ACCESS   = false;
 $EDIT_ACCESS    = Helper::can_access('Edit Customer Profile');
 @endphp 
<style type="text/css">
   .hide{display: none;}
</style>
<div class="main-content-wrap sidenav-open d-flex flex-column">
   <!-- ============ Body content start ============= -->
   <div class="main-content">
      <div class="row">
         <!-- ============Breadcrumb Pagination ============= -->
         <div class="col-sm-11">
            <ul class="breadcrumb">
               <li> <a href="{{url('/admin/learners')}}">Learners</a></li>
               <li>Change Password</li>
            </ul>
         </div>
         <!-- ============Back Button ============= -->
         <div class="col-sm-1 back-arrow">
            <div class="text-center">
               <a href="javascript:history.back()"> <i class="fas fa-arrow-circle-left fa-1x">Back</i> </a>
            </div>
         </div>
      </div>
      <!-- ========================= -->
      <div class="row">
         <div class="card text-left">
            <div class="card-body">
               <div class="row">
                  <div class="col-md-3">
                     <h3 class="mb-3" style="font-weight:700"> {{ ucwords($user->first_name.' '.$user->last_name)}} @if($user->status=='1')<span class="badge badge-success status-css user-status-css">{{"Active"}}</span>@elseif($user->status=='0')<span class="badge badge-danger status-css user-status-css">{{"Inactive"}}</span>@else<span class="badge badge-warning status-css">{{"Pending"}}</span>@endif<br>
                        <small style="font-size: 66%;">Learner ID: {{$user->id}}</small>
                     </h3>
                  </div>
               </div>
               <div class="row">
                  <div class="col-md-12" >
                     @if($user->user_type == 'user')
                     @include('admin.users.submenu')
                     @else
                     @include('admin.learners.profile.submenu')
                     @endif
                  </div>
               </div>
               @if($EDIT_ACCESS)
               <form  method="post" action="{{route('admin.change-password.submit')}}" id="changePassword" >
                  @csrf
                  <div class="col-md-8 offset-md-2 mt-4">
                     <!-- Account Information Form Start-->
                     <div class="col" >
                        <h3 class="text-blue fw-700 py-3">Change Password</h3>
                        <input type="hidden" name="user_id" value="{{ Request::segment(5) }}">
                        <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>
                            <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 class="col-md-12">
                              <button type="submit" class="btn bg-blue text-white submit-btn mt-3">Update</button>
                             </div>
                        </div>
                     </div>
                     <!-- Account Information Form Ends-->
                     
                  </div>
                 
               </form>
               @endif
            </div>
         </div>
      </div>
   </div>
</div>
<script>
   $(function(){
       $('.status_btn').change(function(){
         $('.empty').val('');
         if($(this).val()== 0 || $(this).val()== 2){
           $('.inactiveClass').text('Inactive');

           if($(this).val()== 0){$('.status_text').text('Inactive'); }
           else if($(this).val()== 2){$('.status_text').text('Terminated');}
           $('.statusDate').show();
           $('.statusReason').show();
         }
         else
         {
           $('.statusDate').hide();
           $('.statusReason').hide();
         }
      })

    //
     $('.userAuthBtn').on('click', function() {
       var $this = $(this);
       var loadingText = '<i class="fa fa-circle-o-notch fa-spin"></i> loading...';
       if ($(this).html() !== loadingText) {
         $this.data('original-text', $(this).html());
         $this.html(loadingText);
       }
    });

    $(document).on('submit', 'form#changePassword', 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