modunawa/resources/views/modals/medium.blade.php

<div class="modal fade" id="medium-modal" tabindex="-1" aria-labelledby="exampleModalLabel" data-backdrop="static" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="pace-demo text-center position-absolute ml-2" hidden style="z-index: 9999; top: 50%; left: 44%;" id="pace-progress-modal-panel">
                <div class="theme_squares">
                    <div class="pace-progress"></div>
                    <div class="pace_activity"></div>
                </div>
            </div>
            <div class="modal-content">
                <button class="modal-close" data-bs-dismiss="modal"><i class="icofont-close"></i></button>
                <div class="modal-body p-0">
                </div>
            </div>
        </div>
    </div>
</div>

@once
@push('js')
    <script>
        $(document).on('click', '.destroy-btn', function() {
            const href = $(this).attr('data-attr')

            iziToast.question({
                timeout: 20000,
                close: false,
                overlay: true,
                displayMode: 'once',
                id: 'question',
                title: $('#comfirm-delete').text(),
                message: $('#can-not-recover-after-delete').text(),
                position: 'center',
                buttons: [
                    [`<button><b>${$('#delete').text()}</b></button>`, async function (instance, toast) {
                        instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');

                        call_destroy_api(href)

                    }, true],
                    [`<button>${$('#cancel').text()}</button>`, function (instance, toast) {
                        instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');

                    }],
                ],
            });

        });

        function call_destroy_api(href) {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                type: "POST",
                url: href,
                data: {
                    "_method": 'DELETE',
                },
                success: function(response) {
                    if (response.apiStatus) {
                        iziToast.error({
                            title: 'Error',
                            message: response.body ?? $('#api-request-failed-please-check').text(),
                        });
                    } else {
                        iziToast.success({
                            title: 'Success',
                            message: $('#action-completed').text(),
                        });
                        location.reload()
                    }
                }
            });
        }

        $('#medium-modal').on('hidden.bs.modal', function () {
            $('#medium-modal').find('.modal-body').empty()
        });

        $(document).on('click', '.medium-btn', function(event) {
            event.preventDefault();

            if ($(this).attr('data-auth')) {
                if (isEmpty(window.Member)) {
                    location.href = '{{ route('member-login') }}'
                    return
                }
            }

            let href = $(this).attr('data-attr')
            const title = $(this).attr('data-title')
            let serialize_form = $(this).attr('data-serialize-form')

            if (serialize_form) {
                href = addParameterToURL(href, $(serialize_form).serialize())
            }

            $.ajax({
                url: href,
                success: function(result) {
                    $('#medium-modal').find('.modal-title').text(title)
                    $('#medium-modal').modal('show')
                    $('#medium-modal').find('.modal-body').html(result).show()
                },
                error: function(jqXHR, testStatus, error) {
                    console.log(error);
                    alert("Page " + href + " cannot open. Error:" + error);
                },
                timeout: 8000
            })
        });

        function addParameterToURL(url, param){
            url += (url.split('?')[1] ? '&':'?') + param;
            return url;
        }
    </script>
@endpush
@endonce