@php

	$route = Route::current();
	$annee = Request::get('annee') ?? '';

    if(Request::has('mois'))
	    $mois = Request::get('mois') ?? '';
    else
        $mois = date('n');


@endphp

<form class="row p-2 mb-2" id="datatable-filters">
    <div class="col-md-8">
        <div class="d-flex align-items-center justify-content-start">
            <div class="col-auto me-2" style="width: 150px;">
                @include('layouts.filtres-datatable-select-annee')
            </div>
            <div class="col-auto me-2">
                @include('layouts.filtres-datatable-select-mois', ['mois' => $mois])
            </div>

            @if($allowed)
            <div class="col-auto me-2">
                @include('layouts.filtres-datatable-select-places')
            </div>
            <div class="col-auto me-2" style="width: 125px;">
                @include('layouts.filtres-datatable-select-type')
            </div>
            @endif
        </div>
    </div>


    @if($is_admin)
    <div class="col-md-4">
        <div class="col-auto d-flex align-items-center justify-content-end">

            <div class="form-floating form-floating-outline">
                <input type="text" class="form-control" id="notes_search" placeholder="Cherchez dans les notes">
                <label for="notes_search"> Notes </label>
            </div>

            <button type="button" id="refresh" class="btn btn-icon btn-label-secondary waves-effect ms-2">
                <span class="tf-icons ri-refresh-line ri-22px"></span>
            </button>
        </div>
    </div>
    @endif
</form>

@push('scripts')
	<script type="module">
		$(function() {
            let datatable = $('.dataTable').DataTable();
			$('#annee').on('change', function(el){
				var url = new URL(window.location);
				(url.searchParams.has('annee') ? url.searchParams.set('annee', this.value) : url.searchParams.append('annee', this.value));
				url.search = url.searchParams;
				document.location = url.toString();
			})
			$('#mois').on('change', function(el){
				var url = new URL(window.location);
				(url.searchParams.has('mois') ? url.searchParams.set('mois', this.value) : url.searchParams.append('mois', this.value));
				url.search = url.searchParams;
				document.location = url.toString();
			})
			$('#place').on('change', function(el){
				var url = new URL(window.location);
				(url.searchParams.has('place') ? url.searchParams.set('place', this.value) : url.searchParams.append('place', this.value));
				url.search = url.searchParams;
				document.location = url.toString();
			})
			$('#type').on('change', function(el){
				var url = new URL(window.location);
				(url.searchParams.has('type') ? url.searchParams.set('type', this.value) : url.searchParams.append('type', this.value));
				url.search = url.searchParams;
				document.location = url.toString();
			})
			$('#notes_search').on('input', function(el){
                datatable.search(JSON.stringify({'field': 'notes', 'value': this.value})).draw() ;
                // datatable.columns(7).search($(this).val()).draw() ;
			})
			$('#refresh').on('click', function(el){
				var url = new URL('{{ route('caisse.index') }}');
                datatable.search("");
				document.location = url.toString();
			})
		});
	</script>
@endpush