@extends('layouts.moderator')

@section('title', 'إدارة التقييمات')
@section('page-title', 'إدارة التقييمات')

@section('content')
<div class="container mx-auto px-4 py-6 rtl">
    <!-- Page Header -->
    <div class="mb-6">
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
            <div>
                <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">إدارة التقييمات</h1>
                <p class="text-gray-600 dark:text-gray-400">
                    مراجعة ومتابعة تقييمات الأعضاء في قسمك
                </p>
            </div>
            <div class="flex items-center bg-blue-50 dark:bg-blue-900/20 px-4 py-2 rounded-lg">
                <div class="p-2 bg-blue-100 dark:bg-blue-900/30 rounded-full ml-3">
                    <svg class="w-5 h-5 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path>
                    </svg>
                </div>
                <div>
                    <p class="text-sm font-medium text-gray-900 dark:text-white">{{ auth()->user()->name }}</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">مشرف</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Alert Messages -->
    @if(session('success'))
        <div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4 mb-6">
            <div class="flex items-start">
                <svg class="w-5 h-5 text-green-600 dark:text-green-400 ml-2 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                </svg>
                <div>
                    <h3 class="text-sm font-medium text-green-800 dark:text-green-200">نجح العملية</h3>
                    <p class="mt-1 text-sm text-green-700 dark:text-green-300">{{ session('success') }}</p>
                </div>
            </div>
        </div>
    @endif

    @if(session('error'))
        <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-6">
            <div class="flex items-start">
                <svg class="w-5 h-5 text-red-600 dark:text-red-400 ml-2 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
                </svg>
                <div>
                    <h3 class="text-sm font-medium text-red-800 dark:text-red-200">حدث خطأ</h3>
                    <p class="mt-1 text-sm text-red-700 dark:text-red-300">{{ session('error') }}</p>
                </div>
            </div>
        </div>
    @endif

    @if(session('info'))
        <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4 mb-6">
            <div class="flex items-start">
                <svg class="w-5 h-5 text-blue-600 dark:text-blue-400 ml-2 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
                </svg>
                <div>
                    <h3 class="text-sm font-medium text-blue-800 dark:text-blue-200">معلومة</h3>
                    <p class="mt-1 text-sm text-blue-700 dark:text-blue-300">{{ session('info') }}</p>
                </div>
            </div>
        </div>
    @endif

    <!-- Statistics Cards -->
    <div class="grid grid-cols-2 md:grid-cols-6 gap-4 mb-6">
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm border-r-4 border-gray-500">
            <div class="flex flex-col items-center text-center">
                <div class="p-3 bg-gray-100 dark:bg-gray-700 rounded-full mb-3">
                    <svg class="w-6 h-6 text-gray-600 dark:text-gray-400" 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>
                <h3 class="text-2xl font-bold text-gray-600 dark:text-gray-400">{{ number_format($stats['total']) }}</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">إجمالي التقييمات</p>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm border-r-4 border-yellow-500">
            <div class="flex flex-col items-center text-center">
                <div class="p-3 bg-yellow-100 dark:bg-yellow-900/20 rounded-full mb-3">
                    <svg class="w-6 h-6 text-yellow-600 dark:text-yellow-400" 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>
                <h3 class="text-2xl font-bold text-yellow-600 dark:text-yellow-400">{{ number_format($stats['pending']) }}</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">قيد المراجعة</p>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm border-r-4 border-green-500">
            <div class="flex flex-col items-center text-center">
                <div class="p-3 bg-green-100 dark:bg-green-900/20 rounded-full mb-3">
                    <svg class="w-6 h-6 text-green-600 dark:text-green-400" 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-2xl font-bold text-green-600 dark:text-green-400">{{ number_format($stats['approved']) }}</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">معتمدة</p>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm border-r-4 border-red-500">
            <div class="flex flex-col items-center text-center">
                <div class="p-3 bg-red-100 dark:bg-red-900/20 rounded-full mb-3">
                    <svg class="w-6 h-6 text-red-600 dark:text-red-400" 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-2xl font-bold text-red-600 dark:text-red-400">{{ number_format($stats['rejected']) }}</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">مرفوضة</p>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm border-r-4 border-blue-500">
            <div class="flex flex-col items-center text-center">
                <div class="p-3 bg-blue-100 dark:bg-blue-900/20 rounded-full mb-3">
                    <svg class="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                    </svg>
                </div>
                <h3 class="text-2xl font-bold text-blue-600 dark:text-blue-400">{{ number_format($stats['today']) }}</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">اليوم</p>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm border-r-4 border-purple-500">
            <div class="flex flex-col items-center text-center">
                <div class="p-3 bg-purple-100 dark:bg-purple-900/20 rounded-full mb-3">
                    <svg class="w-6 h-6 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                    </svg>
                </div>
                <h3 class="text-2xl font-bold text-purple-600 dark:text-purple-400">{{ number_format($stats['this_week']) }}</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">هذا الأسبوع</p>
            </div>
        </div>
    </div>

    <!-- Filters and Search -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm mb-6">
        <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>
        <div class="p-6">
            <form method="GET" action="{{ route('moderator.evaluations.index') }}" class="space-y-4" id="filterForm">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 gap-4">
                    <div>
                        <label for="user_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">المستخدم</label>
                        <select name="user_id" id="user_id" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                            <option value="">الكل</option>
                         @foreach($users as $user)
    <option value="{{ $user->id }}" @selected(request('user_id') == $user->id)>
        @if($user->id == auth()->id())
            {{ $user->name }} (مشرف) ⭐
        @else
            {{ $user->name }} 
            @if($user->membership_status == 'official')
                (عضو رسمي)
            @elseif($user->membership_status == 'beta')
                (عضو بيتا)
            @endif
        @endif
        - {{ $user->username }}
    </option>
