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

@php
$VIEW_PROFILE_ACCESS   = false;

$VIEW_PROFILE_ACCESS    = Helper::instructor_can_access('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/instructors')}}">Instructors</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%;">Instructor ID: {{$user->id}}</small>
                     </h3>
                  </div>
               </div>
               <div class="row">
                  <div class="col-md-12" style="background-color:#1a68b3;">
                     @include('instructor.profile.submenu')
                  </div>
               </div>
               @if ($VIEW_PROFILE_ACCESS) 
               <form  method="post" action="{{route('instructor.updateProfile')}}" id="updateInstructorProfile" >
                  @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-md-6">
                              <div class="form-group">
                                 <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>
                           <div class="col-md-6">
                              <div class="form-group">
                                 <label for="Lname" class="form-label">Last Name</label>
                                 <input type="text" class="form-control ignoreFirstSpace" name="last_name" id="last_name"  placeholder="Last Name" value="{{ $user->last_name }}">
                              </div>
                           </div>
                           <div class="col-md-6">
                              <div class="form-group">
                                 <label for="gender" class="form-label">Gender <span class="text-danger">*</span></label>
                                 <select class="form-control" name="gender">
                                   <option value="">Select</option>
                                   <option value="male" @if($user->profile->gender == 'male') selected @endif>Male</option>
                                   <option value="female" @if($user->profile->gender == 'female') selected @endif>Female</option>
                                 </select>
                                 <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-gender"></p>
                              </div>
                            </div>
                            <div class="form-group col-md-6">
                              <label class="form-label">Date of Birth <span class="text-danger">*</span></label>
                              <input class="form-control previous_date" type="text" name="dob" placeholder="DOB" @if($user->profile != '' && $user->profile->dob != '') value="{{ date('m/d/Y',strtotime($user->profile->dob)) }}" @endif>
                               <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-dob"></p>
                           </div>
                        </div>
                        <h6 class="mt-30"><strong>Profile Information</strong></h6>
                        <div class="bg-white pad-15">
                            <div class="row">
                              <div class="col-md-12">
                                 <div class="form-group">
                                    <label class="form-label">Spoken language(s) <span class="text-danger">*</span></label>
                                        <select name="languages[]" id="p_tags" class="form-control js-example-basic-multiple" multiple="multiple">
                                          @if(count($languages) >0)
                                          @foreach($languages as $lang)
                                                                                    <option value="{{$lang->id}}" @if((in_array($lang->id, $preferred))) selected @endif>{{ucwords($lang->name)}}</option>
                                          @endforeach
                                          @endif
                                       </select>
                                    <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-languages"></p>
                                 </div>
                              </div>
                              <div class="col-md-12">
                                 <div class="form-group">
                                    <label for="Lname" class="form-label">Total Experience <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control onlyIgnoreFirstSpace" name="experience" placeholder="Total Experience" value="{{$user->profile->experience}}">
                                     <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-experience"></p>
                                 </div>
                              </div>
                              <div class="col-md-12">
                                 <div class="form-group">
                                    <label  class="form-label">About Description</label>
                                    <textarea class="form-control summernote ignoreFirstSpace" name="about" rows="5" placeholder="In a few words note about this customer" style="width:100%;">{{$user->profile->about}}</textarea>
                                 </div>
                              </div>
                           </div>
                           <!-- ./ account -->
                        </div>
                     </div>
                     <!-- Account Information Form Ends-->
                     <!-- Basic Information Form Start-->
                     <div class="col"style="box-shadow: 0px 0px 10px #ddd; padding: 0px 15px;">
                        <h6 class="mt-30"><strong>Account Information</strong></h6>
                        <div class="bg-white pad-15">
                           <div class="form-group col-md-12">
                              <label for="re-hiredDate" class="form-label">Email Address</label>
                              <input type="email" class="form-control emptyonly" id="email" value="{{ $user->email }}" readonly="">
                           </div>
                           <!-- ./ account -->
                        </div>
                        <h4 class="text-blue fw-700 py-3">Contact Information</h4>

                        <div class="row">
                        <div class="col-md-12">
                           <div class="form-group">
                              <label for="phone" class="form-label">Phone Number <span class="text-danger">*</span></label>
                              <input type="hidden" name="phone_code" id="code" value="61">
                              <input type="hidden" name="phone_iso" id="iso" value="AU">
                              <div class="phone1">
                                  <div class="dropdown">
                                      <button class="btn btn-success dropdown-toggle setField flaginput" type="button"
                                      id="dropdownMenuButton"
                                      data-toggle="dropdown"
                                      aria-haspopup="true"
                                      aria-expanded="false">
                                      <img src="{{ asset('front/image/au.png') }}" width="20" height="15" class="flag12"> +61
                                      </button>
                                  </div>
                                  <input type="text" name="phone_number" class="form-control phoneflag numberonly" placeholder="Phone Number" maxlength="10" value="{{ $user->phone }}">
                               </div>
                              <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-phone_number"></p>
                           </div>
                           </div>
                           <div class="col-md-12">
                           <div class="form-group">
                              <label for="phone" class="form-label">Emergency Phone Number </label>
                              <input type="hidden" name="phone_code2" id="code2" value="61">
                              <input type="hidden" name="phone_iso2" id="iso2" value="AU">
                              <div class="phone1">
                                  <div class="dropdown">
                                      <button class="btn btn-success dropdown-toggle setField flaginput" type="button"
                                      id="dropdownMenuButton"
                                      data-toggle="dropdown"
                                      aria-haspopup="true"
                                      aria-expanded="false">
                                      <img src="{{ asset('front/image/au.png') }}" width="20" height="15" class="flag12"> +61
                                      </button>
                                  </div>
                                  <input type="text" name="emergency_phone" class="form-control phoneflag numberonly" placeholder="Phone Number" maxlength="10" value="{{ $user->contact->emergency_phone }}">
                               </div>
                           </div>
                           </div>
                        </div>

                        <!-- Address part-->
                        <h6 class="mt-30"><strong>Address</strong></h6>
                        <div class="bg-white pad-15">
                           <div class="col-md-12">
                              <div class="form-group">
                                 <label for="phone" class="form-label">Country <span class="text-danger">*</span></label>
                                 <select class="form-control countryId" name="country">
                                     @if(count($countries) > 0)
                                      @foreach($countries as $cou)
                                     <option label="" value="{{$cou->id}}">{{ucwords($cou->name)}}</option>
                                     @endforeach
                                     @endif
                                 </select>
                                 <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-country"></p>
                              </div>
                           </div>
                           <div class="col-md-12">
                              <div class="form-group autocomplete">
                                 <label class="form-label">Pick up address <span class="text-danger">*</span></label>
                                 <input type="text" class="form-control" id="searchInput" placeholder="Enter a location" name="address_line1" value="{{$user->address->address_line1}}">
                                 <div class="autocomplete-results" id="results"></div>
                                <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-address_line1"></p>
                              </div>
                           </div>
                           <div class="col-md-12">
                              <div class="form-group">
                                 <label class="form-label">Suburb <span class="text-danger">*</span></label>
                                 <input type="text" class="form-control onlyIgnoreFirstSpace" name="suburb" id="selectedSuburbInput" value="{{$user->address->suburb}}" placeholder="Start typing" readonly>
                                <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-suburb"></p>
                              </div>
                           </div>
                           <div class="col-md-12">
                                <div class="form-group">
                                  <label class="form-label">State <span class="text-danger">*</span></label>
                                  <input type="text" class="form-control" id="selectedStateInput" placeholder="State" name="state" value="{{$user->address->state_name}}"  readonly>
                                  <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-state"></p>
                                </div>
                              </div>
                           <div class="col-md-12">
                              <div class="form-group">
                                 <label class="form-label">Postcode <span class="text-danger">*</span></label>
                                 <input type="text" class="form-control ignoreZero" id="selectedPostcodeInput" name="postcode" value="{{$user->address->postcode}}" maxlength="6" placeholder="Postcode">
                                <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-postcode"></p>
                              </div>
                              <input type="hidden" name="geo_address" id="selectedGeoAddressInput" value="{{$user->address->geo_address}}">
                              <input type="hidden" name="geo_latitude" id="selectedLatInput" value="{{$user->address->geo_latitude}}">
                              <input type="hidden" name="geo_longitude" id="selectedLngInput" value="{{$user->address->geo_longitude}}">
                              <input type="hidden" name="geo_postcode" id="selectedPostInput" value="{{$user->address->geo_postcode}}">
                           </div>
                        </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(){

    //
     $('.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#updateInstructorProfile', 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.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