@extends('layouts.superadmin')

@section('title', 'مشاركي المسابقة: ' . $competition->title)





@section('content')
{{-- Navigation Tabs - Responsive --}}
<div class="mb-4 sm:mb-6 overflow-x-auto scrollbar-hide">
    <div class="flex gap-2 min-w-max pb-2 border-b border-gray-200 dark:border-gray-700">
        <a href="{{ route('superadmin.competitions.index') }}" 
           class="inline-flex items-center gap-2 px-3 py-2 rounded-lg text-xs sm:text-sm font-medium whitespace-nowrap transition {{ request()->routeIs('superadmin.competitions.index') ? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300' : 'text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800' }}">
            <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="M4 6h16M4 10h16M4 14h16M4 18h16"/>
            </svg>
            <span class="hidden sm:inline">العودة للقائمة</span>
            <span class="sm:hidden">القائمة</span>
        </a>

        <a href="{{ route('superadmin.competitions.show', $competition) }}" 
           class="inline-flex items-center gap-2 px-3 py-2 rounded-lg text-xs sm:text-sm font-medium whitespace-nowrap transition {{ request()->routeIs('superadmin.competitions.show') ? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300' : 'text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800' }}">
            <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 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            <span>نظرة عامة</span>
        </a>
        
        <a href="{{ route('superadmin.competitions.participants', $competition) }}" 
           class="inline-flex items-center gap-2 px-3 py-2 rounded-lg text-xs sm:text-sm font-medium whitespace-nowrap transition {{ request()->routeIs('superadmin.competitions.participants') ? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300' : 'text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800' }}">
            <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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
            </svg>
            <span>المشاركون</span>
            <span class="bg-blue-500 text-white px-1.5 py-0.5 rounded-full text-xs">
                {{ $competition->participants()->count() }}
            </span>
        </a>

        <a href="{{ route('superadmin.competitions.submissions', $competition) }}" 
           class="inline-flex items-center gap-2 px-3 py-2 rounded-lg text-xs sm:text-sm font-medium whitespace-nowrap transition {{ request()->routeIs('superadmin.competitions.submissions') ? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300' : 'text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800' }}">
            <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="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
            </svg>
            <span>الإرسالات</span>
            <span class="bg-purple-500 text-white px-1.5 py-0.5 rounded-full text-xs">
                {{ $competition->submissions()->count() }}
            </span>
        </a>
        
        <a href="{{ route('superadmin.competitions.winners', $competition) }}" 
           class="inline-flex items-center gap-2 px-3 py-2 rounded-lg text-xs sm:text-sm font-medium whitespace-nowrap transition {{ request()->routeIs('superadmin.competitions.winners') ? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300' : 'text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800' }}">
            <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="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/>
            </svg>
            <span>الفائزون</span>
            @php($winnersCount = $competition->participants()->where('status', 'winner')->count())
            @if($winnersCount > 0)
                <span class="bg-yellow-500 text-white px-1.5 py-0.5 rounded-full text-xs">
                    {{ $winnersCount }}
                </span>
            @endif
        </a>
    </div>
</div>

{{-- Custom Scrollbar Styles --}}
<style>
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
</style>

    <div class="my-8 flex justify-between items-center">
            <div>
                <h1 class="text-2xl font-bold text-gray-900">مشاركي المسابقة</h1>
                <p class="text-gray-600">{{ $competition->title }}</p>
            </div>
            
   
        </div>
    <!-- إحصائيات سريعة -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-users text-blue-600"></i>
                    </div>
                </div>
                <div class="mr-4">
                    <p class="text-sm text-gray-600">إجمالي المشاركين</p>
                    <p class="text-2xl font-bold text-gray-900">{{ $participants->total() }}</p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-check-circle text-green-600"></i>
                    </div>
                </div>
                <div class="mr-4">
                    <p class="text-sm text-gray-600">المؤهلون</p>
                    <p class="text-2xl font-bold text-gray-900">
                        {{ $participants->where('status', 'qualified')->count() }}
                    </p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-8 h-8 bg-yellow-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-trophy text-yellow-600"></i>
                    </div>
                </div>
                <div class="mr-4">
                    <p class="text-sm text-gray-600">الفائزون</p>
                    <p class="text-2xl font-bold text-gray-900">
                        {{ $participants->where('status', 'winner')->count() }}
                    </p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-times-circle text-red-600"></i>
                    </div>
                </div>
                <div class="mr-4">
                    <p class="text-sm text-gray-600">المستبعدون</p>
                    <p class="text-2xl font-bold text-gray-900">
                        {{ $participants->where('status', 'disqualified')->count() }}
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- فلاتر -->
    <div class="bg-white rounded-lg shadow mb-6">
        <div class="p-6 border-b">
            <h3 class="text-lg font-semibold">فلترة المشاركين</h3>
        </div>
        <div class="p-6">
            <form id="filter-form" class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <!-- فلتر البحث -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">البحث</label>
                    <input type="text" name="search" value="{{ request('search') }}"
                           placeholder="اسم المشارك..."
                           class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500">
                </div>

                <!-- فلتر الحالة -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">الحالة</label>
                    <select name="status" class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500">
                        <option value="">جميع الحالات</option>
                        <option value="participating" {{ request('status') == 'participating' ? 'selected' : '' }}>
                            مشارك
                        </option>
                        <option value="qualified" {{ request('status') == 'qualified' ? 'selected' : '' }}>
                            مؤهل
                        </option>
                        <option value="winner" {{ request('status') == 'winner' ? 'selected' : '' }}>
                            فائز
                        </option>
                        <option value="disqualified" {{ request('status') == 'disqualified' ? 'selected' : '' }}>
                            مستبعد
                        </option>
                    </select>
                </div>

                <!-- فلتر الإرسالات -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">الإرسالات</label>
                    <select name="has_submissions" class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500">
                        <option value="">الكل</option>
                        <option value="1" {{ request('has_submissions') == '1' ? 'selected' : '' }}>
                            لديه إرسالات
                        </option>
                        <option value="0" {{ request('has_submissions') == '0' ? 'selected' : '' }}>
                            لا يوجد إرسالات
                        </option>
                    </select>
                </div>

                <div class="flex items-end">
                    <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
                        <i class="fas fa-search"></i>
                        فلترة
                    </button>
                </div>
            </form>
        </div>
    </div>

  {{-- قائمة المشاركين - Cards Grid --}}
