@extends('layouts.layout')
@section('title', 'Customer Waitinglist')
@section('content')
@include('customers.customer_sidebar')
<div class="tab-content-wrap">
	<div class="tab-pane active">
		 <div class="d-flex justify-content-between align-items-center mb-4">
            <h3>Customer Details - {{ $customer->firstname }} {{ $customer->lastname }}</h3>
                    <!-- <a href="{{ url('/customers')}}"  class="btn">Back</a> -->
                    <a href="{{url('customers/'.request()->id.'/customer-account')}}" class="btn">Back</a>
        </div>

				<div class="my-4">
					<button type="button" class="btn" data-toggle="modal" data-target="#addWaiting">Add To Waiting List</button>
				 </div>
					<div class="select-box-group waiting-list-select justify-content-start select-auto align-items-center flex-wrap">

					<div class="form-wrap datepicker-both date input-group mb-3  waiting-datepicker ml-3">
                                <input type="text"   onchange="select_startdate(this.value,'{{$searchfranchise}}','{{$searchvenue}}','{{$searchclass}}','{{$searchtype}}','{{$searchenddate}}','{{$searchterm}}')" class="form-control datepicker-startdate" id="startdate" placeholder="Start Date" >
                                <div class="input-group-append">
                                    <i class="fas fa-calendar-alt"></i>
                                    </div>
                            </div>
                            <div class="form-wrap datepicker-both date input-group mb-3  mx-3 waiting-datepicker">
                                <input type="text"  onchange="select_enddate(this.value,'{{$searchfranchise}}','{{$searchvenue}}','{{$searchclass}}','{{$searchtype}}','{{$searchstartdate}}','{{$searchterm}}')" class="form-control datepicker-enddate" id="enddate" placeholder="End Date" >
                                <div class="input-group-append">
                                    <i class="fas fa-calendar-alt"></i>
                                    </div>
                            </div>
                               <select  class="form-select mb-3 ml-3" title="Select franchise first" onchange="select_venue(this.value,'{{$searchfranchise}}','{{$searchtype}}','{{$searchclass}}','{{$searchterm}}','{{$searchstartdate}}','{{$searchenddate}}')" id="search_venue" name="venue">
                    <option value="" {{((empty($searchvenue)) ? "selected" : "")}} >Select Venue</option>
                </select>
				<select  class="form-select mb-3 ml-3" onchange="select_type(this.value,'{{$searchfranchise}}','{{$searchvenue}}','{{$searchclass}}','{{$searchterm}}','{{$searchstartdate}}','{{$searchenddate}}')" id="search_type" name="type">
                        <option value="" {{((empty($searchtype)) ? "selected" : "")}} >Select Class Type</option>
                        <option {{(($searchtype == 'weekend') ? "selected" : "")}} value="weekend">Weekend</option>
                        <option {{(($searchtype == 'holiday') ? "selected" : "")}} value="holiday">Holiday</option>
                        <option {{(($searchtype == 'other') ? "selected" : "")}}  value="other">Other</option>
                </select>
                <select  class="form-select mb-3 ml-3"  name="class" title="Select class type first" onchange="select_class(this.value,'{{$searchfranchise}}','{{$searchvenue}}','{{$searchtype}}','{{$searchterm}}','{{$searchstartdate}}','{{$searchenddate}}')" id="search_class">
                        <option value="" {{((empty($searchclass)) ? "selected" : "")}}>Class</option>
                </select>
                <select  class="form-select mb-3 ml-3" title="Select franchise first" onchange="select_term(this.value,'{{$searchfranchise}}','{{$searchvenue}}','{{$searchtype}}','{{$searchclass}}','{{$searchstartdate}}','{{$searchenddate}}')" name="term" id="term_change">
                        <option value="" {{((empty($searchterm)) ? "selected" : "")}}>Term</option>
                </select>
                <select class="form-select select-hidden mb-3 ml-3"  onchange="select_day()" name="day" id="day_change">
							<option value="" {{((empty($searchday)) ? "selected" : "")}}>Day Of Week</option>
							<option  {{(($searchtype == 'monday') ? "selected" : "")}}  value="monday">Mon</option>
							<option  {{(($searchtype == 'tuesday') ? "selected" : "")}}  value="tuesday">Tue</option>
							<option  {{(($searchtype == 'wednesday') ? "selected" : "")}}  value="wednesday">Wed</option>
							<option  {{(($searchtype == 'thursday') ? "selected" : "")}}  value="thursday">Thu</option>
							<option  {{(($searchtype == 'friday') ? "selected" : "")}}  value="friday">Fri</option>
							<option  {{(($searchtype == 'saturday') ? "selected" : "")}}  value="saturday">Sat</option>
							<option  {{(($searchtype == 'sunday') ? "selected" : "")}}  value="sunday">Sun</option>
						</select>
					<div class="mb-3 ml-3 d-none" id="clearbtn">
                        <button onclick="clear_filter()" class="btn">Clear</button>
                    </div>

					</div>
		   <div class="table-wrap-waiting-list last-th-none search-hide">
			<table id="example" class="table table-bordered table-striped">
				<thead>
					<tr>
						<th>Franchise</th>
					    <th>Venue</th>
						<th>Class</th>
						<th>Day</th>
						<th>Time</th>
						<th>Term</th>
						<th>Student</th>
						<th>Date Added</th>
						<th></th>
					</tr>
				</thead>
				<tbody>

				</tbody>
			</table>
		</div>
	</div>
