{{-- resources/views/facebook-pages/index.blade.php --}}
<x-app-layout>
    <x-slot name="title">إدارة صفحات فيسبوك - إدارة الصفحات والردود التلقائية</x-slot>
  <style>span.badge.bg-secondary {
    background: red;
    color: white;
    padding: 0 5px;
    border-radius: 5px;
}</style>

    <div class="p-6 space-y-6">
        
        <!-- Page Header -->
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
            <div>
                <h1 class="text-3xl font-bold text-foreground flex items-center gap-2">
                    <div class="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center">
                        <svg class="h-6 w-6 text-white" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                        </svg>
                    </div>
                    {{ __('إدارة صفحات فيسبوك') }}
                </h1>
                <p class="text-muted-foreground">{{ __('إدارة صفحات فيسبوك المربوطة والردود التلقائية') }}</p>
            </div>
            
            <!-- Action Buttons -->
            <div class="flex items-center gap-2">
                <button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all bg-green-600 text-white shadow-xs hover:bg-green-700 h-9 px-4 py-2" id="sync-all-pages">
                    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
                        <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/>
                        <path d="M21 3v5h-5"/>
                        <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
                        <path d="M3 21v-5h5"/>
                    </svg>
                    {{ __('تحديث جميع الصفحات') }}
                </button>
                
                @if(isset($planLimits) && $planLimits['feature_available'])
                    @if($planLimits['feature_available'])
                        <a href="{{ route('facebook.auth.redirect') }}" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all bg-blue-600 text-white shadow-xs hover:bg-blue-700 h-9 px-4 py-2">
                            <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
                                <line x1="12" y1="5" x2="12" y2="19"/>
                                <line x1="5" y1="12" x2="19" y2="12"/>
                            </svg>
                            {{ __('ربط حساب جديد') }}
                        </a>
                    @else
                        <a href="{{ route('plans.index') }}" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all bg-gradient-to-r from-orange-500 to-orange-600 text-white shadow-xs hover:from-orange-600 hover:to-orange-700 h-9 px-4 py-2">
                            <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
                                <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
                            </svg>
                            {{ __('ترقية لإضافة المزيد') }}
                        </a>
                    @endif
                @else
                    <a href="{{ route('plans.index') }}" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all bg-gradient-to-r from-purple-500 to-purple-600 text-white shadow-xs hover:from-purple-600 hover:to-purple-700 h-9 px-4 py-2">
                        <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
                            <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
                        </svg>
                        {{ __('ترقية لتفعيل الميزة') }}
                    </a>
                @endif
            </div>
        </div>

        <!-- Compact Usage Banner -->
        @if(isset($planLimits))
            @php
                $percentage = !$planLimits['unlimited'] && $planLimits['max'] > 0 
                    ? ($planLimits['current'] / $planLimits['max']) * 100 
                    : 0;
                $isLow = !$planLimits['unlimited'] && $planLimits['remaining'] <= 1;
                $isFull = !$planLimits['unlimited'] && $planLimits['remaining'] == 0;
                
                // Determine banner color - Facebook theme
                if (!$planLimits['feature_available']) {
                    $bannerColor = 'from-purple-500 to-purple-600';
                    $iconBg = 'bg-purple-400/30';
                } elseif ($isFull) {
                    $bannerColor = 'from-red-500 to-red-600';
                    $iconBg = 'bg-red-400/30';
                } elseif ($isLow) {
                    $bannerColor = 'from-orange-500 to-orange-600';
                    $iconBg = 'bg-orange-400/30';
                } elseif ($planLimits['unlimited']) {
                    $bannerColor = 'from-green-500 to-green-600';
                    $iconBg = 'bg-green-400/30';
                } else {
                    $bannerColor = 'from-blue-500 to-blue-600';
                    $iconBg = 'bg-blue-400/30';
                }
            @endphp

            <div class="bg-gradient-to-r {{ $bannerColor }} rounded-lg shadow-sm overflow-hidden">
                <div class="px-6 py-4">
                    <div class="flex items-center justify-between gap-4">
                        <!-- Left Section: Usage Info -->
                        <div class="flex items-center gap-4 flex-1">
                            <div class="w-10 h-10 {{ $iconBg }} rounded-lg flex items-center justify-center flex-shrink-0">
                                <svg class="h-5 w-5 text-white" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                                </svg>
                            </div>
                            
                            <div class="flex-1 min-w-0">
                                <div class="flex items-center gap-2 mb-1">
                                    <h3 class="text-white font-semibold text-sm">{{ __('الصفحات والحسابات المربوطة') }}</h3>
                                    @if($planLimits['unlimited'])
                                        <span class="inline-flex items-center rounded-full bg-white/20 px-2 py-0.5 text-xs font-semibold text-white">
                                            <svg class="h-3 w-3 mr-1" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
                                                <path d="M18 6L6 18"/>
                                                <path d="m6 6 12 12"/>
                                            </svg>
                                            {{ __('غير محدود') }}
                                        </span>
                                    @endif
                                </div>
                                
                                <div class="flex items-center gap-3">
                                    <div class="text-white text-sm">
                                        <span class="font-bold text-lg">{{ $planLimits['current'] }}</span>
                                        @if(!$planLimits['unlimited'])
                                            <span class="text-white/80">/ {{ $planLimits['max'] }}</span>
                                        @endif
                                        <span class="text-white/80 text-xs">{{ __('صفحة') }}</span>
                                    </div>
                                    
                                    @if(!$planLimits['unlimited'])
                                        <!-- Progress Bar (Inline) -->
                                        <div class="flex-1 max-w-xs">
                                            <div class="w-full bg-white/20 rounded-full h-2 overflow-hidden">
                                                @php
                                                    $progressColor = $percentage >= 90 ? 'bg-red-300' : ($percentage >= 70 ? 'bg-yellow-300' : 'bg-green-300');
                                                @endphp
                                                <div class="{{ $progressColor }} h-full rounded-full transition-all duration-500" style="width: {{ min($percentage, 100) }}%"></div>
                                            </div>
                                        </div>
                                        
                                        <div class="text-white/90 text-xs font-medium">
                                            {{ number_format($percentage, 0) }}%
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <!-- Right Section: Status & Action -->
                        <div class="flex items-center gap-3">
                            @if(!$planLimits['feature_available'])
                                <div class="text-white text-right hidden sm:block">
                                    <div class="text-xs text-white/80">{{ __('الميزة غير متاحة') }}</div>
                                    <div class="font-medium text-sm">{{ __('قم بالترقية للتفعيل') }}</div>
                                </div>
                                <a href="{{ route('plans.index') }}" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium bg-white text-purple-600 hover:bg-white/90 transition-all h-9 px-4 py-2 shadow-sm">
                                    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
                                        <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
                                    </svg>
                                    {{ __('ترقية الآن') }}
                                </a>
                            @elseif($isFull)
                                <div class="text-white text-right hidden sm:block">
                                    <div class="text-xs text-white/80">{{ __('وصلت للحد الأقصى') }}</div>
                                    <div class="font-medium text-sm">{{ __('قم بالترقية للمزيد') }}</div>
                                </div>
                                <a href="{{ route('plans.index') }}" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium bg-white text-red-600 hover:bg-white/90 transition-all h-9 px-4 py-2 shadow-sm">
                                    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
                                        <polyline points="23,6 13.5,15.5 8.5,10.5 1,18"/>
                                        <polyline points="17,6 23,6 23,12"/>
                                    </svg>
                                    {{ __('ترقية') }}
                                </a>
                            @elseif($isLow)
                                <div class="text-white text-right hidden sm:block">
                                    <div class="text-xs text-white/80">{{ __('متبقي صفحة واحدة فقط') }}</div>
                                    <div class="font-medium text-sm">{{ __('قم بالترقية للمزيد') }}</div>
                                </div>
                                <a href="{{ route('plans.index') }}" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium bg-white/20 text-white hover:bg-white/30 transition-all h-9 px-4 py-2 border border-white/20">
                                    {{ __('عرض الباقات') }}
                                </a>
                            @elseif($planLimits['unlimited'])
                                <div class="text-white text-right hidden sm:block">
                                    <div class="text-xs text-white/80">{{ __('الباقة') }}</div>
                                    <div class="font-medium text-sm flex items-center gap-1">
                                        <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
                                            <polyline points="20,6 9,17 4,12"/>
                                        </svg>
                                        {{ __('مميزة') }}
                                    </div>
                                </div>
                            @else
                                <div class="text-white text-right hidden sm:block">
                                    <div class="text-xs text-white/80">{{ __('متبقي') }}</div>
                                    <div class="font-bold text-lg">{{ $planLimits['remaining'] }}</div>
                                </div>
                                @if($planLimits['remaining'] <= 2)
                                    <a href="{{ route('plans.index') }}" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium bg-white/20 text-white hover:bg-white/30 transition-all h-9 px-4 py-2 border border-white/20">
                                        {{ __('ترقية') }}
                                    </a>
                                @endif
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        @endif

      


