@extends('layouts.superadmin')

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

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

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

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


    <!-- إحصائيات سريعة -->
    <div class="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>

 {{-- قائمة المؤهلين للفوز - Cards --}}
@if($qualifiedParticipants->count() > 0)
<div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 mb-6">
    <div class="px-4 sm:px-6 py-3 sm:py-4 border-b border-gray-200 dark:border-gray-700">
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
            <div>
                <h3 class="text-base sm:text-lg font-semibold text-gray-900 dark:text-white">المشاركون المؤهلون للفوز</h3>
                <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">يمكنك اختيار الفائزين من هؤلاء المشاركين المؤهلين</p>
            </div>
            <span class="bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300 px-3 py-1 rounded-full text-xs sm:text-sm font-medium">
                {{ $qualifiedParticipants->count() }} مؤهل
            </span>
        </div>
    </div>
    
    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 p-4 sm:p-5">
        @foreach($qualifiedParticipants as $participant)
            <div class="bg-gray-50 dark:bg-gray-700/50 rounded-xl border border-gray-200 dark:border-gray-600 p-4 hover:border-green-300 dark:hover:border-green-700 transition-all">
                {{-- Participant Header --}}
                <div class="flex items-start gap-3 mb-4">
                    <div class="relative flex-shrink-0">
                        <img src="{{ $participant->user->avatar_url }}" 
                             alt="{{ $participant->user->name }}" 
                             class="w-12 h-12 sm:w-14 sm:h-14 rounded-full object-cover border-2 border-gray-300 dark:border-gray-600">
                        <div class="absolute -bottom-1 -right-1 bg-green-500 rounded-full p-1">
                            <svg class="w-3 h-3 sm:w-4 sm:h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M9.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"/>
                            </svg>
                        </div>
                    </div>
                    
                    <div class="flex-1 min-w-0">
                        <h4 class="text-sm sm:text-base font-semibold text-gray-900 dark:text-white truncate">
                            {{ $participant->user->name }}
                        </h4>
                        <p class="text-xs text-gray-500 dark:text-gray-400 truncate">{{ $participant->user->email }}</p>
                    </div>
                </div>
                
                {{-- Participant Info --}}
                <div class="space-y-2 mb-4">
                    <div>
                        <p class="text-xs text-gray-500 dark:text-gray-400">تاريخ التأهيل</p>
                        <p class="text-sm font-medium text-gray-900 dark:text-white">
                            {{ $participant->qualified_at ? $participant->qualified_at->format('Y/m/d H:i') : '-' }}
                        </p>
                    </div>
                    
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-xs text-gray-500 dark:text-gray-400">عدد الإرسالات</p>
                            <span class="inline-flex items-center gap-1 bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400 px-2 py-1 rounded-full text-xs font-medium mt-1">
                                <svg class="w-3 h-3" 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>
                                {{ $participant->submissions_count ?? 0 }}
                            </span>
                        </div>
                    </div>
                    
                    @if($participant->qualifierUser)
                        <div>
                            <p class="text-xs text-gray-500 dark:text-gray-400">المؤهل بواسطة</p>
                            <p class="text-sm font-medium text-gray-900 dark:text-white">{{ $participant->qualifierUser->name }}</p>
                        </div>
                    @endif
                </div>
                
                {{-- Action Button --}}
                <div class="pt-3 border-t border-gray-200 dark:border-gray-600">
                    <button onclick="selectAsWinner({{ $participant->id }})" 
                            class="w-full inline-flex items-center justify-center gap-2 bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition">
                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 2L13.09 8.26L20 9L15 13.74L16.18 20.02L10 16.77L3.82 20.02L5 13.74L0 9L6.91 8.26L10 2Z" clip-rule="evenodd"/>
                        </svg>
                        اختيار كفائز
                    </button>
                </div>
            </div>
        @endforeach
    </div>
</div>
@endif


 {{-- قائمة الفائزين - Cards Grid --}}