<div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700">
    <div class="px-4 sm:px-6 py-3 sm:py-4 border-b border-gray-200 dark:border-gray-700">
        <h3 class="text-base sm:text-lg font-semibold text-gray-900 dark:text-white">قائمة المشاركين</h3>
    </div>
    
    @if($participants && $participants->count() > 0)
        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 sm:gap-5 p-4 sm:p-6">
            @foreach($participants as $participant)
                <div class="bg-gray-50 dark:bg-gray-700 rounded-xl border border-gray-200 dark:border-gray-600 p-4 hover:border-gray-300 dark:hover:border-gray-500 transition-all">
                    {{-- User Header --}}
                    <div class="flex items-start gap-3 mb-4">
                        <div class="relative flex-shrink-0">
                            <img src="{{ $participant->user->avatar_url }}" 
                                 alt="{{ $participant->user->name }}" 
                                 class="w-12 h-12 sm:w-14 sm:h-14 rounded-full object-cover border-2 border-gray-300 dark:border-gray-600">
                        </div>
                        
                        <div class="flex-1 min-w-0">
                            <h4 class="text-sm sm:text-base font-semibold text-gray-900 dark:text-white truncate">
                                {{ $participant->user->name }}
                            </h4>
                            <p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 truncate">
                                {{ $participant->user->email }}
                            </p>
                        </div>
                        
                        {{-- Status Badge --}}
                        <span class="px-2 py-1 text-xs font-semibold rounded-full {{ $participant->status_badge_class }} flex-shrink-0">
                            {{ $participant->status_text }}
                        </span>
                    </div>
                    
                    {{-- Participant Info --}}
                    <div class="space-y-2 mb-4">
                        <div class="flex items-center justify-between text-xs sm:text-sm">
                            <span class="flex items-center gap-1 text-gray-600 dark:text-gray-400">
                                <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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                </svg>
                                تاريخ الانضمام
                            </span>
                            <span class="text-gray-900 dark:text-white font-medium">{{ $participant->joined_at->format('Y/m/d') }}</span>
                        </div>
                        
                        <div class="flex items-center justify-between text-xs sm:text-sm">
                            <span class="flex items-center gap-1 text-gray-600 dark:text-gray-400">
                                <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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                                </svg>
                                الإرسالات
                            </span>
                            <span class="bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 px-2 py-1 rounded-full text-xs font-medium">
                                {{ $participant->submissions_count ?? 0 }}
                            </span>
                        </div>
                        
                        <div class="flex items-center justify-between text-xs sm:text-sm">
                            <span class="flex items-center gap-1 text-gray-600 dark:text-gray-400">
                                <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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                </svg>
                                النقاط الممنوحة
                            </span>
                            @if($participant->awarded_points > 0)
                                <span class="text-green-600 dark:text-green-400 font-semibold">
                                    {{ $participant->awarded_points }}
                                </span>
                            @else
                                <span class="text-gray-400 dark:text-gray-500">-</span>
                            @endif
                        </div>
                    </div>
                    
                    {{-- Actions --}}
                    <div class="flex items-center justify-center gap-1 sm:gap-2 pt-4 border-t border-gray-200 dark:border-gray-600">
                        @if($participant->status === 'participating')
                            <button onclick="qualifyParticipant({{ $participant->id }})" 
                                    class="p-2 text-green-600 hover:text-green-700 hover:bg-green-50 dark:hover:bg-green-900/20 rounded-lg transition-colors group relative"
                                    title="تأهيل">
                                <svg class="w-4 h-4 sm:w-5 sm:h-5" 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"/>
                                </svg>
                                <span class="absolute -top-8 left-1/2 transform -translate-x-1/2 px-2 py-1 bg-gray-900 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">تأهيل</span>
                            </button>
                            
                            <button onclick="disqualifyParticipant({{ $participant->id }})" 
                                    class="p-2 text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors group relative"
                                    title="استبعاد">
                                <svg class="w-4 h-4 sm:w-5 sm: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"/>
                                </svg>
                                <span class="absolute -top-8 left-1/2 transform -translate-x-1/2 px-2 py-1 bg-gray-900 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">استبعاد</span>
                            </button>
                        @elseif($participant->status === 'qualified')
                            <button onclick="selectWinner({{ $participant->id }})" 
                                    class="p-2 text-yellow-600 hover:text-yellow-700 hover:bg-yellow-50 dark:hover:bg-yellow-900/20 rounded-lg transition-colors group relative"
                                    title="اختيار فائز">
                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/>
                                </svg>
                                <span class="absolute -top-8 left-1/2 transform -translate-x-1/2 px-2 py-1 bg-gray-900 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">اختيار فائز</span>
                            </button>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>
    @else
        <div class="p-10 sm:p-16 text-center">
            <svg class="mx-auto h-16 w-16 text-gray-400 dark:text-gray-500 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
            </svg>
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">لا توجد مشاركات بعد</h3>
            <p class="text-sm text-gray-500 dark:text-gray-400">لم يتم إضافة أي مشاركين حتى الآن</p>
        </div>
    @endif

    {{-- Pagination --}}
    @if($participants->hasPages())
        <div class="px-4 sm:px-6 py-4 border-t border-gray-200 dark:border-gray-700">
            {{ $participants->appends(request()->query())->links() }}
        </div>
    @endif
