{% set filtreDatatable = app.session.get(filter_key_request) %}
{% set openMemberFilter = filter_key_request in ['filter_adherent_list', 'filter_adherent_post_edit'] %}

<div class="default-according style-1" id="filterAccordion">
    <div class="card">
        <div class="card-header filtre bg-primary">
            <h5 class="mb-0">
                <button class="btn btn-link {{ openMemberFilter ? '' : 'collapsed' }} text-white accordion-collapse-btn" data-bs-toggle="collapse"
                        data-bs-target="#filterAccordionBloc" aria-expanded="{{ openMemberFilter ? 'true' : 'false' }}"><i class="fa fa-filter"></i>Filtre
                </button>
            </h5>
        </div>
        <div class="collapse {{ openMemberFilter ? 'show' : '' }}" id="filterAccordionBloc" data-bs-parent="#filterAccordion">
            <div class="card-body">
                <div class="row">
                    {% for field in fields %}
                        {% if field == 'startDatePayment' %}
                            <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" class="f-w-600">Date de paiement</label>
                                    <div class="row">
                                        <div class="col-xl-6 d-flex align-items-center"><label for="filter_startDatePayment" style="margin-bottom: 0px;" class="p-r-10">Min</label><input type="text" id="filter_startDatePayment" name="filter[startDatePayment]" data-format="00-00-0000" class="filter_start_date datepicker-here digits form-control check-input-date"></div>
                                        <div class="col-xl-6 d-flex align-items-center"><label for="filter_endDatePayment" style="margin-bottom: 0px;" class="p-r-10">Max</label><input type="text" id="filter_endDatePayment" name="filter[endDatePayment]" data-format="00-00-0000" class="filter_end_date datepicker-here digits form-control check-input-date"></div>
                                    </div>
                                </div>
                            </div>
                        {% elseif field == 'startDate' %}
                            <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" class="f-w-600">Date de remise</label>
                                    <div class="row">
                                        <div class="col-xl-6 d-flex align-items-center"><label for="filter_startDate" style="margin-bottom: 0px;" class="p-r-10">Min</label><input type="text" id="filter_startDate" name="filter[startDate]" data-format="00-00-0000" class="filter_start_date datepicker-here digits form-control check-input-date"></div>
                                        <div class="col-xl-6 d-flex align-items-center"><label for="filter_startDate" style="margin-bottom: 0px;" class="p-r-10">Max</label><input type="text" id="filter_endDate" name="filter[endDate]" data-format="00-00-0000" class="filter_end_date datepicker-here digits form-control check-input-date"></div>
                                    </div>
                                </div>
                            </div>
                        {% elseif field == 'daterange' %}
                            <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 filter-field-bloc">
                                <div class="form-group">
                                    <label>Echéance</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>
                        {% 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], {'value': (filtreDatatable[field] is defined ? filtreDatatable[field] : "") , 'label_attr': {'class': 'f-w-600'}}) }}
                            </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> Réinitialiser le filtre
                        </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/moment.min.js') }}"></script>
<script src="{{ asset('assets/js/imask.js') }}"></script>
<script src="{{ asset('assets/js/dateformat.js') }}"></script>
<script>
    $(document).ready(function () {
        {% if openMemberFilter %}
        const corporateInput = document.getElementById('filter_corporate');
        if (corporateInput) { corporateInput.focus({preventScroll: true}); }
        {% endif %}

    });

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

    function filtrer() {
        if (datatable !== undefined) {

            filterOminesDatatable({
                filter_session_key: "{{ filter_key_request }}",
                echeanceStartDate: $('.filter_start_echeance_date').val(),
                echeanceEndDate: $('.filter_end_echeance_date').val(),
                startDate: $('.filter_start_date').val(),
                endDate: $('.filter_end_date').val(),
                firstName: $('.filter_firstName').val(),
                lastName: $('.filter_lastName').val(),
                corporate: $('.filter_corporate').val(),
                proof_contribution: $('.filter_proof_contribution').val(),
                regulation: $('.filter_regulation').val(),
                offer: $('.filter_offer').val(),
                amount: $('.filter_amount').val(),
                amountVoucher: $('.filter_amount_voucher').val(),
                email: $('.filter_email').val(),
                ref: $('.filter_ref').val(),
                refund: $('.filter_refund').val(),
                type_accounting: $('.filter_type_accounting').val(),
                payement: $('.filter_payement').val(),
                disabled: $('.filter_disabled').val(),
                export_date: $('.filter_export_date').val(),
                total_amout: $('.filter_total_amout').val(),
                file_name: $('.filter_file_name').val(),
                // filtre gestion RA
                call_date: $('.filter_call_date').val(),
                request_state: $('.filter_request_state').val(),
                assign_to: $('.filter_assign_to').val(),
                caller_number: $('.filter_caller_number').val(),
                type_request: $('.filter_type_request').val(),
            }, datatable);
        }

    }

    function initialiseFilter() {
        $("#filterAccordion input").val('');
        $("#filterAccordion select").val('').trigger('change');
        filtrer();
    }

    $('.filtreDatatable').find('#filterAccordion input[type=number],input[type=text] ').keyup(delayCallAjax(function (e) {
        filtrer();
    }, 1000));
    $(document).on('select2:select', '.filtreDatatable select', function (e) {
        filtrer();
    });

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