@extends('layouts.moderator')

@section('title', 'تقييماتي')
@section('page-title', 'تقييماتي')

@section('content')
<div class="space-y-6">
    
    <!-- Header Section -->
    <div class="bg-gradient-to-r from-blue-600 to-purple-600 dark:from-blue-800 dark:to-purple-800 rounded-2xl shadow-lg p-8 text-white">
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
            <div class="flex-1">
                <h1 class="text-3xl font-bold mb-2">تقييماتي</h1>
                <p class="text-blue-100 dark:text-blue-200">
                    جميع التقييمات التي قمت بإنشائها
                </p>
            </div>
            
            <div class="flex items-center gap-4">
                <div class="bg-white/10 backdrop-blur-sm rounded-xl px-4 py-3 border border-white/20">
                    <div class="flex items-center gap-3">
                        <div class="relative">
                            @if(auth()->user()->avatar)
                                <img class="h-12 w-12 rounded-full object-cover border-2 border-white shadow-md" 
                                     src="{{ auth()->user()->avatar_url }}" 
                                     alt="{{ auth()->user()->name }}">
                            @else
                                <div class="h-12 w-12 rounded-full bg-gradient-to-br from-white/20 to-white/30 flex items-center justify-center">
                                    <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
                                    </svg>
                                </div>
                            @endif
                        </div>
                        <div class="text-right">
                            <div class="font-semibold">{{ auth()->user()->name }}</div>
                            <div class="text-xs text-blue-100">مشرف</div>
                        </div>
                    </div>
                </div>

                <a href="{{ route('moderator.evaluations.index') }}" 
                   class="bg-white text-blue-600 hover:bg-blue-50 px-6 py-3 rounded-xl font-semibold shadow-lg hover:shadow-xl transition-all duration-200 flex items-center gap-2">
                    <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="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 2"></path>
                    </svg>
                    كل التقييمات
                </a>
            </div>
        </div>
    </div>

    <!-- Success/Error Messages -->
    @if(session('success'))
        <div class="bg-green-50 dark:bg-green-900/20 border-l-4 border-green-500 p-4 rounded-lg">
            <div class="flex items-center">
                <svg class="w-6 h-6 text-green-500 ml-3" 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>
                <p class="text-green-700 dark:text-green-300">{{ session('success') }}</p>
            </div>
        </div>
    @endif

    @if(session('error'))
        <div class="bg-red-50 dark:bg-red-900/20 border-l-4 border-red-500 p-4 rounded-lg">
            <div class="flex items-center">
                <svg class="w-6 h-6 text-red-500 ml-3" 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>
                <p class="text-red-700 dark:text-red-300">{{ session('error') }}</p>
            </div>
        </div>
    @endif

    @if(session('info'))
        <div class="bg-blue-50 dark:bg-blue-900/20 border-l-4 border-blue-500 p-4 rounded-lg">
            <div class="flex items-center">
                <svg class="w-6 h-6 text-blue-500 ml-3" 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>
                <p class="text-blue-700 dark:text-blue-300">{{ session('info') }}</p>
            </div>
        </div>
    @endif

    <!-- Statistics Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        <!-- Total Evaluations -->
        <div class="bg-gradient-to-br from-blue-500 to-blue-600 dark:from-blue-600 dark:to-blue-700 rounded-2xl shadow-lg p-6 text-white transform hover:scale-105 transition-transform duration-200">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-blue-100 text-sm font-medium mb-1">إجمالي التقييمات</p>
                    <p class="text-4xl font-bold">{{ $stats['total'] ?? 0 }}</p>
                </div>
                <div class="bg-white/20 rounded-xl p-3">
                    <svg class="w-8 h-8" 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>

        <!-- Pending -->
        <div class="bg-gradient-to-br from-yellow-500 to-yellow-600 dark:from-yellow-600 dark:to-yellow-700 rounded-2xl shadow-lg p-6 text-white transform hover:scale-105 transition-transform duration-200">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-yellow-100 text-sm font-medium mb-1">قيد المراجعة</p>
                    <p class="text-4xl font-bold">{{ $stats['pending'] ?? 0 }}</p>
                </div>
                <div class="bg-white/20 rounded-xl p-3">
                    <svg class="w-8 h-8" 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>

        <!-- Approved -->
        <div class="bg-gradient-to-br from-green-500 to-green-600 dark:from-green-600 dark:to-green-700 rounded-2xl shadow-lg p-6 text-white transform hover:scale-105 transition-transform duration-200">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-green-100 text-sm font-medium mb-1">معتمدة</p>
                    <p class="text-4xl font-bold">{{ $stats['approved'] ?? 0 }}</p>
                </div>
                <div class="bg-white/20 rounded-xl p-3">
                    <svg class="w-8 h-8" 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>

        <!-- Rejected -->
        <div class="bg-gradient-to-br from-red-500 to-red-600 dark:from-red-600 dark:to-red-700 rounded-2xl shadow-lg p-6 text-white transform hover:scale-105 transition-transform duration-200">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-red-100 text-sm font-medium mb-1">مرفوضة</p>
                    <p class="text-4xl font-bold">{{ $stats['rejected'] ?? 0 }}</p>
                </div>
                <div class="bg-white/20 rounded-xl p-3">
                    <svg class="w-8 h-8" 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>
    </div>

    <!-- Filters Section -->
    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6">
        <form method="GET" action="{{ route('moderator.evaluations.my-evaluations') }}" class="space-y-4">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                <!-- Status Filter -->
                <div>
                    <label for="status" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        الحالة
                    </label>
                    <select name="status" id="status" 
                            class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
                        <option value="">الكل</option>
                        <option value="pending" @selected(request('status') == 'pending')>قيد الانتظار</option>
                        <option value="approved" @selected(request('status') == 'approved')>معتمد</option>
                        <option value="rejected" @selected(request('status') == 'rejected')>مرفوض</option>
                    </select>
                </div>

                <!-- Start Date -->
                <div>
                    <label for="start_date" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        من تاريخ
                    </label>
                    <input type="date" name="start_date" id="start_date" value="{{ request('start_date') }}"
                           class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
                </div>

                <!-- End Date -->
                <div>
                    <label for="end_date" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        إلى تاريخ
                    </label>
                    <input type="date" name="end_date" id="end_date" value="{{ request('end_date') }}"
                           class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
                </div>

                <!-- Search Button -->
                <div class="flex items-end">
                    <button type="submit" 
                            class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2.5 px-6 rounded-lg shadow-md hover:shadow-lg transition-all duration-200 flex items-center justify-center gap-2">
                        <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                        </svg>
                        بحث
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- Evaluations Cards Grid -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white">قائمة التقييمات</h2>
        </div>

        @if($evaluations->count() > 0)
            <!-- Cards Grid - 3 columns -->
            <div class="p-6 bg-gray-50 dark:bg-gray-900">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    @foreach ($evaluations as $evaluation)
                        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md hover:shadow-lg transition-all duration-300">
                            <!-- Card Header with Avatar -->
                            <div class="p-5 border-b border-gray-100 dark:border-gray-700">
                                <div class="flex items-center space-x-4 space-x-reverse">
                                    <!-- User Avatar -->
                                    <div class="relative">
                                        @if($evaluation->user->avatar)
                                            <img class="h-16 w-16 rounded-full object-cover border-3 border-white dark:border-gray-700 shadow-md" 
                                                 src="{{ $evaluation->user->avatar_url }}" 
                                                 alt="{{ $evaluation->user->name }}">
                                        @else
                                            <div class="h-16 w-16 rounded-full bg-gradient-to-br {{ $evaluation->user->gender == 'female' ? 'from-pink-400 to-pink-600' : 'from-blue-400 to-blue-600' }} flex items-center justify-center shadow-md">
                                                <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20">
                                                    <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
                                                </svg>
                                            </div>
                                        @endif
                                        
                                        @if($evaluation->user->is_online)
                                            <div class="absolute -bottom-1 -right-1 w-4 h-4 bg-green-500 border-2 border-white dark:border-gray-800 rounded-full"></div>
                                        @endif
                                    </div>

                                    <!-- User Info -->
                                    <div class="flex-1 min-w-0">
                                        <h3 class="text-sm font-semibold text-gray-900 dark:text-white truncate">
                                            {{ $evaluation->user->name }}
                                        </h3>
                                        <p class="text-xs text-gray-500 dark:text-gray-400 truncate">
                                            {{ $evaluation->user->username }}
                                        </p>
                                        
                                        @php
                                            $userRole = $evaluation->user->roles->first();
                                            $roleNames = [
                                                'moderator' => 'مشرف',
                                                'official-member' => 'عضو رسمي', 
                                                'member' => 'عضو بيتا'
                                            ];
                                            $roleColors = [
                                                'moderator' => 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300',
                                                'official-member' => 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300',
                                                'member' => 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300'
                                            ];
                                        @endphp
                                        
                                        @if($userRole)
                                            <span class="inline-flex mt-1 px-2 py-0.5 text-xs font-medium rounded-full {{ $roleColors[$userRole->name] ?? 'bg-gray-100 text-gray-700' }}">
                                                {{ $roleNames[$userRole->name] ?? $userRole->name }}
                                            </span>
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <!-- Card Body -->
                            <div class="p-5 space-y-3 bg-white dark:bg-gray-800">
                                <!-- Evaluation Date -->
                                <div class="flex items-center justify-between text-sm">
                                    <span class="text-gray-600 dark:text-gray-400">تاريخ التقييم:</span>
                                    <span class="font-semibold text-gray-900 dark:text-white">
                                        {{ $evaluation->evaluation_date->format('Y/m/d') }}
                                    </span>
                                </div>

                                <!-- Evaluator -->
                                <div class="flex items-center justify-between text-sm">
                                    <span class="text-gray-600 dark:text-gray-400">المقيم:</span>
                                    <span class="font-medium text-gray-900 dark:text-white">
                                        @if($evaluation->show_evaluator_name)
                                            {{ $evaluation->evaluator->name }}
                                        @else
                                            <span class="text-gray-500 dark:text-gray-400 italic text-xs">مخفي</span>
                                        @endif
                                    </span>
                                </div>

                                <!-- Status -->
                                <div class="flex items-center justify-between">
                                    <span class="text-sm text-gray-600 dark:text-gray-400">الحالة:</span>
                                    @if($evaluation->status == 'approved')
                                        <span class="inline-flex px-2.5 py-1 text-xs font-semibold rounded-full bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300">
                                            معتمد
                                        </span>
                                    @elseif($evaluation->status == 'rejected')
                                        <span class="inline-flex px-2.5 py-1 text-xs font-semibold rounded-full bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300">
                                            مرفوض
                                        </span>
                                    @else
                                        <span class="inline-flex px-2.5 py-1 text-xs font-semibold rounded-full bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-300">
                                            قيد الانتظار
                                        </span>
                                    @endif
                                </div>

                                <!-- Objection Status -->
                                <div class="flex items-center justify-between text-sm">
                                    <span class="text-gray-600 dark:text-gray-400">هل اعترض؟</span>
                                    @if($objections->has($evaluation->id) && $objections[$evaluation->id]->count())
                                        <button onclick="openObjectionModal(event, {{ $evaluation->id }})" 
                                                class="text-blue-600 dark:text-blue-400 hover:underline font-medium">
                                            معترض
                                        </button>
                                    @else
                                        <span class="text-gray-500 dark:text-gray-400">لا</span>
                                    @endif
                                </div>

                                <!-- Metrics Grid -->
                                <div class="grid grid-cols-2 gap-3 pt-3">
                                    <!-- WhatsApp -->
                                    <div class="text-center p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                                        <div class="text-xs text-gray-600 dark:text-gray-400 mb-1">واتساب</div>
                                        <div class="text-lg font-bold {{ $evaluation->whatsapp_presence > 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' }}">
                                            {{ $evaluation->whatsapp_presence }}
                                        </div>
                                    </div>

                                    <!-- TikTok -->
                                    <div class="text-center p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                                        <div class="text-xs text-gray-600 dark:text-gray-400 mb-1">تيكتوك</div>
                                        <div class="text-lg font-bold {{ $evaluation->tiktok_interaction > 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' }}">
                                            {{ $evaluation->tiktok_interaction }}
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Card Footer - Actions -->
                            <div class="px-5 py-3 bg-gray-50 dark:bg-gray-700/30 border-t border-gray-100 dark:border-gray-700 rounded-b-xl">
                                <div class="flex items-center justify-center space-x-3 space-x-reverse">
                                    <!-- View -->
                                    <a href="{{ route('moderator.evaluations.show', $evaluation) }}" 
                                       class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 transition-colors p-1.5 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg"
                                       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>
                                    </a>

                                    <!-- Edit -->
                                    <a href="{{ route('moderator.evaluations.edit', $evaluation) }}" 
                                       class="text-amber-600 hover:text-amber-700 dark:text-amber-400 dark:hover:text-amber-300 transition-colors p-1.5 hover:bg-amber-50 dark:hover:bg-amber-900/20 rounded-lg"
                                       title="تعديل التقييم">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                                        </svg>
                                    </a>

                                    <!-- Approve (if not approved) -->
                                    @if($evaluation->status !== 'approved')
                                        <form action="{{ route('moderator.evaluations.approve', $evaluation) }}" method="POST" class="inline">
                                            @csrf
                                            <button type="submit" onclick="return confirm('هل أنت متأكد من اعتماد التقييم؟')"
                                                    class="text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300 transition-colors p-1.5 hover:bg-green-50 dark:hover:bg-green-900/20 rounded-lg"
                                                    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>
                                        </form>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <!-- Pagination -->
            <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
                <div class="flex flex-col sm:flex-row justify-between items-center gap-4">
                    <div>
                        <p class="text-sm text-gray-700 dark:text-gray-300">
                            عرض {{ $evaluations->firstItem() }} إلى {{ $evaluations->lastItem() }} 
                            من أصل {{ $evaluations->total() }} نتيجة
                        </p>
                    </div>
                    <div>
                        {{ $evaluations->withQueryString()->links() }}
                    </div>
                </div>
            </div>
        @else
            <div class="text-center py-12 bg-white dark:bg-gray-800">
                <svg class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <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>
                <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">لا توجد تقييمات للعرض</h3>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                    لم يتم العثور على أي تقييمات للفلتر المحدد
                </p>
            </div>
        @endif
    </div>

