{{--
    Top-center toast notifications (#35), Blade equivalent of a "sonner" stack.
    Session flashes are turned into toasts; JS can push more via window.pharmaToast().
--}}
<div x-data="pharmaToasts()" x-init="init()"
     class="pointer-events-none fixed inset-x-0 top-4 z-50 flex flex-col items-center gap-2 px-4">
    <template x-for="t in toasts" :key="t.id">
        <div x-show="t.visible" x-transition
             class="pointer-events-auto flex w-full max-w-sm items-start gap-3 rounded-xl px-4 py-3 shadow-lg ring-1"
             :class="{
                'bg-brand-600 text-white ring-brand-700': t.type === 'success',
                'bg-red-600 text-white ring-red-700': t.type === 'error',
                'bg-slate-800 text-white ring-slate-900': t.type === 'info',
             }">
            <span class="text-sm font-medium" x-text="t.message"></span>
            <button @click="dismiss(t)" class="ml-auto text-white/70 hover:text-white">&times;</button>
        </div>
    </template>
</div>

@push('scripts')
<script>
function pharmaToasts() {
    return {
        toasts: [],
        init() {
            @if (session('success')) this.push(@js(session('success')), 'success'); @endif
            @if (session('status')) this.push(@js(session('status')), 'info'); @endif
            @if ($errors->any()) this.push(@js($errors->first()), 'error'); @endif
            window.pharmaToast = (msg, type = 'info') => this.push(msg, type);
        },
        push(message, type = 'info') {
            const id = Date.now() + Math.random();
            this.toasts.push({ id, message, type, visible: true });
            setTimeout(() => this.dismiss(this.toasts.find(t => t.id === id)), 4500);
        },
        dismiss(t) { if (!t) return; t.visible = false; setTimeout(() => { this.toasts = this.toasts.filter(x => x.id !== t.id); }, 200); },
    };
}
</script>
@endpush