@foreach(['success' => 'green', 'error' => 'red', 'warning' => 'yellow', 'info' => 'blue'] as $type => $color)
@if(session($type))
<div x-data="{ show: true }" x-show="show" x-cloak
     x-init="setTimeout(() => show = false, 5000)"
     class="mb-4 flex items-start gap-3 p-4 rounded-xl border
            @if($color === 'green')  bg-green-50  border-green-200  text-green-800
            @elseif($color === 'red')   bg-red-50    border-red-200    text-red-800
            @elseif($color === 'yellow')bg-yellow-50 border-yellow-200 text-yellow-800
            @else                       bg-blue-50   border-blue-200   text-blue-800
            @endif"
     x-transition>
    <svg class="w-5 h-5 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        @if($color === 'green')
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
        @elseif($color === 'red')
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
        @else
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
        @endif
    </svg>
    <div class="flex-1 text-sm font-medium">{{ session($type) }}</div>
    <button @click="show=false" class="opacity-60 hover:opacity-100">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
        </svg>
    </button>
</div>
@endif
@endforeach

@if($errors->any() && !session('success'))
<div x-data="{ show: true }" x-show="show" x-cloak
     class="mb-4 p-4 rounded-xl bg-red-50 border border-red-200 text-red-800">
    <div class="flex items-start gap-3">
        <svg class="w-5 h-5 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
        </svg>
        <div class="flex-1">
            <p class="text-sm font-semibold mb-1">Please fix the following errors:</p>
            <ul class="text-sm space-y-0.5 list-disc list-inside">
                @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
        <button @click="show=false" class="opacity-60 hover:opacity-100">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
            </svg>
        </button>
    </div>
</div>
@endif