@extends('layouts.superadmin')

@section('title', 'إدارة المسابقات')

@section('content')
<div class="container mx-auto px-6 py-8 rtl">
    <!-- Page Header -->
    <div class="mb-8">
        <div class="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6">
            <div>
                <h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-3 bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent">إدارة المسابقات</h1>
                <p class="text-lg text-gray-600 dark:text-gray-400">إدارة وتنظيم المسابقات والفعاليات للأعضاء</p>
            </div>
            <div class="flex items-center gap-4">
                <a href="{{ route('superadmin.competitions.create') }}" 
                   class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200">
                    <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                    </svg>
                    مسابقة جديدة
                </a>
            </div>
        </div>
    </div>

    <!-- Statistics Cards - Larger and Full Width -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6 mb-8">
        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-100 dark:border-gray-700 p-8 hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
            <div class="flex items-center">
                <div class="p-3 rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 shadow-lg ml-4">
                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path>
                    </svg>
                </div>
                <div class="flex-1">
                    <p class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">إجمالي المسابقات</p>
                    <p class="text-3xl font-bold text-gray-900 dark:text-white">{{ $stats['total'] }}</p>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-100 dark:border-gray-700 p-8 hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
            <div class="flex items-center">
                <div class="p-3 rounded-xl bg-gradient-to-br from-green-500 to-green-600 shadow-lg ml-4">
                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                    </svg>
                </div>
                <div class="flex-1">
                    <p class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">المسابقات النشطة</p>
                    <p class="text-3xl font-bold text-gray-900 dark:text-white">{{ $stats['active'] }}</p>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-100 dark:border-gray-700 p-8 hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
            <div class="flex items-center">
                <div class="p-3 rounded-xl bg-gradient-to-br from-red-500 to-red-600 shadow-lg ml-4">
                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
                <div class="flex-1">
                    <p class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">المسابقات المنتهية</p>
                    <p class="text-3xl font-bold text-gray-900 dark:text-white">{{ $stats['ended'] }}</p>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-100 dark:border-gray-700 p-8 hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
            <div class="flex items-center">
                <div class="p-3 rounded-xl bg-gradient-to-br from-purple-500 to-purple-600 shadow-lg ml-4">
                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                    </svg>
                </div>
                <div class="flex-1">
                    <p class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">اليوم</p>
                    <p class="text-3xl font-bold text-gray-900 dark:text-white">{{ $stats['today'] }}</p>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-100 dark:border-gray-700 p-8 hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
            <div class="flex items-center">
                <div class="p-3 rounded-xl bg-gradient-to-br from-indigo-500 to-indigo-600 shadow-lg ml-4">
                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                    </svg>
                </div>
                <div class="flex-1">
                    <p class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">هذا الأسبوع</p>
                    <p class="text-3xl font-bold text-gray-900 dark:text-white">{{ $stats['this_week'] }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-100 dark:border-gray-700 mb-8">
        <div class="p-8">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-6">فلترة وبحث المسابقات</h3>
            <form method="GET" action="{{ route('superadmin.competitions.index') }}" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <div>
                    <label for="search" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">البحث</label>
                    <input type="text" id="search" name="search" value="{{ request('search') }}" 
                           placeholder="ابحث في العنوان أو الوصف..."
                           class="w-full px-4 py-3 border border-gray-200 dark:border-gray-600 rounded-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white transition-all duration-200">
                </div>

                <div>
                    <label for="status" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">الحالة</label>
                    <select id="status" name="status" class="w-full px-4 py-3 border border-gray-200 dark:border-gray-600 rounded-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white transition-all duration-200">
                        <option value="">جميع الحالات</option>
                        <option value="draft" {{ request('status') === 'draft' ? 'selected' : '' }}>مسودة</option>
                        <option value="active" {{ request('status') === 'active' ? 'selected' : '' }}>نشطة</option>
                        <option value="ended" {{ request('status') === 'ended' ? 'selected' : '' }}>منتهية</option>
                    </select>
                </div>

                <div>
                    <label for="date_from" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">من تاريخ</label>
                    <input type="date" id="date_from" name="date_from" value="{{ request('date_from') }}" 
                           class="w-full px-4 py-3 border border-gray-200 dark:border-gray-600 rounded-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white transition-all duration-200">
                </div>

                <div class="flex items-end">
                    <button type="submit" class="w-full px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200">
                        <svg class="w-5 h-5 inline ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                        </svg>
                        بحث
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Competitions Grid - 2 Cards per Row -->
    <div class="grid grid-cols-1 xl:grid-cols-2 gap-6">
        @forelse($competitions as $competition)
            <div class="group bg-white dark:bg-gray-800 rounded-3xl shadow-md border border-gray-200/50 dark:border-gray-700/50 hover:shadow-xl hover:border-blue-200 dark:hover:border-blue-600/30 transition-all duration-500 overflow-hidden backdrop-blur-sm">
                <!-- Card Header -->
                <div class="relative bg-gradient-to-br from-blue-50/80 via-indigo-50/60 to-purple-50/80 dark:from-gray-800/90 dark:via-gray-700/80 dark:to-gray-600/90 p-6">
                    <!-- Decorative background -->
                    <div class="absolute inset-0 bg-grid-pattern opacity-5"></div>
                    
                    <div class="relative">
                        <!-- Header Row -->
                        <div class="flex items-start justify-between mb-4">
                            <!-- Title -->
                            <h3 class="text-xl font-bold text-gray-900 dark:text-white line-clamp-2 leading-tight flex-1 ml-4">
                                {{ $competition->title }}
                            </h3>
                            
                            <!-- Status Badge -->
                            @if($competition->status === 'active')
                                <div class="flex items-center gap-2 px-3 py-1.5 rounded-full bg-emerald-100/80 dark:bg-emerald-900/30 backdrop-blur-sm border border-emerald-200/50 dark:border-emerald-700/50">
                                    <div class="w-2 h-2 bg-emerald-500 rounded-full animate-pulse shadow-sm"></div>
                                    <span class="text-xs font-semibold text-emerald-700 dark:text-emerald-300">نشطة</span>
                                </div>
                            @elseif($competition->status === 'ended')
                                <div class="flex items-center gap-2 px-3 py-1.5 rounded-full bg-gray-100/80 dark:bg-gray-700/50 backdrop-blur-sm border border-gray-200/50 dark:border-gray-600/50">
                                    <div class="w-2 h-2 bg-gray-500 rounded-full"></div>
                                    <span class="text-xs font-semibold text-gray-600 dark:text-gray-300">منتهية</span>
                                </div>
                            @else
                                <div class="flex items-center gap-2 px-3 py-1.5 rounded-full bg-amber-100/80 dark:bg-amber-900/30 backdrop-blur-sm border border-amber-200/50 dark:border-amber-700/50">
                                    <div class="w-2 h-2 bg-amber-500 rounded-full"></div>
                                    <span class="text-xs font-semibold text-amber-700 dark:text-amber-300">مسودة</span>
                                </div>
                            @endif
                        </div>

                        <!-- Stats Grid -->
                        <div class="grid grid-cols-3 gap-4">
                            <div class="text-center p-3 bg-white/60 dark:bg-gray-800/60 rounded-xl backdrop-blur-sm border border-white/40 dark:border-gray-700/40">
                                <div class="text-lg font-bold text-blue-600 dark:text-blue-400">{{ $competition->participants_count }}</div>
                                <div class="text-xs text-gray-600 dark:text-gray-400 font-medium">مشارك</div>
                            </div>
                            <div class="text-center p-3 bg-white/60 dark:bg-gray-800/60 rounded-xl backdrop-blur-sm border border-white/40 dark:border-gray-700/40">
                                <div class="text-lg font-bold text-indigo-600 dark:text-indigo-400">{{ $competition->submissions_count }}</div>
                                <div class="text-xs text-gray-600 dark:text-gray-400 font-medium">إرسال</div>
                            </div>
                            <div class="text-center p-3 bg-white/60 dark:bg-gray-800/60 rounded-xl backdrop-blur-sm border border-white/40 dark:border-gray-700/40">
                                <div class="text-lg font-bold text-purple-600 dark:text-purple-400">{{ $competition->created_at->format('m/d') }}</div>
                                <div class="text-xs text-gray-600 dark:text-gray-400 font-medium">تاريخ الإنشاء</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Card Body -->
                <div class="p-6 space-y-4">
                    <!-- Description -->
                    <p class="text-gray-600 dark:text-gray-400 line-clamp-2 text-sm leading-relaxed">
                        {{ Str::limit($competition->description, 120) }}
                    </p>

                    <!-- Info Grid -->
                    <div class="grid grid-cols-2 gap-3 text-xs">
                        @if($competition->start_date)
                            <div class="flex items-center gap-2 p-2 bg-green-50/50 dark:bg-green-900/10 rounded-lg">
                                <div class="w-1.5 h-1.5 bg-green-500 rounded-full flex-shrink-0"></div>
                                <div>
                                    <span class="font-medium text-gray-700 dark:text-gray-300">بداية:</span>
                                    <span class="text-gray-600 dark:text-gray-400 mr-1">{{ $competition->start_date->format('m/d H:i') }}</span>
                                </div>
                            </div>
                        @endif

                        @if($competition->has_end_date && $competition->end_date)
                            <div class="flex items-center gap-2 p-2 bg-red-50/50 dark:bg-red-900/10 rounded-lg">
                                <div class="w-1.5 h-1.5 bg-red-500 rounded-full flex-shrink-0"></div>
                                <div>
                                    <span class="font-medium text-gray-700 dark:text-gray-300">نهاية:</span>
                                    <span class="text-gray-600 dark:text-gray-400 mr-1">{{ $competition->end_date->format('m/d H:i') }}</span>
                                </div>
                            </div>
                        @endif

                        <div class="flex items-center gap-2 p-2 bg-blue-50/50 dark:bg-blue-900/10 rounded-lg">
                            <div class="w-1.5 h-1.5 bg-blue-500 rounded-full flex-shrink-0"></div>
                            <div>
                                <span class="font-medium text-gray-700 dark:text-gray-300">منشئ:</span>
                                <span class="text-gray-600 dark:text-gray-400 mr-1">{{ Str::limit($competition->creator->name, 15) }}</span>
                            </div>
                        </div>

                        <div class="flex items-center gap-2 p-2 bg-purple-50/50 dark:bg-purple-900/10 rounded-lg">
                            <div class="w-1.5 h-1.5 bg-purple-500 rounded-full flex-shrink-0"></div>
                            <div>
                                <span class="font-medium text-gray-700 dark:text-gray-300">فئات:</span>
                                <span class="text-gray-600 dark:text-gray-400 mr-1">{{ count($competition->participant_types_text) }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Card Footer -->
                <div class="px-6 pb-6">
                    <div class="flex items-center justify-between">
                        <!-- Primary Action - View -->
                        <a href="{{ route('superadmin.competitions.show', $competition) }}" 
                           class="flex items-center justify-center w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white rounded-2xl shadow-md hover:shadow-lg transition-all duration-300 transform hover:scale-105 group/btn">
                            <svg class="w-5 h-5 transition-transform duration-300 group-hover/btn:scale-110" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                            </svg>
                        </a>

                        <!-- Action Icons -->
                        <div class="flex items-center gap-2">
                            @if($competition->status === 'draft')
                                <button onclick="activateCompetition({{ $competition->id }})" 
                                        class="flex items-center justify-center w-10 h-10 text-emerald-600 hover:bg-emerald-50 dark:hover:bg-emerald-900/20 rounded-xl transition-all duration-200 hover:scale-105" title="تفعيل المسابقة">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                                    </svg>
                                </button>
                            @elseif($competition->status === 'active')
                                <button onclick="endCompetition({{ $competition->id }})" 
                                        class="flex items-center justify-center w-10 h-10 text-orange-600 hover:bg-orange-50 dark:hover:bg-orange-900/20 rounded-xl transition-all duration-200 hover:scale-105" title="إنهاء المسابقة">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z"></path>
                                    </svg>
                                </button>
                            @endif

                            @if($competition->status !== 'ended')
                                <a href="{{ route('superadmin.competitions.edit', $competition) }}" 
                                   class="flex items-center justify-center w-10 h-10 text-indigo-600 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 rounded-xl transition-all duration-200 hover:scale-105" title="تعديل المسابقة">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                                    </svg>
                                </a>
                            @endif

                            <button onclick="deleteCompetition({{ $competition->id }}, '{{ $competition->title }}')" 
                                    class="flex items-center justify-center w-10 h-10 text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-xl transition-all duration-200 hover:scale-105" title="حذف المسابقة">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        @empty
            <!-- Empty State -->
            <div class="col-span-full">
                <div class="text-center py-20">
                    <div class="mx-auto w-32 h-32 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 rounded-full flex items-center justify-center mb-8 shadow-lg">
                        <svg class="w-16 h-16 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path>
                        </svg>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">لا توجد مسابقات حالياً</h3>
                    <p class="text-gray-500 dark:text-gray-400 mb-8 max-w-md mx-auto leading-relaxed">ابدأ بإنشاء مسابقة جديدة لتحفيز الأعضاء ومشاركتهم في أنشطة ممتعة ومفيدة</p>
                    <a href="{{ route('superadmin.competitions.create') }}" 
                            class="inline-flex items-center px-8 py-4 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200">
                        <svg class="w-6 h-6 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                        </svg>
                        إنشاء مسابقة جديدة
                    </a>
                </div>
            </div>
        @endforelse
    </div>

    <!-- Pagination -->
    @if($competitions->hasPages())
        <div class="mt-12 flex justify-center">
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-100 dark:border-gray-700 p-2">
                {{ $competitions->links() }}
            </div>
        </div>
    @endif
</div>

<script>
// Competition actions
function activateCompetition(id) {
    if (confirm('هل أنت متأكد من تفعيل هذه المسابقة؟')) {
        performAction(`/superadmin/competitions/${id}/activate`, 'تم تفعيل المسابقة بنجاح');
    }
}

function endCompetition(id) {
    if (confirm('هل أنت متأكد من إنهاء هذه المسابقة؟')) {
        performAction(`/superadmin/competitions/${id}/end`, 'تم إنهاء المسابقة بنجاح');
    }
}

function deleteCompetition(id, title) {
    if (confirm(`هل أنت متأكد من حذف المسابقة "${title}"؟\n\nتحذير: هذا الإجراء لا يمكن التراجع عنه!`)) {
        performAction(`/superadmin/competitions/${id}`, 'تم حذف المسابقة بنجاح', 'DELETE');
    }
}

function performAction(url, successMessage, method = 'POST') {
    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    
    // Show loading state
    showAlert('جاري التنفيذ', 'يرجى الانتظار...', 'info');
    
    fetch(url, {
        method: method,
        headers: {
            'X-CSRF-TOKEN': csrfToken,
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert('نجح', successMessage, 'success');
            setTimeout(() => location.reload(), 1500);
        } else {
            showAlert('خطأ', data.message, 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showAlert('خطأ', 'حدث خطأ أثناء تنفيذ العملية', 'error');
    });
}

function showAlert(title, message, type) {
    const alertDiv = document.createElement('div');
    alertDiv.className = `fixed top-6 right-6 z-[10000] p-6 rounded-xl shadow-2xl max-w-md transition-all duration-300 transform translate-x-full ${
        type === 'success' ? 'bg-green-50 text-green-800 border-2 border-green-200' :
        type === 'error' ? 'bg-red-50 text-red-800 border-2 border-red-200' :
        type === 'info' ? 'bg-blue-50 text-blue-800 border-2 border-blue-200' :
        'bg-gray-50 text-gray-800 border-2 border-gray-200'
    }`;
    alertDiv.innerHTML = `
        <div class="flex items-start">
            <div class="flex-shrink-0">
                ${type === 'success' ? 
                    '<svg class="w-6 h-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>' :
                type === 'error' ? 
                    '<svg class="w-6 h-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>' :
                    '<svg class="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>'
                }
            </div>
            <div class="mr-3 flex-1">
                <h4 class="font-bold text-lg">${title}</h4>
                <p class="text-sm mt-1">${message}</p>
            </div>
            <button type="button" class="mr-2 text-gray-400 hover:text-gray-600 transition-colors duration-200" onclick="this.parentElement.parentElement.remove()">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
        </div>
    `;
    
    document.body.appendChild(alertDiv);
    
    // Animate in
    setTimeout(() => {
        alertDiv.style.transform = 'translateX(0)';
    }, 100);
    
    // Auto remove
    setTimeout(() => {
        if (alertDiv.parentNode) {
            alertDiv.style.transform = 'translateX(100%)';
            alertDiv.style.opacity = '0';
            setTimeout(() => {
                alertDiv.remove();
            }, 300);
        }
    }, 5000);
}

// Add custom CSS for line clamp and enhanced styles
const style = document.createElement('style');
style.textContent = `
    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .line-clamp-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    /* Grid pattern for background decoration */
    .bg-grid-pattern {
        background-image: radial-gradient(circle, rgba(99, 102, 241, 0.1) 1px, transparent 1px);
        background-size: 20px 20px;
    }
    
    /* Enhanced pagination styles */
    .pagination {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .pagination a,
    .pagination span {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 2.5rem;
        height: 2.5rem;
        padding: 0 0.75rem;
        border-radius: 0.75rem;
        font-weight: 500;
        transition: all 0.2s;
    }
    
    .pagination a {
        color: #6b7280;
        background: transparent;
        border: 1px solid #e5e7eb;
    }
    
    .pagination a:hover {
        background: #f3f4f6;
        border-color: #d1d5db;
        color: #374151;
        transform: translateY(-1px);
    }
    
    .pagination .active span {
        background: linear-gradient(to right, #3b82f6, #8b5cf6);
        color: white;
        border: 1px solid transparent;
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    }
    
    .pagination .disabled span {
        color: #d1d5db;
        background: #f9fafb;
        border: 1px solid #f3f4f6;
    }
    
    /* Modern glassmorphism effect */
    .group:hover .backdrop-blur-sm {
        backdrop-filter: blur(12px);
    }
    
    /* Smooth animations for modern feel */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .group {
        animation: fadeInUp 0.6s ease-out;
    }
    
    /* Enhanced hover effects */
    .group:hover {
        transform: translateY(-4px);
    }
    
    /* Modern shadow variations */
    .shadow-modern {
        box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }
    
    .shadow-modern-lg {
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }
`;
document.head.appendChild(style);
</script>

@endsection