<!-- إحصائيات -->


  <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">

<!-- فلاتر البحث -->
<div class="lg:col-span-3">
    
<!-- حسابات فيسبوك المربوطة -->
@if($facebookAccounts->isNotEmpty())
    <div data-slot="card" class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm">
        <div data-slot="card-header" class="@container/card-header auto-rows-min grid-rows-[auto_auto] gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 flex flex-row items-center justify-between">
            <div data-slot="card-title" class="font-semibold text-base sm:text-lg">
                حسابات فيسبوك المربوطة ({{ $facebookAccounts->count() }})
            </div>
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users h-4 w-4 text-muted-foreground">
                <path d="M14 19a6 6 0 0 0-12 0"/>
                <circle cx="8" cy="9" r="4"/>
                <path d="M22 19a6 6 0 0 0-6-6 4 4 0 1 0 0-8"/>
            </svg>
        </div>

        <div data-slot="card-content" class="px-6">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                @foreach($facebookAccounts as $account)
                    <div class="border border-border rounded-lg p-4">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center gap-3 min-w-0 flex-1">
                                <img src="{{ $account->profile_picture_url ?: 'https://via.placeholder.com/40' }}" 
                                     class="w-10 h-10 rounded-full object-cover" alt="Profile">
                                <div class="min-w-0 flex-1">
                                    <h6 class="font-medium text-sm truncate">{{ $account->name }}</h6>
                                    <small class="text-muted-foreground text-xs">
                                        {{ $account->pages->count() }} صفحة
                                        @if($account->last_sync_at)
                                            • آخر تحديث: {{ $account->last_sync_at->diffForHumans() }}
                                        @endif
                                    </small>
                                </div>
                            </div>
                            <div class="relative">
                                <button class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5 account-menu-btn" 
                                        data-account-id="{{ $account->id }}">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <circle cx="12" cy="12" r="1"/>
                                        <circle cx="19" cy="12" r="1"/>
                                        <circle cx="5" cy="12" r="1"/>
                                    </svg>
                                </button>
                                <!-- قائمة منسدلة للإجراءات -->
                                <div class="account-menu hidden absolute left-0 top-full mt-1 w-48 rounded-md border border-border bg-card shadow-lg z-10" data-account-id="{{ $account->id }}">
                                    <div class="py-1">
                                        <button class="sync-account w-full text-right px-4 py-2 text-sm hover:bg-accent hover:text-accent-foreground" 
                                                data-account-id="{{ $account->id }}">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="inline ml-2">
                                                <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/>
                                                <path d="M21 3v5h-5"/>
                                                <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
                                                <path d="M3 21v-5h5"/>
                                            </svg>
                                            تحديث الصفحات
                                        </button>
                                        <hr class="my-1 border-border">
                                        <button class="disconnect-account w-full text-right px-4 py-2 text-sm text-red-600 hover:bg-red-50 hover:text-red-700" 
                                                data-account-id="{{ $account->id }}"
                                                data-account-name="{{ $account->name }}">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="inline ml-2">
                                                <path d="M18 6 6 18"/>
                                                <path d="m6 6 12 12"/>
                                            </svg>
                                            قطع الاتصال
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
@endif
</div>

