@if (session()->has('success') || session()->has('error') || session()->has('warning') || session()->has('info'))
    <div class="fixed top-20 left-1/2 -translate-x-1/2 z-[9999] w-[90%] max-w-md space-y-4">

        @if (session()->has('success'))
            <div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 5000)"
                x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 -translate-y-4"
                x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-300"
                x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-4"
                class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative shadow-lg" role="alert"
                x-cloak>
                <strong class="font-bold">Success!</strong>
                <span class="block sm:inline">{{ session('success') }}</span>
                <button type="button" @click="show = false"
                    class="absolute top-0 right-0 px-4 py-3 text-green-700 hover:text-green-900">
                    <span class="text-2xl">&times;</span>
                </button>
            </div>
        @endif

        @if (session()->has('error'))
            <div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 5000)"
                x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 -translate-y-4"
                x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-300"
                x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-4"
                class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative shadow-lg" role="alert" x-cloak>
                <strong class="font-bold">Error!</strong>
                <span class="block sm:inline">{{ session('error') }}</span>
                <button type="button" @click="show = false"
                    class="absolute top-0 right-0 px-4 py-3 text-red-700 hover:text-red-900">
                    <span class="text-2xl">&times;</span>
                </button>
            </div>
        @endif

        @if (session()->has('warning'))
            <div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 5000)"
                x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 -translate-y-4"
                x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-300"
                x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-4"
                class="bg-yellow-100 border border-yellow-400 text-yellow-700 px-4 py-3 rounded relative shadow-lg" role="alert"
                x-cloak>
                <strong class="font-bold">Warning!</strong>
                <span class="block sm:inline">{{ session('warning') }}</span>
                <button type="button" @click="show = false"
                    class="absolute top-0 right-0 px-4 py-3 text-yellow-700 hover:text-yellow-900">
                    <span class="text-2xl">&times;</span>
                </button>
            </div>
        @endif

        @if (session()->has('info'))
            <div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 5000)"
                x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 -translate-y-4"
                x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-300"
                x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-4"
                class="bg-blue-100 border border-blue-400 text-blue-700 px-4 py-3 rounded relative shadow-lg" role="alert"
                x-cloak>
                <strong class="font-bold">Info!</strong>
                <span class="block sm:inline">{{ session('info') }}</span>
                <button type="button" @click="show = false"
                    class="absolute top-0 right-0 px-4 py-3 text-blue-700 hover:text-blue-900">
                    <span class="text-2xl">&times;</span>
                </button>
            </div>
        @endif
    </div>
@endif