@extends('layouts.app')

@section('content')
<div class="min-h-screen py-8 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50">
    <div class="max-w-7xl mx-auto">
        <!-- Header -->
        <div class="bg-gradient-to-r from-[#1e3a8a] via-[#1e40af] to-[#1e3a8a] rounded-3xl shadow-2xl shadow-blue-200 p-8 mb-8 relative overflow-hidden">
            <!-- زخرفة خلفية -->
            <div class="absolute top-0 right-0 w-64 h-64 bg-white/5 rounded-full -translate-y-1/2 translate-x-1/2"></div>
            <div class="absolute bottom-0 left-0 w-48 h-48 bg-white/5 rounded-full translate-y-1/2 -translate-x-1/2"></div>

            <div class="relative flex flex-col md:flex-row md:items-center md:justify-between gap-6">
                <div class="flex items-center gap-5">
                    <div class="bg-white/90 rounded-xl shadow-md hover:bg-white transition-colors flex items-center justify-center">
                        <x-back-button href="{{ route('trainee.courses.enrolled') }}" />
                    </div>
                    <div class="w-20 h-20 bg-white/20 backdrop-blur-sm rounded-2xl flex items-center justify-center shadow-lg border-2 border-white/30">
                        <svg class="w-10 h-10 text-white" 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-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                    <div class="text-white">
                        <h2 class="text-2xl md:text-3xl font-bold mb-1">مهارات الكورس</h2>
                        <p class="text-blue-100 text-sm font-medium">{{ $course->title }}</p>
                    </div>
                </div>
                <div class="flex items-center gap-4">
                    <div class="bg-white/20 backdrop-blur-sm border-2 border-white/30 rounded-2xl px-6 py-4 text-center min-w-[140px]">
                        <p class="text-xs text-blue-100 font-bold mb-1">المهارات المتقنة</p>
                        <p class="text-2xl font-black text-white">{{ $skills->where('status', 'mastered')->count() }} / {{ $skills->count() }}</p>
                    </div>
                    <div class="bg-white/20 backdrop-blur-sm border-2 border-white/30 rounded-2xl px-6 py-4 text-center min-w-[140px]">
                        <p class="text-xs text-blue-100 font-bold mb-1">نسبة الإتقان</p>
                        <p class="text-2xl font-black text-white">{{ $skills->count() > 0 ? round(($skills->where('status', 'mastered')->count() / $skills->count()) * 100) : 0 }}%</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Skills List -->
        @if($skills->count() > 0)
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                @foreach($skills as $skill)
                <div class="bg-white rounded-3xl shadow-lg shadow-gray-200/50 hover:shadow-2xl hover:shadow-blue-100 transition-all duration-500 flex flex-col h-full border border-gray-100 group">
                    <!-- Skill Header -->
                    <div class="px-6 py-5 border-b border-gray-100 bg-gradient-to-br from-white to-gray-50/50">
                        <div class="flex items-start justify-between">
                            <div class="flex-1">
                                <h3 class="text-lg font-bold text-gray-900 mb-2 group-hover:text-[#1e3a8a] transition-colors">{{ $skill->skill_name }}</h3>
                                <p class="text-sm text-gray-500 line-clamp-2">{{ $skill->description }}</p>
                            </div>
                            <div class="flex-shrink-0 ml-4">
                                {!! $skill->badge !!}
                            </div>
                        </div>
                    </div>

                    <!-- Skill Content -->
                    <div class="px-6 py-5 flex-1 flex flex-col justify-center">
                        @if($skill->status === 'not_activated')
                            <div class="text-center">
                                <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-3">
                                    <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                                    </svg>
                                </div>
                                <p class="text-sm font-bold text-gray-600 mb-1">غير مفعلة</p>
                                <p class="text-xs text-gray-400">هذه المهارة غير متاحة حالياً</p>
                            </div>
                        @elseif($skill->status === 'under_training')
                            <div class="space-y-4">
                                <div class="text-center">
                                    <div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-3">
                                        <svg class="w-8 h-8 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
                                        </svg>
                                    </div>
                                    <p class="text-sm font-bold text-yellow-700 mb-1">قيد التدريب</p>
                                    <p class="text-xs text-gray-500">قم برفع دليل الإنجاز</p>
                                </div>

                                @if($skill->task_file)
                                    <div class="bg-blue-50 rounded-xl p-3">
                                        <h4 class="text-xs font-bold text-blue-800 mb-2">ملف المهارة</h4>
                                        <a href="{{ asset('storage/' . $skill->task_file) }}" 
                                           target="_blank"
                                           class="inline-flex items-center px-3 py-2 border border-transparent text-xs leading-4 font-bold rounded-lg text-blue-700 bg-blue-100 hover:bg-blue-200 transition-colors">
                                            <svg class="ml-1 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"></path>
                                            </svg>
                                            تحميل ملف المهارة
                                        </a>
                                    </div>
                                @endif

                                <form id="uploadForm{{ $skill->id }}" class="space-y-3">
                                    @csrf
                                    <div>
                                        <label class="block text-xs font-bold text-gray-700 mb-1">رفع دليل المهارة</label>
                                        <input type="file" 
                                               name="file" 
                                               class="w-full text-xs text-gray-500 file:mr-2 file:py-2 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-bold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"
                                               accept=".pdf,.doc,.docx,.zip,.rar,.txt"
                                               required>
                                    </div>
                                    <button type="submit" class="w-full flex justify-center items-center gap-2 py-2.5 px-4 border border-transparent rounded-xl shadow-md text-xs font-bold text-white bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 transition-all">
                                        <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-8l-4-4m0 0L8 8m4-4v12"></path>
                                        </svg>
                                        رفع الدليل
                                    </button>
                                </form>

                                <script>
                                document.getElementById('uploadForm{{ $skill->id }}').addEventListener('submit', function(e) {
                                    e.preventDefault();
                                    const form = this;
                                    const formData = new FormData(form);
                                    const submitBtn = form.querySelector('button[type="submit"]');

                                    submitBtn.disabled = true;
                                    submitBtn.innerHTML = 'جاري الرفع...';

                                    fetch('{{ route("trainee.skills.upload", [$course->id, $skill->id]) }}', {
                                        method: 'POST',
                                        body: formData,
                                        headers: {
                                            'X-Requested-With': 'XMLHttpRequest',
                                            'Accept': 'application/json',
                                        },
                                        credentials: 'same-origin'
                                    })
                                    .then(response => response.json())
                                    .then(data => {
                                        if (data.success) {
                                            EbdaAlert.success('تم رفع دليل الإنجاز بنجاح! سيراجعه المدرب قريباً.', 'تم الرفع بنجاح ✅');
                                            setTimeout(() => location.reload(), 2000);
                                        } else {
                                            EbdaAlert.error(data.message || 'حدث خطأ غير متوقع أثناء رفع الملف', 'فشل الرفع');
                                            submitBtn.disabled = false;
                                            submitBtn.innerHTML = `
                                                <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-8l-4-4m0 0L8 8m4-4v12"></path>
                                                </svg>
                                                رفع الدليل
                                            `;
                                        }
                                    })
                                    .catch(() => {
                                        EbdaAlert.error('تعذّر الاتصال بالخادم. تحقق من الشبكة.', 'خطأ في الاتصال');
                                        submitBtn.disabled = false;
                                        submitBtn.innerHTML = `
                                            <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-8l-4-4m0 0L8 8m4-4v12"></path>
                                            </svg>
                                            رفع الدليل
                                        `;
                                    });
                                });
                                </script>
                            </div>
                        @elseif($skill->status === 'pending_evaluation')
                            <div class="text-center">
                                <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-3">
                                    <svg class="w-8 h-8 text-blue-600 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                                    </svg>
                                </div>
                                <p class="text-sm font-bold text-blue-800 mb-1">جاري التقييم</p>
                                <p class="text-xs text-gray-500 mb-2">تم رفع الدليل</p>
                                @if($skill->evidence_uploaded_at)
                                    <p class="text-xs text-blue-600"><span class="font-semibold">تاريخ الرفع:</span> {{ $skill->evidence_uploaded_at->format('Y-m-d H:i') }}</p>
                                @endif
                            </div>
                        @elseif($skill->status === 'mastered')
                            <div class="text-center">
                                <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3">
                                    <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                    </svg>
                                </div>
                                <p class="text-sm font-bold text-green-800 mb-1">تم الإتقان</p>
                                @if($skill->score)
                                    <div class="inline-flex items-center gap-2 bg-green-200 text-green-800 px-3 py-1 rounded-full text-xs font-bold mb-2">
                                        <span>الدرجة:</span>
                                        <span>{{ $skill->score }}/100</span>
                                    </div>
                                @endif
                                @if($skill->trainer_notes)
                                    <div class="bg-white/50 rounded-lg p-2 text-left">
                                        <p class="text-xs text-green-700">"{{ $skill->trainer_notes }}"</p>
                                    </div>
                                @endif
                            </div>
                        @endif
                    </div>
                </div>
                @endforeach
            </div>
        @else
            <div class="bg-white rounded-3xl p-16 text-center border border-gray-100 shadow-lg">
                <div class="w-24 h-24 bg-gradient-to-br from-gray-100 to-gray-200 rounded-full flex items-center justify-center mx-auto mb-6">
                    <svg class="w-12 h-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
                    </svg>
                </div>
                <h3 class="text-xl font-bold text-gray-800 mb-2">لا توجد مهارات</h3>
                <p class="text-sm text-gray-600 font-medium">لا توجد مهارات مضافة لهذا الكورس حالياً</p>
            </div>
        @endif
    </div>
</div>
@endsection