<!-- إحصائيات سريعة -->
<div class="grid grid-cols-2 gap-3">
    <div data-slot="card" class="bg-gradient-to-r from-blue-500 to-blue-600 text-white flex flex-col gap-6 rounded-xl border py-4 shadow-sm">
        <div data-slot="card-content" class="px-4 text-center">
            <div class="text-xl font-bold">{{ $stats['total_accounts'] }}</div>
            <div class="text-xs text-blue-100">حسابات فيسبوك</div>
        </div>
    </div>
    <div data-slot="card" class="bg-gradient-to-r from-green-500 to-green-600 text-white flex flex-col gap-6 rounded-xl border py-4 shadow-sm">
        <div data-slot="card-content" class="px-4 text-center">
            <div class="text-xl font-bold">{{ $stats['total_pages'] }}</div>
            <div class="text-xs text-green-100">إجمالي الصفحات</div>
        </div>
    </div>
    <div data-slot="card" class="bg-gradient-to-r from-yellow-500 to-yellow-600 text-white flex flex-col gap-6 rounded-xl border py-4 shadow-sm">
        <div data-slot="card-content" class="px-4 text-center">
            <div class="text-xl font-bold">{{ $stats['active_pages'] }}</div>
            <div class="text-xs text-yellow-100">الصفحات النشطة</div>
        </div>
    </div>
    <div data-slot="card" class="bg-gradient-to-r from-gray-500 to-gray-600 text-white flex flex-col gap-6 rounded-xl border py-4 shadow-sm">
        <div data-slot="card-content" class="px-4 text-center">
            <div class="text-xl font-bold">{{ $stats['total_auto_replies'] }}</div>
            <div class="text-xs text-gray-100">الردود التلقائية</div>
        </div>
    </div>
