@if ($errors->any())
    <div id="toastBox" class="fixed top-4 right-4 z-50">
        <div
            class="w-80 bg-white shadow-xl rounded-xl border border-red-200 p-4
               flex items-center justify-between gap-3 relative">

            <!-- Text -->
            <div class="flex-1 pr-6">
                <p class="text-sm font-semibold text-gray-800">Oops..!</p>
                @foreach ($errors->all() as $error)
                    <p class="text-xs text-gray-600 mt-1">{{ $error }}</p>
                @endforeach
            </div>

            <!-- SVG Icon (Right side badge) -->
            <div
                class="w-10 h-10 flex items-center justify-center
                   rounded-full bg-red-100 text-red-600 flex-shrink-0">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M13 16h-1v-4h-1m1-4h.01M12 20a8 8 0 100-16 8 8 0 000 16z" />
                </svg>
            </div>

            <!-- Close button -->
            <button onclick="closeToast()" class="absolute top-2 right-2 text-gray-400 hover:text-gray-700">
                ✖
            </button>
        </div>
    </div>
@endif

@if (session('success'))
    <div id="toastBox" class="fixed top-4 right-4 z-50">
        <div
            class="w-80 bg-white shadow-xl rounded-xl border border-green-200 p-4
                   flex items-center justify-between gap-3 relative">

            <!-- Text -->
            <div class="flex-1 pr-6">
                <p class="text-sm font-semibold text-gray-800">Success!</p>
                <p class="text-xs text-gray-600 mt-1">{{ session('success') }}</p>
            </div>

            <!-- SVG Icon (Right side badge) -->
            <div
                class="w-10 h-10 flex items-center justify-center
                       rounded-full bg-green-100 text-green-600 flex-shrink-0">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                </svg>
            </div>

            <!-- Close button -->
            <button onclick="closeToast()" class="absolute top-2 right-2 text-gray-400 hover:text-gray-700">
                ✖
            </button>
        </div>
    </div>
@endif

<script>
    function closeToast() {
        document.getElementById('toastBox')?.remove();
    }
</script>