@props([
    'url' => '',
    'label' => '',
    'icon' => 'fa-file-alt',
    'options' => ''
])
<button class="btn btn-outline-gray w-100 btn-report-action" data-bs-toggle="modal" data-bs-target="#modal-report" data-action-url="{{ $url }}" data-options="{{ $options }}">
    <div class="w-100 d-flex align-middle align-items-center py-2">
        <div class="text-primary">
            <i class="fa fa-2x {{ $icon }}"></i>
        </div>
        <div class="div-report-title ms-3 text-gray-700 fs-6">
            {{ $label }}
        </div>
    </div>
</button>

@pushonce('scripts')
    <script type="module">
        $(document).ready(function () {
            $('.btn-report-action').on('click', function () {
                const reportTitle = $(this).find('.div-report-title').html()
                $('#modal-report-title').html(reportTitle)

                const reportOptions = $(this).data('options').split(',')
                for (let i = 0; i < reportOptions.length; i++) {
                    $('#modal-report-placeholder').append($(reportOptions[i]));
                }

                const formAction = $(this).data('action-url')
                $('#modal-form-report').attr('action', formAction);

                $("#modal-report").off('hidden.bs.modal').on('hidden.bs.modal', function () {
                    $('#modal-form-report').attr('action', '');
                    for (let i = 0; i < reportOptions.length; i++) {
                        $('#section-options-placeholder').append($(reportOptions[i]));
                    }
                })
            })
        })
    </script>
@endpushonce