</div>

</div>
  

<!-- فلاتر البحث -->
<div data-slot="card" class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm">
    <div data-slot="card-content" class="px-6 pt-6">
        <form method="GET" action="{{ route('facebook-pages.index') }}" class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <!-- البحث -->
            <div class="relative">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                     viewBox="0 0 24 24" fill="none" stroke="currentColor"
                     stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                     class="lucide lucide-search absolute right-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4">
                    <circle cx="11" cy="11" r="8"></circle>
                    <path d="m21 21-4.3-4.3"></path>
                </svg>
                <input type="text" name="search"
                       value="{{ request('search') }}"
                       placeholder="ابحث في الصفحات..."
                       class="file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground
                              dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1
                              text-base shadow-xs transition-[color,box-shadow] outline-none pr-10
                              md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]" />
            </div>

            <!-- اختيار الحساب -->
            <select name="account_id"
                    class="border-input data-[placeholder]:text-muted-foreground dark:bg-input/30
                           flex items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm
                           shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring
                           focus-visible:ring-ring/50 focus-visible:ring-[3px]">
                <option value="">جميع الحسابات</option>
                @foreach($facebookAccounts as $account)
                    <option value="{{ $account->id }}" {{ request('account_id') == $account->id ? 'selected' : '' }}>
                        {{ $account->name }}
                    </option>
                @endforeach
            </select>

            <!-- اختيار الحالة -->
            <select name="status"
                    class="border-input data-[placeholder]:text-muted-foreground dark:bg-input/30
                           flex items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm
                           shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring
                           focus-visible:ring-ring/50 focus-visible:ring-[3px]">
                <option value="">جميع الصفحات</option>
                <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>نشطة</option>
                <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>غير نشطة</option>
                <option value="not_synced" {{ request('status') == 'not_synced' ? 'selected' : '' }}>غير متزامنة</option>
            </select>

            <!-- الأزرار -->
            <div class="flex gap-2">
                <button type="submit"
                        class="inline-flex items-center justify-center gap-2 rounded-md border bg-background shadow-xs
                               hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input
                               dark:hover:bg-input/50 h-9 px-4 py-2 text-sm font-medium transition-all flex-1">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="11" cy="11" r="8"></circle>
                        <path d="m21 21-4.3-4.3"></path>
                    </svg>
                    بحث
                </button>
                <a href="{{ route('facebook-pages.index') }}"
                   class="inline-flex items-center justify-center gap-2 rounded-md border bg-background shadow-xs
                          hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input
                          dark:hover:bg-input/50 h-9 px-4 py-2 text-sm font-medium transition-all">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M18 6 6 18"></path>
                        <path d="m6 6 12 12"></path>
                    </svg>
                </a>
            </div>
        </form>
    </div>
</div>

