@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('moderator.dashboard') }}" class="text-gray-500 hover:text-gray-700">
                        لوحة التحكم
                    </a>
                </li>
                <li>
                    <a href="{{ route('moderator.competitions.index') }}" class="text-gray-500 hover:text-gray-700">
                        المسابقات
                    </a>
                </li>
                <li>
                    <a href="{{ route('moderator.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="exportSubmissions()" class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700">
                    <svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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"></path>
                    </svg>
                    تصدير الإرسالات
                </button>
                <button onclick="toggleBulkActions()" class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700">
                    <svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
                    </svg>
                    إجراءات جماعية
                </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">
                {{ $navigationStats['participantsCount'] ?? 0 }}
            </span>
        </a>

        <a href="{{ route('moderator.competitions.submissions', $competition) }}" 
           class="flex items-center px-4 py-2 rounded-lg bg-yellow-100 text-yellow-700">
            <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">
                {{ $navigationStats['submissionsCount'] ?? 0 }}
            </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>
            الفائزون
            @if(($navigationStats['winnersCount'] ?? 0) > 0)
                <span class="bg-yellow-500 text-white px-2 py-1 rounded-full text-xs mr-2">
                    {{ $navigationStats['winnersCount'] }}
                </span>
            @endif
        </a>
    </div>

    <!-- إحصائيات سريعة -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
                        <svg class="w-5 h-5 text-blue-600" 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"></path>
                        </svg>
                    </div>
                </div>
                <div class="mr-4">
                    <p class="text-sm text-gray-600">إجمالي الإرسالات</p>
                    <p class="text-2xl font-bold text-gray-900">{{ $submissions->total() }}</p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-8 h-8 bg-yellow-100 rounded-full flex items-center justify-center">
                        <svg class="w-5 h-5 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                </div>
                <div class="mr-4">
                    <p class="text-sm text-gray-600">في انتظار المراجعة</p>
                    <p class="text-2xl font-bold text-gray-900">
                        {{ $submissions->where('status', 'pending')->count() }}
                    </p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
                        <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                </div>
                <div class="mr-4">
                    <p class="text-sm text-gray-600">المعتمدة</p>
                    <p class="text-2xl font-bold text-gray-900">
                        {{ $submissions->where('status', 'approved')->count() }}
                    </p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center">
                        <svg class="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                </div>
                <div class="mr-4">
                    <p class="text-sm text-gray-600">المرفوضة</p>
                    <p class="text-2xl font-bold text-gray-900">
                        {{ $submissions->where('status', 'rejected')->count() }}
                    </p>
                </div>
            </div>
        </div>
    </div>

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

                <!-- فلتر الحالة -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">الحالة</label>
                    <select name="status" class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500">
                        <option value="">جميع الحالات</option>
                        <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>
                            في انتظار المراجعة
                        </option>
                        <option value="approved" {{ request('status') == 'approved' ? 'selected' : '' }}>
                            معتمد
                        </option>
                        <option value="rejected" {{ request('status') == 'rejected' ? 'selected' : '' }}>
                            مرفوض
                        </option>
                    </select>
                </div>

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

                <!-- فلتر تاريخ الإرسال -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">من تاريخ</label>
                    <input type="date" name="date_from" value="{{ request('date_from') }}"
                           class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500">
                </div>

                <div class="flex items-end">
                    <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 w-full">
                        <svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                        </svg>
                        فلترة
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- أزرار الإجراءات الجماعية -->
    <div class="bg-white rounded-lg shadow mb-6" id="bulkActionsPanel" style="display: none;">
        <div class="p-6">
            <div class="flex justify-between items-center">
                <div class="flex items-center space-x-3">
                    <input type="checkbox" id="selectAll" class="rounded">
                    <label for="selectAll" class="text-sm font-medium text-gray-700">
                        تحديد الكل (<span id="selectedCount">0</span>)
                    </label>
                </div>
                <div class="flex space-x-2">
                    <button onclick="bulkApprove()" class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700">
                        <svg class="w-4 h-4 inline mr-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"></path>
                        </svg>
                        اعتماد المحدد
                    </button>
                    <button onclick="bulkReject()" class="bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700">
                        <svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                        رفض المحدد
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- جدول الإرسالات -->
    <div class="bg-white rounded-lg shadow">
        <div class="p-6 border-b flex justify-between items-center">
            <h3 class="text-lg font-semibold">قائمة الإرسالات ({{ $submissions->total() }})</h3>
            <div class="flex space-x-2">
                <button onclick="toggleBulkActions()" class="text-blue-600 hover:text-blue-700 text-sm">
                    <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
                    </svg>
                    تفعيل التحديد المتعدد
                </button>
                <button onclick="refreshSubmissions()" class="text-gray-600 hover:text-gray-700 text-sm">
                    <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                    </svg>
                    تحديث
                </button>
            </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="w-12 px-6 py-3" id="bulkSelectHeader" style="display: none;">
                            <input type="checkbox" id="selectAllTable" class="rounded">
                        </th>
                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                            المرسل
                        </th>
                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                            تاريخ الإرسال
                        </th>
                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                            الوصف
                        </th>
                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                            المرفقات
                        </th>
                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                            الحالة
                        </th>
                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                            المراجع
                        </th>
                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                            الإجراءات
                        </th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @forelse($submissions as $submission)
                        <tr class="hover:bg-gray-50 submission-row" data-submission-id="{{ $submission->id }}">
                            <td class="w-12 px-6 py-4 bulk-select-cell" style="display: none;">
                                <input type="checkbox" class="submission-checkbox rounded" 
                                       value="{{ $submission->id }}" data-status="{{ $submission->status }}">
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="h-10 w-10 flex-shrink-0">
                                        @if($submission->user->avatar)
                                            <img class="h-10 w-10 rounded-full object-cover" 
                                                 src="{{ asset('storage/' . $submission->user->avatar) }}"
                                                 alt="{{ $submission->user->name }}">
                                        @else
                                            <div class="h-10 w-10 rounded-full bg-gray-300 flex items-center justify-center">
                                                <span class="text-sm font-medium text-gray-700">
                                                    {{ strtoupper(substr($submission->user->name, 0, 2)) }}
                                                </span>
                                            </div>
                                        @endif
                                    </div>
                                    <div class="mr-4">
                                        <div class="text-sm font-medium text-gray-900">
                                            {{ $submission->user->name }}
                                        </div>
                                        <div class="text-sm text-gray-500">
                                            {{ $submission->user->email }}
                                        </div>
                                        @if($submission->user->roles->first())
                                        <div class="text-xs text-gray-400">
                                            {{ $submission->user->roles->first()->display_name ?? $submission->user->roles->first()->name }}
                                        </div>
                                        @endif
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-900">
                                    {{ $submission->submitted_at->format('Y/m/d') }}
                                </div>
                                <div class="text-xs text-gray-500">
                                    {{ $submission->submitted_at->format('H:i') }}
                                </div>
                                <div class="text-xs text-gray-400">
                                    {{ $submission->submitted_at->diffForHumans() }}
                                </div>
                            </td>
                            <td class="px-6 py-4">
                                <div class="text-sm text-gray-900 max-w-xs">
                                    @if($submission->description)
                                        <div class="truncate" title="{{ $submission->description }}">
                                            {{ Str::limit($submission->description, 50) }}
                                        </div>
                                    @else
                                        <span class="text-gray-400 italic">لا يوجد وصف</span>
                                    @endif
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                @if($submission->has_attachments)
                                    <div class="flex items-center">
                                        <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs font-medium">
                                            {{ $submission->attachment_count }} مرفق
                                        </span>
                                        <button onclick="previewAttachments({{ $submission->id }})" 
                                                class="mr-2 text-blue-600 hover:text-blue-900 p-1 rounded" title="معاينة المرفقات">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                                            </svg>
                                        </button>
                                    </div>
                                @else
                                    <span class="text-gray-400">-</span>
                                @endif
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 py-1 text-xs font-semibold rounded-full {{ $submission->status_badge_class }}">
                                    {{ $submission->status_text }}
                                </span>
                                @if($submission->reviewed_at)
                                <div class="text-xs text-gray-500 mt-1">
                                    {{ $submission->reviewed_at->format('Y/m/d H:i') }}
                                </div>
                                @endif
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                @if($submission->reviewer)
                                    <div class="text-sm text-gray-900">{{ $submission->reviewer->name }}</div>
                                    <div class="text-xs text-gray-500">{{ $submission->reviewer->roles->first()->display_name ?? 'مراجع' }}</div>
                                @else
                                    <span class="text-gray-400">-</span>
                                @endif
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <div class="flex items-center space-x-2">
                                    <!-- عرض التفاصيل -->
                                    <button onclick="viewSubmissionDetails({{ $submission->id }})" 
                                            class="text-blue-600 hover:text-blue-900 p-1 rounded-md 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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                                                  d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                                        </svg>
                                    </button>
                                    
                                    @if($submission->status === 'pending')
                                        <!-- اعتماد -->
                                        <button onclick="approveSubmission({{ $submission->id }})" 
                                                class="text-green-600 hover:text-green-900 p-1 rounded-md hover:bg-green-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="M5 13l4 4L19 7"></path>
                                            </svg>
                                        </button>
                                        
                                        <!-- رفض -->
                                        <button onclick="rejectSubmission({{ $submission->id }})" 
                                                class="text-red-600 hover:text-red-900 p-1 rounded-md hover:bg-red-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="M6 18L18 6M6 6l12 12"></path>
                                            </svg>
                                        </button>
                                    @endif
                                    
                                    @if($submission->has_attachments)
                                        <!-- تحميل المرفقات -->
                                        <div class="relative group">
                                            <button onclick="showAttachmentsMenu({{ $submission->id }})" 
                                                    class="text-purple-600 hover:text-purple-900 p-1 rounded-md hover:bg-purple-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="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"></path>
                                                </svg>
                                            </button>
                                        </div>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="px-6 py-12 text-center">
                                <div class="flex flex-col items-center">
                                    <svg class="w-16 h-16 text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
                                    </svg>
                                    <h3 class="text-lg font-medium text-gray-900 mb-2">لا توجد إرسالات</h3>
                                    <p class="text-gray-500">لم يتم إرسال أي مشاركات في هذه المسابقة بعد</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- الترقيم -->
        @if($submissions->hasPages())
            <div class="bg-white px-4 py-3 border-t border-gray-200 sm:px-6">
                <div class="flex justify-between items-center">
                    <div class="text-sm text-gray-700">
                        عرض {{ $submissions->firstItem() }} إلى {{ $submissions->lastItem() }} 
                        من أصل {{ $submissions->total() }} نتيجة
                    </div>
                    {{ $submissions->appends(request()->query())->links() }}
                </div>
            </div>
        @endif
    </div>

    <!-- Modal اعتماد الإرسال -->
    <div id="approveModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden z-50">
        <div class="flex items-center justify-center min-h-screen p-4">
            <div class="bg-white rounded-lg shadow-xl max-w-md w-full">
                <div class="p-6">
                    <div class="flex items-center mb-4">
                        <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3">
                            <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                        </div>
                        <h3 class="text-lg font-semibold text-gray-900">اعتماد الإرسال</h3>
                    </div>
                    <form id="approveForm">
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                تعليق إضافي (اختياري)
                            </label>
                            <textarea name="admin_feedback" rows="3" 
                                      class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-green-500 focus:border-green-500"
                                      placeholder="تعليق على اعتماد الإرسال..."></textarea>
                        </div>
                        <div class="flex justify-end space-x-3">
                            <button type="button" onclick="closeApproveModal()" 
                                    class="px-4 py-2 text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50">
                                إلغاء
                            </button>
                            <button type="submit" 
                                    class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700">
                                <svg class="w-4 h-4 inline mr-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"></path>
                                </svg>
                                اعتماد الإرسال
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal رفض الإرسال -->
    <div id="rejectModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden z-50">
        <div class="flex items-center justify-center min-h-screen p-4">
            <div class="bg-white rounded-lg shadow-xl max-w-md w-full">
                <div class="p-6">
                    <div class="flex items-center mb-4">
                        <div class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center mr-3">
                            <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                            </svg>
                        </div>
                        <h3 class="text-lg font-semibold text-gray-900">رفض الإرسال</h3>
                    </div>
                    <form id="rejectForm">
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                سبب الرفض <span class="text-red-500">*</span>
                            </label>
                            <textarea name="admin_feedback" rows="3" required
                                      class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-red-500 focus:border-red-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="closeRejectModal()" 
                                    class="px-4 py-2 text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50">
                                إلغاء
                            </button>
                            <button type="submit" 
                                    class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700">
                                <svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                                </svg>
                                رفض الإرسال
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal عرض تفاصيل الإرسال -->
    <div id="viewModal" 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-4xl w-full max-h-screen overflow-y-auto">
                <div class="p-6">
                    <div class="flex justify-between items-center mb-6">
                        <h3 class="text-xl font-semibold text-gray-900">تفاصيل الإرسال</h3>
                        <button onclick="closeViewModal()" class="text-gray-400 hover:text-gray-600">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                            </svg>
                        </button>
                    </div>
                    <div id="submissionDetails">
                        <!-- سيتم ملؤها عبر JavaScript -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal المرفقات -->
    <div id="attachmentsModal" 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-4xl w-full max-h-screen overflow-y-auto">
                <div class="p-6">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="text-lg font-semibold">مرفقات الإرسال</h3>
                        <button onclick="closeAttachmentsModal()" class="text-gray-400 hover:text-gray-600">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                            </svg>
                        </button>
                    </div>
                    <div id="attachmentsList">
                        <!-- سيتم ملؤها عبر JavaScript -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal الإجراءات الجماعية -->
    <div id="bulkActionModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden z-50">
        <div class="flex items-center justify-center min-h-screen p-4">
            <div class="bg-white rounded-lg shadow-xl max-w-md w-full">
                <div class="p-6">
                    <h3 class="text-lg font-semibold mb-4" id="bulkActionTitle">إجراء جماعي</h3>
                    <form id="bulkActionForm">
                        <div class="mb-4">
                            <p class="text-sm text-gray-600 mb-3">
                                سيتم تطبيق هذا الإجراء على <span id="bulkActionCount">0</span> إرسال
                            </p>
                            <div class="mb-4" id="bulkFeedbackDiv" style="display: none;">
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    تعليق <span class="text-red-500" id="bulkFeedbackRequired">*</span>
                                </label>
                                <textarea name="bulk_feedback" rows="3" 
                                          class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500"
                                          placeholder="أدخل تعليقاً..."></textarea>
                            </div>
                        </div>
                        <div class="flex justify-end space-x-3">
                            <button type="button" onclick="closeBulkActionModal()" 
                                    class="px-4 py-2 text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50">
                                إلغاء
                            </button>
                            <button type="submit" id="bulkActionSubmit"
                                    class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                                تنفيذ
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
    <script>
    // متغيرات عامة
    let currentSubmissionId = null;
    let submissions = @json($submissions->items());
    let selectedSubmissions = [];
    let bulkMode = false;
    let currentBulkAction = '';

    // تحميل الصفحة
    document.addEventListener('DOMContentLoaded', function() {
        initializeEventListeners();
        updateBulkActionsVisibility();
    });

    function initializeEventListeners() {
        // أحداث التحديد الجماعي
        const selectAll = document.getElementById('selectAll');
        const selectAllTable = document.getElementById('selectAllTable');
        
        if (selectAll) {
            selectAll.addEventListener('change', toggleAllSelections);
        }
        if (selectAllTable) {
            selectAllTable.addEventListener('change', toggleAllSelections);
        }
        
        // أحداث النماذج
        const approveForm = document.getElementById('approveForm');
        const rejectForm = document.getElementById('rejectForm');
        const bulkActionForm = document.getElementById('bulkActionForm');
        
        if (approveForm) {
            approveForm.addEventListener('submit', handleApprove);
        }
        if (rejectForm) {
            rejectForm.addEventListener('submit', handleReject);
        }
        if (bulkActionForm) {
            bulkActionForm.addEventListener('submit', handleBulkAction);
        }
        
        // أحداث checkboxes الإرسالات
        document.querySelectorAll('.submission-checkbox').forEach(checkbox => {
            checkbox.addEventListener('change', updateSelectedSubmissions);
        });
    }

    // ===== وظائف التحديد الجماعي =====
    function toggleBulkActions() {
        bulkMode = !bulkMode;
        
        const bulkActionsPanel = document.getElementById('bulkActionsPanel');
        const bulkSelectHeader = document.getElementById('bulkSelectHeader');
        const bulkSelectCells = document.querySelectorAll('.bulk-select-cell');
        
        if (bulkMode) {
            if (bulkActionsPanel) bulkActionsPanel.style.display = 'block';
            if (bulkSelectHeader) bulkSelectHeader.style.display = 'table-cell';
            bulkSelectCells.forEach(cell => {
                cell.style.display = 'table-cell';
            });
        } else {
            if (bulkActionsPanel) bulkActionsPanel.style.display = 'none';
            if (bulkSelectHeader) bulkSelectHeader.style.display = 'none';
            bulkSelectCells.forEach(cell => {
                cell.style.display = 'none';
            });
            clearAllSelections();
        }
    }

    function toggleAllSelections() {
        const selectAll = document.getElementById('selectAll');
        const selectAllTable = document.getElementById('selectAllTable');
        const isChecked = selectAll ? selectAll.checked : (selectAllTable ? selectAllTable.checked : false);
        
        document.querySelectorAll('.submission-checkbox').forEach(checkbox => {
            checkbox.checked = isChecked;
        });
        
        if (selectAll && selectAllTable) {
            selectAll.checked = isChecked;
            selectAllTable.checked = isChecked;
        }
        
        updateSelectedSubmissions();
    }

    function updateSelectedSubmissions() {
        selectedSubmissions = [];
        document.querySelectorAll('.submission-checkbox:checked').forEach(checkbox => {
            selectedSubmissions.push({
                id: parseInt(checkbox.value),
                status: checkbox.dataset.status
            });
        });
        
        const selectedCountElement = document.getElementById('selectedCount');
        if (selectedCountElement) {
            selectedCountElement.textContent = selectedSubmissions.length;
        }
        updateBulkActionsVisibility();
    }

    function clearAllSelections() {
        document.querySelectorAll('.submission-checkbox').forEach(checkbox => {
            checkbox.checked = false;
        });
        
        const selectAll = document.getElementById('selectAll');
        const selectAllTable = document.getElementById('selectAllTable');
        if (selectAll) selectAll.checked = false;
        if (selectAllTable) selectAllTable.checked = false;
        
        selectedSubmissions = [];
        const selectedCountElement = document.getElementById('selectedCount');
        if (selectedCountElement) {
            selectedCountElement.textContent = '0';
        }
        updateBulkActionsVisibility();
    }

    function updateBulkActionsVisibility() {
        const pendingSelected = selectedSubmissions.filter(s => s.status === 'pending').length;
        
        const approveBtn = document.querySelector('[onclick="bulkApprove()"]');
        const rejectBtn = document.querySelector('[onclick="bulkReject()"]');
        
        if (approveBtn) approveBtn.style.display = pendingSelected > 0 ? 'inline-block' : 'none';
        if (rejectBtn) rejectBtn.style.display = pendingSelected > 0 ? 'inline-block' : 'none';
    }

    // ===== وظائف الإرسالات الفردية =====
    function approveSubmission(submissionId) {
        currentSubmissionId = submissionId;
        const modal = document.getElementById('approveModal');
        if (modal) {
            modal.classList.remove('hidden');
        }
    }

    function closeApproveModal() {
        const modal = document.getElementById('approveModal');
        const form = document.getElementById('approveForm');
        
        if (modal) modal.classList.add('hidden');
        if (form) form.reset();
        currentSubmissionId = null;
    }

    function rejectSubmission(submissionId) {
        currentSubmissionId = submissionId;
        const modal = document.getElementById('rejectModal');
        if (modal) {
            modal.classList.remove('hidden');
        }
    }

    function closeRejectModal() {
        const modal = document.getElementById('rejectModal');
        const form = document.getElementById('rejectForm');
        
        if (modal) modal.classList.add('hidden');
        if (form) form.reset();
        currentSubmissionId = null;
    }

    function handleApprove(e) {
        e.preventDefault();
        
        if (!currentSubmissionId) {
            showNotification('خطأ: لم يتم تحديد الإرسال', 'error');
            return;
        }
        
        const formData = new FormData(e.target);
        const csrfToken = document.querySelector('meta[name="csrf-token"]');
        
        if (!csrfToken) {
            showNotification('خطأ في CSRF Token', 'error');
            return;
        }
        
        const submitBtn = e.target.querySelector('button[type="submit"]');
        const originalText = submitBtn.innerHTML;
        submitBtn.innerHTML = 'جاري الاعتماد...';
        submitBtn.disabled = true;
        
        fetch(`/moderator/competitions/approve-submission/${currentSubmissionId}`, {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRF-TOKEN': csrfToken.content
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showNotification(data.message, 'success');
                closeApproveModal();
                setTimeout(() => location.reload(), 1000);
            } else {
                showNotification(data.message || 'حدث خطأ', 'error');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showNotification('حدث خطأ في الاتصال', 'error');
        })
        .finally(() => {
            submitBtn.innerHTML = originalText;
            submitBtn.disabled = false;
        });
    }

    function handleReject(e) {
        e.preventDefault();
        
        if (!currentSubmissionId) {
            showNotification('خطأ: لم يتم تحديد الإرسال', 'error');
            return;
        }
        
        const formData = new FormData(e.target);
        const csrfToken = document.querySelector('meta[name="csrf-token"]');
        
        if (!csrfToken) {
            showNotification('خطأ في CSRF Token', 'error');
            return;
        }
        
        const feedback = formData.get('admin_feedback');
        if (!feedback || feedback.trim() === '') {
            showNotification('يجب إدخال سبب الرفض', 'error');
            return;
        }
        
        const submitBtn = e.target.querySelector('button[type="submit"]');
        const originalText = submitBtn.innerHTML;
        submitBtn.innerHTML = 'جاري الرفض...';
        submitBtn.disabled = true;
        
        fetch(`/moderator/competitions/reject-submission/${currentSubmissionId}`, {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRF-TOKEN': csrfToken.content
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showNotification(data.message, 'success');
                closeRejectModal();
                setTimeout(() => location.reload(), 1000);
            } else {
                showNotification(data.message || 'حدث خطأ', 'error');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showNotification('حدث خطأ في الاتصال', 'error');
        })
        .finally(() => {
            submitBtn.innerHTML = originalText;
            submitBtn.disabled = false;
        });
    }

    // ===== وظائف الإجراءات الجماعية =====
    function bulkApprove() {
        const pendingSubmissions = selectedSubmissions.filter(s => s.status === 'pending');
        if (pendingSubmissions.length === 0) {
            showNotification('لا توجد إرسالات قابلة للاعتماد', 'warning');
            return;
        }
        
        currentBulkAction = 'approve';
        
        const modal = document.getElementById('bulkActionModal');
        const title = document.getElementById('bulkActionTitle');
        const count = document.getElementById('bulkActionCount');
        const feedbackDiv = document.getElementById('bulkFeedbackDiv');
        const feedbackRequired = document.getElementById('bulkFeedbackRequired');
        const feedbackTextarea = document.querySelector('[name="bulk_feedback"]');
        const submitBtn = document.getElementById('bulkActionSubmit');
        
        if (title) title.textContent = 'اعتماد إرسالات متعددة';
        if (count) count.textContent = pendingSubmissions.length;
        if (feedbackDiv) feedbackDiv.style.display = 'block';
        if (feedbackRequired) feedbackRequired.style.display = 'none';
        if (feedbackTextarea) {
            feedbackTextarea.placeholder = 'تعليق على الاعتماد (اختياري)';
            feedbackTextarea.required = false;
        }
        
        if (submitBtn) {
            submitBtn.className = 'px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700';
            submitBtn.innerHTML = 'اعتماد المحدد';
        }
        
        if (modal) modal.classList.remove('hidden');
    }

    function bulkReject() {
        const pendingSubmissions = selectedSubmissions.filter(s => s.status === 'pending');
        if (pendingSubmissions.length === 0) {
            showNotification('لا توجد إرسالات قابلة للرفض', 'warning');
            return;
        }
        
        currentBulkAction = 'reject';
        
        const modal = document.getElementById('bulkActionModal');
        const title = document.getElementById('bulkActionTitle');
        const count = document.getElementById('bulkActionCount');
        const feedbackDiv = document.getElementById('bulkFeedbackDiv');
        const feedbackRequired = document.getElementById('bulkFeedbackRequired');
        const feedbackTextarea = document.querySelector('[name="bulk_feedback"]');
        const submitBtn = document.getElementById('bulkActionSubmit');
        
        if (title) title.textContent = 'رفض إرسالات متعددة';
        if (count) count.textContent = pendingSubmissions.length;
        if (feedbackDiv) feedbackDiv.style.display = 'block';
        if (feedbackRequired) feedbackRequired.style.display = 'inline';
        if (feedbackTextarea) {
            feedbackTextarea.placeholder = 'سبب الرفض (مطلوب)';
            feedbackTextarea.required = true;
        }
        
        if (submitBtn) {
            submitBtn.className = 'px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700';
            submitBtn.innerHTML = 'رفض المحدد';
        }
        
        if (modal) modal.classList.remove('hidden');
    }

    function closeBulkActionModal() {
        const modal = document.getElementById('bulkActionModal');
        const form = document.getElementById('bulkActionForm');
        
        if (modal) modal.classList.add('hidden');
        if (form) form.reset();
        currentBulkAction = '';
    }

    function handleBulkAction(e) {
        e.preventDefault();
        
        const pendingSubmissions = selectedSubmissions.filter(s => s.status === 'pending');
        if (pendingSubmissions.length === 0) {
            showNotification('لا توجد إرسالات صالحة للمعالجة', 'error');
            return;
        }
        
        const formData = new FormData(e.target);
        const feedback = formData.get('bulk_feedback');
        
        if (currentBulkAction === 'reject' && (!feedback || feedback.trim() === '')) {
            showNotification('يجب إدخال سبب الرفض', 'error');
            return;
        }
        
        const requestData = {
            action: currentBulkAction,
            submissions: pendingSubmissions.map(s => s.id),
            feedback: feedback
        };
        
        const csrfToken = document.querySelector('meta[name="csrf-token"]');
        if (!csrfToken) {
            showNotification('خطأ في CSRF Token', 'error');
            return;
        }
        
        const submitBtn = document.getElementById('bulkActionSubmit');
        const originalText = submitBtn.innerHTML;
        submitBtn.innerHTML = 'جاري التنفيذ...';
        submitBtn.disabled = true;
        
        fetch('/moderator/competitions/bulk-action', {
            method: 'POST',
            body: JSON.stringify(requestData),
            headers: {
                'X-CSRF-TOKEN': csrfToken.content,
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showNotification(data.message, 'success');
                closeBulkActionModal();
                setTimeout(() => location.reload(), 1000);
            } else {
                showNotification(data.message || 'حدث خطأ', 'error');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showNotification('حدث خطأ في الاتصال', 'error');
        })
        .finally(() => {
            submitBtn.innerHTML = originalText;
            submitBtn.disabled = false;
        });
    }

    // ===== وظائف العرض والمرفقات =====
    function viewSubmissionDetails(submissionId) {
        const submission = submissions.find(s => s.id === submissionId);
        if (!submission) {
            showNotification('لم يتم العثور على الإرسال', 'error');
            return;
        }
        
        const detailsHtml = generateSubmissionDetailsHtml(submission);
        const detailsContainer = document.getElementById('submissionDetails');
        const modal = document.getElementById('viewModal');
        
        if (detailsContainer) detailsContainer.innerHTML = detailsHtml;
        if (modal) modal.classList.remove('hidden');
    }

    function closeViewModal() {
        const modal = document.getElementById('viewModal');
        if (modal) modal.classList.add('hidden');
    }

    function previewAttachments(submissionId) {
        const submission = submissions.find(s => s.id === submissionId);
        if (!submission || !submission.attachments || submission.attachments.length === 0) {
            showNotification('لا توجد مرفقات لهذا الإرسال', 'warning');
            return;
        }
        
        let attachmentsHtml = '<div class="grid grid-cols-1 md:grid-cols-2 gap-4">';
        
        submission.attachments.forEach((attachment, index) => {
            const downloadUrl = `/moderator/competitions/submissions/${submissionId}/download/${encodeURIComponent(attachment)}`;
            const fileExtension = attachment.split('.').pop().toLowerCase();
            const isImage = ['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(fileExtension);
            
            attachmentsHtml += `
                <div class="border border-gray-200 rounded-lg p-4 flex items-center justify-between hover:bg-gray-50">
                    <div class="flex items-center">
                        <div class="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center mr-3">
                            ${isImage 
                                ? `<svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                   </svg>`
                                : `<svg class="w-5 h-5 text-gray-600" 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"></path>
                                   </svg>`
                            }
                        </div>
                        <div>
                            <div class="text-sm font-medium text-gray-900">${attachment}</div>
                            <div class="text-xs text-gray-500">
                                ${fileExtension.toUpperCase()} • تم الرفع مع الإرسال
                            </div>
                        </div>
                    </div>
                    <div class="flex space-x-2">
                        ${isImage 
                            ? `<button onclick="previewImage('${downloadUrl}', '${attachment}')" 
                                      class="text-blue-600 hover:text-blue-900 text-sm px-2 py-1 rounded">
                                   <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                                   </svg>
                                   معاينة
                               </button>`
                            : ''
                        }
                        <a href="${downloadUrl}" 
                           class="bg-blue-600 text-white px-3 py-1 rounded text-sm hover:bg-blue-700"
                           download>
                            <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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"></path>
                            </svg>
                            تحميل
                        </a>
                    </div>
                </div>
            `;
        });
        
        attachmentsHtml += '</div>';
        
        const attachmentsList = document.getElementById('attachmentsList');
        const modal = document.getElementById('attachmentsModal');
        
        if (attachmentsList) attachmentsList.innerHTML = attachmentsHtml;
        if (modal) modal.classList.remove('hidden');
    }

    function closeAttachmentsModal() {
        const modal = document.getElementById('attachmentsModal');
        if (modal) modal.classList.add('hidden');
    }

    function showAttachmentsMenu(submissionId) {
        previewAttachments(submissionId);
    }

    function previewImage(imageUrl, fileName) {
        const previewHtml = `
            <div class="text-center">
                <img src="${imageUrl}" alt="${fileName}" class="max-w-full max-h-96 mx-auto rounded-lg shadow-lg" 
                     onload="this.style.opacity=1" style="opacity:0; transition: opacity 0.3s;">
                <p class="text-sm text-gray-600 mt-2">${fileName}</p>
            </div>
        `;
        
        const previewModal = document.createElement('div');
        previewModal.className = 'fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50';
        previewModal.innerHTML = `
            <div class="max-w-4xl max-h-full p-4 relative">
                ${previewHtml}
                <button onclick="this.parentElement.parentElement.remove()" 
                        class="absolute top-4 left-4 text-white hover:text-gray-300 bg-black bg-opacity-50 rounded-full p-2">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
        `;
        
        previewModal.addEventListener('click', function(e) {
            if (e.target === previewModal) {
                previewModal.remove();
            }
        });
        
        document.body.appendChild(previewModal);
    }

    function generateSubmissionDetailsHtml(submission) {
        return `
            <div class="space-y-6">
                <!-- معلومات المرسل -->
                <div class="bg-gray-50 rounded-lg p-4">
                    <h4 class="font-semibold text-gray-900 mb-3">معلومات المرسل</h4>
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <span class="text-sm text-gray-600">الاسم:</span>
                            <p class="font-medium">${submission.user.name}</p>
                        </div>
                        <div>
                            <span class="text-sm text-gray-600">البريد الإلكتروني:</span>
                            <p class="font-medium">${submission.user.email}</p>
                        </div>
                    </div>
                </div>

                <!-- تفاصيل الإرسال -->
                <div>
                    <h4 class="font-semibold text-gray-900 mb-3">تفاصيل الإرسال</h4>
                    <div class="space-y-3">
                        <div>
                            <span class="text-sm text-gray-600">تاريخ الإرسال:</span>
                            <p class="font-medium">${new Date(submission.submitted_at).toLocaleDateString('ar-EG')}</p>
                        </div>
                        <div>
                            <span class="text-sm text-gray-600">الحالة:</span>
                            <span class="px-2 py-1 text-xs font-semibold rounded-full ${getStatusBadgeClass(submission.status)}">
                                ${getStatusText(submission.status)}
                            </span>
                        </div>
                        ${submission.description ? `
                            <div>
                                <span class="text-sm text-gray-600">وصف المشاركة:</span>
                                <p class="mt-1 p-3 bg-gray-50 rounded-lg">${submission.description}</p>
                            </div>
                        ` : ''}
                    </div>
                </div>

                ${submission.admin_feedback ? `
                    <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
                        <h4 class="font-semibold text-gray-900 mb-2">تعليق الإدارة</h4>
                        <p class="text-gray-700">${submission.admin_feedback}</p>
                        ${submission.reviewer ? `
                            <div class="mt-2 text-xs text-gray-500">
                                بواسطة: ${submission.reviewer.name} • ${new Date(submission.reviewed_at).toLocaleDateString('ar-EG')}
                            </div>
                        ` : ''}
                    </div>
                ` : ''}

                ${submission.attachments && submission.attachments.length > 0 ? `
                    <div>
                        <h4 class="font-semibold text-gray-900 mb-3">المرفقات (${submission.attachments.length})</h4>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                            ${submission.attachments.map(attachment => {
                                const downloadUrl = `/moderator/competitions/submissions/${submission.id}/download/${encodeURIComponent(attachment)}`;
                                return `
                                    <div class="flex items-center justify-between p-2 bg-gray-50 rounded">
                                        <span class="text-sm text-gray-700">${attachment}</span>
                                        <a href="${downloadUrl}"
                                           class="text-blue-600 hover:text-blue-800 text-sm"
                                           download>
                                            <svg class="w-4 h-4 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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"></path>
                                            </svg>
                                        </a>
                                    </div>
                                `;
                            }).join('')}
                        </div>
                    </div>
                ` : ''}
            </div>
        `;
    }

    // دوال مساعدة للحالة
    function getStatusText(status) {
        const statusMap = {
            'pending': 'قيد المراجعة',
            'approved': 'معتمد',
            'rejected': 'مرفوض'
        };
        return statusMap[status] || status;
    }

    function getStatusBadgeClass(status) {
        const classMap = {
            'pending': 'bg-yellow-100 text-yellow-800',
            'approved': 'bg-green-100 text-green-800',
            'rejected': 'bg-red-100 text-red-800'
        };
        return classMap[status] || 'bg-gray-100 text-gray-800';
    }

    // ===== وظائف مساعدة =====
    function refreshSubmissions() {
        location.reload();
    }

    function exportSubmissions() {
        const params = new URLSearchParams(window.location.search);
        const competitionId = '{{ $competition->id }}';
        window.open(`/moderator/competitions/export?competition=${competitionId}&${params.toString()}`, '_blank');
    }

    function showNotification(message, type = 'info') {
        const colors = {
            'success': 'bg-green-500',
            'error': 'bg-red-500',
            'warning': 'bg-yellow-500',
            'info': 'bg-blue-500'
        };

        const icons = {
            'success': `<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="M5 13l4 4L19 7"></path>
                        </svg>`,
            'error': `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                      </svg>`,
            'warning': `<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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
                        </svg>`,
            'info': `<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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                     </svg>`
        };

        const alertDiv = document.createElement('div');
        alertDiv.className = `fixed top-4 left-4 ${colors[type]} text-white px-6 py-3 rounded-lg shadow-lg z-50 max-w-sm transform transition-all duration-300 translate-x-full opacity-0`;
        alertDiv.innerHTML = `
            <div class="flex items-center">
                <div class="flex-shrink-0 ml-3">
                    ${icons[type]}
                </div>
                <div class="flex-grow">
                    <p class="text-sm font-medium">${message}</p>
                </div>
                <button onclick="this.parentElement.parentElement.remove()" class="mr-2 text-white hover:text-gray-200">
                    <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="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
        `;
        
        document.body.appendChild(alertDiv);
        
        setTimeout(() => {
            alertDiv.classList.remove('translate-x-full', 'opacity-0');
            alertDiv.classList.add('translate-x-0', 'opacity-100');
        }, 100);
        
        const removeTimeout = type === 'error' ? 7000 : 4000;
        setTimeout(() => {
            if (alertDiv.parentNode) {
                alertDiv.classList.add('translate-x-full', 'opacity-0');
                setTimeout(() => {
                    if (alertDiv.parentNode) {
                        alertDiv.remove();
                    }
                }, 300);
            }
        }, removeTimeout);
    }

    // إغلاق الموديلز عند الضغط خارجها
    document.addEventListener('click', function(e) {
        const modals = ['approveModal', 'rejectModal', 'viewModal', 'attachmentsModal', 'bulkActionModal'];
        
        modals.forEach(modalId => {
            const modal = document.getElementById(modalId);
            if (modal && !modal.classList.contains('hidden')) {
                if (e.target === modal) {
                    modal.classList.add('hidden');
                    
                    if (modalId === 'approveModal') {
                        const form = document.getElementById('approveForm');
                        if (form) form.reset();
                        currentSubmissionId = null;
                    } else if (modalId === 'rejectModal') {
                        const form = document.getElementById('rejectForm');
                        if (form) form.reset();
                        currentSubmissionId = null;
                    } else if (modalId === 'bulkActionModal') {
                        const form = document.getElementById('bulkActionForm');
                        if (form) form.reset();
                        currentBulkAction = '';
                    }
                }
            }
        });
    });

    // إغلاق الموديلز بمفتاح Escape
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            const modals = ['approveModal', 'rejectModal', 'viewModal', 'attachmentsModal', 'bulkActionModal'];
            
            modals.forEach(modalId => {
                const modal = document.getElementById(modalId);
                if (modal && !modal.classList.contains('hidden')) {
                    modal.classList.add('hidden');
                    
                    if (modalId === 'approveModal') {
                        const form = document.getElementById('approveForm');
                        if (form) form.reset();
                        currentSubmissionId = null;
                    } else if (modalId === 'rejectModal') {
                        const form = document.getElementById('rejectForm');
                        if (form) form.reset();
                        currentSubmissionId = null;
                    } else if (modalId === 'bulkActionModal') {
                        const form = document.getElementById('bulkActionForm');
                        if (form) form.reset();
                        currentBulkAction = '';
                    }
                }
            });
        }
    });
    </script>
    @endpush
@endsection