<div id="toasts-livewire"
     data-bs-delay="5000"
     data-error-message="{{ __('Whoops! Something went wrong.') }}"
     class="toast position-fixed align-items-center text-white border-0 fade hide"
     style="top: 1rem; right: 1rem; width: 18rem; z-index: 1090;">

    <div class="d-flex">
        <div id="toast-message" class="toast-body">
        </div>
    </div>

</div>

@push('scripts')
    <script>
        (function () {
            document.addEventListener('show-toast', function (event) {
                let toastContainer = document.getElementById('toasts-livewire');
                toastContainer.classList.remove('bg-success');
                toastContainer.classList.remove('bg-danger');
                toastContainer.classList.add('bg-' + event.detail.toastType);

                document.getElementById('toast-message').innerText = event.detail.toastMessage;

                new bootstrap.Toast(toastContainer).show();
            });
        })();
    </script>
@endpush