</div>
<!--- Modal-->
<div class="modal fade " id="removeWaiting" data-backdrop="static" data-keyboard="false" tabindex="-1" >
	<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
		<div class="modal-content">

		</div>
	</div>
</div>
<div class="modal fade" id="addWaiting">
	<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
		<div class="modal-content">
			<div class="modal-header">
				<h3 class="modal-title">Add to Waiting List</h3>
				<button type="button" class="close" data-dismiss="modal"   aria-label="Close">
				<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="select-box-group waiting-list-select px-4">
            				<select name="term2" id="search_term2" title="Please selet franchise first" class="form-select">
					<option value="">Terms</option>
				</select>
				<select  class="form-select" id="search_type2" onchange="getclassname2(this.value)" name="type2">
                        <option value="" >Select Class Type</option>
                        <option  value="weekend">Weekend</option>
                        <option value="holiday">Holiday</option>
                        <option  value="other">Other</option>
                </select>
				<select class="form-select select-hidden" title="Please selet class type first" id="search_class2" name="class2">
					<option value="">Select Class</option>
				</select>
				<div class="ml-2">
					<button class="btn" onclick="getclasslist()">Search</button>
				</div>
			</div>
			<div class="modal-body">

			</div>
		</div>
	</div>
</div>
<div class="modal fade"  id="addAttendee" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
		<div class="modal-content">
			<div class="modal-header">
				<h3 class="modal-title">Add to Student Waiting List</h3>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
				<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">

			</div>
		</div>
	</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>

<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>

