@extends('layouts.app')

@section('title', 'تقييم المهارات - منصة ابدأ')

@section('content')
<div class="min-h-screen py-16 px-4 sm:px-6 lg:px-8 bg-ebda-light animate-fade-in">
    <div class="max-w-7xl mx-auto">
        <!-- Success Message -->
        @if(session('success'))
            <div class="bg-green-50 border-2 border-green-200 rounded-2xl p-4 mb-6 flex items-center gap-3">
                <svg class="w-6 h-6 text-green-500 flex-shrink-0" 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"/>
                </svg>
                <p class="text-green-700 font-bold">{{ session('success') }}</p>
            </div>
        @endif

        <!-- Back Button -->
        <a href="{{ route('instructor.courses.show', $course->id) }}" class="inline-flex items-center text-gray-500 hover:text-[#1e3a8a] mb-6 transition-colors text-sm">
            <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="M15 19l-7-7 7-7"/>
            </svg>
            العودة للكورس
        </a>

        <!-- Trainee Profile Card -->
        @if(isset($trainee))
            <div class="bg-gradient-to-br from-[#1e3a8a] to-[#1e40af] rounded-[1.5rem] p-5 mb-6 text-white">
                <div class="flex items-center gap-4">
                    <!-- Avatar -->
                    <x-user-avatar :user="$trainee" size="w-14 h-14" />

                    <!-- Info -->
                    <div class="flex-1">
                        <h1 class="text-lg md:text-xl font-black mb-1">{{ $trainee->name }}</h1>
                        <p class="text-blue-100 text-xs mb-3 font-medium">{{ $trainee->email }}</p>

                        <!-- Progress Stats -->
                        <div class="flex items-center gap-4">
                            <div>
                                <p class="text-[10px] text-white/70 mb-1 font-medium">المهارات المتقنة</p>
                                <p class="text-base font-black">{{ $masteredCount ?? 0 }}/{{ $totalSkills ?? 0 }}</p>
                            </div>
                            <div class="h-8 w-px bg-white/20"></div>
                            <div>
                                <p class="text-[10px] text-white/70 mb-1 font-medium">نسبة الإتقان</p>
                                <p class="text-base font-black">{{ $progressPercentage ?? 0 }}%</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <!-- Trainee Selection Section (only shown when no trainee is selected) -->
        @if(!isset($trainee))
            <div class="bg-white rounded-[1.5rem] border border-gray-100 shadow-sm p-6 mb-6">
                <h3 class="text-lg font-black text-gray-800 mb-4">اختر المتدرب للتقييم</h3>
                <div class="relative">
                    <select id="trainee-select" onchange="loadTraineeEvaluations()" class="w-full px-5 py-4 border-2 border-gray-100 bg-white rounded-2xl outline-none focus:border-[#1e3a8a]/30 focus:ring-4 focus:ring-[#1e3a8a]/5 text-sm font-medium appearance-none cursor-pointer">
                        <option value="">-- اختر متدرب --</option>
                        @foreach($course->trainees as $trainee)
                            <option value="{{ $trainee->id }}">{{ $trainee->name }}</option>
                        @endforeach
                    </select>
                    <div class="absolute inset-y-0 left-0 flex items-center px-4 pointer-events-none">
                        <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                        </svg>
                    </div>
                </div>
            </div>
        @endif

        <!-- Skills Evaluation Section -->
        <div id="skills-section" @if(isset($trainee)) class="block" @else class="hidden" @endif>
            @if($course->practicalSkills->count() > 0)
                <form action="{{ isset($trainee) ? route('instructor.courses.evaluations.storeAll', ['course' => $course->id, 'trainee' => $trainee->id]) : '#' }}" method="POST" id="evaluations-form">
                    @csrf
                    <input type="hidden" name="trainee_id" id="trainee_id" value="{{ isset($trainee) ? $trainee->id : '' }}">

                    <div class="space-y-8">
                        @foreach($course->practicalSkills as $skill)
                            <div class="bg-white rounded-[1.5rem] border border-gray-100 shadow-sm overflow-hidden hover:-translate-y-1 hover:shadow-lg transition-all duration-300 ease-in-out">
                                <!-- Skill Header -->
                                <div class="bg-gradient-to-r from-[#1e3a8a] to-[#1e40af] px-6 py-4">
                                    <h3 class="text-lg font-black text-white mb-1 font-tajawal">{{ $skill->skill_name }}</h3>
                                    @if($skill->description)
                                        <p class="text-blue-100 text-xs font-medium">{{ $skill->description }}</p>
                                    @endif
                                </div>

                                <!-- Evaluation Form -->
                                <div class="p-6">
                                    <input type="hidden" name="evaluations[{{ $skill->id }}][skill_id]" value="{{ $skill->id }}">

                                    <!-- Trainee Evidence Section -->
                                    @if(isset($trainee) && isset($evaluations[$skill->id]) && $evaluations[$skill->id]->evidence_file)
                                        <div class="mb-5 p-4 bg-blue-50 rounded-2xl border border-blue-200">
                                            <div class="flex items-center justify-between mb-3">
                                                <h4 class="font-bold text-gray-800 flex items-center gap-2">
                                                    <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                                                    </svg>
                                                    ملف المتدرب
                                                </h4>
                                                <span class="text-xs text-gray-500">
                                                    {{ $evaluations[$skill->id]->evidence_uploaded_at ? \Carbon\Carbon::parse($evaluations[$skill->id]->evidence_uploaded_at)->format('Y-m-d H:i') : '' }}
                                                </span>
                                            </div>
                                            <a href="{{ route('files.skill.evidence', $evaluations[$skill->id]->id) }}" 
                                               target="_blank"
                                               class="inline-flex items-center gap-2 px-4 py-2 bg-[#1e3a8a] text-white text-sm font-bold rounded-xl hover:bg-[#1e40af] transition-colors">
                                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
                                                </svg>
                                                تحميل وعرض الملف
                                            </a>
                                        </div>
                                    @endif

                                    <!-- Evaluation Options -->
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-5">
                                        <!-- Mastered Option -->
                                        <label class="cursor-pointer">
                                            <input type="radio"
                                                   name="evaluations[{{ $skill->id }}][status]"
                                                   value="mastered"
                                                   id="mastered_{{ $skill->id }}"
                                                   class="hidden"
                                                   onchange="selectStatus('{{ $skill->id }}', 'mastered')"
                                                   {{ isset($evaluations[$skill->id]) && $evaluations[$skill->id]->status === 'mastered' ? 'checked' : '' }}>
                                            <div class="flex items-center justify-center gap-3 py-4 px-5 rounded-2xl border-2 border-gray-200 hover:border-green-300 hover:bg-green-50 transition-all cursor-pointer"
                                                 id="mastered_card_{{ $skill->id }}">
                                                <svg class="w-5 h-5 text-gray-400" id="mastered_icon_{{ $skill->id }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                                </svg>
                                                <span class="text-base font-black text-gray-600" id="mastered_text_{{ $skill->id }}">تم الإتقان ✅</span>
                                            </div>
                                        </label>

                                        <!-- In Progress Option -->
                                        <label class="cursor-pointer">
                                            <input type="radio"
                                                   name="evaluations[{{ $skill->id }}][status]"
                                                   value="in_progress"
                                                   id="in_progress_{{ $skill->id }}"
                                                   class="hidden"
                                                   onchange="selectStatus('{{ $skill->id }}', 'in_progress')"
                                                   {{ isset($evaluations[$skill->id]) && $evaluations[$skill->id]->status === 'in_progress' ? 'checked' : '' }}>
                                            <div class="flex items-center justify-center gap-3 py-4 px-5 rounded-2xl border-2 border-gray-200 hover:border-yellow-300 hover:bg-yellow-50 transition-all cursor-pointer"
                                                 id="in_progress_card_{{ $skill->id }}">
                                                <svg class="w-5 h-5 text-gray-400" id="in_progress_icon_{{ $skill->id }}" 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"/>
                                                </svg>
                                                <span class="text-base font-black text-gray-600" id="in_progress_text_{{ $skill->id }}">قيد التدريب ⏳</span>
                                            </div>
                                        </label>
                                    </div>

                                    <!-- Score Input -->
                                    <div class="mb-5">
                                        <label class="block text-xs font-bold text-gray-400 mb-2 font-medium">الدرجة (0-100)</label>
                                        <input type="number"
                                               name="evaluations[{{ $skill->id }}][score]"
                                               id="score_{{ $skill->id }}"
                                               min="0"
                                               max="100"
                                               value="{{ isset($evaluations[$skill->id]) ? $evaluations[$skill->id]->score : 0 }}"
                                               class="w-full px-4 py-3 bg-blue-50 border-2 border-gray-100 rounded-2xl focus:border-[#1e3a8a] focus:outline-none transition-colors text-gray-700 font-bold text-base"
                                               required>
                                    </div>

                                    <!-- Feedback Textarea -->
                                    <div class="mb-5">
                                        <label class="block text-xs font-bold text-gray-400 mb-2 font-medium">ملاحظات فنية</label>
                                        <textarea
                                            name="evaluations[{{ $skill->id }}][feedback]"
                                            id="feedback_{{ $skill->id }}"
                                            rows="3"
                                            placeholder="اكتب ملاحظاتك الفنية هنا..."
                                            class="w-full px-4 py-3 bg-blue-50 border-2 border-gray-100 rounded-2xl focus:border-[#1e3a8a] focus:outline-none transition-colors text-gray-700 resize-none font-bold text-sm"
                                        >{{ isset($evaluations[$skill->id]) ? $evaluations[$skill->id]->feedback : '' }}</textarea>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <!-- Submit Button -->
                    <div class="mt-8">
                        <button
                            type="submit"
                            class="w-full bg-[#1e3a8a] text-white py-4 rounded-2xl font-black hover:bg-blue-900 transition-colors shadow-md hover:shadow-lg flex items-center justify-center gap-3"
                        >
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                            </svg>
                            اعتماد جميع التقييمات
                        </button>
                    </div>
                </form>
            @else
                <div class="text-center py-12">
                    <svg class="w-16 h-16 text-gray-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/>
                    </svg>
                    <h3 class="text-lg font-black text-gray-700 mb-2">لا توجد مهارات عملية محددة</h3>
                    <p class="text-gray-500 text-sm">لم يتم إضافة أي مهارات عملية لهذا الكورس بعد</p>
                </div>
            @endif
        </div>
    </div>