</div>

    <!-- Modal تأهيل مشارك -->
    <div id="qualifyModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden z-50">
        <div class="flex items-center justify-center min-h-screen p-4">
            <div class="bg-white rounded-lg shadow-xl max-w-md w-full">
                <div class="p-6">
                    <h3 class="text-lg font-semibold mb-4">تأهيل المشارك</h3>
                    <form id="qualifyForm">
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                ملاحظات إضافية (اختيارية)
                            </label>
                            <textarea name="admin_notes" rows="3" 
                                      class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500"
                                      placeholder="أدخل أي ملاحظات..."></textarea>
                        </div>
                        <div class="flex justify-end space-x-3">
                            <button type="button" onclick="closeQualifyModal()" 
                                    class="px-4 py-2 text-gray-600 border rounded-lg hover:bg-gray-50">
                                إلغاء
                            </button>
                            <button type="submit" 
                                    class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700">
                                تأهيل المشارك
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal اختيار فائز -->
    <div id="winnerModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden z-50">
        <div class="flex items-center justify-center min-h-screen p-4">
            <div class="bg-white rounded-lg shadow-xl max-w-md w-full">
                <div class="p-6">
                    <h3 class="text-lg font-semibold mb-4">اختيار فائز</h3>
                    <form id="winnerForm">
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                النقاط الممنوحة
                            </label>
                            <input type="number" name="awarded_points" min="0"
                                   class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500"
                                   placeholder="0">
                        </div>
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                الرتبة الممنوحة (اختيارية)
                            </label>
                            <select name="awarded_rank_id" 
                                    class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500">
                                <option value="">اختر رتبة...</option>
                                <!-- سيتم ملؤها عبر JavaScript -->
                            </select>
                        </div>
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                ملاحظات
                            </label>
                            <textarea name="admin_notes" rows="3" 
                                      class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500"
                                      placeholder="ملاحظات حول اختيار الفائز..."></textarea>
                        </div>
                        <div class="flex justify-end space-x-3">
                            <button type="button" onclick="closeWinnerModal()" 
                                    class="px-4 py-2 text-gray-600 border rounded-lg hover:bg-gray-50">
                                إلغاء
                            </button>
                            <button type="submit" 
                                    class="px-4 py-2 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700">
                                اختيار كفائز
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal استبعاد مشارك -->
    <div id="disqualifyModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden z-50">
        <div class="flex items-center justify-center min-h-screen p-4">
            <div class="bg-white rounded-lg shadow-xl max-w-md w-full">
                <div class="p-6">
                    <h3 class="text-lg font-semibold mb-4 text-red-600">استبعاد المشارك</h3>
                    <form id="disqualifyForm">
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                سبب الاستبعاد <span class="text-red-500">*</span>
                            </label>
                            <textarea name="admin_notes" rows="3" required
                                      class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-red-500"
                                      placeholder="أدخل سبب الاستبعاد..."></textarea>
                        </div>
                        <div class="flex justify-end space-x-3">
                            <button type="button" onclick="closeDisqualifyModal()" 
                                    class="px-4 py-2 text-gray-600 border rounded-lg hover:bg-gray-50">
                                إلغاء
                            </button>
                            <button type="submit" 
                                    class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700">
                                استبعاد المشارك
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
<!-- أضف هذا المودال قبل إغلاق section('content') -->
<!-- Modal عرض تفاصيل المشارك المحسن -->
<div id="viewParticipantModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden z-50">
    <div class="flex items-center justify-center min-h-screen p-4">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-5xl w-full max-h-screen overflow-y-auto">
            <!-- رأس المودال -->
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-gradient-to-r from-blue-500 to-purple-600">
                <div class="flex justify-between items-center">
                    <h3 class="text-xl font-semibold text-white">تفاصيل المشارك</h3>
                    <button onclick="closeViewParticipantModal()" 
                            class="text-white hover:text-gray-200 transition-colors duration-200">
                        <svg class="w-6 h-6" 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>
            </div>
            
            <!-- محتوى المودال -->
            <div class="p-6">
                <!-- مؤشر التحميل -->
                <div id="participantDetailsLoading" class="text-center py-12">
                    <div class="inline-flex items-center space-x-2 space-x-reverse">
                        <svg class="animate-spin h-8 w-8 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                        <span class="text-lg text-gray-600 dark:text-gray-300">جاري تحميل البيانات...</span>
                    </div>
                </div>
                
                <!-- محتوى التفاصيل -->
                <div id="participantDetails" class="space-y-6 hidden">
                    <!-- سيتم ملؤها عبر JavaScript -->
                </div>
                
                <!-- رسالة الخطأ -->
                <div id="participantDetailsError" class="text-center py-12 hidden">
                    <div class="text-red-500 mb-4">
                        <svg class="w-16 h-16 mx-auto" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM13 17h-2v-6h2v6zm0-8h-2V7h2v2z"/>
                        </svg>
                    </div>
                    <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">فشل في تحميل البيانات</h3>
                    <p class="text-gray-500 dark:text-gray-400 mb-4">حدث خطأ أثناء تحميل تفاصيل المشارك</p>
                    <button onclick="retryLoadParticipantDetails()" 
                            class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200">
                        <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                        </svg>
                        إعادة المحاولة
                    </button>
                </div>
            </div>
            
            <!-- أزرار الإجراءات في أسفل المودال -->
            <div id="participantActions" class="px-6 py-4 bg-gray-50 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-600 hidden">
                <div class="flex justify-between items-center">
                    <div class="flex space-x-3 space-x-reverse">
                        <!-- أزرار الإجراءات ستتم إضافتها ديناميكياً -->
                    </div>
                    <button onclick="closeViewParticipantModal()" 
                            class="px-6 py-2 bg-gray-300 hover:bg-gray-400 text-gray-700 font-medium rounded-lg transition duration-200">
                        إغلاق
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* تحسينات CSS للمودال */
.modal-transition {
    transition: all 0.3s ease-in-out;
}

.participant-stat-card {
    transition: transform 0.2s ease-in-out;
}

.participant-stat-card:hover {
    transform: translateY(-2px);
}

.submission-item {
    transition: background-color 0.2s ease-in-out;
}

.submission-item:hover {
    background-color: rgba(249, 250, 251, 0.5);
}

/* تحسين عرض الصور */
.participant-avatar {
    transition: transform 0.2s ease-in-out;
}

