@extends('layouts.moderator')

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

@section('content')

<!-- قائمة التنقل -->
<div class="flex space-x-4 mb-6 border-b border-gray-200 pb-4">

    <a href="{{ route('moderator.competitions.index') }}" 
       class="flex items-center px-4 py-2 rounded-lg text-gray-600 hover:bg-gray-100 {{ request()->routeIs('moderator.competitions.index') ? 'bg-yellow-100 text-yellow-700' : '' }}">
        <i class="fas fa-list mr-2"></i>
        العودة للقائمة
    </a>

    <a href="{{ route('moderator.competitions.show', $competition) }}" 
       class="flex items-center px-4 py-2 rounded-lg {{ request()->routeIs('moderator.competitions.show') ? 'bg-yellow-100 text-yellow-700' : 'text-gray-600 hover:bg-gray-100' }}">
        <i class="fas fa-info-circle mr-2"></i>
        نظرة عامة
    </a>
    
    <a href="{{ route('moderator.competitions.participants', $competition) }}" 
       class="flex items-center px-4 py-2 rounded-lg {{ request()->routeIs('moderator.competitions.participants') ? 'bg-yellow-100 text-yellow-700' : 'text-gray-600 hover:bg-gray-100' }}">
        <i class="fas fa-users mr-2"></i>
        المشاركون
        <span class="bg-blue-500 text-white px-2 py-1 rounded-full text-xs mr-2">
            {{ $competition->participants()->count() }}
        </span>
    </a>

    <a href="{{ route('moderator.competitions.submissions', $competition) }}" 
       class="flex items-center px-4 py-2 rounded-lg {{ request()->routeIs('moderator.competitions.submissions') ? 'bg-yellow-100 text-yellow-700' : 'text-gray-600 hover:bg-gray-100' }}">
        <i class="fas fa-paper-plane mr-2"></i>
        الإرسالات
        <span class="bg-purple-500 text-white px-2 py-1 rounded-full text-xs mr-2">
            {{ $competition->submissions()->count() }}
        </span>
    </a>
    
    <a href="{{ route('moderator.competitions.winners', $competition) }}" 
       class="flex items-center px-4 py-2 rounded-lg {{ request()->routeIs('moderator.competitions.winners') ? 'bg-yellow-100 text-yellow-700' : 'text-gray-600 hover:bg-gray-100' }}">
        <i class="fas fa-trophy mr-2"></i>
        الفائزون
        @php($winnersCount = $competition->participants()->where('status', 'winner')->count())
        @if($winnersCount > 0)
            <span class="bg-yellow-500 text-white px-2 py-1 rounded-full text-xs mr-2">
                {{ $winnersCount }}
            </span>
        @endif
    </a>
</div>

<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>

