@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/users')}}">Users</a></li>
               <li>Profile</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-2x"></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" >
                    @include('admin.users.profile.submenu')
                  </div>
               </div>
               @if($EDIT_ACCESS)
               <form  method="post" action="{{route('admin.users/updateProfile')}}" id="updateUserProfile" >
                  @csrf
                  <div class="row py-3">
                     <!-- Account Information Form Start-->
                     <div class="col" style="box-shadow: 0px 0px 10px #ddd; padding: 0px 15px;">
                        <h3 class="text-blue fw-700 py-3">Personal Information</h3>
                        <input type="hidden" name="user_id" value="{{ Request::segment(5) }}">
                        <div class="row">
                           <div class="col-sm-12 upload-photo">
                              <div class="form-group">
                                 <div class="media align-items-center">
                                   <div class="media-head me-5">
                                     <div class="avatar avatar-xxl edit-profile-img">
                                       <img @if($user->profile != '' && $user->profile->profile_image != '') src="{{asset('uploads/profile/')}}/{{$user->profile->profile_image}}" @else src="{{ asset('admin/images/profile-default-avtar.jpg')}}" @endif alt="user" class="avatar-img img-thumbnail" id="courseimg1">
                                       <div class="btn btn-soft-primary btn-file mb-1 update-photo">
                                      Update Photo
                                       <input type="file" class="upload" id="fileupload1" name="profile_image" accept=".png,.jpg,.jpeg">
                                     </div>
                                     </div>
                                   </div>
                                 </div>
                              </div>
                           </div>
                           <div class="form-group col-md-6">
                              <label for="Firstname" class="form-label">First Name <span class="text-danger">*</span></label>
                              <input type="text" class="form-control ignoreFirstSpace" id="Firstname" name="first_name" placeholder="First Name" value="{{ $user->first_name }}">
                              <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-first_name"></p>
                           </div>
                           <div class="form-group col-md-6">
                              <label for="Lastname" class="form-label">Last Name</label>
                              <input type="text" class="form-control ignoreFirstSpace" id="Lastname" name="last_name" placeholder="Last Name" value="{{ $user->last_name }}">
                           </div>
                        </div>
                        <div class="row">
                         <div class="form-group col-md-6">
                            <label  class="form-label">System Role<span class="text-danger">*</span></label>
                            <select name="role" class="custom-select bg-data-net text-white">
                               <option selected value="">Select</option>
                               @foreach ($roles as $role)
                               <option value="{{$role->id}}" @if($user->system_user_role_id == $role->id) selected @endif>{{$role->role}}</option>
                               @endforeach
                            </select>
                            <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-role"></p>
                         </div>
                         <div class="form-group col-md-6">
                           <label class="form-label">Designation <span class="text-danger">*</span></label>
                           <input type="text" class="form-control ignoreFirstSpace" name="designation" id="designation" placeholder="Designation" value="{{$user->profile->designation}}">
                            <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-designation"></p>
                        </div>
                      </div>

                     </div>
                     <!-- Account Information Form Ends-->
                     <!-- Basic Information Form Start-->
                     <div class="col"style="box-shadow: 0px 0px 10px #ddd; padding: 0px 15px;">
                      <h4 class="text-blue fw-700 py-3"><strong>Proof Details</strong></h4>
                        <div class="bg-white pad-15">
                           <div class="row">
                              <div class="col-md-12">
                                 <div class="form-group">
                                    <label for="Address" class="form-label">Id Type <span class="text-danger">*</span></label>

                                    <input type="text" class="form-control id_type ignoreFirstSpace" name="id_type" id="id_type" placeholder="Id Type" value="@if(isset($user->attachUserAttachment->id_type) && $user->attachUserAttachment->id_type!=""){{ $user->attachUserAttachment->id_type }}@endif">
                                    <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-id_type"></p>
                                 </div>
                              </div>
                              <div class="col-md-12">
                                 <div class="form-group">
                                    <label for="input-file-now">Upload file   <i class="fa fa-info-circle" data-toggle="tooltip" data-original-title="Only .png,.jpg,.jpeg,.pdf,.doc accepted "></i> <span class="text-danger">*</span></label>
                                    <input type="hidden" name="old_file" value="@if(isset($user->attachUserAttachment->file_name) && $user->attachUserAttachment->file_name!=""){{$user->attachUserAttachment->file_name}}@endif">
                                    <input type="file" accept=".png,.jpg,.jpeg,.pdf,.doc" id="input-file-now"  name="file" class="file error-control" />
                                    @if(isset($user->attachUserAttachment->file_name) && $user->attachUserAttachment->file_name!="")
                                     <img src="{{url('/').'/uploads/user-attachment'.'/'.$user->attachUserAttachment->file_name}}" width="100px">
                                    @endif
                                    <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-file"></p>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <h6 class="mt-20"><strong>Account Information</strong></h6>
                        <div class="row">
                           <div class="form-group col-md-12">
                              <label  class="form-label">Status <span class="text-danger">*</span></label>
                              <select class="custom-select bg-data-net text-white status_btn" name="status">
                              <option @if($user->status == 1) selected @endif value="1">Active</option>
                              <option @if($user->status == 0) selected @endif value="0">Inactive</option>
                              </select>
                           </div>
                           <div class="form-group col-md-12 statusDate @if($user->status == 1) hide @endif">
                              <label for="inactive-date" class="form-label"><span class="status_text">Inactive</span> Date</label>
                              <input type="text" class="form-control commonDatepicker" id="inactive-date" @if($user->status_updated_at != '') value="{{ date('m/d/Y',strtotime($user->status_updated_at)) }}" @endif name="status_updated_at" placeholder="mm/dd/yyyy">
                              <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-status_updated_at"></p>
                           </div>
                           <div class="form-group col-md-12 statusReason @if($user->status == 1) hide @endif">
                              <label for="inactive-msg" class="form-label"><span class="status_text"> Inactive </span>  Reason</label>
                              <input type="text" class="form-control empty ignoreSpaceFornotext" value="{{ $user->status_updated_reason }}" name="status_updated_reason" id="inactive-msg"  placeholder="Reason">
                              <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-status_updated_reason"></p>
                           </div>
                           <!-- ./ account -->
                        </div>
                     </div>
                     <!-- Basic Information Form Ends-->
                  </div>
                  <div class="row py-5">
                     <div class="col-md-6 text-right">
                        <button type="submit" class="btn bg-blue text-white userAuthBtn">Update</button>
                     </div>
                  </div>
               </form>
               @endif
            </div>
         </div>
      </div>
   </div>
