@extends('layouts.moderator')

@section('title', 'تعديل التقييم - ' . $evaluation->user->name)

@section('content')
<div class="container mx-auto px-4 py-6 rtl">
    <!-- Page Header -->
    <div class="mb-6">
        <!-- Breadcrumb -->
        <nav class="flex mb-4" aria-label="Breadcrumb">
            <ol class="inline-flex items-center space-x-1 md:space-x-3 space-x-reverse">
                <li class="inline-flex items-center">
                    <a href="{{ route('moderator.evaluations.index') }}" 
                       class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white">
                        إدارة التقييمات
                    </a>
                </li>
                <li>
                    <div class="flex items-center">
                        <svg class="w-6 h-6 text-gray-400 rotate-180" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                        </svg>
                        <span class="mr-1 text-sm font-medium text-gray-500 md:mr-2 dark:text-gray-400">تعديل التقييم</span>
                    </div>
                </li>
            </ol>
        </nav>

        <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">تعديل التقييم - {{ $evaluation->user->name }}</h1>
                <p class="text-gray-600 dark:text-gray-400">تعديل تقييم بتاريخ {{ $evaluation->evaluation_date->format('Y/m/d') }}</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>

    <!-- Display Validation Errors -->
    @if($errors->any())
        <div class="mb-6 bg-red-50 border border-red-200 rounded-lg p-4">
            <div class="flex">
                <svg class="w-5 h-5 text-red-400 ml-2" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
                </svg>
                <div>
                    <h3 class="text-sm font-medium text-red-800">هناك أخطاء في النموذج:</h3>
                    <div class="mt-2 text-sm text-red-700">
                        <ul class="list-disc list-inside space-y-1">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <form action="{{ route('moderator.evaluations.update', $evaluation) }}" method="POST" id="evaluationForm" novalidate>
        @csrf
        @method('PUT')
        
        <!-- Current Member Display -->
        <div class="mb-8">
            <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">العضو المُقيم</h3>
            
            <!-- Current Status Alert -->
            @if($evaluation->status == 'approved')
                <div class="mb-6 p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
                    <div class="flex items-center">
                        <svg class="w-5 h-5 text-green-600 dark:text-green-400 ml-2" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                        </svg>
                        <div>
                            <p class="text-sm font-medium text-green-800 dark:text-green-200">هذا التقييم معتمد ومؤثر على نقاط العضو</p>
                            @if($evaluation->approved_at)
                                <p class="text-xs text-green-600 dark:text-green-400">تم الاعتماد في: {{ $evaluation->approved_at->format('Y/m/d H:i') }}</p>
                            @endif
                            <p class="text-xs text-green-600 dark:text-green-400 mt-1">أي تعديل سيؤثر على نقاط العضو تلقائياً</p>
                        </div>
                    </div>
                </div>
            @elseif($evaluation->status == 'pending')
                <div class="mb-6 p-4 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg border border-yellow-200 dark:border-yellow-800">
                    <div class="flex items-center">
                        <svg class="w-5 h-5 text-yellow-600 dark:text-yellow-400 ml-2" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                        </svg>
                        <div>
                            <p class="text-sm font-medium text-yellow-800 dark:text-yellow-200">هذا التقييم في انتظار الموافقة</p>
                            <p class="text-xs text-yellow-600 dark:text-yellow-400">يمكنك تعديله قبل اعتماده</p>
                        </div>
                    </div>
                </div>
            @endif
            
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border-2 border-blue-200 dark:border-blue-700 p-6">
                <div class="flex items-center space-x-4 space-x-reverse">
                    <div class="flex-shrink-0">
                        <div class="h-16 w-16 rounded-full {{ $evaluation->user->membership_status == 'beta' ? 'bg-orange-100 dark:bg-orange-900/30' : 'bg-indigo-100 dark:bg-indigo-900/30' }} flex items-center justify-center">
                            <span class="text-2xl font-bold {{ $evaluation->user->membership_status == 'beta' ? 'text-orange-600 dark:text-orange-400' : 'text-indigo-600 dark:text-indigo-400' }}">
                                {{ substr($evaluation->user->name, 0, 1) }}
                            </span>
                        </div>
                    </div>
                    <div class="flex-1">
                        <div class="flex items-center gap-3 mb-2">
                            <h4 class="text-xl font-semibold text-gray-900 dark:text-white">{{ $evaluation->user->name }}</h4>
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium {{ $evaluation->user->membership_status == 'beta' ? 'bg-orange-100 text-orange-800 dark:bg-orange-900/20 dark:text-orange-400' : 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900/20 dark:text-indigo-400' }}">
                                {{ $evaluation->user->membership_status == 'beta' ? 'عضو بيتا' : 'عضو رسمي' }}
                            </span>
                        </div>
                        <p class="text-sm text-gray-600 dark:text-gray-400 mb-1">{{ $evaluation->user->username }} • {{ $evaluation->user->email }}</p>
                        <div class="flex items-center gap-4 text-xs text-gray-500 dark:text-gray-500">
                            <span>إجمالي النقاط: {{ $evaluation->user->total_points }}</span>
                            <span>•</span>
                            <span>{{ $evaluation->user->gender == 'male' ? 'ذكر' : 'أنثى' }}</span>
                        </div>
                    </div>
                    <div class="flex items-center">
                        <svg class="w-6 h-6 text-green-500" 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>
                        <span class="text-sm text-green-600 mr-2 dark:text-green-400">عضو محدد</span>
                    </div>
                </div>
                
                <!-- Evaluation History for this member -->
                <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
                    <h5 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">إحصائيات التقييمات</h5>
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
                        @php
                            $memberStats = [
                                'total' => $evaluation->user->evaluations()->count(),
                                'approved' => $evaluation->user->evaluations()->where('status', 'approved')->count(),
                                'pending' => $evaluation->user->evaluations()->where('status', 'pending')->count(),
                                'avg_points' => $evaluation->user->evaluations()->where('status', 'approved')->avg('total_daily_points') ?: 0
                            ];
                        @endphp
                        <div class="bg-gray-50 dark:bg-gray-900/50 rounded p-3">
                            <div class="text-lg font-bold text-gray-900 dark:text-white">{{ $memberStats['total'] }}</div>
                            <div class="text-xs text-gray-500 dark:text-gray-400">إجمالي التقييمات</div>
                        </div>
                        <div class="bg-green-50 dark:bg-green-900/20 rounded p-3">
                            <div class="text-lg font-bold text-green-600 dark:text-green-400">{{ $memberStats['approved'] }}</div>
                            <div class="text-xs text-gray-500 dark:text-gray-400">معتمدة</div>
                        </div>
                        <div class="bg-yellow-50 dark:bg-yellow-900/20 rounded p-3">
                            <div class="text-lg font-bold text-yellow-600 dark:text-yellow-400">{{ $memberStats['pending'] }}</div>
                            <div class="text-xs text-gray-500 dark:text-gray-400">في الانتظار</div>
                        </div>
                        <div class="bg-blue-50 dark:bg-blue-900/20 rounded p-3">
                            <div class="text-lg font-bold text-blue-600 dark:text-blue-400">{{ number_format($memberStats['avg_points'], 1) }}</div>
                            <div class="text-xs text-gray-500 dark:text-gray-400">متوسط النقاط</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Form Fields -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
            <!-- Basic Information -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <div>
                    <label for="evaluation_date" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        تاريخ التقييم <span class="text-red-500">*</span>
                    </label>
                    <input type="date" id="evaluation_date" name="evaluation_date" 
                           value="{{ $evaluation->evaluation_date->format('Y-m-d') }}" 
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm   text-gray-500 dark:text-gray-400 ">
                    
                </div>

                <div>
                    <label for="attendance_status" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        حالة الحضور <span class="text-red-500">*</span>
                    </label>
                    <select id="attendance_status" name="attendance_status" required 
                            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="present" @selected(old('attendance_status', $evaluation->attendance_status) == 'present')>حاضر</option>
                        <option value="absent_with_excuse" @selected(old('attendance_status', $evaluation->attendance_status) == 'absent_with_excuse')>غائب بعذر</option>
                        <option value="absent_without_excuse" @selected(old('attendance_status', $evaluation->attendance_status) == 'absent_without_excuse')>غائب بدون عذر</option>
                    </select>
                    @error('attendance_status') 
                        <p class="text-red-600 text-sm mt-1">{{ $message }}</p> 
                    @enderror
                </div>
            </div>

 <!-- Points Section -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
    <!-- واتساب -->
    <div>
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
            نقاط التواجد في واتساب <span class="text-red-500">*</span>
        </label>
        <div class="space-y-3">
            <label class="flex items-start cursor-pointer p-3 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition">
                <input type="radio" name="whatsapp_presence" value="0" 
                       {{ old('whatsapp_presence', $evaluation->whatsapp_presence) == '0' ? 'checked' : '' }}
                       class="mt-1 w-4 h-4 text-green-600 border-gray-300 focus:ring-green-500 focus:ring-2">
                <div class="mr-3">
                    <div class="text-sm font-medium text-gray-900 dark:text-white">0 نقاط</div>
                    <div class="text-xs text-gray-500 dark:text-gray-400">لم يتواجد إطلاقاً</div>
                </div>
            </label>
            
            <label class="flex items-start cursor-pointer p-3 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition">
                <input type="radio" name="whatsapp_presence" value="1"
                       {{ old('whatsapp_presence', $evaluation->whatsapp_presence) == '1' ? 'checked' : '' }}
                       class="mt-1 w-4 h-4 text-green-600 border-gray-300 focus:ring-green-500 focus:ring-2">
                <div class="mr-3">
                    <div class="text-sm font-medium text-gray-900 dark:text-white">1 نقطة</div>
                    <div class="text-xs text-gray-500 dark:text-gray-400">نهار فقط أو ليل فقط</div>
                </div>
            </label>
            
            <label class="flex items-start cursor-pointer p-3 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition">
                <input type="radio" name="whatsapp_presence" value="2"
                       {{ old('whatsapp_presence', $evaluation->whatsapp_presence) == '2' ? 'checked' : '' }}
                       class="mt-1 w-4 h-4 text-green-600 border-gray-300 focus:ring-green-500 focus:ring-2">
                <div class="mr-3">
                    <div class="text-sm font-medium text-gray-900 dark:text-white">2 نقطة</div>
                    <div class="text-xs text-gray-500 dark:text-gray-400">متواجد طوال اليوم</div>
                </div>
            </label>
        </div>
        @error('whatsapp_presence') 
            <p class="text-red-600 text-sm mt-2">{{ $message }}</p> 
        @enderror
    </div>

    <!-- تيكتوك -->
    <div>
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
            نقاط التفاعل في تيكتوك <span class="text-red-500">*</span>
        </label>
        <div class="space-y-3">
            <label class="flex items-start cursor-pointer p-3 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition">
                <input type="radio" name="tiktok_interaction" value="0"
                       {{ old('tiktok_interaction', $evaluation->tiktok_interaction) == '0' ? 'checked' : '' }}
                       class="mt-1 w-4 h-4 text-purple-600 border-gray-300 focus:ring-purple-500 focus:ring-2">
                <div class="mr-3">
                    <div class="text-sm font-medium text-gray-900 dark:text-white">0 نقاط</div>
                    <div class="text-xs text-gray-500 dark:text-gray-400">لم يتفاعل إطلاقاً</div>
                </div>
            </label>
            
            <label class="flex items-start cursor-pointer p-3 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition">
                <input type="radio" name="tiktok_interaction" value="1"
                       {{ old('tiktok_interaction', $evaluation->tiktok_interaction) == '1' ? 'checked' : '' }}
                       class="mt-1 w-4 h-4 text-purple-600 border-gray-300 focus:ring-purple-500 focus:ring-2">
                <div class="mr-3">
                    <div class="text-sm font-medium text-gray-900 dark:text-white">1 نقطة</div>
                    <div class="text-xs text-gray-500 dark:text-gray-400">تفاعل نهار فقط أو ليل فقط</div>
                </div>
            </label>
            
            <label class="flex items-start cursor-pointer p-3 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition">
                <input type="radio" name="tiktok_interaction" value="2"
                       {{ old('tiktok_interaction', $evaluation->tiktok_interaction) == '2' ? 'checked' : '' }}
                       class="mt-1 w-4 h-4 text-purple-600 border-gray-300 focus:ring-purple-500 focus:ring-2">
                <div class="mr-3">
                    <div class="text-sm font-medium text-gray-900 dark:text-white">2 نقطة</div>
                    <div class="text-xs text-gray-500 dark:text-gray-400">تفاعل طوال اليوم</div>
                </div>
            </label>
        </div>
        @error('tiktok_interaction') 
            <p class="text-red-600 text-sm mt-2">{{ $message }}</p> 
        @enderror
    </div>
</div>

      

            <!-- Text Areas -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <div>
                    <label for="excuse_reason" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        سبب العذر (اختياري)
                    </label>
                    <textarea id="excuse_reason" name="excuse_reason" rows="4" 
                              placeholder="اكتب سبب العذر إذا كان هناك غياب بعذر..."
                              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">{{ old('excuse_reason', $evaluation->excuse_reason) }}</textarea>
                    @error('excuse_reason') 
                        <p class="text-red-600 text-sm mt-1">{{ $message }}</p> 
                    @enderror
                </div>

                <div>
                    <label for="evaluator_notes" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        ملاحظات المقيم (اختياري)
                    </label>
                    <textarea id="evaluator_notes" name="evaluator_notes" rows="4" 
                              placeholder="اكتب ملاحظاتك حول التقييم..."
                              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">{{ old('evaluator_notes', $evaluation->evaluator_notes) }}</textarea>
                    @error('evaluator_notes') 
                        <p class="text-red-600 text-sm mt-1">{{ $message }}</p> 
                    @enderror
                </div>
            </div>

            <!-- Show Evaluator Name Option -->
            <div class="mb-6">
                <div class="flex items-center">
                    <input type="checkbox" name="show_evaluator_name" id="show_evaluator_name" value="1" 
                           {{ old('show_evaluator_name', $evaluation->show_evaluator_name) ? 'checked' : '' }} 
                           class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                    <label for="show_evaluator_name" class="mr-2 block text-sm text-gray-700 dark:text-gray-300">
                        إظهار هويتي كمقيم للتقييم
                    </label>
                </div>
                <p class="text-xs text-gray-500 mt-1">إذا لم تختر هذا الخيار، سيظهر التقييم كمجهول المصدر</p>
            </div>

            <!-- Points Preview -->
            <div class="mb-6 p-4 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
                <div class="flex items-center justify-between mb-3">
                    <div class="flex items-center">
                        <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="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
                            </svg>
                        </div>
                        <h4 class="text-sm font-medium text-blue-800 dark:text-blue-200">معاينة النقاط:</h4>
                    </div>
                    <div class="text-right">
                        <div class="text-xs text-gray-500 dark:text-gray-400">النقاط الحالية</div>
                        <div class="text-sm font-semibold text-gray-700 dark:text-gray-300">{{ $evaluation->total_daily_points }}</div>
                    </div>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <div class="text-lg font-bold text-blue-700 dark:text-blue-300 mb-2">
                            <span id="pointsPreview">إجمالي النقاط الجديد: {{ $evaluation->total_daily_points }}</span>
                        </div>
                        <div class="text-xs text-blue-600 dark:text-blue-400 space-y-1">
                            <p>واتساب: <span id="whatsappPoints">{{ $evaluation->whatsapp_presence }}</span> نقطة</p>
                            <p>تيكتوك: <span id="tiktokPoints">{{ $evaluation->tiktok_interaction }}</span> نقطة</p>
                            <p id="absenceDeduction" class="text-red-600 dark:text-red-400" {{ $evaluation->attendance_status != 'absent_without_excuse' ? 'style=display:none;' : '' }}>
                                خصم بسبب الغياب بدون عذر: -2 نقطة
                            </p>
                        </div>
                    </div>
                    
                    @if($evaluation->status == 'approved')
                    <div class="bg-white dark:bg-gray-800 rounded p-3 border">
                        <div class="text-xs text-gray-500 dark:text-gray-400 mb-1">تأثير التعديل:</div>
                        <div id="pointsDifference" class="text-sm font-medium text-gray-700 dark:text-gray-300">
                            لا يوجد تغيير
                        </div>
                        <div class="text-xs text-gray-400 mt-1">
                            سيتم تحديث نقاط العضو تلقائياً
                        </div>
                    </div>
                    @endif
                </div>
                
            </div>

            <!-- Action Buttons -->
            <div class="flex flex-col sm:flex-row-reverse gap-3">
                <button type="submit" id="submitBtn"
                        class="inline-flex justify-center px-6 py-3 bg-amber-600 hover:bg-amber-700 disabled:bg-gray-400 disabled:cursor-not-allowed 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path>
                    </svg>
                    <span id="submitBtnText">حفظ التعديلات</span>
                </button>
                
                <a href="{{ route('moderator.evaluations.show', $evaluation) }}" 
                   class="inline-flex justify-center px-6 py-3 bg-blue-600 hover:bg-blue-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="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>
                
                <a href="{{ route('moderator.evaluations.index') }}" 
                   class="inline-flex justify-center px-6 py-3 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="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                    </svg>
                    العودة للقائمة
                </a>
            </div>
        </div>
    </form>
</div>

<style>
.form-error {
    border-color: #EF4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.fade-in {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const originalPoints = {{ $evaluation->total_daily_points }};
    const isApproved = {{ $evaluation->status == 'approved' ? 'true' : 'false' }};
    
    // Form elements
    const whatsappSelect = document.getElementById('whatsapp_presence');
    const tiktokSelect = document.getElementById('tiktok_interaction');
    const attendanceSelect = document.getElementById('attendance_status');
    const warningsInput = document.getElementById('warnings_count');
    const submitBtn = document.getElementById('submitBtn');
    const submitBtnText = document.getElementById('submitBtnText');
    const form = document.getElementById('evaluationForm');
    
    // Display elements
    const pointsPreview = document.getElementById('pointsPreview');
    const whatsappPoints = document.getElementById('whatsappPoints');
    const tiktokPoints = document.getElementById('tiktokPoints');
    const absenceDeduction = document.getElementById('absenceDeduction');
    const pointsDifference = document.getElementById('pointsDifference');
    
    let isSubmitting = false;
    
// Points preview update - استماع لجميع radio buttons و select
document.querySelectorAll('input[name="whatsapp_presence"]').forEach(radio => {
    radio.addEventListener('change', updatePointsPreview);
});

document.querySelectorAll('input[name="tiktok_interaction"]').forEach(radio => {
    radio.addEventListener('change', updatePointsPreview);
});

if (attendanceSelect) {
    attendanceSelect.addEventListener('change', updatePointsPreview);
}

    // Warnings validation
    warningsInput.addEventListener('input', validateWarnings);
    
    // Form submission with enhanced validation
    form.addEventListener('submit', function(e) {
        if (isSubmitting) {
            e.preventDefault();
            return false;
        }
        
        // Clear any existing errors
        clearFormErrors();
        
        // Validate form
        const validation = validateForm();
        if (!validation.isValid) {
            e.preventDefault();
            displayFormErrors(validation.errors);
            return false;
        }
        
        // Show loading state
        isSubmitting = true;
        submitBtn.disabled = true;
        submitBtnText.textContent = 'جاري الحفظ...';
        submitBtn.classList.add('opacity-75');
        
        // Confirmation for approved evaluations
        if (isApproved) {
            const newPoints = calculateNewPoints();
            const difference = newPoints - originalPoints;
            
            if (difference !== 0) {
                const confirmMessage = difference > 0 
                    ? `سيتم إضافة ${difference} نقطة لرصيد العضو. هل أنت متأكد؟`
                    : `سيتم خصم ${Math.abs(difference)} نقطة من رصيد العضو. هل أنت متأكد؟`;
                
                if (!confirm(confirmMessage)) {
                    e.preventDefault();
                    // Reset loading state
                    isSubmitting = false;
                    submitBtn.disabled = false;
                    submitBtnText.textContent = 'حفظ التعديلات';
                    submitBtn.classList.remove('opacity-75');
                    return false;
                }
            }
        }
        
        return true;
    });
    
function validateForm() {
    const errors = [];
    
    // Check required radio buttons for whatsapp_presence
    const whatsappPresence = document.querySelector('input[name="whatsapp_presence"]:checked');
    if (!whatsappPresence) {
        errors.push({
            field: 'whatsapp_presence',
            message: 'يجب تحديد نقاط واتساب'
        });
    }
    
    // Check required radio buttons for tiktok_interaction
    const tiktokInteraction = document.querySelector('input[name="tiktok_interaction"]:checked');
    if (!tiktokInteraction) {
        errors.push({
            field: 'tiktok_interaction',
            message: 'يجب تحديد نقاط تيكتوك'
        });
    }
    
    // Check attendance_status
    const attendanceStatus = attendanceSelect;
    if (!attendanceStatus?.value) {
        errors.push({
            field: 'attendance_status',
            message: 'يجب تحديد حالة الحضور'
        });
    }
    
    // Validate warnings count
    const warningsCount = warningsInput?.value;
    if (warningsCount && (parseInt(warningsCount) < 0 || parseInt(warningsCount) > 10)) {
        errors.push({
            field: 'warnings_count',
            message: 'عدد الإنذارات يجب أن يكون بين 0 و 10'
        });
    }
    
    // Validate excuse reason for absent with excuse
    const excuseReason = document.getElementById('excuse_reason')?.value;
    
    if (attendanceStatus?.value === 'absent_with_excuse' && !excuseReason?.trim()) {
        errors.push({
            field: 'excuse_reason',
            message: 'يجب كتابة سبب العذر عند اختيار "غائب بعذر"'
        });
    }
    
    return {
        isValid: errors.length === 0,
        errors: errors
    };
}
    
    function displayFormErrors(errors) {
        errors.forEach(error => {
            const field = document.getElementById(error.field);
            if (field) {
                field.classList.add('form-error');
                
                // Create error message if it doesn't exist
                let errorMsg = field.parentNode.querySelector('.text-red-600');
                if (!errorMsg) {
                    errorMsg = document.createElement('p');
                    errorMsg.className = 'text-red-600 text-sm mt-1';
                    field.parentNode.appendChild(errorMsg);
                }
                errorMsg.textContent = error.message;
            }
        });
    }
    
    function clearFormErrors() {
        // Remove error styling
        document.querySelectorAll('.form-error').forEach(el => {
            el.classList.remove('form-error');
        });
        
        // Remove error messages (except those from server-side validation)
        document.querySelectorAll('.text-red-600:not([data-server-error])').forEach(el => {
            if (el.textContent.includes('يجب') || el.textContent.includes('يرجى')) {
                el.remove();
            }
        });
    }
    
function updatePointsPreview() {
    const whatsappRadio = document.querySelector('input[name="whatsapp_presence"]:checked');
    const tiktokRadio = document.querySelector('input[name="tiktok_interaction"]:checked');
    const attendance = attendanceSelect?.value;
    
    const whatsapp = whatsappRadio ? parseInt(whatsappRadio.value) : 0;
    const tiktok = tiktokRadio ? parseInt(tiktokRadio.value) : 0;
    
    let totalPoints = whatsapp + tiktok;
    
    // Update individual points display
    if (whatsappPoints) whatsappPoints.textContent = whatsapp;
    if (tiktokPoints) tiktokPoints.textContent = tiktok;
    
    // Handle absence deduction - لا تخصم إذا كانت النقاط صفر أصلاً
    if (attendance === 'absent_without_excuse' && totalPoints > 0) {
        totalPoints = Math.max(0, totalPoints - 2);
        if (absenceDeduction) absenceDeduction.style.display = 'block';
    } else {
        if (absenceDeduction) absenceDeduction.style.display = 'none';
    }
    
    if (pointsPreview) {
        pointsPreview.textContent = `إجمالي النقاط الجديد: ${totalPoints}`;
        
        // Update preview color based on points
        const previewContainer = pointsPreview.parentElement;
        if (previewContainer) {
            previewContainer.className = previewContainer.className.replace(/text-\w+-\d+/g, '');
            
            if (totalPoints >= 3) {
                previewContainer.classList.add('text-green-700', 'dark:text-green-300');
            } else if (totalPoints >= 1) {
                previewContainer.classList.add('text-yellow-700', 'dark:text-yellow-300');
            } else {
                previewContainer.classList.add('text-red-700', 'dark:text-red-300');
            }
        }
    }
    
    // Show points difference if evaluation is approved
    if (isApproved && pointsDifference) {
        const difference = totalPoints - originalPoints;
        if (difference > 0) {
            pointsDifference.textContent = `+${difference} نقطة`;
            pointsDifference.className = 'text-sm font-medium text-green-600 dark:text-green-400';
        } else if (difference < 0) {
            pointsDifference.textContent = `${difference} نقطة`;
            pointsDifference.className = 'text-sm font-medium text-red-600 dark:text-red-400';
        } else {
            pointsDifference.textContent = 'لا يوجد تغيير';
            pointsDifference.className = 'text-sm font-medium text-gray-700 dark:text-gray-300';
        }
    }
}

    function validateWarnings() {
        if (!warningsInput) return;
        
        const value = parseInt(warningsInput.value);
        const errorContainer = warningsInput.parentNode.querySelector('.text-red-600');
        
        // Remove existing error message
        if (errorContainer && !errorContainer.hasAttribute('data-server-error')) {
            errorContainer.remove();
        }
        
        // Validate warnings count
        if (isNaN(value) || value < 0 || value > 10) {
            warningsInput.classList.add('form-error');
            const errorMsg = document.createElement('p');
            errorMsg.className = 'text-red-600 text-sm mt-1';
            errorMsg.textContent = 'عدد الإنذارات يجب أن يكون رقم بين 0 و 10';
            warningsInput.parentNode.appendChild(errorMsg);
        } else {
            warningsInput.classList.remove('form-error');
        }
    }
    
function calculateNewPoints() {
    const whatsappRadio = document.querySelector('input[name="whatsapp_presence"]:checked');
    const tiktokRadio = document.querySelector('input[name="tiktok_interaction"]:checked');
    const attendance = attendanceSelect?.value;
    
    const whatsapp = whatsappRadio ? parseInt(whatsappRadio.value) : 0;
    const tiktok = tiktokRadio ? parseInt(tiktokRadio.value) : 0;
    
    let totalPoints = whatsapp + tiktok;
    
    if (attendance === 'absent_without_excuse' && totalPoints > 0) {
        totalPoints = Math.max(0, totalPoints - 2);
    }
    
    return totalPoints;
}


    // Initialize the preview
    updatePointsPreview();
    
    // Add smooth transitions to form elements
    [whatsappSelect, tiktokSelect, attendanceSelect, warningsInput].forEach(element => {
        if (element) {
            element.addEventListener('focus', function() {
                this.style.transform = 'scale(1.02)';
                this.style.transition = 'all 0.2s ease';
            });
            
            element.addEventListener('blur', function() {
                this.style.transform = 'scale(1)';
            });
        }
    });
});
</script>

@endsection