@once
    @push('stylesheets')
        <link rel="stylesheet" href="{{asset('css/modal.css')}}"/>
    @endpush
@endonce


@props(['title' => 'Modal Title', 'class' => null])

<dialog blade="{{ $viewName ?? 'unknown' }}" id="{{ $attributes->get('id') }}" class="dialog-modal @if ($class) {{$class}} @endif"
       >

    <div class="dialog-modal-header">
        <p>{{ $title }}</p>
        <div class="circle"></div>
    </div>
    <div class="dialog-modal-content">
        @if (isset($prompt))
            {{ $prompt }}
        @else
            {{ $body }}
        @endif
    </div>

</dialog>


@once
    @push('scripts-stack')

        <script>

            const lightDismiss = ({target: dialog}) => {
                if (dialog.nodeName === 'DIALOG')
                    dialog.close('dismiss')
            }

            const dialogs = document.querySelectorAll('dialog.dialog-modal');

            dialogs.forEach((dialog) => {
                dialog.addEventListener('click', lightDismiss);
                const circleElement = dialog.querySelector('.circle');
                circleElement.addEventListener('click', (event) => {
                    event.stopPropagation(); // Prevent the click event from propagating to the dialog
                    dialog.close('circleClick'); // Close the dialog with a custom reason
                });
                const closeButton = dialog.querySelector('.close-modal-btn');
                closeButton?.addEventListener('click', (event) => {
                    event.stopPropagation(); // Prevent the click event from propagating to the dialog
                    dialog.close('circleClick'); // Close the dialog with a custom reason
                });
            })


            const openModalButtons = document.querySelectorAll('[data-toggle="modal"]');
            openModalButtons.forEach(button => {
                const modal = document.querySelector(`#${button.dataset.target}`);
                button.addEventListener('click', () => {
                    if (modal) {
                        resetModalForm(modal);
                        modal.showModal();
                    }
                });

            });



            function resetModalForm(modal) {
                modal.querySelector('form')?.reset();

                const bootstrapSelects = $s(modal).find('select');
                bootstrapSelects.selectpicker('destroy');
                bootstrapSelects.selectpicker('render');
            }
        </script>


    @endpush
@endonce