</div>
<script>
   $(function(){
      //
      fileupload1.onchange = evt => {
        const [file] = fileupload1.files
        if (file) {
            courseimg1.src = URL.createObjectURL(file)
        }
      }
       $('.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#updateUserProfile', function (event) {
    event.preventDefault();
    //clearing the error msg
    $('p.error_container').html("");
    $('.error-control').removeClass('border-danger');
    $('.userAuthBtn').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) {

             console.log(response);
             if(response.success==true  ) {
                 //notify
                toastr.success("Profile updated successfully");
                 // redirect to google after 5 seconds
                 window.setTimeout(function() {
                     //window.location = "{{ url('/')}}"+"/employees/";
                     window.location.reload();
                 }, 2000);

             }
             //show the form validates error
             if(response.success==false ) {
               $('.userAuthBtn').attr('disabled',false);
                 var loadingText = 'Update';
                 $('.userAuthBtn').html(loadingText);
                 for (control in response.errors) {
                     $('#error-' + control).html(response.errors[control]);
                 }

                if( response.error_type == 'something_wrong' )
                {
                  toastr.error("Sorry, something went wrong. Please try again later.");
                }
             }
         },
         error: function (xhr, textStatus, errorThrown) {
             // alert("Error: " + errorThrown);
         }
     });
     return false;
    });
   });

</script>
@endsection