{{-- resources/views/components/toast.blade.php --}}
<div id="toast-container" class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 1100">
</div>

@push('script')
    <script>
        // modifikasi showToast untuk background putih & teks gelap
        function showToast(message = "Hello!", title = "Info", type = "white", delay = 3000,notify) {
            const container = document.getElementById("toast-container");

            const toastId = "toast-" + Date.now();
            const toast = document.createElement("div");

            // bg putih + text dark
            toast.className = `toast align-items-center text-dark border-0`;
            toast.id = toastId;
            toast.setAttribute("role", "alert");
            toast.setAttribute("aria-live", "assertive");
            toast.setAttribute("aria-atomic", "true");

            toast.innerHTML = `
            <div class="d-flex shadow-lg" id="toast-${notify.data.id}" data-id="${notify.data.id}" data-played="no" style="background-color:#ecf0f1;">
                <div class="toast-body">
                    <div class="d-flex flex-column">
                        <strong>${title}:</strong>
                        <div>${message}</div>
                    </div>
                </div>
                <button type="button" class="btn-close me-2 m-auto"
                        data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            `;

            container.appendChild(toast);

            const bsToast = new bootstrap.Toast(toast, {
                delay: delay,
                autohide: true
            });
            bsToast.show();

            toast.addEventListener('hidden.bs.toast', () => {
                toast.remove();
            });
        }
    </script>
@endpush