{% set filtreDatatable = app.session.get(filter_key_request) %}

<div class="default-according style-1" id="filterAccordion">
    <div class="card">
        <div class="card-header bg-primary">
            <h5 class="mb-0">
                <button class="btn btn-link collapsed text-white accordion-collapse-btn" data-bs-toggle="collapse"
                        data-bs-target="#filterAccordionBloc" aria-expanded="false"><i class="fa fa-filter"></i>Filter
                </button>
            </h5>
        </div>
        <div class="collapse" id="filterAccordionBloc" data-bs-parent="#filterAccordion">
            <div class="card-body">
                <div class="row">
                    {% for field in fields %}
                        {% if field == 'daterange' %}
                            <div class="col-xl-6 col-lg-8 col-md-12 col-sm-12 filter-field-bloc">
                                <div class="form-group">
                                    <label>Date</label>
                                    <div class="form-control daterange-content daterange-period-filter">
                                        <i class="far fa-calendar-alt"></i>
                                        &nbsp;
                                        <span></span>
                                        <i class="fas fa-caret-down float-right" style="font-size: 14px;"></i>
                                    </div>
                                </div>
                            </div>
                        {% elseif field == 'dateStart' %}
                            <div class="col-xl-6 col-lg-4 col-md-6 col-sm-12 m-b-5 filter-field-bloc">
                                <div class="form-group">
                                    <label for="filter_startDate">Period</label>
                                    <div class="row">
                                        <div class="col-xl-6 d-flex align-items-center"><label for="filter_dateStart" style="margin-bottom: 0px;" class="p-r-10">Min</label><input type="text" id="filter_dateStart" name="filter[dateStart]" data-format="00-00-0000" class="filter_dateStart datepicker-here digits form-control check-input-date"></div>
                                        <div class="col-xl-6 d-flex align-items-center"><label for="filter_dateEnd" style="margin-bottom: 0px;" class="p-r-10">Max</label><input type="text" id="filter_dateEnd" name="filter[dateEnd]" data-format="00-00-0000" class="filter_dateEnd datepicker-here digits form-control check-input-date"></div>
                                    </div>
                                </div>
                            </div>
                        {% else %}
                            <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 m-b-5 filter-field-bloc">
                                {{ form_row(formFilter[field]) }}
                            </div>
                        {% endif %}
                    {% endfor %}
                </div>
                <div class="row mt-2">
                    <div class="col-xl-12 col-lg-12 col-sm-12 text-right">
                        <button class="btn btn-outline-primary intialiser-filtere-action mb-2"
                                onclick="initialiseFilter()">
                            <i class="fas fa-times"></i> Reset the filter
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="{{ asset('assets/js/datepicker/date-picker/datepicker.js') }}"></script>
<script src="{{ asset('assets/js/datepicker/date-picker/datepicker.en.js') }}"></script>
<script src="{{ asset('assets/js/datepicker/date-picker/moment.min.js') }}"></script>
<script>
    $(document).ready(function () {
        {% if 'daterange' in fields %}
        initDaterangepicker('daterange-period-filter');
        {% elseif 'daterangetime' in fields %}
        initDaterangepicker('daterangetime-period-filter');
        {% endif %}
    });

    (function () {
        $('.filtreDatatable').append($('#filterAccordion'));
    })();

    function filtrer(initialize_filter = false) {
        if (datatable !== undefined) {
            $('#load_screen').show();
            let startDate, endDate;

            {% if 'daterange' in fields %}
            startDate = $('.daterange-period-filter').data('daterangepicker').startDate.format('YYYY-MM-DD') + " 00:00:00";
            endDate = $('.daterange-period-filter').data('daterangepicker').endDate.format('YYYY-MM-DD') + " 23:59:59";
            {% elseif 'daterangetime' in fields %}
            startDate = $('.daterangetime-period-filter').data('daterangepicker').startDate.format('YYYY-MM-DD HH:mm');
            endDate = $('.daterangetime-period-filter').data('daterangepicker').endDate.format('YYYY-MM-DD HH:mm');
            {% endif %}

            filterOminesDatatable({
                filter_session_key: "{{ filter_key_request }}",
                startDate: startDate,
                endDate: endDate,
                firstName: $('.filter_firstName').val(),
                lastName: $('.filter_lastName').val(),
                email: $('.filter_email').val(),
                fullName: $('.filter_fullName').val(),
                action: $('.filter_action').val(),
                dateStart: $('.filter_dateStart').val(),
                dateEnd: $('.filter_dateEnd').val(),
                initialize_filter : initialize_filter
            }, datatable);
        }
    }

    function initialiseFilter() {
        $("#filterAccordion input").val('');
        $("#filterAccordion select").val('').trigger('change');
        $('.daterange-period-filter span').html('<span id="startDate"></span><span id="endDate"></span>');
        initDaterangepicker('daterange-period-filter');
        filtrer();
    }

    $('.filtreDatatable').find('input:text').keyup(delayCallAjax(function (e) {
        filtrer();
    }, 1000));
    $(document).on('select2:select', '.filtreDatatable select', function (e) {
         filtrer(true);
    });
    $(document).on('select2:unselect', '.filtreDatatable select', function (e) {
        filtrer();
    });
    $("#filterAccordion .datepicker-here").datepicker({
        onSelect: function() {
            $('.intialiser-filtere-action').show();
            filtrer();
        }
    });
</script>