{{-- Toast Notification Container --}}
<div 
    x-data="toastNotification" 
    class="fixed top-4 right-4 z-50 space-y-4 max-w-md"
    style="pointer-events: none;"
>
    <template x-for="toast in toasts" :key="toast.id">
        <div 
            x-show="toast.show"
            x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="opacity-0 transform translate-x-full"
            x-transition:enter-end="opacity-100 transform translate-x-0"
            x-transition:leave="transition ease-in duration-200"
            x-transition:leave-start="opacity-100 transform translate-x-0"
            x-transition:leave-end="opacity-0 transform translate-x-full"
            :class="getToastClasses(toast.type)"
            class="relative"
            style="pointer-events: auto;"
            role="alert"
        >
            <div class="flex items-start">
                {{-- Icon --}}
                <div class="flex-shrink-0">
                    <i :class="'fas ' + getToastIcon(toast.type)" class="text-xl"></i>
                </div>
                
                {{-- Message --}}
                <div class="ml-3 flex-1">
                    <p class="text-sm font-medium" x-text="toast.message"></p>
                </div>
                
                {{-- Close Button --}}
                <button 
                    @click="removeToast(toast.id)"
                    class="ml-4 flex-shrink-0 inline-flex text-gray-400 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 rounded-lg"
                >
                    <span class="sr-only">Close</span>
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>
    </template>
</div>

{{-- Auto-show toast for Laravel session messages --}}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        @if(session('success'))
            window.showToast('{{ session('success') }}', 'success');
        @endif
        
        @if(session('error'))
            window.showToast('{{ session('error') }}', 'error');
        @endif
        
        @if(session('warning'))
            window.showToast('{{ session('warning') }}', 'warning');
        @endif
        
        @if(session('info'))
            window.showToast('{{ session('info') }}', 'info');
        @endif
    });
</script>
