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

<div class="main-content-wrap sidenav-open d-flex flex-column" id="job-full">
   <!-- ============ 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-3">
                      <h4 class="card-title mb-1"><i class="fa fa-suitcase" aria-hidden="true"></i> Bookings </h4>
                  </div>
                  <div class="col-md-9">
                     <div class="" style="text-align:right">
                        <ul class="employee-top-btns">
                        
                           <li>
                              <a href="{{ url('/admin/bookings/create') }}" class="btn btn-blue text-white bg-blue">
                              <i class="fa fa-plus"></i> Create
                              </a>
                           </li>
                        </ul>
                     </div>
                  </div>
         </div>
      </div>
      <div class="row mt-4">
         <div class="col-md-12">
            <div class="card w-100 ml-0 mr-0" id="box-mr">
                <div class="card-body">
                    <form>
                    @csrf
                     <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 Name </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
                            </select>
                        </div>
                        <div class="col-md-2 form-group mb-1">
                            <label> From date </label>
                            <input class="form-control from_date commonDatePicker" name="from" type="text" placeholder="From date">
                            <i class="fa fa-calendar" aria-hidden="true"></i>

                        </div>
                        <div class="col-md-2 form-group mb-1">
                            <label> To date </label>
                            <input class="form-control to_date commonDatePicker" name="to" type="text" placeholder="To date">
                             <i class="fa fa-calendar" aria-hidden="true"></i>
                        </div>
                        <div class="col-md-2">
                        <button class="btn btn-sm bg-blue text-white searchBtn" style="width: 100%;padding: 7px;margin: 18px 0px;"> Filter </button>
                        </div>
                    </div>
                       <div id="bookingResult">
                        @include('admin.bookings.ajax-booking-list')
                        </div>
                      </form>
                    </div>
                </div>
            </div>
         </div>
      </div>
   </div>
</div>

<script type="text/javascript">
	$(document).ready(function() {
        $('.js-example-basic-single').select2();
    });
</script>

<script>
  $(function(){
    getData(0);
  //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);
});

  $(document).on('change','.from_date, .to_date', function (e){

    $("#overlay").fadeIn(300);　
    getData(0);
    e.preventDefault();

  });

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

});

 $(document).on('change','.from_date',function() {

    var from = $('.from_date').datepicker('getDate');
    var to_date   = $('.to_date').datepicker('getDate');

    if($('.to_date').val() !=""){
    if (from > to_date) {
    alert ("Please select appropriate date range!");
    $('.from_date').val("");
    $('.to_date').val("");

    }
    }

});
//
$(document).on('change','.to_date',function() {

    var to_date = $('.to_date').datepicker('getDate');
    var from   = $('.from_date').datepicker('getDate');
    if($('.from_date').val() !=""){
    if (from > to_date) {
    alert ("Please select appropriate date range!");
    $('.from_date').val("");
    $('.to_date').val("");

    }
    }
});

function getData(page){
    var instructor   =    $(".instructor option:selected").val();
    var learner      =    $(".learner option:selected").val();
    var from_date    =    $(".from_date").val();
    var to_date      =    $(".to_date").val();

    $.ajax(
    {
        url: '?page=' + page+'&instructor='+instructor+'&learner='+learner+'&from_date='+from_date+'&to_date='+to_date,
        type: "get",
        datatype: "html",
    })
    .done(function(data)
    {
        $("#bookingResult").empty().html(data);
        $("#overlay").fadeOut(300);
    })
    .fail(function(jqXHR, ajaxOptions, thrownError)
    {
        alert('No response from server');

    });
}

});

</script>


@endsection