@extends('layouts.moderator')

@section('title', 'إدارة الفائزين: ' . $competition->title)

@section('header')
    <div class="mb-6">
        <nav class="flex" aria-label="Breadcrumb">
            <ol class="flex items-center space-x-4">
                <li>
                    <a href="{{ route('superadmin.dashboard') }}" class="text-gray-500 hover:text-gray-700">
                        لوحة التحكم
                    </a>
                </li>
                <li>
                    <a href="{{ route('superadmin.competitions.index') }}" class="text-gray-500 hover:text-gray-700">
                        المسابقات
                    </a>
                </li>
                <li>
                    <a href="{{ route('superadmin.competitions.show', $competition) }}" class="text-gray-500 hover:text-gray-700">
                        {{ $competition->title }}
                    </a>
                </li>
                <li class="text-gray-900">إدارة الفائزين</li>
            </ol>
        </nav>

        <div class="mt-4 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 class="flex space-x-3">
                <button onclick="openSelectWinnerModal()" class="bg-yellow-600 text-white px-4 py-2 rounded-lg hover:bg-yellow-700">
                    <i class="fas fa-trophy mr-2"></i>
                    اختيار فائز جديد
                </button>
                <button onclick="exportWinners()" class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700">
                    <i class="fas fa-download mr-2"></i>
                    تصدير قائمة الفائزين
                </button>
            </div>
        </div>
    </div>
@endsection