<!-- شبكة الصفحات -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    @forelse($pages as $page)
        <div data-slot="card" class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm h-full {{ !$page->is_active ? 'border-gray-300' : ($page->sync_enabled ? 'border-green-300' : 'border-yellow-300') }}">
            <div data-slot="card-content" class="px-6 flex-1">
                <!-- هيدر الصفحة -->
                <div class="flex items-start justify-between mb-4">
                    <div class="flex items-center gap-3 min-w-0 flex-1">
                        <img src="{{ $page->profile_pic_url ?: 'https://via.placeholder.com/50' }}" 
                             class="w-12 h-12 rounded-lg object-cover" alt="Page">
                        <div class="min-w-0 flex-1">
                            <h6 class="font-medium text-sm truncate mb-1">{{ $page->name }}</h6>
                            <small class="text-muted-foreground text-xs">{{ $page->category ?: 'غير محدد' }}</small>
                            <div class="flex items-center gap-2 mt-1">
                                {!! $page->getStatusBadge() !!}
                                @if($page->facebookAccount)
                                    <span class="inline-flex px-2 py-0.5 rounded-md text-xs font-medium bg-blue-100 text-blue-800">
                                        {{ $page->facebookAccount->name }}
                                    </span>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="relative">
                        <button class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5 page-menu-btn" 
                                data-page-id="{{ $page->id }}">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <circle cx="12" cy="12" r="1"/>
                                <circle cx="19" cy="12" r="1"/>
                                <circle cx="5" cy="12" r="1"/>
                            </svg>
                        </button>
                        <!-- قائمة منسدلة للإجراءات -->
                        <div class="page-menu hidden absolute left-0 top-full mt-1 w-48 rounded-md border border-border bg-card shadow-lg z-10" data-page-id="{{ $page->id }}">
                            <div class="py-1">
                                <a href="https://www.facebook.com/{{ $page->page_id }}"  target="_blank"  class="block w-full text-right px-4 py-2 text-sm hover:bg-accent hover:text-accent-foreground">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="inline ml-2">
                                        <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/>
                                        <circle cx="12" cy="12" r="3"/>
                                    </svg>
                                    عرض الصفحة
                                </a>
                                <button class="toggle-page w-full text-right px-4 py-2 text-sm hover:bg-accent hover:text-accent-foreground" 
                                        data-page-id="{{ $page->id }}">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="inline ml-2">
                                        @if($page->is_active)
                                            <circle cx="12" cy="12" r="10"/>
                                            <line x1="10" y1="15" x2="10" y2="9"/>
                                            <line x1="14" y1="15" x2="14" y2="9"/>
                                        @else
                                            <polygon points="5 3 19 12 5 21 5 3"/>
                                        @endif
                                    </svg>
                                    {{ $page->is_active ? 'إيقاف' : 'تفعيل' }}
                                </button>
                                <hr class="my-1 border-border">
                                <button class="delete-page w-full text-right px-4 py-2 text-sm text-red-600 hover:bg-red-50 hover:text-red-700" 
                                        data-page-id="{{ $page->id }}"
                                        data-page-name="{{ $page->name }}">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="inline ml-2">
                                        <polyline points="3 6 5 6 21 6"/>
                                        <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
                                        <line x1="10" y1="11" x2="10" y2="17"/>
                                        <line x1="14" y1="11" x2="14" y2="17"/>
                                    </svg>
                                    حذف
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- إحصائيات الصفحة -->
                <div class="grid grid-cols-3 gap-4 text-center mb-4">
                    <div class="border-l border-border last:border-l-0">
                        <h6 class="text-lg font-bold text-primary mb-0">{{ number_format($page->fan_count) }}</h6>
                        <small class="text-muted-foreground text-xs">متابع</small>
                    </div>
                    <div class="border-l border-border last:border-l-0">
                        <h6 class="text-lg font-bold text-green-600 mb-0">{{ $page->autoReplies->count() }}</h6>
                        <small class="text-muted-foreground text-xs">رد تلقائي</small>
                    </div>
                    <div>
                        <h6 class="text-lg font-bold text-cyan-600 mb-0">{{ $page->comments->count() }}</h6>
                        <small class="text-muted-foreground text-xs">تعليق</small>
                    </div>
                </div>

                <!-- أزرار الإجراءات -->
                <div class="space-y-2">
                    <a href="{{ route('auto-replies.create', ['page_id' => $page->page_id]) }}" 
                       class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground shadow-xs h-9 px-4 py-2 has-[>svg]:px-3 bg-primary hover:bg-primary/90 w-full">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <line x1="12" y1="5" x2="12" y2="19"/>
                            <line x1="5" y1="12" x2="19" y2="12"/>
                        </svg>
                        إضافة رد تلقائي
                    </a>
                </div>

                <!-- آخر نشاط -->
                @if($page->last_sync_at)
                    <div class="mt-3 pt-3 border-t border-border">
                        <small class="text-muted-foreground text-xs flex items-center gap-1">
                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" 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"/>
                                <polyline points="12 6 12 12 16 14"/>
                            </svg>
                            آخر تحديث: {{ $page->last_sync_at->diffForHumans() }}
                        </small>
                    </div>
                @endif
            </div>
        </div>
    @empty
        <div class="col-span-full">
            <div class="text-center py-12">
                <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-text text-muted-foreground mx-auto mb-4">
                    <path d="M14 2H8a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V6z"/>
                    <polyline points="14 2 14 8 20 8"/>
                    <line x1="16" y1="13" x2="8" y2="13"/>
                    <line x1="16" y1="17" x2="8" y2="17"/>
                    <polyline points="10 9 9 9 8 9"/>
                </svg>
                <h5 class="text-lg font-medium mb-2">لا توجد صفحات فيسبوك</h5>
                <p class="text-muted-foreground mb-4">
                    @if(request()->hasAny(['search', 'account_id', 'status']))
                        لا توجد نتائج تطابق البحث الحالي
                        <br>
                        <a href="{{ route('facebook-pages.index') }}" class="inline-block mt-2 text-primary hover:underline">
                            مسح الفلاتر
                        </a>
                    @else
                        ابدأ بربط حساب فيسبوك لإدارة صفحاتك
                    @endif
                </p>
                @if(!request()->hasAny(['search', 'account_id', 'status']))
                    <a href="{{ route('facebook.auth.redirect') }}" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground shadow-xs h-9 px-4 py-2 has-[>svg]:px-3 bg-primary hover:bg-primary/90">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
                            <polyline points="15 3 21 3 21 9"/>
                            <line x1="10" y1="14" x2="21" y2="3"/>
                        </svg>
                        ربط حساب فيسبوك
                    </a>
                @endif
            </div>
        </div>
    @endforelse
