@php
    $isAr = app()->getLocale() === 'ar';
@endphp

<div id="toast-container"
     class="fixed top-6 right-6 left-6 z-[9999] pointer-events-none flex flex-col items-center sm:items-end gap-3"
     x-data="{
        notifications: [],
        addNotification(type, message) {
            const id = Date.now() + Math.random();
            this.notifications.push({ id, type, message });
            setTimeout(() => this.removeNotification(id), 6000);
        },
        removeNotification(id) {
            this.notifications = this.notifications.filter(n => n.id !== id);
        }
     }"
     x-init="
        @if(session('success')) addNotification('success', @js(session('success'))); @endif
        @if(session('error')) addNotification('error', @js(session('error'))); @endif
        @if($errors->any())
            @foreach($errors->all() as $error)
                addNotification('error', @js($error));
            @endforeach
        @endif
        window.showToast = (message, type = 'success') => this.addNotification(type, message);
     ">

    <template x-for="notification in notifications" :key="notification.id">
        <div x-show="true"
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="opacity-0 translate-y-4 sm:translate-x-4 scale-95"
             x-transition:enter-end="opacity-100 translate-y-0 sm:translate-x-0 scale-100"
             x-transition:leave="transition ease-in duration-200"
             x-transition:leave-start="opacity-100 scale-100"
             x-transition:leave-end="opacity-0 scale-90"
             class="pointer-events-auto flex items-center gap-4 min-w-[300px] max-w-md p-4 rounded-3xl shadow-2xl border backdrop-blur-xl transition-all"
             :class="{
                'bg-emerald-500/10 border-emerald-500/20 text-emerald-700 dark:text-emerald-400': notification.type === 'success',
                'bg-rose-500/10 border-rose-500/20 text-rose-700 dark:text-rose-400': notification.type === 'error',
                'bg-amber-500/10 border-amber-500/20 text-amber-700 dark:text-amber-400': notification.type === 'warning',
                'bg-sky-500/10 border-sky-500/20 text-sky-700 dark:text-sky-400': notification.type === 'info'
             }">

            <div class="flex-shrink-0 w-10 h-10 rounded-2xl flex items-center justify-center text-lg shadow-sm"
                 :class="{
                    'bg-emerald-500 text-white': notification.type === 'success',
                    'bg-rose-500 text-white': notification.type === 'error',
                    'bg-amber-500 text-white': notification.type === 'warning',
                    'bg-sky-500 text-white': notification.type === 'info'
                 }">
                <i class="fa-solid" :class="{
                    'fa-circle-check': notification.type === 'success',
                    'fa-circle-xmark': notification.type === 'error',
                    'fa-triangle-exclamation': notification.type === 'warning',
                    'fa-circle-info': notification.type === 'info'
                }"></i>
            </div>

            <div class="flex-1 text-sm font-black leading-relaxed" x-text="notification.message"></div>

            <button @click="removeNotification(notification.id)"
                    class="flex-shrink-0 w-8 h-8 rounded-xl hover:bg-black/5 dark:hover:bg-white/5 transition-colors flex items-center justify-center text-current opacity-50 hover:opacity-100">
                <i class="fa-solid fa-xmark"></i>
            </button>
        </div>
    </template>
</div>

{{-- Global confirmation dialog --}}
<div id="confirm-dialog"
     x-data="{
        open: false,
        message: '',
        confirmText: '{{ $isAr ? 'تأكيد' : 'Confirm' }}',
        cancelText: '{{ $isAr ? 'إلغاء' : 'Cancel' }}',
        resolveCallback: null,
        show(message, confirmText, cancelText) {
            this.message = message;
            if (confirmText) this.confirmText = confirmText;
            if (cancelText) this.cancelText = cancelText;
            this.open = true;
            return new Promise(resolve => { this.resolveCallback = resolve; });
        },
        confirm() { this.open = false; this.resolveCallback?.(true); },
        cancel() { this.open = false; this.resolveCallback?.(false); }
     }"
     x-init="window.confirmDialog = (message, confirmText, cancelText) => this.show(message, confirmText, cancelText)"
     x-show="open" x-cloak
     class="fixed inset-0 z-[10000] flex items-center justify-center p-4"
     @keydown.escape.window="cancel()">

    <div class="absolute inset-0 bg-black/50 backdrop-blur-sm" @click="cancel()"></div>

    <div x-show="open"
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0 scale-95"
         x-transition:enter-end="opacity-100 scale-100"
         x-transition:leave="transition ease-in duration-150"
         x-transition:leave-start="opacity-100 scale-100"
         x-transition:leave-end="opacity-0 scale-95"
         class="relative z-10 w-full max-w-sm rounded-3xl border border-surface-200 bg-white p-6 shadow-2xl dark:border-surface-700 dark:bg-surface-900">

        <div class="mb-4 flex h-12 w-12 items-center justify-center rounded-2xl bg-red-100 text-red-600 dark:bg-red-500/20 dark:text-red-400">
            <i class="fa-solid fa-triangle-exclamation text-xl"></i>
        </div>

        <p class="mb-6 text-sm font-bold text-surface-700 dark:text-surface-300" x-text="message"></p>

        <div class="flex gap-3">
            <button @click="cancel()"
                    class="flex-1 rounded-xl border border-surface-200 px-4 py-2.5 text-sm font-bold text-surface-600 transition hover:bg-surface-50 dark:border-surface-700 dark:text-surface-300 dark:hover:bg-surface-800"
                    x-text="cancelText"></button>
            <button @click="confirm()"
                    class="flex-1 rounded-xl bg-red-600 px-4 py-2.5 text-sm font-bold text-white transition hover:bg-red-700"
                    x-text="confirmText"></button>
        </div>
    </div>
</div>