@endforeach
                        </select>
                    </div>

                    <div>
                        <label for="evaluator_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">المقيم</label>
                        <select name="evaluator_id" id="evaluator_id" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                            <option value="">الكل</option>
                            @foreach($evaluators as $evaluator)
                                <option value="{{ $evaluator->id }}" @selected(request('evaluator_id') == $evaluator->id)>
                                    {{ $evaluator->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <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 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                            <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>

                    <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 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                    </div>

                    <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 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                    </div>

                    <div>
                        <label for="evaluation_status" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">حالة التقييم</label>
                        <select name="evaluation_status" id="evaluation_status" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                            <option value="">الكل</option>
                            <option value="evaluated" @selected(request('evaluation_status') == 'evaluated')>مقيم</option>
                            <option value="not_evaluated" @selected(request('evaluation_status') == 'not_evaluated')>غير مقيم</option>
                        </select>
                    </div>
                </div>
                <div class="flex justify-end">
                    <button type="submit" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md transition duration-200 flex items-center">
                        <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                        </svg>
                        بحث
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Action Buttons -->
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
        <div class="flex flex-col sm:flex-row gap-2">
            <a href="{{ route('moderator.evaluations.create') }}" 
               class="inline-flex items-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white font-medium rounded-lg transition duration-200">
                <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                </svg>
                إضافة تقييم جديد
            </a>
            <a href="{{ route('moderator.evaluations.my-evaluations') }}" 
               class="inline-flex items-center px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white font-medium rounded-lg transition duration-200">
                <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                </svg>
                تقييماتي
            </a>
            <a href="{{ route('moderator.evaluations.print', request()->query()) }}" target="_blank" 
               class="inline-flex items-center px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white font-medium rounded-lg transition duration-200">
                <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H9.414a1 1 0 01-.707-.293l-2-2A1 1 0 005.586 6H4a2 2 0 00-2 2v11a1 1 0 001 1h14a1 1 0 001-1z"></path>
                </svg>
                طباعة التقرير
            </a>
        </div>
        <div>
            <span class="text-sm text-gray-500 dark:text-gray-400">إجمالي: {{ $evaluations->total() }} تقييم</span>
        </div>
    </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">
                <!-- رأس البطاقة مع صورة المستخدم -->
                <div class="p-5 border-b border-gray-100 dark:border-gray-700">
                    <div class="flex items-center space-x-4 space-x-reverse">
                        <!-- صورة المستخدم -->
                        <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>

                        <!-- معلومات المستخدم -->
                        <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
                            
                            <!-- إذا كان هناك تقييمات متعددة لنفس اليوم -->
                            @php
                                $key = $evaluation->user_id . '_' . $evaluation->evaluation_date->format('Y-m-d');
                                $multipleEvaluations = isset($previousEvaluations) && isset($previousEvaluations[$key]) ? $previousEvaluations[$key] : collect([]);
                                $count = $multipleEvaluations->count();
                            @endphp
                            
                            @if($count > 1)
                                <span class="inline-flex mt-1 px-2 py-0.5 text-xs font-medium rounded-full bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300">
                                    {{ $count }} تقييمات
                                </span>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- محتوى البطاقة -->
                <div class="p-5 space-y-3 bg-white dark:bg-gray-800">
                    <!-- تاريخ التقييم -->
                    <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>

                    <!-- المقيم -->
                    <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">مجهول الهوية</span>
                            @endif
                        </span>
                    </div>

                    <!-- الحالة -->
                    <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>

                    <!-- حالة الحضور -->
                    <div class="flex items-center justify-between">
                        <span class="text-sm text-gray-600 dark:text-gray-400">الحضور:</span>
                        @if($evaluation->attendance_status == 'present')
                            <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->attendance_status == 'absent_with_excuse')
                            <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>
                        @else
                            <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>
                        @endif
                    </div>

                    <!-- شبكة المقاييس -->
                    <div class="grid grid-cols-2 gap-3 pt-3">
                        <!-- واتساب -->
                        <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>

                        <!-- تيكتوك -->
                        <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 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->warnings_count > 0 ? 'text-red-600 dark:text-red-400' : 'text-gray-600 dark:text-gray-400' }}">
                                {{ $evaluation->warnings_count }}
                            </div>
                        </div>

                        <!-- النقاط -->
                        <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->total_daily_points > 0 ? 'text-green-600 dark:text-green-400' : ($evaluation->total_daily_points < 0 ? 'text-red-600 dark:text-red-400' : 'text-gray-600 dark:text-gray-400') }}">
                                {{ $evaluation->total_daily_points > 0 ? '+' : '' }}{{ $evaluation->total_daily_points }}
                            </div>
                        </div>
                    </div>

                    <!-- معلومات التقييمات الأخرى في نفس اليوم إذا وجدت -->
                    @if($count > 1)
                        <div class="mt-4 p-3 bg-amber-50 dark:bg-amber-900/10 rounded-lg text-xs">
                            <div class="font-semibold text-amber-700 dark:text-amber-400 mb-1">
                                <svg class="w-4 h-4 inline ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                ملاحظة: يوجد {{ $count }} تقييمات لهذا العضو في نفس التاريخ
                            </div>
                            <div class="space-y-1 mt-1">
                                @foreach($multipleEvaluations->sortByDesc('id') as $otherEval)
                                    <div class="flex justify-between items-center {{ $otherEval->id == $evaluation->id ? 'font-bold text-amber-800 dark:text-amber-300' : 'text-amber-600 dark:text-amber-400' }}">
                                        <span>{{ $otherEval->show_evaluator_name ? $otherEval->evaluator->name : 'مقيم مجهول' }}</span>
                                        <span>{{ $otherEval->total_daily_points }} نقطة</span>
                                    </div>
                                @endforeach
                            </div>
                            <div class="mt-2 text-amber-700 dark:text-amber-400">
                                يتم عرض أحدث تقييم فقط ({{ $evaluation->evaluation_date->format('Y/m/d') }})
                            </div>
                        </div>
                    @endif
                </div>

                <!-- تذييل البطاقة - الإجراءات -->
                <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-between text-sm mb-3">
                        <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)
                                @if($evaluation->edit_count > 0)
                                    @if($evaluation->evaluator_id == auth()->id())
                                        <span class="text-gray-700">{{ $evaluation->evaluator->name }}</span>
                                        <span class="text-xs text-gray-500">(معدل بواسطة مشرف آخر)</span>
                                    @else
                                        <span class="text-amber-600">{{ $evaluation->evaluator->name }}</span>
                                        <span class="text-xs text-gray-500">(معدل)</span>
                                    @endif
                                @else
                                    {{ $evaluation->evaluator->name }}
                                @endif
                            @else
                                <span class="text-gray-500 dark:text-gray-400">مجهول الهوية</span>
                                @if($evaluation->edit_count > 0)
                                    <span class="text-xs text-amber-600">(معدل)</span>
                                @endif
                            @endif
                        </span>
                    </div>
                    <div class="flex items-center justify-center space-x-3 space-x-reverse">
                        <!-- عرض -->
                        <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>

                        <!-- البلاغات (فقط للتقييمات الخاصة بالمشرف نفسه) -->
                        @if($evaluation->user_id == auth()->id())
                            <a href="{{ route('moderator.reports-objections.index') }}" 
                               class="text-orange-600 hover:text-orange-700 dark:text-orange-400 dark:hover:text-orange-300 transition-colors p-1.5 hover:bg-orange-50 dark:hover:bg-orange-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="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.34 16c-.77.833.192 2.5 1.732 2.5z"/>
                                </svg>
                            </a>
                        @endif

                        <!-- تعديل - مع الشروط الخاصة بتعديل تقييمات المشرفين الآخرين -->
                        @if($evaluation->evaluator_id == auth()->id() || ($evaluation->user->gender == auth()->user()->gender && $evaluation->edit_count < 1))
                            <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="تعديل التقييم{{ $evaluation->evaluator_id != auth()->id() ? ' - مرة واحدة فقط' : '' }}">
                                <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>
                        @endif

                        <!-- اعتماد (فقط للتقييمات المعلقة وليست للمشرف نفسه) -->
                        @if($evaluation->status == 'pending' && $evaluation->user_id != auth()->id())
                            <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
                        
                        <!-- حذف (فقط لمنشئ التقييم) -->
                        @if($evaluation->evaluator_id == auth()->id())
                            <form action="{{ route('moderator.evaluations.destroy', $evaluation) }}" method="POST" class="inline">
                                @csrf
                                @method('DELETE')
                                <button type="submit" onclick="return confirm('هل أنت متأكد من حذف هذا التقييم؟ لا يمكن التراجع عن هذا الإجراء.')"
                                        class="text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 transition-colors p-1.5 hover:bg-red-50 dark:hover:bg-red-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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></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 id="objectionModal" class="fixed inset-0 z-50 overflow-y-auto hidden">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onclick="closeObjectionModal()"></div>

        <span class="hidden sm:inline-block sm:align-middle sm:h-screen">&#8203;</span>

        <div class="relative inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg px-4 pt-5 pb-4 text-right overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full sm:p-6">
            <div class="absolute top-0 right-0 pt-4 pr-4">
                <button type="button" onclick="closeObjectionModal()" class="bg-white dark:bg-gray-800 rounded-md text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                    <span class="sr-only">إغلاق</span>
                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
            
            <div id="objectionContent">
                <div class="flex justify-center items-center py-4">
                    <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-2">جاري تحميل الاعتراض...</span>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// فتح مودال الاعتراض
function openObjectionModal(evaluationId) {
    const modal = document.getElementById('objectionModal');
    const content = document.getElementById('objectionContent');
    
    modal.classList.remove('hidden');
    
    // إعادة تعيين المحتوى لحالة التحميل
    content.innerHTML = `
        <div class="flex justify-center items-center py-4">
            <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-2">جاري تحميل الاعتراض...</span>
        </div>
    `;

    fetch(`/moderator/evaluations/${evaluationId}/objection-modal`, {
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        if (data.success) {
            content.innerHTML = data.html;
        } else {
            content.innerHTML = `<div class="p-4 text-center text-red-500">${data.message || 'حدث خطأ أثناء تحميل الاعتراض.'}</div>`;
        }
    })
    .catch(error => {
        console.error('Error:', error);
        content.innerHTML = '<div class="p-4 text-center text-red-500">حدث خطأ أثناء تحميل الاعتراض.</div>';
    });
}

// إغلاق مودال الاعتراض
function closeObjectionModal() {
    document.getElementById('objectionModal').classList.add('hidden');
}

// إغلاق المودال عند الضغط على Escape
document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape') {
        closeObjectionModal();
    }
});
</script>

@endsection