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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="main-content-wrap sidenav-open d-flex flex-column">
   <!-- ============ Body content start ============= -->
   <div class="main-content">
      <div class="row">
         <div class="card text-left">
            <div class="card-body">
               <div class="row">
                  <div class="col-md-6">
                     <h2 class="mb-3" style="font-weight:700">Choose Driving Instructors</h2>
                  </div>
               </div>
             <div class="row" style="margin-top: 20px;">
                <div class="col-md-2 form-group mb-1">
                    <label>Search By Instructor <span class="text-danger">*</span></label>
                    <select class="form-control js-example-basic-single instructor" name="instructor_id">
                    <option value="">Select Instructor</option>
                    @if(count($instructors) > 0)
                    @foreach($instructors as $ins)
                    <option value="{{$ins->id}}">{{ucwords($ins->instructor_name.' ('.$ins->instructor_email.')')}}</option>
                    @endforeach
                    @endif
                    </select>
                </div>
                <div class="col-md-2 form-group mb-1">
                    <label>Search By Learner <span class="text-danger">*</span></label>
                    <select class="form-control js-example-basic-single learner" name="learner_id">
                        <option value="">Select Learner</option>
                        @foreach ($learners as $lear)
                            <option value="{{$lear->id}}">{{ucwords($lear->learner_name).' ('.$lear->lemail.')'}}</option>
                        @endforeach
                        <option value="" is_selected="add_new_learner" data-redirect="{{ url('/admin/learners/new') }}"><i class="fa fa-plus"></i> New Learner</option>
                    </select>
                </div>
                <div class="col-md-2 form-group mb-1">
                    <label>Vehicle Type <span class="text-danger">*</span></label><br>
                    <select class="form-control  vehicle_type" name="vehicle_type">
                      <option value="">Select</option>
                       <option value="1">Auto</option>
                       <option value="2">Manual</option>
                    </select>
                </div>
                <div class="col-md-2 form-group mb-1">
                    <label>Enter your subrub </label>
                    <input type="text" class="form-control subrub" id="searchInput1" placeholder="Enter a location" name="subrub">
                </div>
                <div class="col-md-2">
                <button class="btn btn-sm bg-blue text-white searchBtn" style="width: 100%;padding: 7px;margin: 18px 0px;"> Search </button>
                </div>
            </div>
               <div id="instructorResult">
                <h2 class="mb-3" style="font-weight:700">Available Instructors</h2>
                @include('admin.bookings.ajax-instructors')
                </div>
            </div>
         </div>
      </div>
   </div>
</div>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB4Bec1p6cCz6VvI3oRvWAyh0VBI9FOmw4&libraries=places&callback=initAutocomplete1" async defer></script>
<script>
    $(document).ready(function() {
        $('.js-example-basic-single').select2();

        // Handle change event of the select element
        $('.learner').on('change', function() {
            var selectedValue = $('option:selected', this).attr('is_selected');
            if (selectedValue === 'add_new_learner') {
                var redirectUrl = $('option:selected', this).data('redirect');
                if (redirectUrl) {
                    window.location.href = redirectUrl; // Redirect in the same tab
                }
            }
        });
    });
  //  
  $(function(){
    getData(0);

$(document).on('click','.searchBtn', function (e){
    $("#overlay").fadeIn(300);　
    getData(0);
    e.preventDefault();

});

  //pagination
  $(document).on('click', '.pagination a',function(event){
    //loader
    $("#overlay").fadeIn(300);　
    $('li').removeClass('active');
    $(this).parent('li').addClass('active');
    event.preventDefault();
    var myurl = $(this).attr('href');
    var page=$(this).attr('href').split('page=')[1];
    getData(page);
});

function getData(page){
    var instructor   =    $(".instructor option:selected").val();
    var learner      =    $(".learner option:selected").val();
    var vehicleType  =    $(".vehicle_type option:selected").val();
    var subrub       =    $(".subrub").val();

    $.ajax(
    {
        url: '?page=' + page+'&instructor='+instructor+'&learner='+learner+'&vehicleType='+vehicleType+'&subrub='+subrub,
        type: "get",
        datatype: "html",
    })
    .done(function(data)
    {
        $("#instructorResult").empty().html(data);
        $("#overlay").fadeOut(300);
        //debug to check page number
        // location.hash = page;
    })
    .fail(function(jqXHR, ajaxOptions, thrownError)
    {
        alert('No response from server');

    });
}

});

</script>

 <script type="text/javascript">
  function initAutocomplete1() {
      const searchInput = document.getElementById('searchInput1');
      let autocomplete;

      // Create the Autocomplete object
      autocomplete = new google.maps.places.Autocomplete(searchInput, {
          types: ['geocode'], // Restrict predictions to geographic locations
          componentRestrictions: { country: 'AU' }, // Limit predictions to Australia
      });

      // When a place is selected from the autocomplete suggestions
      autocomplete.addListener('place_changed', () => {
          const place = autocomplete.getPlace();
          if (!place.geometry || !place.name) {
              return; // No valid place selected
          }

          // Check if the place has a postal code
          let postalCode = '';
          for (const addressComponent of place.address_components) {
              if (addressComponent.types.includes('postal_code')) {
                  postalCode = addressComponent.long_name;
                  break;
              }
          }

          const suggestionText = postalCode
              ? `${place.name} - ${postalCode}`
              : place.name;

          // Set the selected suburb input field
          searchInput.value = suggestionText;
      });
  }
 </script>
@endsection