.participant-avatar:hover {
    transform: scale(1.05);
}

/* رسوم متحركة للإحصائيات */
@keyframes countUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.stat-number {
    animation: countUp 0.6s ease-out forwards;
}

/* تحسين عرض الشارات */
.status-badge {
    position: relative;
    overflow: hidden;
}

.status-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s ease-in-out;
}

.status-badge:hover::before {
    left: 100%;
}

/* تحسين مظهر قائمة الإرسالات */
.submissions-list {
    max-height: 400px;
    overflow-y: auto;
}

.submissions-list::-webkit-scrollbar {
    width: 6px;
}

.submissions-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.submissions-list::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
}

.submissions-list::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* تأثيرات للأزرار */
.action-button {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.action-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
}

.action-button:hover::before {
    width: 300px;
    height: 300px;
}

/* تحسين النص */
.text-shadow {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* إضافة تأثيرات للكروت */
.info-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
    overflow: hidden;
}

.info-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
    transform: rotate(45deg);
    transition: all 0.6s ease;
    opacity: 0;
}

.info-card:hover::before {
    opacity: 1;
    left: 100%;
    top: 100%;
}
</style>

<script>
// متغير لحفظ ID المشارك الحالي للإعادة المحاولة
let currentParticipantIdForDetails = null;

// تحديث دالة عرض تفاصيل المشارك
window.viewParticipant = function(participantId) {
    currentParticipantIdForDetails = participantId;
    
    // إظهار المودال
    const modal = document.getElementById('viewParticipantModal');
    const loadingDiv = document.getElementById('participantDetailsLoading');
    const detailsDiv = document.getElementById('participantDetails');
    const errorDiv = document.getElementById('participantDetailsError');
    const actionsDiv = document.getElementById('participantActions');
    
    if (modal) {
        modal.classList.remove('hidden');
        
        // إظهار التحميل وإخفاء باقي العناصر
        loadingDiv.classList.remove('hidden');
        detailsDiv.classList.add('hidden');
        errorDiv.classList.add('hidden');
        actionsDiv.classList.add('hidden');
    }
    
    // تحميل البيانات
    loadParticipantDetails(participantId);
};

// دالة إعادة المحاولة
window.retryLoadParticipantDetails = function() {
    if (currentParticipantIdForDetails) {
        const loadingDiv = document.getElementById('participantDetailsLoading');
        const errorDiv = document.getElementById('participantDetailsError');
        
        loadingDiv.classList.remove('hidden');
        errorDiv.classList.add('hidden');
        
        loadParticipantDetails(currentParticipantIdForDetails);
    }
};

// تحديث دالة تحميل التفاصيل
function loadParticipantDetails(participantId) {
    const loadingDiv = document.getElementById('participantDetailsLoading');
    const detailsDiv = document.getElementById('participantDetails');
    const errorDiv = document.getElementById('participantDetailsError');
    const actionsDiv = document.getElementById('participantActions');
    
    const url = `{{ route('superadmin.competitions.participant-details', ['competition' => $competition->id, 'participant' => '__PARTICIPANT_ID__']) }}`.replace('__PARTICIPANT_ID__', participantId);
    
    fetch(url, {
        method: 'GET',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Accept': 'application/json'
        }
    })
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        loadingDiv.classList.add('hidden');
        
        if (data.success && data.participant) {
            displayParticipantDetails(data.participant, detailsDiv);
            createParticipantActions(data.participant, actionsDiv);
            detailsDiv.classList.remove('hidden');
            actionsDiv.classList.remove('hidden');
        } else {
            errorDiv.classList.remove('hidden');
        }
    })
    .catch(error => {
        console.error('خطأ في تحميل تفاصيل المشارك:', error);
        loadingDiv.classList.add('hidden');
        errorDiv.classList.remove('hidden');
    });
}

// دالة إنشاء أزرار الإجراءات
function createParticipantActions(participant, container) {
    let actionsHtml = '<div class="flex space-x-3 space-x-reverse">';
    
    // حسب حالة المشارك، أضف الأزرار المناسبة
    if (participant.status === 'participating') {
        actionsHtml += `
            <button onclick="qualifyParticipant(${participant.id}); closeViewParticipantModal();" 
                    class="action-button px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition duration-200">
                <svg class="w-4 h-4 inline ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                </svg>
                تأهيل
            </button>
            <button onclick="disqualifyParticipant(${participant.id}); closeViewParticipantModal();" 
                    class="action-button px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition duration-200">
                <svg class="w-4 h-4 inline ml-1" 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>
        `;
    } else if (participant.status === 'qualified') {
        actionsHtml += `
            <button onclick="selectWinner(${participant.id}); closeViewParticipantModal();" 
                    class="action-button px-4 py-2 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 transition duration-200">
                <svg class="w-4 h-4 inline ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path>
                </svg>
                اختيار كفائز
            </button>
        `;
    }
    
    // زر تحديث البيانات
    actionsHtml += `
        <button onclick="retryLoadParticipantDetails()" 
                class="action-button px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition duration-200">
            <svg class="w-4 h-4 inline ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
            </svg>
            تحديث
        </button>
    `;
    
    actionsHtml += '</div>';
    
    container.innerHTML = actionsHtml;
}
</script>


<script>
// المتغيرات العامة
window.currentParticipantId = null;
window.ranks = [];

// تحميل الرتب من السيرفر
function loadRanks() {
    fetch('{{ route("superadmin.competitions.ranks") }}')
        .then(response => response.json())
        .then(data => {
            window.ranks = data;
            populateRankSelect();
        })
        .catch(error => {
            console.error('خطأ في تحميل الرتب:', error);
        });
}

// ملء قائمة الرتب
function populateRankSelect() {
    const select = document.querySelector('select[name="awarded_rank_id"]');
    if (select) {
        select.innerHTML = '<option value="">اختر رتبة...</option>';
        window.ranks.forEach(rank => {
            select.innerHTML += `<option value="${rank.id}">${rank.name}</option>`;
        });
    }
}

