<div
 x-data="{ 
 show: false, 
 message: '', 
 type: 'success',
 showToast(message, type = 'success') {
 this.message = message;
 this.type = type;
 this.show = true;
 setTimeout(() => { this.show = false }, 3000);
 }
 }"
 @toast.window="showToast($event.detail.message, $event.detail.type)"
 x-show="show"
 x-cloak
 x-transition:enter="transition ease-out duration-300 transform"
 x-transition:enter-start="translate-y-10 opacity-0"
 x-transition:enter-end="translate-y-0 opacity-100"
 x-transition:leave="transition ease-in duration-200 transform"
 x-transition:leave-start="translate-y-0 opacity-100"
 x-transition:leave-end="translate-y-10 opacity-0"
 class="fixed bottom-10 left-1/2 -translate-x-1/2 z-[100] min-w-[300px]"
>
 <div :class="{
 'bg-emerald-600': type === 'success',
 'bg-red-600': type === 'error',
 'bg-blue-600': type === 'info'
 }" class="px-6 py-4 rounded-2xl flex items-center gap-4 border border-white/10">
 <div class="h-8 w-8 bg-white/20 rounded-xl flex items-center justify-center text-white flex-none">
 <i class="fa-solid" :class="{
 'fa-circle-check': type === 'success',
 'fa-circle-exclamation': type === 'error',
 'fa-circle-info': type === 'info'
 }"></i>
 </div>
 <div class="flex-1">
 <p class="text-[10px] font-black text-white/60 uppercase tracking-widest leading-none mb-1" x-text="type"></p>
 <p class="text-xs font-bold text-white leading-tight" x-text="message"></p>
 </div>
 <button @click="show = false" class="text-white/40 hover:text-white transition-colors">
 <i class="fa-solid fa-xmark"></i>
 </button>
 </div>
</div>

<?php if (isset($_SESSION['toast'])): ?>
<script>
 window.addEventListener('DOMContentLoaded', () => {
 window.dispatchEvent(new CustomEvent('toast', { 
 detail: { 
 message: '<?php echo $_SESSION['toast']['message']; ?>', 
 type: '<?php echo $_SESSION['toast']['type']; ?>' 
 } 
 }));
 });
</script>
<?php unset($_SESSION['toast']); endif; ?>