<script src="{{url('admin/js/bootstrap-datepicker.min.js')}}"></script>
<script>
 var roleid = ;
        if(roleid == 1) {
         getvenue($("#search_franchise").val());
        }
        else{
            getvenue();
            get_term();
        }



 getclassname($("#search_type").val());
    function getvenue(e){
       // alert(e) ;
      var franchise_id = e;
      if(e != null && e != ''){
      var venue = "";
      var term = "";
      $('#search_venue').empty();
      $("#search_venue").append(`<option value='' selected > Select Venue</option>`)
      $('#term_change').empty();
	  $("#term_change").append(`<option value=''> Select Term</option>`)
      $.ajax
        ({
            type: 'POST',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: { fid: franchise_id },
            url:"/class/get-venue", // if the route is defined in routes/api.php, you need to prefix it with api/
            success: function(response) {
                if(response.venue.length > 0) {

                  response.venue.forEach(el => {
                    $("#search_venue").append(`<option value='${el.id}'> ${el.name}</option>`)


                    })
                    if(venue != ''){
                        $("#search_venue option[value="+venue+"]").attr("selected","selected");
                    }

                }
                else{
                    $("#search_venue").append(`<option value=''>No Venue available</option>`)
                }
                if(response.terms.length > 0){
				 response.terms.forEach(el => {
					$("#term_change").append(`<option value='${el.id}'>${el.term_name}</option>`)
	               })
                   if(term != ''){
                        $("#term_change option[value="+term+"]").attr("selected","selected");
                    }

			   }
			   else{
				$("#term_change").append(`<option value=''>No term available</option>`)
			   }
            },
        });
    }
    else{

         $('#search_venue').empty();
         $("#search_venue").append(`<option value='' selected > Select Venue</option>`)

    }
     }

	function get_term(fid){
		var franchise_id = fid;

      $('#search_term2').empty();
	  $("#search_term2").append(`<option value=''> Select Term</option>`)
      $.ajax
        ({
            type: 'POST',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: { fid: franchise_id },
            url:"/class/get-venue", // if the route is defined in routes/api.php, you need to prefix it with api/
            success: function(response) {
                if(response.terms.length > 0){
				 response.terms.forEach(el => {
					$("#search_term2").append(`<option value='${el.id}'>${el.term_name}</option>`)
	               })
			   }
			   else{
				$("#search_term2").append(`<option value=''>No term available</option>`)
			   }
            },
        });

}

     function getclassname(e){
            var type = e;
            var classs = "";
            $('#search_class').empty();
            $("#search_class").append(`<option value='' selected > Select Class</option>`)
            $.ajax
            ({
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: { typename: type },
                url:"/class/get-type-class", // if the route is defined in routes/api.php, you need to prefix it with api/
                success: function(response) {
                    if(response.length > 0) {
                    response.forEach(el => {
                        $("#search_class").append(`<option value='${el.id}'> ${el.class_age_from} - ${el.class_age_to}</option>`)
                        })
                        $("#search_class option[value="+classs+"]").attr("selected","selected");
                    }
                    else{
                    $('#search_class').empty();
                    $("#search_class").append(`<option value='' selected > Select Class</option>`)
                    }
                },
        });
    }
	function getclassname2(e){
            var type = e;
            $('#search_class2').empty();
            $("#search_class2").append(`<option value='' selected > Select Class</option>`)
            $.ajax
            ({
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: { typename: type },
                url:"/class/get-type-class", // if the route is defined in routes/api.php, you need to prefix it with api/
                success: function(response) {
                    if(response.length > 0) {
                    response.forEach(el => {
                        $("#search_class2").append(`<option value='${el.id}'> ${el.class_age_from} - ${el.class_age_to}</option>`)
                        })
                    }
                    else{
                    $('#search_class2').empty();
                    $("#search_class2").append(`<option value='' selected > Select Class</option>`)
                    }
                },
        });
    }
var startdate = $("#startdate").val();
    var enddate = $("#enddate").val();

