@if(session('success'))
<div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 5000)" class="fixed top-24 right-5 z-50 max-w-md bg-white border border-emerald-200 text-[#1c1917] px-5 py-4 rounded-xl shadow-xl flex items-center justify-between gap-4 transition-all duration-300">
    <div class="flex items-center gap-3">
        <i class="fa-solid fa-circle-check text-emerald-500 text-xl"></i>
        <p class="text-sm font-medium">{{ session('success') }}</p>
    </div>
    <button @click="show = false" class="text-[#78716c] hover:text-[#1c1917]">
        <i class="fa-solid fa-xmark"></i>
    </button>
</div>
@endif

@if(session('error'))
<div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 7000)" class="fixed top-24 right-5 z-50 max-w-md bg-white border border-rose-200 text-[#1c1917] px-5 py-4 rounded-xl shadow-xl flex items-center justify-between gap-4 transition-all duration-300">
    <div class="flex items-center gap-3">
        <i class="fa-solid fa-triangle-exclamation text-rose-500 text-xl"></i>
        <p class="text-sm font-medium">{{ session('error') }}</p>
    </div>
    <button @click="show = false" class="text-[#78716c] hover:text-[#1c1917]">
        <i class="fa-solid fa-xmark"></i>
    </button>
</div>
@endif

@if(session('info'))
<div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 5000)" class="fixed top-24 right-5 z-50 max-w-md bg-white border border-sky-200 text-[#1c1917] px-5 py-4 rounded-xl shadow-xl flex items-center justify-between gap-4 transition-all duration-300">
    <div class="flex items-center gap-3">
        <i class="fa-solid fa-circle-info text-sky-500 text-xl"></i>
        <p class="text-sm font-medium">{{ session('info') }}</p>
    </div>
    <button @click="show = false" class="text-[#78716c] hover:text-[#1c1917]">
        <i class="fa-solid fa-xmark"></i>
    </button>
</div>
@endif

@if($errors->any())
<div x-data="{ show: true }" x-show="show" class="fixed top-24 right-5 z-50 max-w-md bg-white border border-rose-200 text-[#1c1917] p-4 rounded-xl shadow-xl">
    <div class="flex items-center justify-between mb-2">
        <span class="font-bold text-sm flex items-center gap-2"><i class="fa-solid fa-circle-exclamation text-rose-500"></i> Please resolve the following:</span>
        <button @click="show = false" class="text-[#78716c] hover:text-[#1c1917]"><i class="fa-solid fa-xmark"></i></button>
    </div>
    <ul class="text-xs space-y-1 list-disc list-inside text-rose-600">
        @foreach($errors->all() as $err)
            <li>{{ $err }}</li>
        @endforeach
    </ul>
</div>
@endif