@push('css')
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/air-datepicker/css/datepicker.min.css') }}">
    @include('layouts.datatables_css')
@endpush

{!! $dataTable->table(['width' => '100%', 'class' => 'table table-striped table-borderless table-hover']) !!}

@push('js')
    <script type="text/javascript" src="{{ asset('assets/moment/moment-with-locales.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/air-datepicker/js/datepicker.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/air-datepicker/js/datepicker.en.js') }}"></script>
    <script type="text/javascript">var yp = null;var isFirstLoad = true;</script>
    @include('layouts.datatables_js')
    {!! $dataTable->scripts() !!}
    <script>
        $(document).ready(function () {
            function reFitSelect2() {
                $('.select2.select2-container.select2-container--default').css('width', '100%');
            }

            var YearPicker = $('#YearPicker').datepicker({
                dateFormat: 'yyyy',
                view: 'years',
                minView: 'years',
                language: 'en',
                autoClose: true,
                useCurrent: true,
                sideBySide: true,
                onSelect: function onSelect(fd, d, inst) { 
                    refreshDTB(true); 
                }
            })

            function refreshDTB(isKeepPage) {
                if (isDTB(window.LaravelDataTables["dataTableBuilder"])) {
                    if (isKeepPage) {
                        window.LaravelDataTables["dataTableBuilder"].ajax.reload(null, false);
                    } else {
                        window.LaravelDataTables["dataTableBuilder"].ajax.reload(null, true);
                    }
                }
            }

        })
    </script>
@endpush