</div>

<!-- Pagination -->
@if($pages->hasPages())
    <div class="flex justify-center mt-6">
        {{ $pages->appends(request()->query())->links() }}
    </div>
@endif



<!-- نافذة تأكيد -->
<div id="confirmModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
    <div class="bg-card rounded-lg border shadow-lg w-full max-w-md mx-4">
        <div class="flex items-center justify-between p-4 border-b border-border">
            <h5 class="font-semibold">تأكيد العملية</h5>
            <button type="button" class="text-muted-foreground hover:text-foreground" id="close-confirm-modal">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M18 6 6 18"/>
                    <path d="m6 6 12 12"/>
                </svg>
            </button>
        </div>
        <div class="p-4">
            <p id="confirm-message" class="text-sm"></p>
        </div>
        <div class="flex items-center justify-end gap-2 p-4 border-t border-border">
            <button type="button" class="inline-flex items-center justify-center gap-2 rounded-md border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2 text-sm font-medium transition-all" id="cancel-confirm">إلغاء</button>
            <button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 text-primary-foreground shadow-xs h-9 px-4 py-2 bg-red-600 hover:bg-red-600/90" id="confirm-action">تأكيد</button>
        </div>
    </div>
</div>




<!-- مكان للتنبيهات -->
<div id="alerts-container" class="fixed top-4 right-4 z-50 space-y-2"></div>
<script>
  document.addEventListener("DOMContentLoaded", function() {
        // عرض رسائل الجلسة
        @if(session('error'))
            showAlert('error', "{{ session('error') }}");
        @endif

        @if(session('success'))
            showAlert('success', "{{ session('success') }}");
        @endif

        @if(session('warning'))
            showAlert('warning', "{{ session('warning') }}");
        @endif

        @if(session('info'))
            showAlert('info', "{{ session('info') }}");
        @endif
    });

    function showAlert(type, message) {
        const container = document.getElementById('alerts-container');
        if (!container) {
            console.error('Alerts container not found');
            return;
        }

        const bgColor = 
            type === 'success' ? 'bg-green-500' : 
            type === 'error' ? 'bg-red-500' :
            type === 'warning' ? 'bg-yellow-500' :
            'bg-blue-500';

        const icon = 
            type === 'success' ? 
                '<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/>' :
            type === 'error' ?
                '<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"/>' :
            type === 'warning' ?
                '<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"/>' :
            '<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"/>';

        const alertDiv = document.createElement('div');
        alertDiv.className = `${bgColor} text-white px-4 py-3 rounded shadow-lg flex items-center gap-2 min-w-80 max-w-md transform transition-all duration-300 ease-in-out translate-x-0 opacity-100`;
        alertDiv.innerHTML = `
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                ${icon}
            </svg>
            <span class="flex-1">${message}</span>
            <button type="button" class="text-white/80 hover:text-white close-alert">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M18 6 6 18"/>
                    <path d="m6 6 12 12"/>
                </svg>
            </button>
        `;

        container.appendChild(alertDiv);

        // إضافة حدث إغلاق للزر
        const closeButton = alertDiv.querySelector('.close-alert');
        closeButton.addEventListener('click', function() {
            alertDiv.style.opacity = '0';
            alertDiv.style.transform = 'translateX(100%)';
            setTimeout(() => {
                if (alertDiv.parentNode) {
                    alertDiv.remove();
                }
            }, 300);
        });

        // إزالة التنبيه تلقائياً بعد 4 ثوانٍ
        setTimeout(() => {
            alertDiv.style.opacity = '0';
            alertDiv.style.transform = 'translateX(100%)';
            setTimeout(() => {
                if (alertDiv.parentNode) {
                    alertDiv.remove();
                }
            }, 300);
        }, 4000);
    }