// إعداد مستمعات الأحداث
function setupEventListeners() {
    // فورم التأهيل
    const qualifyForm = document.getElementById('qualifyForm');
    if (qualifyForm) {
        qualifyForm.addEventListener('submit', handleQualifySubmit);
    }

    // فورم اختيار الفائز
    const winnerForm = document.getElementById('winnerForm');
    if (winnerForm) {
        winnerForm.addEventListener('submit', handleWinnerSubmit);
    }

    // فورم الاستبعاد
    const disqualifyForm = document.getElementById('disqualifyForm');
    if (disqualifyForm) {
        disqualifyForm.addEventListener('submit', handleDisqualifySubmit);
    }

    // فورم الفلترة
    const filterForm = document.getElementById('filter-form');
    if (filterForm) {
        filterForm.addEventListener('submit', function(e) {
            e.preventDefault();
            const formData = new FormData(this);
            const params = new URLSearchParams(formData);
            window.location.href = '{{ route("superadmin.competitions.participants", $competition) }}?' + params.toString();
        });
    }
}

// دالة تأهيل المشارك - تعريف عام
window.qualifyParticipant = function(participantId) {
    window.currentParticipantId = participantId;
    const modal = document.getElementById('qualifyModal');
    if (modal) {
        modal.classList.remove('hidden');
    }
};

// إغلاق نافذة التأهيل
window.closeQualifyModal = function() {
    const modal = document.getElementById('qualifyModal');
    if (modal) {
        modal.classList.add('hidden');
    }
    const form = document.getElementById('qualifyForm');
    if (form) {
        form.reset();
    }
    window.currentParticipantId = null;
};

// دالة اختيار الفائز - تعريف عام
window.selectWinner = function(participantId) {
    window.currentParticipantId = participantId;
    const modal = document.getElementById('winnerModal');
    if (modal) {
        modal.classList.remove('hidden');
    }
};

// إغلاق نافذة اختيار الفائز
window.closeWinnerModal = function() {
    const modal = document.getElementById('winnerModal');
    if (modal) {
        modal.classList.add('hidden');
    }
    const form = document.getElementById('winnerForm');
    if (form) {
        form.reset();
    }
    window.currentParticipantId = null;
};

// دالة استبعاد المشارك - تعريف عام
window.disqualifyParticipant = function(participantId) {
    window.currentParticipantId = participantId;
    const modal = document.getElementById('disqualifyModal');
    if (modal) {
        modal.classList.remove('hidden');
    }
};

// إغلاق نافذة الاستبعاد
window.closeDisqualifyModal = function() {
    const modal = document.getElementById('disqualifyModal');
    if (modal) {
        modal.classList.add('hidden');
    }
    const form = document.getElementById('disqualifyForm');
    if (form) {
        form.reset();
    }
    window.currentParticipantId = null;
};

// دالة عرض تفاصيل المشارك - محدثة
window.viewParticipant = function(participantId) {
    console.log('عرض تفاصيل المشارك:', participantId);
    
    // إظهار المودال
    const modal = document.getElementById('viewParticipantModal');
    if (modal) {
        modal.classList.remove('hidden');
    }
    
    // تحميل تفاصيل المشارك
    loadParticipantDetails(participantId);
};

// إغلاق نافذة عرض التفاصيل
window.closeViewParticipantModal = function() {
    const modal = document.getElementById('viewParticipantModal');
    if (modal) {
        modal.classList.add('hidden');
    }
    
    // إعادة تعيين المحتوى
    const detailsContainer = document.getElementById('participantDetails');
    if (detailsContainer) {
        detailsContainer.innerHTML = `
            <div class="text-center py-8">
                <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
                <p class="text-gray-500 mt-2">جاري تحميل البيانات...</p>
            </div>
        `;
    }
};

// استبدل دالة loadParticipantDetails بهذه النسخة المحدثة

// تحميل تفاصيل المشارك
function loadParticipantDetails(participantId) {
    const detailsContainer = document.getElementById('participantDetails');
    
    // URL محدث للراوت الجديد
    const url = `{{ route('superadmin.competitions.participant-details', ['competition' => $competition->id, 'participant' => '__PARTICIPANT_ID__']) }}`.replace('__PARTICIPANT_ID__', participantId);
    
    fetch(url, {
        method: 'GET',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Accept': 'application/json'
        }
    })
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        if (data.success && data.participant) {
            displayParticipantDetails(data.participant, detailsContainer);
        } else {
            detailsContainer.innerHTML = `
                <div class="text-center py-8">
                    <div class="text-red-500 mb-2">
                        <svg class="w-12 h-12 mx-auto" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                        </svg>
                    </div>
                    <p class="text-gray-500">${data.message || 'حدث خطأ في تحميل البيانات'}</p>
                </div>
            `;
        }
    })
    .catch(error => {
        console.error('خطأ في تحميل تفاصيل المشارك:', error);
        
        detailsContainer.innerHTML = `
            <div class="text-center py-8">
                <div class="text-red-500 mb-2">
                    <svg class="w-12 h-12 mx-auto" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM13 17h-2v-6h2v6zm0-8h-2V7h2v2z"/>
                    </svg>
                </div>
                <p class="text-gray-500">فشل في تحميل تفاصيل المشارك</p>
                <button onclick="loadParticipantDetails(${participantId})" 
                        class="mt-2 text-blue-600 hover:text-blue-800 text-sm">
                    إعادة المحاولة
                </button>
            </div>
        `;
    });
}