<!-- قائمة المشاركين -->
<div class="bg-white rounded-lg shadow">
    <div class="p-6 border-b">
        <div class="flex justify-between items-center">
            <h3 class="text-lg font-semibold">قائمة المشاركين</h3>
            <div class="flex space-x-2">
                <button onclick="exportParticipants()" 
                        class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 text-sm">
                    <i class="fas fa-download mr-1"></i>
                    تصدير البيانات
                </button>
            </div>
        </div>
    </div>
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">
                        المشارك
                    </th>
                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">
                        تاريخ الانضمام
                    </th>
                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">
                        الحالة
                    </th>
                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">
                        الإرسالات
                    </th>
                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">
                        النقاط الممنوحة
                    </th>
                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">
                        الإجراءات
                    </th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                @if($participants && $participants->count() > 0)
                    @foreach($participants as $participant)
                        <tr class="hover:bg-gray-50">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="h-10 w-10 flex-shrink-0">
                                        @if($participant->user->avatar)
                                            <img class="h-10 w-10 rounded-full object-cover" 
                                                 src="{{ asset('storage/' . $participant->user->avatar) }}"
                                                 alt="{{ $participant->user->name }}">
                                        @else
                                            <div class="h-10 w-10 rounded-full bg-gray-300 flex items-center justify-center">
                                                <svg class="w-6 h-6 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>
                                        @endif
                                    </div>
                                    <div class="mr-4">
                                        <div class="text-sm font-medium text-gray-900">
                                            {{ $participant->user->name }}
                                        </div>
                                        <div class="text-sm text-gray-500">
                                            {{ $participant->user->email }}
                                        </div>
                                    </div>
                                </div>
                            </td>
                            
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                {{ $participant->joined_at->format('Y/m/d H:i') }}
                            </td>
                            
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 py-1 text-xs font-semibold rounded-full {{ $participant->status_badge_class }}">
                                    {{ $participant->status_text }}
                                </span>
                            </td>
                            
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                <span class="bg-gray-100 text-gray-800 px-2 py-1 rounded-full text-xs">
                                    {{ $participant->submissions_count ?? 0 }}
                                </span>
                            </td>
                            
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                @if($participant->awarded_points > 0)
                                    <span class="text-green-600 font-semibold">
                                        {{ $participant->awarded_points }}
                                    </span>
                                @else
                                    <span class="text-gray-400">-</span>
                                @endif
                            </td>
                            
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <div class="flex space-x-2">
                                    <!-- زر عرض التفاصيل -->
                                    <button onclick="viewParticipant({{ $participant->id }})" 
                                            class="text-blue-600 hover:text-blue-900" title="عرض التفاصيل">
                                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                            <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
                                        </svg>
                                    </button>

                                    @if($participant->status === 'participating')
                                        <button onclick="qualifyParticipant({{ $participant->id }})" 
                                                class="text-green-600 hover:text-green-900" title="تأهيل">
                                            <svg class="w-5 h-5" 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>
                                        </button>
                                        <button onclick="disqualifyParticipant({{ $participant->id }})" 
                                                class="text-red-600 hover:text-red-900" title="استبعاد">
                                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                                <path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/>
                                            </svg>
                                        </button>
                                    @elseif($participant->status === 'qualified')
                                        <button onclick="selectWinner({{ $participant->id }})" 
                                                class="text-yellow-600 hover:text-yellow-900" title="اختيار فائز">
                                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                                <path d="M7 4V2c0-1.1.9-2 2-2h6c1.1 0 2 .9 2 2v2h3c1.1 0 2 .9 2 2v2.5c0 1.7-1.3 3-3 3h-.8c-.3 2.1-1.7 3.8-3.7 4.3L15 20v2H9v-2l.5-4.2C7.5 15.3 6.1 13.6 5.8 11.5H5c-1.7 0-3-1.3-3-3V6c0-1.1.9-2 2-2h3zm0 2H4v2.5c0 .6.4 1 1 1s1-.4 1-1V6zm12 0v2.5c0 .6.4 1 1 1s1-.4 1-1V6h-2z"/>
                                            </svg>
                                        </button>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @endforeach
                @else
                    <tr>
                        <td colspan="6" class="px-6 py-4 text-center text-gray-500">
                            لا توجد مشاركات بعد
                        </td>
                    </tr>
                @endif
            </tbody>
        </table>
    </div>

    @if($participants->hasPages())
        <div class="px-6 py-4 border-t">
            {{ $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>

<!-- 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.currentParticipantId = null;
window.ranks = [];

// تحديث دالة عرض تفاصيل المشارك
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');
    
    // إنشاء URL للمشرف
    const url = `{{ route('moderator.competitions.show', $competition) }}/participants/${participantId}/details`;
    
    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;
}

// دالة عرض تفاصيل المشارك
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 participant-avatar" 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 status-badge ${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 participant-stat-card">
                <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 stat-number">${participant.awarded_points || 0}</p>
                    </div>
                </div>
            </div>
            
            <div class="bg-green-50 rounded-lg p-4 participant-stat-card">
                <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 stat-number">${participant.approved_submissions_count || 0}</p>
                    </div>
                </div>
            </div>
            
            <div class="bg-purple-50 rounded-lg p-4 participant-stat-card">
                <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 stat-number">${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="submissions-list divide-y divide-gray-200">
                ${participant.submissions && participant.submissions.length > 0 ? 
                    participant.submissions.map(submission => `
                        <div class="px-6 py-4 submission-item">
                            <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 loadRanks() {
    fetch('{{ route("moderator.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("moderator.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.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>
        `;
    }
};

// معالج إرسال فوروم التأهيل
function handleQualifySubmit(e) {
    e.preventDefault();
    
    if (!window.currentParticipantId) {
        showAlert('خطأ في تحديد المشارك', 'error');
        return;
    }
    
    const formData = new FormData(e.target);
    const url = `{{ route('moderator.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('moderator.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('moderator.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("moderator.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