<div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700">
    <div class="px-4 sm:px-6 py-3 sm:py-4 border-b border-gray-200 dark:border-gray-700">
        <div class="flex justify-between items-center">
            <h3 class="text-base sm:text-lg font-semibold text-gray-900 dark:text-white">قائمة الفائزين</h3>
            @if($winners->total() > 0)
                <span class="bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300 px-3 py-1 rounded-full text-xs sm:text-sm font-medium">
                    {{ $winners->total() }} فائز
                </span>
            @endif
        </div>
    </div>
    
    @forelse($winners as $winner)
        <div class="p-4 sm:p-5 border-b border-gray-200 dark:border-gray-700 last:border-b-0">
            <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
                <div class="bg-gray-50 dark:bg-gray-700/50 rounded-xl border border-gray-200 dark:border-gray-600 p-4 hover:border-yellow-300 dark:hover:border-yellow-700 transition-all">
                    {{-- Winner Header --}}
                    <div class="flex items-start gap-3 mb-4">
                        <div class="relative flex-shrink-0">
                            <img src="{{ $winner->user->avatar_url }}" 
                                 alt="{{ $winner->user->name }}" 
                                 class="w-12 h-12 sm:w-14 sm:h-14 rounded-full object-cover border-2 border-gray-300 dark:border-gray-600">
                            <div class="absolute -bottom-1 -right-1 bg-yellow-500 rounded-full p-1">
                                <svg class="w-3 h-3 sm:w-4 sm:h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
                                    <path d="M2 8l3.5 3.5a1 1 0 001.4.1l2.6-2.6 2.6 2.6a1 1 0 001.4-.1L18 8l-3.1 8.06A2 2 0 0113 18H7a2 2 0 01-1.9-1.94L2 8zm7-6a2 2 0 11-4 0 2 2 0 014 0zm7 2a2 2 0 11-4 0 2 2 0 014 0zm-7 2a2 2 0 11-4 0 2 2 0 014 0z"/>
                                </svg>
                            </div>
                        </div>
                        
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center gap-2">
                                <h4 class="text-sm sm:text-base font-semibold text-gray-900 dark:text-white truncate">
                                    {{ $winner->user->name }}
                                </h4>
                                <svg class="w-4 h-4 text-yellow-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                    <path d="M2 8l3.5 3.5a1 1 0 001.4.1l2.6-2.6 2.6 2.6a1 1 0 001.4-.1L18 8l-3.1 8.06A2 2 0 0113 18H7a2 2 0 01-1.9-1.94L2 8zm7-6a2 2 0 11-4 0 2 2 0 014 0zm7 2a2 2 0 11-4 0 2 2 0 014 0zm-7 2a2 2 0 11-4 0 2 2 0 014 0z"/>
                                </svg>
                            </div>
                            <p class="text-xs text-gray-500 dark:text-gray-400 truncate">{{ $winner->user->email }}</p>
                        </div>
                    </div>
                    
                    {{-- Winner Info --}}
                    <div class="space-y-3 mb-4">
                        <div>
                            <p class="text-xs text-gray-500 dark:text-gray-400">تاريخ الفوز</p>
                            <p class="text-sm font-medium text-gray-900 dark:text-white">
                                {{ $winner->won_at ? $winner->won_at->format('Y/m/d H:i') : '-' }}
                            </p>
                            @if($winner->won_at)
                                <p class="text-xs text-gray-400 dark:text-gray-500">{{ $winner->won_at->diffForHumans() }}</p>
                            @endif
                        </div>
                        
                        <div>
                            <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">النقاط الممنوحة</p>
                            @if($winner->awarded_points > 0)
                                <span class="inline-flex items-center gap-1 bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400 px-2 py-1 rounded-full text-xs font-medium">
                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                    </svg>
                                    {{ number_format($winner->awarded_points) }}
                                </span>
                            @else
                                <span class="text-xs text-gray-400 dark:text-gray-500">-</span>
                            @endif
                        </div>
                        
                        @if($winner->awardedRank)
                            <div>
                                <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">الرتبة الممنوحة</p>
                                <div class="flex items-center gap-2">
                                    @if($winner->awardedRank->icon)
                                        <span class="text-base">{{ $winner->awardedRank->icon }}</span>
                                    @endif
                                    <span class="bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400 px-2 py-1 rounded-full text-xs font-medium">
                                        {{ $winner->awardedRank->name }}
                                    </span>
                                </div>
                            </div>
                        @endif
                        
                        @if($winner->winnerSelectorUser)
                            <div>
                                <p class="text-xs text-gray-500 dark:text-gray-400">اختاره</p>
                                <p class="text-sm font-medium text-gray-900 dark:text-white">{{ $winner->winnerSelectorUser->name }}</p>
                            </div>
                        @endif
                    </div>
                    
                    {{-- Actions --}}
                    <div class="flex items-center justify-center gap-2 pt-3 border-t border-gray-200 dark:border-gray-600">
                        <button onclick="editWinner({{ $winner->id }})" 
                                class="p-2 text-blue-600 hover:text-blue-700 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors group relative">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                            </svg>
                            <span class="absolute -top-8 left-1/2 transform -translate-x-1/2 px-2 py-1 bg-gray-900 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">تعديل</span>
                        </button>
                        
                        <button onclick="removeWinner({{ $winner->id }})" 
                                class="p-2 text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors group relative">
                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M10 8.586l4.95-4.95a1 1 0 111.414 1.414L11.414 10l4.95 4.95a1 1 0 01-1.414 1.414L10 11.414l-4.95 4.95a1 1 0 01-1.414-1.414L8.586 10l-4.95-4.95A1 1 0 115.05 3.636L10 8.586z" clip-rule="evenodd"/>
                            </svg>
                            <span class="absolute -top-8 left-1/2 transform -translate-x-1/2 px-2 py-1 bg-gray-900 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">إلغاء الفوز</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    @empty
        <div class="p-10 sm:p-16 text-center">
            <svg class="mx-auto h-16 w-16 text-gray-300 dark:text-gray-600 mb-4" fill="currentColor" viewBox="0 0 24 24">
                <path d="M12 2a3 3 0 00-3 3v2H6a2 2 0 00-2 2v2a5 5 0 005 5h1v3H9a1 1 0 000 2h6a1 1 0 000-2h-1v-3h1a5 5 0 005-5V9a2 2 0 00-2-2h-3V5a3 3 0 00-3-3zM8 7V5a2 2 0 114 0v2H8zm9.5 2a.5.5 0 010 1H18v1a3 3 0 01-3 3h-2a3 3 0 01-3-3v-1h-.5a.5.5 0 010-1H17.5z"/>
            </svg>
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">لا يوجد فائزون بعد</h3>
            <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">قم باختيار الفائزين من المشاركين المؤهلين أعلاه</p>
            @if($qualifiedParticipants->count() > 0)
                <button onclick="openSelectWinnerModal()" 
                        class="inline-flex items-center gap-2 bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition">
                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M2 8l3.5 3.5a1 1 0 001.4.1l2.6-2.6 2.6 2.6a1 1 0 001.4-.1L18 8l-3.1 8.06A2 2 0 0113 18H7a2 2 0 01-1.9-1.94L2 8zm7-6a2 2 0 11-4 0 2 2 0 014 0zm7 2a2 2 0 11-4 0 2 2 0 014 0zm-7 2a2 2 0 11-4 0 2 2 0 014 0z"/>
                    </svg>
                    اختيار أول فائز
                </button>
            @endif
        </div>
    @endforelse

    {{-- Pagination --}}
    @if($winners->hasPages())
        <div class="px-4 sm:px-6 py-4 border-t border-gray-200 dark:border-gray-700">
            {{ $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 xmlns="http://www.w3.org/2000/svg" class="text-yellow-600 inline" fill="currentColor" viewBox="0 0 24 24" style="width: 1.25rem; height: 1.25rem;"> <!-- 1.25rem = 20px تقريبا -->
  <path d="M8 2a1 1 0 00-1 1v2H4a2 2 0 00-2 2v2a5 5 0 005 5h1v3H7a1 1 0 000 2h10a1 1 0 000-2h-1v-3h1a5 5 0 005-5V7a2 2 0 00-2-2h-3V3a1 1 0 00-1-1H8zm0 2h8v2H8V4zm3 9a3 3 0 100-6 3 3 0 000 6z"/>
</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">
                        <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-500 focus: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 xmlns="http://www.w3.org/2000/svg" class="text-blue-400 inline w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
  <path fill-rule="evenodd" d="M18 10A8 8 0 11 2 10a8 8 0 0116 0zm-9-3a1 1 0 112 0v1a1 1 0 11-2 0V7zm.998 3.75a.75.75 0 10-1.498 0v4a.75.75 0 001.498 0v-4z" 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">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mr-2 inline" fill="currentColor" viewBox="0 0 24 24">
  <path d="M8 2a1 1 0 00-1 1v2H4a2 2 0 00-2 2v2a5 5 0 005 5h1v3H7a1 1 0 000 2h10a1 1 0 000-2h-1v-3h1a5 5 0 005-5V7a2 2 0 00-2-2h-3V3a1 1 0 00-1-1H8zm0 2h8v2H8V4zm3 9a3 3 0 100-6 3 3 0 000 6z"/>
</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 xmlns="http://www.w3.org/2000/svg" class="text-blue-600 inline" fill="currentColor" viewBox="0 0 24 24" style="width: 1.25rem; height: 1.25rem;">
  <path d="M14.7 4.3a1 1 0 010 1.4l-8.4 8.4a1 1 0 01-.5.3l-3 1a.7.7 0 01-.9-.9l1-3a1 1 0 01.3-.5l8.4-8.4a1 1 0 011.4 0zm4.66-2.3a2.2 2.2 0 013.12 3.13l-1.83 1.83-3.12-3.12 1.83-1.83z"/>
</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">
                        <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">
                      <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mr-2 inline" fill="currentColor" viewBox="0 0 24 24">
  <path d="M17 3H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V7l-4-4zM5 19V5h11.17L19 7.83V19H5z"/>
  <path d="M12 12a3 3 0 100 6 3 3 0 000-6z"/>
</svg>

                                حفظ التعديلات
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

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

// تحميل الرتب
function loadRanks() {
    fetch('{{ route("superadmin.competitions.ranks") }}')
        .then(response => response.json())
        .then(data => {
            ranks = data;
            populateRankSelects();
        })
        .catch(error => {
            console.error('خطأ في تحميل الرتب:', 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>`;
        });
    });
}

// فتح modal اختيار فائز جديد
function openSelectWinnerModal() {
    document.getElementById('selectWinnerModal').classList.remove('hidden');
}

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

// اختيار مشارك كفائز
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');
}

// تعديل فائز
function editWinner(winnerId) {
    currentWinnerId = winnerId;
    
    // جلب بيانات الفائز وملء النموذج
    fetch(`{{ route('superadmin.competitions.participant-details', ['competition' => $competition->id, 'participant' => '__PARTICIPANT_ID__']) }}`.replace('__PARTICIPANT_ID__', winnerId))
        .then(response => 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('فشل في تحميل بيانات الفائز', 'error');
            }
        })
        .catch(error => {
            console.error('خطأ في تحميل بيانات الفائز:', error);
            showAlert('حدث خطأ في تحميل البيانات', 'error');
        });
}

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

// إزالة فائز
function removeWinner(winnerId) {
    if (confirm('هل أنت متأكد من إلغاء فوز هذا المشارك؟\n\nسيتم:\n- إرجاعه لحالة "مؤهل"\n- خصم النقاط من حسابه\n- إزالة الرتبة الممنوحة')) {
        
        // إظهار مؤشر التحميل
        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('superadmin.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'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert(data.message, 'success');
                setTimeout(() => location.reload(), 1500);
            } else {
                showAlert(data.message || 'حدث خطأ في إلغاء الفوز', 'error');
                button.innerHTML = originalHtml;
                button.disabled = false;
            }
        })
        .catch(error => {
            console.error('خطأ في إلغاء الفوز:', error);
            showAlert('حدث خطأ في الاتصال', 'error');
            button.innerHTML = originalHtml;
            button.disabled = false;
        });
    }
}

// عرض تفاصيل فائز
function viewWinnerDetails(winnerId) {
    window.open(`{{ route('superadmin.competitions.participants', $competition) }}#participant-${winnerId}`, '_blank');
}

// معالجة إرسال نموذج اختيار فائز
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('يجب اختيار مشارك', 'error');
        return;
    }
    
    // إظهار مؤشر التحميل
    const submitBtn = e.target.querySelector('button[type="submit"]');
    const originalText = submitBtn.innerHTML;
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>جاري التنفيذ...';
    submitBtn.disabled = true;
    
    fetch(`{{ route('superadmin.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
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert(data.message, 'success');
            closeSelectWinnerModal();
            setTimeout(() => location.reload(), 1500);
        } else {
            showAlert(data.message || 'حدث خطأ', 'error');
        }
    })
    .catch(error => {
        console.error('خطأ في اختيار الفائز:', error);
        showAlert('حدث خطأ في الاتصال', 'error');
    })
    .finally(() => {
        submitBtn.innerHTML = originalText;
        submitBtn.disabled = false;
    });
});

// معالجة إرسال نموذج تعديل فائز
document.getElementById('editWinnerForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    if (!currentWinnerId) {
        showAlert('خطأ في تحديد الفائز', 'error');
        return;
    }
    
    const formData = new FormData(e.target);
    
    // إظهار مؤشر التحميل
    const submitBtn = e.target.querySelector('button[type="submit"]');
    const originalText = submitBtn.innerHTML;
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>جاري الحفظ...';
    submitBtn.disabled = true;
    
    fetch(`{{ route('superadmin.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
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert(data.message, 'success');
            closeEditWinnerModal();
            setTimeout(() => location.reload(), 1500);
        } else {
            showAlert(data.message || 'حدث خطأ', 'error');
        }
    })
    .catch(error => {
        console.error('خطأ في تحديث الفائز:', error);
        showAlert('حدث خطأ في الاتصال', 'error');
    })
    .finally(() => {
        submitBtn.innerHTML = originalText;
        submitBtn.disabled = false;
    });
});

// تصدير قائمة الفائزين
function exportWinners() {
    showAlert('جاري تحضير الملف...', 'info');
    window.location.href = '{{ route("superadmin.competitions.export-winners", $competition) }}';
}

// دالة عرض الإشعارات
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'
    };
    
const icons = {
    'success': `
      <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mr-2 inline text-green-600" fill="currentColor" viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M16.704 5.29a1 1 0 00-1.408-1.418L8.668 10.5 5.704 7.537a1 1 0 10-1.414 1.414l3.664 3.664a1 1 0 001.464-.006l6.286-6.215z" clip-rule="evenodd" />
      </svg>`,
    'error': `
      <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mr-2 inline text-red-600" fill="currentColor" viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.535-10.465a1 1 0 00-1.414-1.414L10 8.586 7.879 6.464a1 1 0 00-1.414 1.414L8.586 10l-2.121 2.121a1 1 0 001.414 1.414L10 11.414l2.121 2.121a1 1 0 001.414-1.414L11.414 10l2.121-2.121z" clip-rule="evenodd" />
      </svg>`,
    'warning': `
      <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mr-2 inline text-yellow-600" fill="currentColor" viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.682-1.36 3.447 0l6.518 11.587c.75 1.335-.213 3.014-1.724 3.014H3.462c-1.51 0-2.473-1.679-1.724-3.014L8.257 3.1zM11 13a1 1 0 10-2 0 1 1 0 002 0zm-1-4a1 1 0 00-.993.883L9 10v2a1 1 0 001.993.117L11 12v-2a1 1 0 00-1-1z" clip-rule="evenodd" />
      </svg>`,
    'info': `
      <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mr-2 inline text-blue-400" fill="currentColor" viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M18 10A8 8 0 11 2 10a8 8 0 0116 0zm-9-3a1 1 0 112 0v1a1 1 0 11-2 0V7zm.998 3.75a.75.75 0 10-1.498 0v4a.75.75 0 001.498 0v-4z" 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 xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 inline" fill="currentColor" viewBox="0 0 24 24">
  <path fill-rule="evenodd" d="M18.364 5.636a1 1 0 010 1.414L13.414 12l4.95 4.95a1 1 0 11-1.414 1.414L12 13.414l-4.95 4.95a1 1 0 11-1.414-1.414L10.586 12l-4.95-4.95a1 1 0 111.414-1.414L12 10.586l4.95-4.95a1 1 0 011.414 0z" 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);
}

// تحميل البيانات عند تحميل الصفحة
document.addEventListener('DOMContentLoaded', function() {
    loadRanks();
    
    // إضافة تأثيرات hover للكروت
    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 = '';
        });
    });
});

// إغلاق الـ modals عند الضغط خارجها
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');
            
            // إعادة تعيين النماذج
            if (modalId === 'selectWinnerModal') {
                document.getElementById('selectWinnerForm').reset();
                currentParticipantId = null;
            } else if (modalId === 'editWinnerModal') {
                document.getElementById('editWinnerForm').reset();
                currentWinnerId = null;
            }
        }
    });
});

// إغلاق الـ modals بمفتاح Escape
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        closeSelectWinnerModal();
        closeEditWinnerModal();
    }
});

// إضافة رسوم متحركة للإحصائيات
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);
        }
    });
}

// تشغيل الرسوم المتحركة عند التحميل
setTimeout(animateStats, 500);
</script>

@endsection