// تحديث دالة عرض تفاصيل المشارك لتتعامل مع البيانات الجديدة
function displayParticipantDetails(participant, container) {
    const statusText = {
        'participating': 'مشارك',
        'qualified': 'مؤهل',
        'winner': 'فائز',
        'disqualified': 'مستبعد'
    };
    
    const statusClass = {
        'participating': 'bg-blue-100 text-blue-800',
        'qualified': 'bg-green-100 text-green-800',
        'winner': 'bg-yellow-100 text-yellow-800',
        'disqualified': 'bg-red-100 text-red-800'
    };
    
    const joinedDate = new Date(participant.joined_at).toLocaleDateString('ar-EG', {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
    });
    
    container.innerHTML = `
        <!-- معلومات المشارك الأساسية -->
        <div class="bg-gray-50 rounded-lg p-6">
            <div class="flex items-center space-x-4">
                <div class="flex-shrink-0">
                    ${participant.user.avatar_url ? 
                        `<img class="h-16 w-16 rounded-full object-cover" src="${participant.user.avatar_url}" alt="${participant.user.name}">` :
                        `<div class="h-16 w-16 rounded-full bg-gray-300 flex items-center justify-center">
                            <svg class="w-8 h-8 text-gray-600" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
                            </svg>
                        </div>`
                    }
                </div>
                <div class="flex-1">
                    <h4 class="text-lg font-medium text-gray-900">${participant.user.name}</h4>
                    <p class="text-gray-600">${participant.user.email}</p>
                    ${participant.user.phone ? `<p class="text-gray-600">${participant.user.phone}</p>` : ''}
                </div>
                <div>
                    <span class="px-3 py-1 text-sm font-semibold rounded-full ${statusClass[participant.status] || 'bg-gray-100 text-gray-800'}">
                        ${statusText[participant.status] || participant.status_text}
                    </span>
                </div>
            </div>
        </div>
        
        <!-- إحصائيات المشارك -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="bg-blue-50 rounded-lg p-4">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <svg class="w-8 h-8 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                        </svg>
                    </div>
                    <div class="mr-3">
                        <p class="text-sm text-blue-600">النقاط الممنوحة</p>
                        <p class="text-2xl font-bold text-blue-900">${participant.awarded_points || 0}</p>
                    </div>
                </div>
            </div>
            
            <div class="bg-green-50 rounded-lg p-4">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <svg class="w-8 h-8 text-green-600" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </div>
                    <div class="mr-3">
                        <p class="text-sm text-green-600">الإرسالات المعتمدة</p>
                        <p class="text-2xl font-bold text-green-900">${participant.approved_submissions_count || 0}</p>
                    </div>
                </div>
            </div>
            
            <div class="bg-purple-50 rounded-lg p-4">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <svg class="w-8 h-8 text-purple-600" fill="currentColor" viewBox="0 0 24 24">
                            <path 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"/>
                        </svg>
                    </div>
                    <div class="mr-3">
                        <p class="text-sm text-purple-600">إجمالي الإرسالات</p>
                        <p class="text-2xl font-bold text-purple-900">${participant.submissions_count || 0}</p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- تاريخ الانضمام -->
        <div class="bg-gray-50 rounded-lg p-4">
            <h4 class="text-sm font-medium text-gray-700 mb-2">تاريخ الانضمام</h4>
            <p class="text-lg font-medium text-gray-900">${joinedDate}</p>
        </div>
        
        <!-- الرتبة الممنوحة -->
        ${participant.awarded_rank ? `
        <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
            <h4 class="text-sm font-medium text-yellow-800 mb-2">الرتبة الممنوحة</h4>
            <div class="flex items-center">
                ${participant.awarded_rank.icon ? `<span class="text-2xl ml-2">${participant.awarded_rank.icon}</span>` : ''}
                <div>
                    <p class="font-medium text-yellow-900">${participant.awarded_rank.name}</p>
                    ${participant.awarded_rank.description ? `<p class="text-sm text-yellow-700">${participant.awarded_rank.description}</p>` : ''}
                </div>
            </div>
        </div>
        ` : ''}
        
        <!-- ملاحظات الإدارة -->
        ${participant.admin_notes ? `
        <div class="bg-yellow-50 border-r-4 border-yellow-400 p-4">
            <div class="flex">
                <div class="flex-shrink-0">
                    <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
                <div class="mr-3">
                    <h4 class="text-sm font-medium text-yellow-800">ملاحظات الإدارة</h4>
                    <p class="text-sm text-yellow-700 mt-1">${participant.admin_notes}</p>
                </div>
            </div>
        </div>
        ` : ''}
        
        <!-- الإرسالات -->
        <div class="bg-white border rounded-lg">
            <div class="px-6 py-4 border-b">
                <h4 class="text-lg font-medium text-gray-900">الإرسالات (${participant.submissions_count || 0})</h4>
            </div>
            <div class="divide-y divide-gray-200">
                ${participant.submissions && participant.submissions.length > 0 ? 
                    participant.submissions.map(submission => `
                        <div class="px-6 py-4">
                            <div class="flex items-center justify-between mb-2">
                                <div>
                                    <h5 class="text-sm font-medium text-gray-900">إرسال #${submission.id}</h5>
                                    <p class="text-sm text-gray-500">
                                        ${new Date(submission.submitted_at).toLocaleDateString('ar-EG')}
                                    </p>
                                </div>
                                <span class="px-2 py-1 text-xs rounded-full ${
                                    submission.status === 'approved' ? 'bg-green-100 text-green-800' :
                                    submission.status === 'rejected' ? 'bg-red-100 text-red-800' :
                                    'bg-yellow-100 text-yellow-800'
                                }">
                                    ${submission.status === 'approved' ? 'مقبول' :
                                      submission.status === 'rejected' ? 'مرفوض' : 'قيد المراجعة'}
                                </span>
                            </div>
                            ${submission.description ? `
                                <p class="text-sm text-gray-600 mb-2">${submission.description}</p>
                            ` : ''}
                            ${submission.admin_feedback ? `
                                <div class="bg-gray-50 rounded p-2 text-sm">
                                    <strong>تعليق الإدارة:</strong> ${submission.admin_feedback}
                                </div>
                            ` : ''}
                            ${submission.attachments && submission.attachments.length > 0 ? `
                                <div class="mt-2">
                                    <p class="text-xs text-gray-500">${submission.attachments.length} مرفق</p>
                                </div>
                            ` : ''}
                        </div>
                    `).join('') :
                    `<div class="px-6 py-8 text-center text-gray-500">
                        <svg class="w-12 h-12 mx-auto text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                        </svg>
                        لا توجد إرسالات بعد
                    </div>`
                }
            </div>
        </div>
        
        <!-- معلومات إضافية -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            ${participant.qualified_at ? `
                <div class="bg-green-50 rounded-lg p-4">
                    <h4 class="text-sm font-medium text-green-700 mb-2">تاريخ التأهيل</h4>
                    <p class="text-sm text-green-900">${new Date(participant.qualified_at).toLocaleDateString('ar-EG')}</p>
                    ${participant.qualifier ? `<p class="text-xs text-green-600">بواسطة: ${participant.qualifier.name}</p>` : ''}
                </div>
            ` : ''}
            
            ${participant.won_at ? `
                <div class="bg-yellow-50 rounded-lg p-4">
                    <h4 class="text-sm font-medium text-yellow-700 mb-2">تاريخ الفوز</h4>
                    <p class="text-sm text-yellow-900">${new Date(participant.won_at).toLocaleDateString('ar-EG')}</p>
                    ${participant.winner_selector ? `<p class="text-xs text-yellow-600">بواسطة: ${participant.winner_selector.name}</p>` : ''}
                </div>
            ` : ''}
        </div>
    `;
}