</script>
<script>
document.addEventListener("DOMContentLoaded", function () {
    let currentAction = null;

    // إدارة القوائم المنسدلة
    document.addEventListener('click', function(e) {
        // إدارة قوائم الحسابات
        if (e.target.closest('.account-menu-btn')) {
            const accountId = e.target.closest('.account-menu-btn').dataset.accountId;
            const menu = document.querySelector(`.account-menu[data-account-id="${accountId}"]`);
            
            // إخفاء جميع القوائم الأخرى
            document.querySelectorAll('.account-menu, .page-menu').forEach(m => {
                if (m !== menu) m.classList.add('hidden');
            });
            
            menu.classList.toggle('hidden');
            return;
        }

        // إدارة قوائم الصفحات
        if (e.target.closest('.page-menu-btn')) {
            const pageId = e.target.closest('.page-menu-btn').dataset.pageId;
            const menu = document.querySelector(`.page-menu[data-page-id="${pageId}"]`);
            
            // إخفاء جميع القوائم الأخرى
            document.querySelectorAll('.account-menu, .page-menu').forEach(m => {
                if (m !== menu) m.classList.add('hidden');
            });
            
            menu.classList.toggle('hidden');
            return;
        }

        // إخفاء القوائم عند النقر خارجها
        if (!e.target.closest('.account-menu, .page-menu')) {
            document.querySelectorAll('.account-menu, .page-menu').forEach(menu => {
                menu.classList.add('hidden');
            });
        }
    });

    // تحديث جميع الصفحات
    document.getElementById('sync-all-pages').addEventListener('click', function() {
        const btn = this;
        const originalHtml = btn.innerHTML;
        
        btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="animate-spin"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M3 21v-5h5"/></svg> جاري التحديث...';
        btn.disabled = true;
        
        fetch('{{ route("facebook-pages.sync") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert('success', data.message);
                setTimeout(() => location.reload(), 2000);
            } else {
                showAlert('error', data.message || 'حدث خطأ أثناء التحديث');
            }
        })
        .catch(error => {
            showAlert('error', 'حدث خطأ أثناء التحديث');
        })
        .finally(() => {
            btn.innerHTML = originalHtml;
            btn.disabled = false;
        });
    });

    // تحديث حساب واحد
    document.addEventListener('click', function(e) {
        if (e.target.closest('.sync-account')) {
            const accountId = e.target.closest('.sync-account').dataset.accountId;
            const btn = e.target.closest('.sync-account');
            const originalHtml = btn.innerHTML;
            
            btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="inline ml-2 animate-spin"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M3 21v-5h5"/></svg>جاري التحديث...';
            btn.disabled = true;
            
            fetch('{{ route("facebook-pages.sync") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({ account_id: accountId })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showAlert('success', data.message);
                    setTimeout(() => location.reload(), 2000);
                } else {
                    showAlert('error', data.message || 'حدث خطأ أثناء التحديث');
                }
            })
            .catch(error => {
                showAlert('error', 'حدث خطأ أثناء التحديث');
            })
            .finally(() => {
                btn.innerHTML = originalHtml;
                btn.disabled = false;
            });
        }
    });

    // قطع اتصال الحساب
   // قطع اتصال الحساب
