@extends('front.app')
@section('content')
    <section class="wrapper bg-soft-primary">
        <div class="container  pt-10 pb-15 pt-md-14">
            <div class="row gx-lg-8 gx-xl-12 gy-10 mb-5 align-items-center">
                <div class="col-md-10 offset-md-1 offset-lg-0 col-lg-5 text-center text-lg-start order-2 order-lg-0"
                     data-cues="slideInDown" data-group="page-title" data-delay="600">
                    <h1 class="display-1 mb-5 mx-md-n5 mx-lg-0">{{$category->name}}</h1>
                </div>
            </div>
        </div>
        <!-- /.container -->
    </section>
    <section class="wrapper bg-light">
        <div class="container py-14 py-md-16">
            @if(!empty($availableYears) && count($availableYears))
                <div style="float:right">
                    <select name="year"  id="yearSelect" class="form-select right year-select">
                        <option value="">Toti anii</option>
                        @foreach($availableYears as $year)
                            @if($year)
                                <option value="{{$year}}">{{$year}}</option>
                            @endif
                        @endforeach
                    </select>
                </div>
            @endif

            {{ $dataTable->table(['class'=> 'table table-row-bordered gy-5'], true) }}
        </div>
        <!-- /.container -->
    </section>
@endsection
@push('scripts')
    {{$dataTable->scripts()}}

    <script>
        $("#yearSelect").on("change", function() {
            let getParameters = [];
            getParameters.push('year=' + encodeURIComponent($('#yearSelect').val()));
            let targetURL = window.location + '?' + getParameters.join('&');
            var table = $('#local-council-table').DataTable();

            table.ajax.url(targetURL).load();
        });
    </script>
@endpush