// عرض تفاصيل المشارك
function displayParticipantDetails(participant, container) {
    const statusText = {
        'participating': 'مشارك',
        'qualified': 'مؤهل',
        'winner': 'فائز',
        'disqualified': 'مستبعد'
    };
    
    const statusClass = {
        'participating': 'bg-blue-100 text-blue-800',
        'qualified': 'bg-green-100 text-green-800',
        'winner': 'bg-yellow-100 text-yellow-800',
        'disqualified': 'bg-red-100 text-red-800'
    };
    
    const joinedDate = new Date(participant.joined_at).toLocaleDateString('ar-EG', {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
    });
    
    container.innerHTML = `
        <!-- معلومات المشارك الأساسية -->
        <div class="bg-gray-50 rounded-lg p-6">
            <div class="flex items-center space-x-4">
                <div class="flex-shrink-0">
                    ${participant.user.avatar ? 
                        `<img class="h-16 w-16 rounded-full object-cover" src="/storage/${participant.user.avatar}" alt="${participant.user.name}">` :
                        `<div class="h-16 w-16 rounded-full bg-gray-300 flex items-center justify-center">
                            <svg class="w-8 h-8 text-gray-600" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
                            </svg>
                        </div>`
                    }
                </div>
                <div class="flex-1">
                    <h4 class="text-lg font-medium text-gray-900">${participant.user.name}</h4>
                    <p class="text-gray-600">${participant.user.email}</p>
                    ${participant.user.phone ? `<p class="text-gray-600">${participant.user.phone}</p>` : ''}
                </div>
                <div>
                    <span class="px-3 py-1 text-sm font-semibold rounded-full ${statusClass[participant.status] || 'bg-gray-100 text-gray-800'}">
                        ${statusText[participant.status] || participant.status}
                    </span>
                </div>
            </div>
        </div>
        
        <!-- إحصائيات المشارك -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="bg-blue-50 rounded-lg p-4">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <svg class="w-8 h-8 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                        </svg>
                    </div>
                    <div class="mr-3">
                        <p class="text-sm text-blue-600">النقاط الممنوحة</p>
                        <p class="text-2xl font-bold text-blue-900">${participant.awarded_points || 0}</p>
                    </div>
                </div>
            </div>
            
            <div class="bg-green-50 rounded-lg p-4">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <svg class="w-8 h-8 text-green-600" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </div>
                    <div class="mr-3">
                        <p class="text-sm text-green-600">عدد الإرسالات</p>
                        <p class="text-2xl font-bold text-green-900">${participant.submissions_count || 0}</p>
                    </div>
                </div>
            </div>
            
            <div class="bg-purple-50 rounded-lg p-4">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <svg class="w-8 h-8 text-purple-600" fill="currentColor" viewBox="0 0 24 24">
                            <path 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"/>
                        </svg>
                    </div>
                    <div class="mr-3">
                        <p class="text-sm text-purple-600">تاريخ الانضمام</p>
                        <p class="text-sm font-medium text-purple-900">${joinedDate}</p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- ملاحظات الإدارة -->
        ${participant.admin_notes ? `
        <div class="bg-yellow-50 border-r-4 border-yellow-400 p-4">
            <div class="flex">
                <div class="flex-shrink-0">
                    <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
                <div class="mr-3">
                    <h4 class="text-sm font-medium text-yellow-800">ملاحظات الإدارة</h4>
                    <p class="text-sm text-yellow-700 mt-1">${participant.admin_notes}</p>
                </div>
            </div>
        </div>
        ` : ''}
        
        <!-- الإرسالات -->
        <div class="bg-white border rounded-lg">
            <div class="px-6 py-4 border-b">
                <h4 class="text-lg font-medium text-gray-900">الإرسالات</h4>
            </div>
            <div class="divide-y divide-gray-200">
                ${participant.submissions && participant.submissions.length > 0 ? 
                    participant.submissions.map(submission => `
                        <div class="px-6 py-4">
                            <div class="flex items-center justify-between">
                                <div>
                                    <h5 class="text-sm font-medium text-gray-900">${submission.title || 'إرسال #' + submission.id}</h5>
                                    <p class="text-sm text-gray-500">
                                        ${new Date(submission.submitted_at).toLocaleDateString('ar-EG')}
                                    </p>
                                </div>
                                <span class="px-2 py-1 text-xs rounded-full ${
                                    submission.status === 'approved' ? 'bg-green-100 text-green-800' :
                                    submission.status === 'rejected' ? 'bg-red-100 text-red-800' :
                                    'bg-yellow-100 text-yellow-800'
                                }">
                                    ${submission.status === 'approved' ? 'مقبول' :
                                      submission.status === 'rejected' ? 'مرفوض' : 'قيد المراجعة'}
                                </span>
                            </div>
                        </div>
                    `).join('') :
                    `<div class="px-6 py-8 text-center text-gray-500">
                        <svg class="w-12 h-12 mx-auto text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                        </svg>
                        لا توجد إرسالات بعد
                    </div>`
                }
            </div>
        </div>
    `;
}