</div>

<!-- Objection Modal -->
<div id="objectionModal" class="fixed inset-0 bg-black bg-opacity-50 hidden flex items-center justify-center z-50" dir="rtl">
    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto">
        <div class="p-6 border-b border-gray-200 dark:border-gray-700">
            <h3 class="text-xl font-bold text-gray-900 dark:text-white">تفاصيل الاعتراض</h3>
        </div>
        <div id="objectionContent" class="p-6">
            <div class="flex items-center justify-center py-8">
                <svg class="animate-spin h-8 w-8 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                <span class="mr-3 text-gray-600 dark:text-gray-400">جاري تحميل الاعتراض...</span>
            </div>
        </div>
        <div class="p-6 border-t border-gray-200 dark:border-gray-700 flex justify-end">
            <button onclick="closeObjectionModal()" 
                    class="bg-gray-500 hover:bg-gray-600 text-white px-6 py-2 rounded-lg font-semibold transition-colors">
                إغلاق
            </button>
        </div>
    </div>
</div>

<script>
function openObjectionModal(e, id) {
    e.preventDefault();
    const modal = document.getElementById('objectionModal');
    const content = document.getElementById('objectionContent');
    modal.classList.remove('hidden');
    content.innerHTML = `
        <div class="flex items-center justify-center py-8">
            <svg class="animate-spin h-8 w-8 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            <span class="mr-3 text-gray-600 dark:text-gray-400">جاري تحميل الاعتراض...</span>
        </div>
    `;

    fetch(`/moderator/evaluations/${id}/objection`, { headers: {'X-Requested-With': 'XMLHttpRequest'} })
        .then(response => response.text())
        .then(html => content.innerHTML = html)
        .catch(() => content.innerHTML = '<p class="text-red-500 text-center py-4">حدث خطأ أثناء تحميل الاعتراض.</p>');
}

function closeObjectionModal() {
    document.getElementById('objectionModal').classList.add('hidden');
}
</script>
@endsection