function select_franchise(value,venue,type,classid,term,startdate,enddate){
        //location.href = "/customers/{{request()->id}}/customer-waitinglist?franchise="+value+((venue != "") ? "&venue="+venue : '')+((type != "") ? "&type="+type : '')+((classid != "") ? "&class="+classid : '')+((term != "") ? "&term="+term : '')+((startdate != "") ? "&startdate="+startdate : '')+((enddate != "") ? "&enddate="+enddate : '');
		$('.table-wrap-waiting-list .table').DataTable().ajax.reload();
		getvenue(value);
        clearfiletr();
	}

    function select_type(value,franchise,venue,classid,term,startdate,enddate){
        //location.href = "/customers/{{request()->id}}/customer-waitinglist?type="+value+((franchise != "") ? "&franchise="+franchise : '')+((venue != "") ? "&venue="+venue : '')+((classid != "") ? "&class="+classid : '')+((term != "") ? "&term="+term : '')+((startdate != "") ? "&startdate="+startdate : '')+((enddate != "") ? "&enddate="+enddate : '');
		$('.table-wrap-waiting-list .table').DataTable().ajax.reload();
		getclassname(value);
        clearfiletr();
	}

    function select_venue(value,franchise,type,classid,term,startdate,enddate){
        //location.href = "/customers/{{request()->id}}/customer-waitinglist?venue="+value+((franchise != "") ? "&franchise="+franchise : '')+((type != "") ? "&type="+type : '')+((classid != "") ? "&class="+classid : '')+((term != "") ? "&term="+term : '')+((startdate != "") ? "&startdate="+startdate : '')+((enddate != "") ? "&enddate="+enddate : '');
		$('.table-wrap-waiting-list .table').DataTable().ajax.reload();
        clearfiletr();
	}
    function select_class(value,franchise,venue,type,term,startdate,enddate){
        //location.href = "/customers/{{request()->id}}/customer-waitinglist?class="+value+((franchise != "") ? "&franchise="+franchise : '')+((venue != "") ? "&venue="+venue : '')+((type != "") ? "&type="+type : '')+((term != "") ? "&term="+term : '')+((startdate != "") ? "&startdate="+startdate : '')+((enddate != "") ? "&enddate="+enddate : '');
		$('.table-wrap-waiting-list .table').DataTable().ajax.reload();
        clearfiletr();
	}
    function select_term(value,franchise,venue,type,classid,startdate,enddate){
       // location.href = "/customers/{{request()->id}}/customer-waitinglist?term="+value+((franchise != "") ? "&franchise="+franchise : '')+((venue != "") ? "&venue="+venue : '')+((classid != "") ? "&class="+classid : '')+((type != "") ? "&type="+type : '')+((startdate != "") ? "&startdate="+startdate : '')+((enddate != "") ? "&enddate="+enddate : '');
	   $('.table-wrap-waiting-list .table').DataTable().ajax.reload();
       clearfiletr();
	}


    function select_startdate(value,franchise,venue,classid,type,enddate,term){
        //location.href = "/customers/{{request()->id}}/customer-waitinglist?startdate="+value+((franchise != "") ? "&franchise="+franchise : '')+((venue != "") ? "&venue="+venue : '')+((classid != "") ? "&class="+classid : '')+((type != "") ? "&type="+type : '')+((enddate != "") ? "&enddate="+enddate : '')+((term != "") ? "&term="+term : '');
		$('.table-wrap-waiting-list .table').DataTable().ajax.reload();
        clearfiletr();
    }

    function select_enddate(value,franchise,venue,classid,type,startdate,term){
       // location.href = "/customers/{{request()->id}}/customer-waitinglist?enddate="+value+((franchise != "") ? "&franchise="+franchise : '')+((venue != "") ? "&venue="+venue : '')+((classid != "") ? "&class="+classid : '')+((type != "") ? "&type="+type : '')+((startdate != "") ? "&startdate="+startdate : '')+((term != "") ? "&term="+term : '');
	   $('.table-wrap-waiting-list .table').DataTable().ajax.reload();
       clearfiletr();
    }
	function select_day(){
		$('.table-wrap-waiting-list .table').DataTable().ajax.reload();
        clearfiletr();
    }


    function clear_filter(){
        location.href = "/customers/{{request()->id}}/customer-waitinglist";

       /*  var franchise = $('#search_franchise').val('');
        var venue = $('#search_venue').val('');
        var type = $('#search_type').val('');
        var classval = $('#search_class').val('');
        var status = $('#search_status').val('');
        var term = $('#term_change').val('');
        var startdate = $('#startdate').val('');
        var enddate = $('#enddate').val('');
        var day_change = $('#day_change').val('');

        var search = $('input[type="search"]').val('');
        $("#clearbtn").addClass('d-none');
        $('.table-wrap-waiting-list .table').DataTable().ajax.reload();
        getclassname($("#search_type").val()); */

       // $('#search_class').empty();

        /* var roleid = ;
        if(roleid == 1) {
            $('#search_venue').empty();
        $("#search_venue").append(`<option value='' selected > Select Venue</option>`)
        $('#term_change').empty();
        $("#term_change").append(`<option value=''> Select Term</option>`)
        } */
    }

    $(".datepicker-startdate").datepicker({
                    language: "es",
                    autoclose: true,
                    format: "dd/mm/yyyy",

                }).on('changeDate', function(selected) {
                    //alert(selected.date.valueOf());
                var minDate = new Date(selected.date.valueOf());
              //  $('.datepicker-enddate').datepicker('setStartDate', minDate);
                $('.datepicker-enddate').datepicker({
                    language: "es",
                    autoclose: true,
                    format: "dd/mm/yyyy",
                    startDate : minDate,
                })
                })


                $(".datepicker-enddate").datepicker({
                    language: "es",
                    autoclose: true,
                    format: "dd/mm/yyyy",

                }).on('changeDate', function(selected) {
                    //alert(selected.date.valueOf());
                var maxDate = new Date(selected.date.valueOf());
               // $('.datepicker-startdate').datepicker('setEndDate', maxDate);
               $('.datepicker-startdate').datepicker({
                    language: "es",
                    autoclose: true,
                    format: "dd/mm/yyyy",
                    endDate : maxDate,
                })
                });

    function clearfiletr(){
        var franchise = $('#search_franchise').val();
        var venue = $('#search_venue').val();
        var type = $('#search_type').val();
        var classval = $('#search_class').val();
        var status = $('#search_status').val();
        var term = $('#term_change').val();
        var startdate = $('#startdate').val();
        var enddate = $('#enddate').val();
        var search = $('input[type="search"]').val();

        if(franchise !='' || venue!='' || type!='' || classval!='' || status !='' || term != ''|| startdate != '' || enddate != '' || search != ''){
            $("#clearbtn").removeClass('d-none');
            $('.table-wrap-waiting-list .table').DataTable().ajax.reload();

        }
        else{
           // $("#clearbtn").addClass('d-none');
        }
    }

	function removestudentmodal(rowid){
		$.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
                type: 'GET',
                url: '/customers/studentwaitingdetails/' + rowid,
                dataType: 'HTML',
                success: function (data) {

                },
            }).then(data => {
                $('#removeWaiting .modal-content').html(data);
                $('#removeWaiting').modal('toggle');
                $('#removeWaiting .close').on('click', function () {
                //alert();
                $('#removeWaiting').modal('hide');
            })
            })
            .catch(error => {
                var xhr = $.ajax();
                console.log(xhr);
                console.log(error);
            })
	}

	function removestudent(rowid,userid){
		$.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
                type: 'GET',
                url: '/customers/studentwaitingdelete/' + rowid +'/'+userid,
                dataType: 'HTML',
                success: function (data) {
                },
            }).then(data => {

                const swalWithBootstrapButtons = Swal.mixin({
						customClass: {
							confirmButton: 'btn btn-success',
							cancelButton: 'btn btn-danger'
						},
						buttonsStyling: false
                      });

					  swalWithBootstrapButtons.fire(
                                'Deleted!',
                                `Student Deleted Successfully.`,
                                'success'
                            );

                $('#removeWaiting').modal('hide');
				$('.table-wrap-waiting-list .table').DataTable().ajax.reload();

            })
            .catch(error => {
                var xhr = $.ajax();
                console.log(xhr);
                console.log(error);
            })
	}

	function getclasslist(){
		var franchise = $('#search_franchise2').val();
		var type = $('#search_type2').val();
		var classs = $('#search_class2').val();
		var term = $('#search_term2').val();
		$.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
            $.ajax({
                type: 'get',
                url: '/customers/getclasslist/',
				data: { franchise: franchise, type:type,class:classs,term:term},
                success: function (data) {
                },
				}).then(data => {

					$('#addWaiting .modal-body').html(data);

					$('#addWaiting .close').on('click', function () {
                        $('#addWaiting .modal-body').html('');
               			  $("#search_franchise2").val('');
                          //   $("#search_term2").val('');
                             $('#search_term2').empty();
                             $("#search_term2").append(`<option value=''> Select Term</option>`)
                             $("#search_type2").val('');
                             //$("#search_class2").val('');
                             $('#search_class2').empty();
                             $("#search_class2").append(`<option value=''> Select Class</option>`)
           				 })

				})
            .catch(error => {
                var xhr = $.ajax();
                console.log(xhr);
                console.log(error);
            })
	}

	function addstudentwaiting(classid){
     var cid = ;
		$.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
            $.ajax({
                type: 'get',
                url: '/customers/getoneclasslist/'+cid+'/'+classid,
                success: function (data) {
                },
				}).then(data => {
					$('#addAttendee').modal('toggle');
					$('#addAttendee .modal-body').html(data);
					$('#addAttendee .close').on('click', function () {
                        $('#addAttendee .modal-body').html('');
						$('#addAttendee').modal('hide');

           				 })

				})
            .catch(error => {
                var xhr = $.ajax();
                console.log(xhr);
                console.log(error);
            })

	}
    if(roleid == 1) {
$(function () {
var table = $(".table-wrap-waiting-list .table").DataTable({
            processing: true,
            serverSide: true,

        dom: '<"custom-table-info"<"custom-table-left"B><"custom-table-right"frlp>><"custom-table"t>p',
        language: {
            searchPlaceholder: "Search",
        },
        language: {
            searchPlaceholder: "Search",
            "lengthMenu": '<select class="form-select">'+
            '<option value="50">Show: 50</option>'+
            '<option value="100">Show: 100</option>'+
            '<option value="150">Show: 150</option>'+
            '<option value="200">Show: 200</option>'+
            '<option value="-1">Show: All</option>'+
            '</select> '
        },
        pageLength: 50,
        order: [],
        ajax: {
                url: "{{ url('customers/'.request()->id.'/customer-waitinglist') }}",
                      data: function (d) {
                    d.franchise = $('#search_franchise').val();
                    d.venue = $('#search_venue').val();
                    d.type = $('#search_type').val();
                    d.class = $('#search_class').val();
                    d.status = $('#search_status').val();
                    d.term = $('#term_change').val();
					d.day = $('#day_change').val();
                    d.startdate = $('#startdate').val();
                    d.enddate = $('#enddate').val();
                }
            },
        columns: [
             {data: 'name', name: 'name', orderable: true,
                searchable: true },
            {data: 'venue', name: 'venue', serachable : true},
			{data: 'class', name: 'class', serachable : true},
            {data: 'day', name: 'day'},
            {data: 'start_time', name: 'start_time',orderable: false,},
			{data: 'term', name: 'term'},
			{data: 'student', name: 'student'},
			{data: 'create_at', name: 'create_at'},
            {data: 'view', name: 'view', orderable:false}

        ],
        fnDrawCallback: function (oSettings, json) {
            console.log("scroll");
           $("html, body").animate(
                {
                    scrollTop: $(".table-wrap-waiting-list").offset().top,
                },
                "slow"
            );
            if($('.table-wrap-waiting-list').find(".dataTables_paginate").eq(0).find('span').find("a").length > 1){
                $('.table-wrap-waiting-list').find(".dataTables_paginate").show();
                }else{
                $('.table-wrap-waiting-list').find(".dataTables_paginate").hide();
            }
        },
        buttons: [
            {
                extend: "excelHtml5",
                orientation: "landscape",
                pageSize: "LEGAL",
                exportOptions: {
         columns: ':not(:last-child)',
        },
            },

            {
                extend: "pdfHtml5",
                orientation: "landscape",
                pageSize: "LEGAL",
                exportOptions: {
             columns: ':not(:last-child)',
           },
            },
            {
                extend: "print",
                exportOptions: {
             columns: ':not(:last-child)',
           },
                customize: function (win) {
                    $(win.document.body).css("font-size", "10pt");

                    $(win.document.body)
                        .find("table")
                        .addClass("compact")
                        .css("font-size", "inherit");
                },
            },
        ],
    });
}); }else {
    $(function () {
var table = $(".table-wrap-waiting-list .table").DataTable({
            processing: true,
            serverSide: true,

        dom: '<"custom-table-info"<"custom-table-left"B><"custom-table-right"frlp>><"custom-table"t>p',
        language: {
            searchPlaceholder: "Search",
        },
        language: {
            searchPlaceholder: "Search",
            "lengthMenu": '<select class="form-select">'+
            '<option value="50">Show: 50</option>'+
            '<option value="100">Show: 100</option>'+
            '<option value="150">Show: 150</option>'+
            '<option value="200">Show: 200</option>'+
            '<option value="-1">Show: All</option>'+
            '</select> '
        },
        pageLength: 50,
        order: [ ],
        ajax: {
                url: "{{ url('customers/'.request()->id.'/customer-waitinglist') }}",
                      data: function (d) {
                    d.franchise = $('#search_franchise').val();
                    d.venue = $('#search_venue').val();
                    d.type = $('#search_type').val();
                    d.class = $('#search_class').val();
                    d.status = $('#search_status').val();
                    d.term = $('#term_change').val();
					d.day = $('#day_change').val();
                    d.startdate = $('#startdate').val();
                    d.enddate = $('#enddate').val();
                }
            },
        columns: [
             {data: 'name', name: 'name', orderable: true,
                searchable: true,visible: false,},
            {data: 'venue', name: 'venue', serachable : true},
			{data: 'class', name: 'class', serachable : true},
            {data: 'day', name: 'day'},
            {data: 'start_time', name: 'start_time',orderable: false,},
			{data: 'term', name: 'term'},
			{data: 'student', name: 'student'},
			{data: 'create_at', name: 'create_at'},
            {data: 'view', name: 'view', orderable:false}

        ],
        fnDrawCallback: function (oSettings, json) {
            console.log("scroll");
           $("html, body").animate(
                {
                    scrollTop: $(".table-wrap-waiting-list").offset().top,
                },
                "slow"
            );
            if($('.table-wrap-waiting-list').find(".dataTables_paginate").eq(0).find('span').find("a").length > 1){
                $('.table-wrap-waiting-list').find(".dataTables_paginate").show();
                }else{
                $('.table-wrap-waiting-list').find(".dataTables_paginate").hide();
            }
        },
        buttons: [
            {
                extend: "excelHtml5",
                orientation: "landscape",
                pageSize: "LEGAL",
                exportOptions: {
         columns: ':not(:last-child)',
        },
            },

            {
                extend: "pdfHtml5",
                orientation: "landscape",
                pageSize: "LEGAL",
                exportOptions: {
             columns: ':not(:last-child)',
           },
            },
            {
                extend: "print",
                exportOptions: {
             columns: ':not(:last-child)',
           },
                customize: function (win) {
                    $(win.document.body).css("font-size", "10pt");

                    $(win.document.body)
                        .find("table")
                        .addClass("compact")
                        .css("font-size", "inherit");
                },
            },
        ],
    });
});
}
</script>
@endsection