document.addEventListener('click', function(e) {
    if (e.target.closest('.disconnect-account')) {
        const accountId = e.target.closest('.disconnect-account').dataset.accountId;
        const accountName = e.target.closest('.disconnect-account').dataset.accountName;
        
        document.getElementById('confirm-message').textContent = `هل أنت متأكد من قطع الاتصال مع حساب "${accountName}"؟ سيتم إيقاف وحذف جميع صفحات هذا الحساب.`;
        document.getElementById('confirmModal').classList.remove('hidden');
        
        currentAction = function() {
            fetch('{{ route("facebook.auth.disconnect") }}', {
                method: 'DELETE',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({ account_id: accountId })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showAlert('success', data.message);
                    setTimeout(() => location.reload(), 1500);
                } else {
                    showAlert('error', data.message);
                }
            })
            .catch(error => {
                showAlert('error', 'حدث خطأ أثناء قطع الاتصال');
            })
            .finally(() => {
                document.getElementById('confirmModal').classList.add('hidden');
            });
        };
    }
});

    // تبديل حالة الصفحة
    document.addEventListener('click', function(e) {
        if (e.target.closest('.toggle-page')) {
            const pageId = e.target.closest('.toggle-page').dataset.pageId;
            
            fetch(`/facebook-pages/${pageId}/toggle`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showAlert('success', data.message);
                    setTimeout(() => location.reload(), 1500);
                } else {
                    showAlert('error', data.message);
                }
            })
            .catch(error => {
                showAlert('error', 'حدث خطأ أثناء تغيير حالة الصفحة');
            });
        }
    });

    // حذف الصفحة
    document.addEventListener('click', function(e) {
        if (e.target.closest('.delete-page')) {
            const pageId = e.target.closest('.delete-page').dataset.pageId;
            const pageName = e.target.closest('.delete-page').dataset.pageName;
            
            document.getElementById('confirm-message').textContent = `هل أنت متأكد من حذف صفحة "${pageName}"؟ يمكن استردادها عبر زر "تحديث الصفحات".`;
            document.getElementById('confirmModal').classList.remove('hidden');
            
            currentAction = function() {
                fetch(`/facebook-pages/${pageId}`, {
                    method: 'DELETE',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showAlert('success', data.message);
                        setTimeout(() => location.reload(), 1500);
                    } else {
                        showAlert('error', data.message);
                    }
                })
                .catch(error => {
                    showAlert('error', 'حدث خطأ أثناء حذف الصفحة');
                });
            };
        }
    });

    // إدارة نافذة التأكيد
    document.getElementById('confirm-action').addEventListener('click', function() {
        if (currentAction) {
            currentAction();
            document.getElementById('confirmModal').classList.add('hidden');
            currentAction = null;
        }
    });

    document.getElementById('cancel-confirm').addEventListener('click', function() {
        document.getElementById('confirmModal').classList.add('hidden');
        currentAction = null;
    });

    document.getElementById('close-confirm-modal').addEventListener('click', function() {
        document.getElementById('confirmModal').classList.add('hidden');
        currentAction = null;
    });

    // إغلاق النوافذ عند النقر خارجها
    window.addEventListener('click', function(e) {
        if (e.target === document.getElementById('confirmModal')) {
            document.getElementById('confirmModal').classList.add('hidden');
            currentAction = null;
        }
        if (e.target === document.getElementById('chatModal')) {
            document.getElementById('chatModal').classList.add('hidden');
        }
    });

    function showAlert(type, message) {
        const container = document.getElementById('alerts-container');
        const alertDiv = document.createElement('div');
        const bgColor = type === 'success' ? 'bg-green-500' : 'bg-red-500';
        const icon = type === 'success' ? 
            '<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/>' :
            '<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"/>';
        
        alertDiv.className = `${bgColor} text-white px-4 py-3 rounded shadow-lg flex items-center gap-2 min-w-80 max-w-md`;
        alertDiv.innerHTML = `
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                ${icon}
            </svg>
            <span class="flex-1">${message}</span>
            <button type="button" class="text-white/80 hover:text-white" onclick="this.parentElement.remove()">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M18 6 6 18"/>
                    <path d="m6 6 12 12"/>
                </svg>
            </button>
        `;
        
        container.appendChild(alertDiv);
        
        // إزالة التنبيه تلقائياً بعد 4 ثوانٍ
        setTimeout(() => {
            alertDiv.style.opacity = '0';
            alertDiv.style.transform = 'translateX(100%)';
            setTimeout(() => alertDiv.remove(), 300);
        }, 8000);
    }
});
</script>

</x-app-layout>