// معالج إرسال فورم التأهيل
function handleQualifySubmit(e) {
    e.preventDefault();
    
    if (!window.currentParticipantId) {
        showAlert('خطأ في تحديد المشارك', 'error');
        return;
    }
    
    const formData = new FormData(e.target);
    const url = `{{ route('superadmin.competitions.qualify-participant', ['competition' => $competition->id, 'participant' => '__PARTICIPANT_ID__']) }}`.replace('__PARTICIPANT_ID__', window.currentParticipantId);
    
    fetch(url, {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert(data.message, 'success');
            window.closeQualifyModal();
            setTimeout(() => location.reload(), 1000);
        } else {
            showAlert(data.message || 'حدث خطأ', 'error');
        }
    })
    .catch(error => {
        console.error('خطأ في التأهيل:', error);
        showAlert('حدث خطأ في الاتصال', 'error');
    });
}

// معالج إرسال فورم اختيار الفائز
function handleWinnerSubmit(e) {
    e.preventDefault();
    
    if (!window.currentParticipantId) {
        showAlert('خطأ في تحديد المشارك', 'error');
        return;
    }
    
    const formData = new FormData(e.target);
    const url = `{{ route('superadmin.competitions.select-winner', ['competition' => $competition->id, 'participant' => '__PARTICIPANT_ID__']) }}`.replace('__PARTICIPANT_ID__', window.currentParticipantId);
    
    fetch(url, {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert(data.message, 'success');
            window.closeWinnerModal();
            setTimeout(() => location.reload(), 1000);
        } else {
            showAlert(data.message || 'حدث خطأ', 'error');
        }
    })
    .catch(error => {
        console.error('خطأ في اختيار الفائز:', error);
        showAlert('حدث خطأ في الاتصال', 'error');
    });
}

// معالج إرسال فورم الاستبعاد
function handleDisqualifySubmit(e) {
    e.preventDefault();
    
    if (!window.currentParticipantId) {
        showAlert('خطأ في تحديد المشارك', 'error');
        return;
    }
    
    const formData = new FormData(e.target);
    const url = `{{ route('superadmin.competitions.disqualify-participant', ['competition' => $competition->id, 'participant' => '__PARTICIPANT_ID__']) }}`.replace('__PARTICIPANT_ID__', window.currentParticipantId);
    
    fetch(url, {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert(data.message, 'success');
            window.closeDisqualifyModal();
            setTimeout(() => location.reload(), 1000);
        } else {
            showAlert(data.message || 'حدث خطأ', 'error');
        }
    })
    .catch(error => {
        console.error('خطأ في الاستبعاد:', error);
        showAlert('حدث خطأ في الاتصال', 'error');
    });
}

// تصدير البيانات - تعريف عام
window.exportParticipants = function() {
    const url = '{{ route("superadmin.competitions.export-participants", $competition) }}';
    window.location.href = url;
};

// عرض الإشعارات
function showAlert(message, type = 'info') {
    // إنشاء عنصر الإشعار
    const alertDiv = document.createElement('div');
    alertDiv.className = `fixed top-4 right-4 z-50 p-4 rounded-lg shadow-lg max-w-sm transition-all duration-300 transform translate-x-full`;
    
    // تحديد ألوان الإشعار حسب النوع
    const colors = {
        'success': 'bg-green-500 text-white',
        'error': 'bg-red-500 text-white',
        'warning': 'bg-yellow-500 text-white',
        'info': 'bg-blue-500 text-white'
    };
    
    alertDiv.className += ` ${colors[type] || colors.info}`;
    alertDiv.innerHTML = `
        <div class="flex items-center justify-between">
            <span>${message}</span>
            <button onclick="this.parentElement.parentElement.remove()" class="mr-2 text-white hover:text-gray-200">
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                </svg>
            </button>
        </div>
    `;
    
    // إضافة الإشعار للصفحة
    document.body.appendChild(alertDiv);
    
    // إظهار الإشعار بتأثير انزلاق
    setTimeout(() => {
        alertDiv.classList.remove('translate-x-full');
    }, 100);
    
    // إخفاء الإشعار تلقائياً بعد 5 ثوان
    setTimeout(() => {
        if (alertDiv.parentElement) {
            alertDiv.classList.add('translate-x-full');
            setTimeout(() => {
                if (alertDiv.parentElement) {
                    alertDiv.remove();
                }
            }, 300);
        }
    }, 5000);
}

// تحميل البيانات عند تحميل الصفحة
document.addEventListener('DOMContentLoaded', function() {
    loadRanks();
    setupEventListeners();
});

// إغلاق النوافذ المنبثقة عند الضغط خارجها
document.addEventListener('click', function(e) {
    // إغلاق modal التأهيل
    const qualifyModal = document.getElementById('qualifyModal');
    if (qualifyModal && e.target === qualifyModal) {
        window.closeQualifyModal();
    }
    
    // إغلاق modal اختيار الفائز
    const winnerModal = document.getElementById('winnerModal');
    if (winnerModal && e.target === winnerModal) {
        window.closeWinnerModal();
    }
    
    // إغلاق modal الاستبعاد
    const disqualifyModal = document.getElementById('disqualifyModal');
    if (disqualifyModal && e.target === disqualifyModal) {
        window.closeDisqualifyModal();
    }
    
    // إغلاق modal عرض التفاصيل
    const viewModal = document.getElementById('viewParticipantModal');
    if (viewModal && e.target === viewModal) {
        window.closeViewParticipantModal();
    }
});

// إغلاق النوافذ المنبثقة عند الضغط على Escape
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        window.closeQualifyModal();
        window.closeWinnerModal();
        window.closeDisqualifyModal();
        window.closeViewParticipantModal();
    }
});
</script>

@endsection