@if (session('error'))
    <div id="customToast" class="custom-toast-container">
        <div class="card border border-danger shadow-sm fade-in position-relative"
            style="border-radius: 12px; max-width: 360px;">
            <a href="javascript:void(0);" class="close-toast position-absolute text-danger"
                style="top: 10px; right: 12px; z-index: 10;">
                <i class="bi bi-x-lg fs-5"></i>
            </a>
            <div class="card-body py-3 px-3">
                <div class="d-flex align-items-center">
                    <div class="me-3 mb-0 ">
                        <span class="">
                            <img src="{{ asset('assets/images/error.png') }}" alt="img" class="rounded"
                                style="width: 40px; height: 40px;">
                        </span>
                    </div>
                    <div>
                        <p class="card-text mb-0 fs-14 fw-medium text-danger">Error</p>
                        <div class="card-title fs-13 mb-0">{{ session('error') }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@elseif(session('success'))
    <div id="customToast" class="custom-toast-container">
        <div class="card border border-success shadow-sm fade-in position-relative"
            style="border-radius: 12px; max-width: 360px;">
            <a href="javascript:void(0);" class="close-toast position-absolute text-success"
                style="top: 10px; right: 12px; z-index: 10;">
                <i class="bi bi-x-lg fs-5"></i>
            </a>
            <div class="card-body py-3 px-3">
                <div class="d-flex align-items-center">
                    <div class="me-3 mb-0 ">
                        <span class="">
                            <img src="{{ asset('assets/images/right.png') }}" alt="img" class="rounded"
                                style="width: 40px; height: 40px;">
                        </span>
                    </div>
                    <div>
                        <p class="card-text mb-0 fs-14 fw-medium text-success">Success</p>
                        <div class="card-title fs-13 mb-0">{{ session('success') }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endif

<script>
    document.addEventListener("DOMContentLoaded", () => {
        const toast = document.getElementById('customToast');
        if (!toast) return;

        const closeBtn = toast.querySelector('.close-toast');
        const card = toast.querySelector('.card');

        closeBtn?.addEventListener('click', () => {
            card.classList.add('fade-out');
            setTimeout(() => toast.remove(), 500);
        });

        setTimeout(() => {
            card.classList.add('fade-out');
            setTimeout(() => toast.remove(), 500);
        }, 3000);
    });
</script>