@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">
        <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="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
        <div class="bg-gradient-to-r from-yellow-400 to-yellow-500 rounded-lg shadow p-6 text-white">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
                        <i class="fas fa-trophy text-2xl"></i>
                    </div>
                </div>
                <div class="mr-4">
                    <p class="text-sm opacity-90">إجمالي الفائزين</p>
                    <p class="text-3xl font-bold">{{ $winners->total() }}</p>
                </div>
            </div>
        </div>

        <div class="bg-gradient-to-r from-green-400 to-green-500 rounded-lg shadow p-6 text-white">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
                        <i class="fas fa-star text-2xl"></i>
                    </div>
                </div>
                <div class="mr-4">
                    <p class="text-sm opacity-90">المؤهلون للفوز</p>
                    <p class="text-3xl font-bold">{{ $qualifiedCount }}</p>
                </div>
            </div>
        </div>

        <div class="bg-gradient-to-r from-blue-400 to-blue-500 rounded-lg shadow p-6 text-white">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
                        <i class="fas fa-coins text-2xl"></i>
                    </div>
                </div>
                <div class="mr-4">
                    <p class="text-sm opacity-90">إجمالي النقاط الممنوحة</p>
                    <p class="text-3xl font-bold">{{ number_format($totalPointsAwarded) }}</p>
                </div>
            </div>
        </div>

        <div class="bg-gradient-to-r from-purple-400 to-purple-500 rounded-lg shadow p-6 text-white">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
                        <i class="fas fa-medal text-2xl"></i>
                    </div>
                </div>
                <div class="mr-4">
                    <p class="text-sm opacity-90">الرتب الممنوحة</p>
                    <p class="text-3xl font-bold">{{ $ranksAwarded }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- قائمة المؤهلين للفوز -->
    @if($qualifiedParticipants->count() > 0)
    <div class="bg-white rounded-lg shadow mb-6">
        <div class="p-6 border-b">
            <div class="flex justify-between items-center">
                <div>
                    <h3 class="text-lg font-semibold text-gray-900">المشاركون المؤهلون للفوز</h3>
                    <p class="text-sm text-gray-600">يمكنك اختيار الفائزين من هؤلاء المشاركين المؤهلين</p>
                </div>
                <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">
                    {{ $qualifiedParticipants->count() }} مؤهل
                </span>
            </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>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @foreach($qualifiedParticipants 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-green-100 flex items-center justify-center">
                                            <svg class="w-5 h-5 text-green-600" fill="currentColor" viewBox="0 0 20 20">
                                                <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"/>
                                            </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->qualified_at ? $participant->qualified_at->format('Y/m/d H:i') : '-' }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                            <span class="bg-blue-100 text-blue-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">
                            {{ $participant->qualifierUser ? $participant->qualifierUser->name : '-' }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <button onclick="selectAsWinner({{ $participant->id }})" 
                                    class="bg-yellow-600 text-white px-4 py-2 rounded-md hover:bg-yellow-700 text-sm flex items-center">
                                <svg class="w-4 h-4 ml-1" fill="currentColor" viewBox="0 0 20 20">
                                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                                </svg>
                                اختيار كفائز
                            </button>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @endif

    <!-- قائمة الفائزين الحاليين -->
    <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 text-gray-900">قائمة الفائزين</h3>
                @if($winners->total() > 0)
                    <span class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm font-medium">
                        {{ $winners->total() }} فائز
                    </span>
                @endif
            </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">
                    @forelse($winners as $winner)
                        <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($winner->user->avatar)
                                            <img class="h-10 w-10 rounded-full object-cover" 
                                                 src="{{ asset('storage/' . $winner->user->avatar) }}"
                                                 alt="{{ $winner->user->name }}">
                                        @else
                                            <div class="h-10 w-10 rounded-full bg-gradient-to-r from-yellow-400 to-yellow-600 flex items-center justify-center">
                                                <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
                                                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                                                </svg>
                                            </div>
                                        @endif
                                    </div>
                                    <div class="mr-4">
                                        <div class="text-sm font-medium text-gray-900 flex items-center">
                                            {{ $winner->user->name }}
                                            <svg class="w-4 h-4 text-yellow-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                                            </svg>
                                        </div>
                                        <div class="text-sm text-gray-500">{{ $winner->user->email }}</div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                {{ $winner->won_at ? $winner->won_at->format('Y/m/d H:i') : '-' }}
                                @if($winner->won_at)
                                    <div class="text-xs text-gray-500">{{ $winner->won_at->diffForHumans() }}</div>
                                @endif
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                @if($winner->awarded_points > 0)
                                    <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">
                                        {{ number_format($winner->awarded_points) }} نقطة
                                    </span>
                                @else
                                    <span class="text-gray-400">-</span>
                                @endif
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                @if($winner->awardedRank)
                                    <div class="flex items-center">
                                        @if($winner->awardedRank->icon)
                                            <span class="mr-2 text-lg">{{ $winner->awardedRank->icon }}</span>
                                        @endif
                                        <span class="bg-purple-100 text-purple-800 px-2 py-1 rounded-full text-xs">
                                            {{ $winner->awardedRank->name }}
                                        </span>
                                    </div>
                                @else
                                    <span class="text-gray-400">-</span>
                                @endif
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                {{ $winner->winnerSelectorUser ? $winner->winnerSelectorUser->name : '-' }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <div class="flex space-x-2">
                                    <button onclick="editWinner({{ $winner->id }})" 
                                            class="text-blue-600 hover:text-blue-900 p-2 rounded-full hover:bg-blue-50" 
                                            title="تعديل">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                                        </svg>
                                    </button>
                               
                                    <button onclick="removeWinner({{ $winner->id }})" 
                                            class="text-red-600 hover:text-red-900 p-2 rounded-full hover:bg-red-50" 
                                            title="إلغاء الفوز">
                                        <svg class="w-5 h-5" 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"/>
                                        </svg>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-6 py-12 text-center text-gray-500">
                                <div class="flex flex-col items-center">
                                    <svg class="w-16 h-16 text-gray-300 mb-4" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                                    </svg>
                                    <h3 class="text-lg font-medium text-gray-900 mb-2">لا يوجد فائزون بعد</h3>
                                    <p class="text-gray-500 mb-4">قم باختيار الفائزين من المشاركين المؤهلين أعلاه</p>
                                    @if($qualifiedParticipants->count() > 0)
                                        <button onclick="openSelectWinnerModal()" 
                                                class="bg-yellow-600 text-white px-4 py-2 rounded-lg hover:bg-yellow-700">
                                            <svg class="w-5 h-5 mr-2 inline-block" fill="currentColor" viewBox="0 0 20 20">
                                                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                                            </svg>
                                            اختيار أول فائز
                                        </button>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($winners->hasPages())
            <div class="px-6 py-4 border-t">
                {{ $winners->links() }}
            </div>
        @endif
    </div>

    <!-- Modal اختيار فائز -->
    <div id="selectWinnerModal" 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-lg w-full">
                <div class="p-6">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center mr-3">
                            <svg class="w-6 h-6 text-yellow-600" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                            </svg>
                        </div>
                        <div>
                            <h3 class="text-lg font-semibold text-gray-900">اختيار فائز جديد</h3>
                            <p class="text-sm text-gray-600">اختر مشارك من القائمة وحدد الجوائز</p>
                        </div>
                    </div>
                    <form id="selectWinnerForm">
                        @csrf
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                المشارك المؤهل <span class="text-red-500">*</span>
                            </label>
                            <select name="participant_id" required
                                    class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-yellow-500focus:border-yellow-500">
                                <option value="">اختر مشارك...</option>
                                @foreach($qualifiedParticipants as $participant)
                                    <option value="{{ $participant->id }}">
                                        {{ $participant->user->name }} ({{ $participant->user->email }})
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    النقاط الممنوحة
                                </label>
                                <input type="number" name="awarded_points" min="0" value="100"
                                       class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500"
                                       placeholder="0">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    الرتبة الممنوحة
                                </label>
                                <select name="awarded_rank_id" 
                                        class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500">
                                    <option value="">اختر رتبة...</option>
                                    <!-- سيتم ملؤها عبر JavaScript -->
                                </select>
                            </div>
                        </div>
                        
                        <div class="mb-6">
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                ملاحظات الفوز
                            </label>
                            <textarea name="admin_notes" rows="3" 
                                      class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500"
                                      placeholder="ملاحظات حول سبب اختيار هذا المشارك كفائز..."></textarea>
                        </div>
                        
                        <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
                            <div class="flex">
                                <div class="flex-shrink-0">
                                    <svg class="w-5 h-5 text-blue-400" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
                                    </svg>
                                </div>
                                <div class="mr-3">
                                    <h4 class="text-sm font-medium text-blue-800">ملاحظة هامة</h4>
                                    <p class="text-sm text-blue-700">
                                        سيتم تحديث حالة المشارك إلى "فائز" وإضافة النقاط والرتبة إلى حسابه فوراً.
                                    </p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="flex justify-end space-x-3">
                            <button type="button" onclick="closeSelectWinnerModal()" 
                                    class="px-6 py-2 text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50">
                                إلغاء
                            </button>
                            <button type="submit" 
                                    class="px-6 py-2 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 flex items-center">
                                <svg class="w-5 h-5 ml-2" fill="currentColor" viewBox="0 0 20 20">
                                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                                </svg>
                                تأكيد الفوز
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal تعديل فائز -->
    <div id="editWinnerModal" 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-lg w-full">
                <div class="p-6">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-3">
                            <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                            </svg>
                        </div>
                        <div>
                            <h3 class="text-lg font-semibold text-gray-900">تعديل بيانات الفائز</h3>
                            <p class="text-sm text-gray-600">يمكنك تعديل النقاط والرتبة والملاحظات</p>
                        </div>
                    </div>
                    <form id="editWinnerForm">
                        @csrf
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                            <div>
                                <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 border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    الرتبة الممنوحة
                                </label>
                                <select name="awarded_rank_id" 
                                        class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                    <option value="">اختر رتبة...</option>
                                    <!-- سيتم ملؤها عبر JavaScript -->
                                </select>
                            </div>
                        </div>
                        
                        <div class="mb-6">
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                ملاحظات إضافية
                            </label>
                            <textarea name="admin_notes" rows="3" 
                                      class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                      placeholder="أضف ملاحظة جديدة..."></textarea>
                            <p class="text-xs text-gray-500 mt-1">ستُضاف الملاحظة الجديدة للملاحظات الموجودة</p>
                        </div>
                        
                        <div class="flex justify-end space-x-3">
                            <button type="button" onclick="closeEditWinnerModal()" 
                                    class="px-6 py-2 text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50">
                                إلغاء
                            </button>
                            <button type="submit" 
                                    class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center">
                                <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                </svg>
                                حفظ التعديلات
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

  <script>
    let currentParticipantId = null;
    let currentWinnerId = null;
    let ranks = [];

    // Add meta tag for CSRF token in the layout or in this page
    document.head.appendChild(document.createElement("meta")).setAttribute("name", "csrf-token");
    document.querySelector('meta[name="csrf-token"]').setAttribute("content", "{{ csrf_token() }}");

    // Function to load ranks
    function loadRanks() {
        fetch('{{ route("moderator.competitions.ranks") }}')
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok: ' + response.statusText);
                }
                return response.json();
            })
            .then(data => {
                ranks = data;
                populateRankSelects();
            })
            .catch(error => {
                console.error('Error loading ranks:', error);
                showAlert('Failed to load ranks. Please refresh the page.', 'error');
            });
    }

    function populateRankSelects() {
        const selects = document.querySelectorAll('select[name="awarded_rank_id"]');
        selects.forEach(select => {
            select.innerHTML = '<option value="">اختر رتبة...</option>';
            ranks.forEach(rank => {
                const iconText = rank.icon ? rank.icon + ' ' : '';
                select.innerHTML += `<option value="${rank.id}">${iconText}${rank.name}</option>`;
            });
        });
    }

    // Open winner selection modal
    function openSelectWinnerModal() {
        document.getElementById('selectWinnerModal').classList.remove('hidden');
    }

    function closeSelectWinnerModal() {
        document.getElementById('selectWinnerModal').classList.add('hidden');
        document.getElementById('selectWinnerForm').reset();
        currentParticipantId = null;
    }

    // Select a participant as winner
    function selectAsWinner(participantId) {
        currentParticipantId = participantId;
        const select = document.querySelector('#selectWinnerModal select[name="participant_id"]');
        if (select) {
            select.value = participantId;
        }
        document.getElementById('selectWinnerModal').classList.remove('hidden');
    }

    // Edit winner
    function editWinner(winnerId) {
        currentWinnerId = winnerId;
        
        // Fetch winner details
        fetch(`{{ route('moderator.competitions.participant-details', ['competition' => $competition->id, 'participant' => '__PARTICIPANT_ID__']) }}`.replace('__PARTICIPANT_ID__', winnerId), {
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Accept': 'application/json'
            }
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok: ' + response.status);
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                const form = document.getElementById('editWinnerForm');
                form.querySelector('[name="awarded_points"]').value = data.participant.awarded_points || 0;
                form.querySelector('[name="awarded_rank_id"]').value = data.participant.awarded_rank?.id || '';
                form.querySelector('[name="admin_notes"]').value = '';
                document.getElementById('editWinnerModal').classList.remove('hidden');
            } else {
                showAlert(data.message || 'Failed to load winner data', 'error');
            }
        })
        .catch(error => {
            console.error('Error loading winner data:', error);
            showAlert('An error occurred while loading data', 'error');
        });
    }

    function closeEditWinnerModal() {
        document.getElementById('editWinnerModal').classList.add('hidden');
        document.getElementById('editWinnerForm').reset();
        currentWinnerId = null;
    }

    // Remove winner
    function removeWinner(winnerId) {
        if (confirm('هل أنت متأكد من إلغاء فوز هذا المشارك؟\n\nسيتم:\n- إرجاعه لحالة "مؤهل"\n- خصم النقاط من حسابه\n- إزالة الرتبة الممنوحة')) {
            
            // Show loading indicator
            const button = event.target.closest('button');
            const originalHtml = button.innerHTML;
            button.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
            button.disabled = true;
            
            fetch(`{{ route('moderator.competitions.remove-winner', ['competition' => $competition->id, 'participant' => '__PARTICIPANT_ID__']) }}`.replace('__PARTICIPANT_ID__', winnerId), {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                }
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    showAlert(data.message, 'success');
                    setTimeout(() => location.reload(), 1500);
                } else {
                    showAlert(data.message || 'Error removing winner', 'error');
                    button.innerHTML = originalHtml;
                    button.disabled = false;
                }
            })
            .catch(error => {
                console.error('Error removing winner:', error);
                showAlert('Connection error', 'error');
                button.innerHTML = originalHtml;
                button.disabled = false;
            });
        }
    }

    // Handle select winner form submission
    document.getElementById('selectWinnerForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(e.target);
        const participantId = formData.get('participant_id') || currentParticipantId;
        
        if (!participantId) {
            showAlert('You must select a participant', 'error');
            return;
        }
        
        // Show loading indicator
        const submitBtn = e.target.querySelector('button[type="submit"]');
        const originalText = submitBtn.innerHTML;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Processing...';
        submitBtn.disabled = true;
        
        fetch(`{{ route('moderator.competitions.select-winner', ['competition' => $competition->id, 'participant' => '__PARTICIPANT_ID__']) }}`.replace('__PARTICIPANT_ID__', participantId), {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Accept': 'application/json'
            }
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok: ' + response.status);
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                showAlert(data.message, 'success');
                closeSelectWinnerModal();
                setTimeout(() => location.reload(), 1500);
            } else {
                showAlert(data.message || 'An error occurred', 'error');
            }
        })
        .catch(error => {
            console.error('Error selecting winner:', error);
            showAlert('Connection error', 'error');
        })
        .finally(() => {
            submitBtn.innerHTML = originalText;
            submitBtn.disabled = false;
        });
    });

    // Handle edit winner form submission
    document.getElementById('editWinnerForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        if (!currentWinnerId) {
            showAlert('Error identifying winner', 'error');
            return;
        }
        
        const formData = new FormData(e.target);
        
        // Show loading indicator
        const submitBtn = e.target.querySelector('button[type="submit"]');
        const originalText = submitBtn.innerHTML;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Saving...';
        submitBtn.disabled = true;
        
        fetch(`{{ route('moderator.competitions.update-winner', ['competition' => $competition->id, 'participant' => '__PARTICIPANT_ID__']) }}`.replace('__PARTICIPANT_ID__', currentWinnerId), {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Accept': 'application/json'
            }
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok: ' + response.status);
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                showAlert(data.message, 'success');
                closeEditWinnerModal();
                setTimeout(() => location.reload(), 1500);
            } else {
                showAlert(data.message || 'An error occurred', 'error');
            }
        })
        .catch(error => {
            console.error('Error updating winner:', error);
            showAlert('Connection error', 'error');
        })
        .finally(() => {
            submitBtn.innerHTML = originalText;
            submitBtn.disabled = false;
        });
    });

    // Export winners
    function exportWinners() {
        showAlert('Preparing file...', 'info');
        window.location.href = '{{ route("moderator.competitions.export-winners", $competition) }}';
    }

    // Show notification function
    function showAlert(message, type = 'info') {
        const alertDiv = document.createElement('div');
        alertDiv.className = `fixed top-4 left-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'
        };
        
        const icons = {
            'success': `<svg class="w-5 h-5 ml-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>`,
            'error': `<svg class="w-5 h-5 ml-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg>`,
            'warning': `<svg class="w-5 h-5 ml-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>`,
            'info': `<svg class="w-5 h-5 ml-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/></svg>`
        };
        
        alertDiv.className += ` ${colors[type] || colors.info}`;
        alertDiv.innerHTML = `
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    ${icons[type] || icons.info}
                    <span>${message}</span>
                </div>
                <button onclick="this.parentElement.parentElement.remove()" class="mr-2 text-white hover:text-gray-200">
                    <svg class="w-5 h-5" 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"/>
                    </svg>
                </button>
            </div>
        `;
        
        document.body.appendChild(alertDiv);
        
        setTimeout(() => {
            alertDiv.classList.remove('-translate-x-full');
        }, 100);
        
        setTimeout(() => {
            if (alertDiv.parentElement) {
                alertDiv.classList.add('-translate-x-full');
                setTimeout(() => {
                    if (alertDiv.parentElement) {
                        alertDiv.remove();
                    }
                }, 300);
            }
        }, type === 'error' ? 7000 : 4000);
    }

    // Load data on page load
    document.addEventListener('DOMContentLoaded', function() {
        // Load ranks when page loads
        loadRanks();
        
        // Add hover effects to cards
        const cards = document.querySelectorAll('.hover\\:bg-gray-50');
        cards.forEach(card => {
            card.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-1px)';
                this.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.1)';
            });
            card.addEventListener('mouseleave', function() {
                this.style.transform = 'translateY(0)';
                this.style.boxShadow = '';
            });
        });
    });

    // Close modals when clicking outside
    document.addEventListener('click', function(e) {
        const modals = ['selectWinnerModal', 'editWinnerModal'];
        modals.forEach(modalId => {
            const modal = document.getElementById(modalId);
            if (modal && e.target === modal) {
                modal.classList.add('hidden');
                
                // Reset forms
                if (modalId === 'selectWinnerModal') {
                    document.getElementById('selectWinnerForm').reset();
                    currentParticipantId = null;
                } else if (modalId === 'editWinnerModal') {
                    document.getElementById('editWinnerForm').reset();
                    currentWinnerId = null;
                }
            }
        });
    });

    // Close modals with Escape key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            closeSelectWinnerModal();
            closeEditWinnerModal();
        }
    });

    // Animate statistics
    function animateStats() {
        const statNumbers = document.querySelectorAll('.text-3xl.font-bold');
        statNumbers.forEach(stat => {
            const finalValue = parseInt(stat.textContent.replace(/,/g, ''));
            if (finalValue > 0) {
                let currentValue = 0;
                const increment = Math.ceil(finalValue / 30);
                
                const timer = setInterval(() => {
                    currentValue += increment;
                    if (currentValue >= finalValue) {
                        currentValue = finalValue;
                        clearInterval(timer);
                    }
                    stat.textContent = currentValue.toLocaleString();
                }, 50);
            }
        });
    }

    // Run animations after page load
    setTimeout(animateStats, 500);
</script>
@endsection