@props([
    'name' => '',
    'datatable' => '',
    'options' => '',
])
<button {{ $attributes->class(['btn btn-secondary btn-sm']) }} type="button" id="btn-filter-{{ Str::slug($name) }}" title="{{ __('general.filter') }}" data-bs-toggle="modal" data-bs-target="#modal-filter" data-options="{{ $options }}">
    <i class="fas fa-filter"></i>
</button>

@pushonce('modal')
<div class="modal fade" id="modal-filter" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-fullscreen-md-down modal-dialog-scrollable modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-filter-title">{{ __('general.filter') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div id="modal-filter-body" class="modal-body">
                <form id="modal-form-filter" action="" method="GET" target="_blank">
                    <div id="modal-filter-placeholder" class="row">

                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">{{ __('general.close') }}</button>
                <button type="button" id="btn-apply-filter-{{ Str::slug($name) }}" class="btn btn-sm btn-primary" data-bs-dismiss="modal">{{ __('general.apply') }}</button>
            </div>
        </div>
    </div>
</div>
@endpushonce

@pushonce('scripts')
    <script type="module">
        const btnFilterId = 'btn-filter-{{ Str::slug($name) }}';
        const btnApplyFilterId = 'btn-apply-filter-{{ Str::slug($name) }}';
        const datatableId = '{{ $datatable }}';

        $(document).ready(function () {
            $(`#${btnFilterId}`).on('click', function () {
                const filterOptions = $(this).data('options').split(',')
                for (let i = 0; i < filterOptions.length; i++) {
                    $('#modal-filter-placeholder').append($(filterOptions[i]));
                }

                $("#modal-filter").off('hidden.bs.modal').on('hidden.bs.modal', function () {
                    $('#modal-form-filter').attr('action', '');
                    for (let i = 0; i < filterOptions.length; i++) {
                        $('#section-options-placeholder').append($(filterOptions[i]));
                    }
                })
            })

            $(`#${btnApplyFilterId}`).on('click', function () {
                $(`${datatableId}`).DataTable().draw();
            })
        })
    </script>
@endpushonce