</div>

<script>
// تخزين التقييمات السابقة
let evaluations = {};

function loadTraineeEvaluations() {
    const traineeId = document.getElementById('trainee-select').value;
    const form = document.getElementById('evaluations-form');

    if (!traineeId) {
        document.getElementById('skills-section').classList.add('hidden');
        form.action = '#';
        return;
    }

    // تحديث trainee_id في النموذج
    document.getElementById('trainee_id').value = traineeId;

    // الانتقال لصفحة التقييم الجديدة
    window.location.href = `/instructor/courses/{{ $course->id }}/trainees/${traineeId}/skills`;
}

function selectStatus(skillId, status) {
    // إلغاء تحديد جميع الأزرار
    document.getElementById(`mastered_${skillId}`).checked = false;
    document.getElementById(`in_progress_${skillId}`).checked = false;

    // تحديث الأزرار
    if (status === 'mastered') {
        document.getElementById(`mastered_${skillId}`).checked = true;
        updateStatusButton(skillId, 'mastered', 'green');
    } else if (status === 'in_progress') {
        document.getElementById(`in_progress_${skillId}`).checked = true;
        updateStatusButton(skillId, 'in_progress', 'yellow');
    }
}

function updateStatusButton(skillId, status, color) {
    const masteredIcon = document.getElementById(`mastered_icon_${skillId}`);
    const masteredText = document.getElementById(`mastered_text_${skillId}`);
    const masteredCard = document.getElementById(`mastered_card_${skillId}`);

    const inProgressIcon = document.getElementById(`in_progress_icon_${skillId}`);
    const inProgressText = document.getElementById(`in_progress_text_${skillId}`);
    const inProgressCard = document.getElementById(`in_progress_card_${skillId}`);

    // إعادة تعيين الأنماط الافتراضية
    masteredIcon.classList.remove('text-green-500', 'text-yellow-500');
    masteredIcon.classList.add('text-gray-400');
    masteredCard.classList.remove('border-green-500', 'bg-green-50');
    masteredCard.classList.add('border-gray-200');

    inProgressIcon.classList.remove('text-green-500', 'text-yellow-500');
    inProgressIcon.classList.add('text-gray-400');
    inProgressCard.classList.remove('border-yellow-500', 'bg-yellow-50');
    inProgressCard.classList.add('border-gray-200');

    // تحديث النمط المحدد
    if (status === 'mastered') {
        masteredIcon.classList.remove('text-gray-400');
        masteredIcon.classList.add('text-green-500');
        masteredCard.classList.remove('border-gray-200');
        masteredCard.classList.add('border-green-500', 'bg-green-50');
    } else if (status === 'in_progress') {
        inProgressIcon.classList.remove('text-gray-400');
        inProgressIcon.classList.add('text-yellow-500');
        inProgressCard.classList.remove('border-gray-200');
        inProgressCard.classList.add('border-yellow-500', 'bg-yellow-50');
    }
}

// تحديث الأزرار عند تحميل الصفحة
document.addEventListener('DOMContentLoaded', function() {
    @if(isset($trainee) && isset($evaluations))
        @foreach($evaluations as $skillId => $evaluation)
            selectStatus('{{ $skillId }}', '{{ $evaluation->status }}');
        @endforeach
    @endif

    // إضافة مستمع لحدث إرسال النموذج
    const form = document.getElementById('evaluations-form');
    if (form) {
        form.addEventListener('submit', function(e) {
            console.log('Form submitting...');
            const formData = new FormData(form);
            console.log('Form data:');
            for (let [key, value] of formData.entries()) {
                console.log(key + ':', value);
            }
        });
    }
});
</script>
@endsection