{{-- Global Toast Container --}}
<div
    x-data="toastSystem()"
    x-on:toast.window="addToast($event.detail.type, $event.detail.message)"
    class="fixed top-5 right-5 z-[100] space-y-2 w-[340px] pointer-events-none"
>
    <template x-for="toast in toasts" :key="toast.id">
        <div
            class="pointer-events-auto px-4 py-3.5 rounded-lg bg-white border border-gray-200 shadow-lg animate-toast-in flex items-start gap-3"
            :class="{
                'border-l-4 border-l-success-500': toast.type === 'success',
                'border-l-4 border-l-danger-500': toast.type === 'error',
                'border-l-4 border-l-warning-500': toast.type === 'warning',
                'border-l-4 border-l-primary-600': toast.type === 'info',
            }"
        >
            {{-- Icon --}}
            <div class="flex-shrink-0 mt-0.5">
                <template x-if="toast.type === 'success'">
                    <svg class="w-5 h-5 text-success-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                </template>
                <template x-if="toast.type === 'error'">
                    <svg class="w-5 h-5 text-danger-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
                </template>
                <template x-if="toast.type === 'warning'">
                    <svg class="w-5 h-5 text-warning-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
                </template>
                <template x-if="toast.type === 'info'">
                    <svg class="w-5 h-5 text-primary-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
                </template>
            </div>

            {{-- Message --}}
            <p class="text-sm text-gray-700 flex-1" x-text="toast.message"></p>

            {{-- Close --}}
            <button @click="removeToast(toast.id)" class="flex-shrink-0 text-gray-400 hover:text-gray-600">
                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            </button>
        </div>
    </template>
</div>

{{-- Auto-show session flash messages --}}
@if(session('success'))
<script>
    document.addEventListener('alpine:init', () => {
        setTimeout(() => window.dispatchEvent(new CustomEvent('toast', { detail: { type: 'success', message: @json(session('success')) }})), 100);
    });
</script>
@endif
@if(session('error'))
<script>
    document.addEventListener('alpine:init', () => {
        setTimeout(() => window.dispatchEvent(new CustomEvent('toast', { detail: { type: 'error', message: @json(session('error')) }})), 100);
    });
</script>
@endif
@if(session('toast'))
<script>
    document.addEventListener('alpine:init', () => {
        setTimeout(() => window.dispatchEvent(new CustomEvent('toast', { detail: { type: @json(session('toast.type')), message: @json(session('toast.message')) }})), 100);
    });
</script>
@endif