@extends('layouts.app')

@section('title', $course->title . ' - منصة ابدأ')

@section('content')
<div class="min-h-screen py-8 px-4 sm:px-6 lg:px-8 bg-[#f8fafc]">
    <div class="max-w-7xl mx-auto">
        <!-- Hero Section -->
        <div class="bg-gradient-to-br from-[#1e3a8a] to-[#1e40af] rounded-2xl p-6 mb-6 text-white relative overflow-hidden">
            <div class="relative flex flex-col md:flex-row md:items-start md:justify-between gap-4">
                
                <div class="flex items-start gap-5">
                    <!-- Back Button -->
                    <div class="bg-white/90 rounded-xl shadow-md hover:bg-white transition-colors flex items-center justify-center shrink-0 mt-1">
                        <x-back-button href="{{ route('profile.show') }}" />
                    </div>

                    <!-- Title & Category -->
                    <div class="flex-1">
                        @if($course->category)
                            <span class="inline-block px-3 py-1 bg-white/20 backdrop-blur-sm text-white text-xs font-medium rounded-full mb-2">
                                {{ $course->category->name }}
                            </span>
                        @endif

                        <h1 class="text-xl md:text-2xl font-bold mb-1">
                            {{ $course->title }}
                        </h1>
                        <p class="text-white/80 text-sm">سجل إنجازاتك وتتبع تقدمك</p>
                    </div>
                </div>

                <!-- Progress Badge -->
                <div class="flex-shrink-0">
                    <div class="bg-white/20 backdrop-blur-sm rounded-xl px-4 py-3">
                        <p class="text-xs text-white/80 mb-2">تقدمك الإجمالي</p>
                        <p class="text-lg font-bold mb-2">{{ $masteredCount ?? 0 }}/{{ $totalSkills ?? 0 }} مهارة</p>

                        <!-- Progress Bar -->
                        @if($totalSkills > 0)
                            <div class="w-full bg-white/30 rounded-full h-2 mb-2">
                                <div class="bg-white h-2 rounded-full transition-all duration-500" style="width: {{ ($masteredCount / $totalSkills * 100) }}%"></div>
                            </div>
                        @endif

                        <!-- Status Counts -->
                        <div class="flex gap-2 text-xs">
                            @if(isset($inTrainingCount) && $inTrainingCount > 0)
                                <span class="bg-amber-400/30 text-white px-2 py-0.5 rounded-full">
                                    {{ $inTrainingCount }} قيد التدريب
                                </span>
                            @endif
                            @if(isset($inProgressCount) && $inProgressCount > 0)
                                <span class="bg-purple-400/30 text-white px-2 py-0.5 rounded-full">
                                    {{ $inProgressCount }} جاري التقييم
                                </span>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Two Columns Layout -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- Left Column (Main Content) -->
            <div class="lg:col-span-2 space-y-6">
                <!-- Skills Checklist -->
                <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
                    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-4">
                        <div>
                            <h2 class="text-lg font-bold text-gray-800">قائمة المهارات العملية</h2>
                            <span class="text-xs text-gray-400">تتبع تقدمك في كل مهارة</span>
                        </div>

                        <!-- Skills Filter -->
                        <div class="flex gap-2">
                            <button onclick="filterSkills('all')" class="skill-filter-btn px-4 py-2 text-xs font-bold rounded-xl transition-all bg-[#1e3a8a] text-white">
                                الكل
                            </button>
                            <button onclick="filterSkills('in_training')" class="skill-filter-btn px-4 py-2 text-xs font-bold rounded-xl transition-all bg-gray-100 text-gray-600 hover:bg-gray-200">
                                قيد التدريب
                            </button>
                            <button onclick="filterSkills('pending_evaluation')" class="skill-filter-btn px-4 py-2 text-xs font-bold rounded-xl transition-all bg-gray-100 text-gray-600 hover:bg-gray-200">
                                جاري التقييم
                            </button>
                            <button onclick="filterSkills('mastered')" class="skill-filter-btn px-4 py-2 text-xs font-bold rounded-xl transition-all bg-gray-100 text-gray-600 hover:bg-gray-200">
                                تم الإتقان
                            </button>
                        </div>
                    </div>

                    <!-- Skills Status Summary -->
                    @if($totalSkills > 0)
                        <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
                            <div class="bg-gray-50 rounded-xl p-3 text-center">
                                <div class="text-2xl font-bold text-gray-600 mb-1">{{ $totalSkills }}</div>
                                <div class="text-xs text-gray-500">إجمالي المهارات</div>
                            </div>
                            <div class="bg-amber-50 rounded-xl p-3 text-center">
                                <div class="text-2xl font-bold text-amber-600 mb-1">{{ $inTrainingCount ?? 0 }}</div>
                                <div class="text-xs text-amber-500">قيد التدريب</div>
                            </div>
                            <div class="bg-purple-50 rounded-xl p-3 text-center">
                                <div class="text-2xl font-bold text-purple-600 mb-1">{{ $inProgressCount ?? 0 }}</div>
                                <div class="text-xs text-purple-500">جاري التقييم</div>
                            </div>
                            <div class="bg-emerald-50 rounded-xl p-3 text-center">
                                <div class="text-2xl font-bold text-emerald-600 mb-1">{{ $masteredCount ?? 0 }}</div>
                                <div class="text-xs text-emerald-500">تم الإتقان</div>
                            </div>
                        </div>
                    @endif

                    @if($course->practicalSkills && $course->practicalSkills->count() > 0)
                        <div class="space-y-3">
                            @foreach($course->practicalSkills as $skill)
                                @php
                                    $evaluation = $skill->evaluations()->where('trainee_id', auth()->id())->first();
                                    $status = $evaluation ? $evaluation->status : null;
                                    $isMastered = $status === 'mastered';
                                    $isActive = $skill->is_active;
                                    $hasEvidence = $evaluation && !empty($evaluation->evidence_file);

                                    // تحديد الحالة النهائية - متوافق مع صفحة المهارات
                                    if (!$isActive) {
                                        $finalStatus = 'not_activated'; // غير مفعلة
                                    } elseif (!$evaluation) {
                                        $finalStatus = 'in_training'; // قيد التدريب
                                    } elseif (!$hasEvidence) {
                                        $finalStatus = 'in_training'; // قيد التدريب
                                    } elseif ($evaluation->status === 'in_progress' && !empty($evaluation->evidence_file)) {
                                        $finalStatus = 'pending_evaluation'; // جاري التقييم
                                    } elseif ($evaluation->status === 'mastered' && !empty($evaluation->evidence_file)) {
                                        $finalStatus = 'mastered'; // تم الإتقان
                                    } else {
                                        $finalStatus = 'in_training'; // قيد التدريب
                                    }
                                @endphp
                                <div class="border {{ 
                                    $finalStatus === 'mastered' ? 'border-emerald-200 bg-emerald-50/30' : 
                                    ($finalStatus === 'pending_evaluation' ? 'border-purple-200 bg-purple-50/30' : 
                                    ($finalStatus === 'in_training' ? 'border-blue-200 bg-blue-50/30' : 
                                    'border-gray-200')) 
                                }} rounded-xl p-4 transition-all hover:shadow-md" data-skill-status="{{ $finalStatus }}">
                                    <div class="flex items-start justify-between">
                                        <div class="flex-1">
                                            <div class="flex items-center mb-2">
                                                <div class="w-8 h-8 {{ $finalStatus === 'mastered' ? 'bg-green-50' : ($finalStatus === 'pending_evaluation' ? 'bg-purple-50' : ($finalStatus === 'in_training' ? 'bg-blue-50' : 'bg-gray-100')) }} rounded-lg flex items-center justify-center flex-shrink-0 ml-3">
                                                    @if($finalStatus === 'mastered')
                                                        <svg class="w-4 h-4 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>
                                                    @elseif($finalStatus === 'pending_evaluation')
                                                        <svg class="w-4 h-4 text-purple-600" 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>
                                                    @elseif($finalStatus === 'in_training')
                                                        <svg class="w-4 h-4 text-[#1e3a8a]" 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>
                                                    @else
                                                        <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                                        </svg>
                                                    @endif
                                                </div>
                                                <div>
                                                    <div class="flex items-center gap-2 mb-1">
                                                        <h3 class="text-sm font-bold text-gray-800">{{ $skill->skill_name }}</h3>
                                                        <span class="inline-flex items-center px-2 py-0.5 text-xs font-bold rounded-full {{ $isActive ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700' }}">
                                                            {{ $isActive ? 'مفعلة' : 'غير مفعلة' }}
                                                        </span>
                                                        @if($finalStatus === 'mastered')
                                                            <span class="inline-flex items-center px-2 py-0.5 text-xs font-bold rounded-full bg-emerald-100 text-emerald-700">
                                                                <svg class="w-3 h-3 ml-1" 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>
                                                                تم الإتقان
                                                            </span>
                                                        @elseif($finalStatus === 'pending_evaluation')
                                                            <span class="inline-flex items-center px-2 py-0.5 text-xs font-bold rounded-full bg-purple-100 text-purple-700">
                                                                <svg class="w-3 h-3 ml-1" fill="currentColor" viewBox="0 0 20 20">
                                                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path>
                                                                </svg>
                                                                جاري التقييم
                                                            </span>
                                                        @elseif($finalStatus === 'in_training')
                                                            <span class="inline-flex items-center px-2 py-0.5 text-xs font-bold rounded-full bg-amber-100 text-amber-700">
                                                                <svg class="w-3 h-3 ml-1" fill="currentColor" viewBox="0 0 20 20">
                                                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path>
                                                                </svg>
                                                                قيد التدريب
                                                            </span>
                                                        @endif
                                                    </div>
                                                    <p class="text-xs text-gray-400 mt-1">{{ $skill->description }}</p>
                                                </div>
                                            </div>

                                            <!-- Status Badge -->
                                            <div class="flex items-center mt-3">
                                                @if($finalStatus === 'mastered')
                                                    <span class="inline-flex items-center px-3 py-1.5 bg-emerald-50 text-emerald-700 text-xs font-bold rounded-full">
                                                        <svg class="w-3 h-3 ml-1.5" 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>
                                                        تم الإتقان
                                                    </span>
                                                @elseif($finalStatus === 'pending_evaluation')
                                                    <span class="inline-flex items-center px-3 py-1.5 bg-purple-50 text-purple-700 text-xs font-bold rounded-full">
                                                        <svg class="w-3 h-3 ml-1.5" fill="currentColor" viewBox="0 0 20 20">
                                                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path>
                                                        </svg>
                                                        جاري التقييم
                                                    </span>
                                                @elseif($finalStatus === 'in_training')
                                                    <span class="inline-flex items-center px-3 py-1.5 bg-amber-50 text-amber-700 text-xs font-bold rounded-full">
                                                        <svg class="w-3 h-3 ml-1.5" fill="currentColor" viewBox="0 0 20 20">
                                                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path>
                                                        </svg>
                                                        قيد التدريب
                                                    </span>
                                                @else
                                                    <span class="inline-flex items-center px-3 py-1.5 bg-slate-50 text-slate-500 text-xs font-bold rounded-full">
                                                        <svg class="w-3 h-3 ml-1.5" fill="currentColor" viewBox="0 0 20 20">
                                                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9 9a1 1 0 112 0 1 1 0 01-2 0zm1 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1z" clip-rule="evenodd"></path>
                                                        </svg>
                                                        لم يبدأ بعد
                                                    </span>
                                                @endif
                                            </div>

                                            <!-- Instructor Feedback Section -->
                                            @if($finalStatus === 'mastered' && $evaluation && ($evaluation->score || $evaluation->feedback))
                                                <div class="mt-4 p-4 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl border border-blue-100">
                                                    <div class="flex items-center gap-2 mb-3">
                                                        <svg class="w-4 h-4 text-blue-600" 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>
                                                        <h4 class="text-sm font-bold text-gray-800">تقييم المدرب</h4>
                                                    </div>

                                                    @if($evaluation->score)
                                                        <div class="flex items-center gap-2 mb-3">
                                                            <div class="flex-1">
                                                                <div class="flex items-center justify-between mb-1">
                                                                    <span class="text-xs text-gray-600">الدرجة</span>
                                                                    <span class="text-sm font-bold text-blue-700">{{ $evaluation->score }}/100</span>
                                                                </div>
                                                                <div class="w-full bg-gray-200 rounded-full h-2">
                                                                    <div class="bg-gradient-to-r from-blue-600 to-indigo-600 h-2 rounded-full" style="width: {{ $evaluation->score }}%"></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @endif

                                                    @if($evaluation->feedback)
                                                        <div class="bg-white/60 rounded-lg p-3">
                                                            <p class="text-xs text-gray-700 leading-relaxed">{{ $evaluation->feedback }}</p>
                                                        </div>
                                                    @endif
                                                </div>
                                            @endif
                                        </div>

                                        <!-- Upload Button -->
                                        @if($finalStatus === 'in_training')
                                            <button onclick="openUploadModal({{ $skill->id }})" class="flex-shrink-0 px-4 py-2.5 bg-gradient-to-r from-[#1e3a8a] to-[#1e40af] text-white text-xs font-bold rounded-xl hover:from-[#1e40af] hover:to-[#1e3a8a] transition-all duration-300 shadow-md hover:shadow-lg">
                                                <span class="flex items-center">
                                                    <svg class="w-4 h-4 ml-1.5" 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>
                                            </button>
                                        @elseif($finalStatus === 'pending_evaluation')
                                            <button disabled class="flex-shrink-0 px-4 py-2.5 bg-purple-100 text-purple-600 text-xs font-bold rounded-xl cursor-not-allowed">
                                                <span class="flex items-center">
                                                    <svg class="w-4 h-4 ml-1.5" 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>
                                                    جاري التقييم
                                                </span>
                                            </button>
                                        @elseif($finalStatus === 'mastered')
                                            <button disabled class="flex-shrink-0 px-4 py-2.5 bg-green-100 text-green-600 text-xs font-bold rounded-xl cursor-not-allowed">
                                                <span class="flex items-center">
                                                    <svg class="w-4 h-4 ml-1.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>
                                                    تم الإتقان
                                                </span>
                                            </button>
                                        @else
                                            <button disabled class="flex-shrink-0 px-4 py-2.5 bg-gray-300 text-gray-500 text-xs font-bold rounded-xl cursor-not-allowed">
                                                <span class="flex items-center">
                                                    <svg class="w-4 h-4 ml-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                                    </svg>
                                                    لم يبدأ بعد
                                                </span>
                                            </button>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-12">
                            <div class="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                                <svg class="w-10 h-10 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 2m-6 9l2 2 4-4"></path>
                                </svg>
                            </div>
                            <h3 class="text-lg font-bold text-gray-700 mb-2">لا توجد مهارات حالياً</h3>
                            <p class="text-gray-500 text-sm mb-4">سيتم إضافة المهارات العملية قريباً من قبل المدرب</p>
                            <div class="flex items-center justify-center gap-2 text-xs text-gray-400">
                                <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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                <span>تابع تحديثات الكورس</span>
                            </div>
                        </div>
                    @endif
                </div>

                <!-- Evidence Files Section -->
                @if($course->practicalSkills && $course->practicalSkills->count() > 0)
                    @php
                        $evidenceFiles = [];
                        foreach($course->practicalSkills as $skill) {
                            $evaluation = $skill->assessments->where('trainee_id', auth()->id())->first();
                            if ($evaluation && !empty($evaluation->evidence_file)) {
                                $evidenceFiles[] = (object)[
                                    'evaluation_id' => $evaluation->id,
                                    'skill_id' => $skill->id,
                                    'skill_name' => $skill->skill_name,
                                    'file_path' => $evaluation->evidence_file,
                                    'uploaded_at' => $evaluation->evidence_uploaded_at,
                                    'file_size' => $evaluation->evidence_file ? Storage::disk('local')->size($evaluation->evidence_file) : 0,
                                ];
                            }
                        }
                    @endphp

                    @if(!empty($evidenceFiles))
                        <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
                            <h2 class="text-lg font-bold text-gray-800 mb-4">الأدلة المرفوعة</h2>
                            <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
                                @foreach($evidenceFiles as $file)
                                    <div class="relative group">
                                        <div class="w-full h-32 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl flex items-center justify-center">
                                            <svg class="w-12 h-12 text-blue-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"/>
                                            </svg>
                                        </div>
                                        <div class="absolute top-2 right-2">
                                            <span class="inline-flex items-center px-2 py-1 text-xs font-bold rounded-full bg-white/90 text-gray-700">
                                                {{ $file->skill_name }}
                                            </span>
                                        </div>
                                        <div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity rounded-xl flex items-center justify-center">
                                            <a href="{{ route('files.skill.evidence', $file->evaluation_id ?? $file->skill_id) }}" 
                                               target="_blank"
                                               class="p-3 bg-white rounded-full hover:bg-gray-100 transition-colors">
                                                <svg class="w-5 h-5 text-gray-800" 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>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif
                @endif
            </div>

            <!-- Right Column (Sidebar) -->
            <div class="space-y-3">
                <!-- Instructor Card -->
                @if($course->instructor)
                    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4">
                        <div class="flex items-center mb-3">
                            <x-user-avatar :user="$course->instructor" size="w-12 h-12" class="ml-3" />
                            <div>
                                <p class="text-base font-bold text-gray-800">{{ $course->instructor->name }}</p>
                                <p class="text-xs text-gray-400">مدرب معتمد</p>
                            </div>
                        </div>

                        @if($course->instructor->phone)
                            <div class="flex items-center p-3 bg-blue-50 rounded-xl">
                                <svg class="w-4 h-4 text-[#1e3a8a] ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                                </svg>
                                <a href="tel:{{ $course->instructor->phone }}" class="text-sm text-[#1e3a8a] font-bold hover:underline">
                                    {{ $course->instructor->phone }}
                                </a>
                            </div>
                        @endif
                    </div>
                @endif

                <!-- Location Card -->
                @if($course->location)
                    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4">
                        <div class="flex items-center">
                            <div class="w-8 h-8 bg-blue-50 rounded-lg flex items-center justify-center flex-shrink-0 ml-3">
                                <svg class="w-4 h-4 text-[#1e3a8a]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                </svg>
                            </div>
                            <div>
                                <p class="text-xs text-gray-400 mb-1">موقع القاعة التدريبية</p>
                                <p class="text-sm font-bold text-gray-800">{{ $course->location }}</p>
                            </div>
                        </div>
                    </div>
                @endif

                <!-- Course Info -->
                <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 space-y-3">
                    <!-- Date -->
                    @if($course->start_date)
                        <div class="flex items-center">
                            <div class="w-8 h-8 bg-blue-50 rounded-lg flex items-center justify-center flex-shrink-0 ml-3">
                                <svg class="w-4 h-4 text-[#1e3a8a]" 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>
                            <div>
                                <p class="text-xs text-gray-400 mb-0.5">تاريخ البداية</p>
                                <p class="text-xs font-bold text-gray-800">{{ $course->start_date->format('d/m/Y') }}</p>
                            </div>
                        </div>
                    @endif

                    <!-- Duration -->
                    @if($course->duration)
                        <div class="flex items-center">
                            <div class="w-8 h-8 bg-blue-50 rounded-lg flex items-center justify-center flex-shrink-0 ml-3">
                                <svg class="w-4 h-4 text-[#1e3a8a]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                            </div>
                            <div>
                                <p class="text-xs text-gray-400 mb-0.5">المدة</p>
                                <p class="text-xs font-bold text-gray-800">{{ $course->duration }}</p>
                            </div>
                        </div>
                    @endif

                    <!-- Capacity -->
                    @if($course->capacity)
                        <div class="flex items-center">
                            <div class="w-8 h-8 bg-blue-50 rounded-lg flex items-center justify-center flex-shrink-0 ml-3">
                                <svg class="w-4 h-4 text-[#1e3a8a]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                                </svg>
                            </div>
                            <div>
                                <p class="text-xs text-gray-400 mb-0.5">السعة</p>
                                <p class="text-xs font-bold text-gray-800">{{ $course->capacity }} متدرب</p>
                            </div>
                        </div>
                    @endif

                    <!-- Wishlist Button -->
                    <button id="wishlistBtn" onclick="toggleWishlist({{ $course->id }})" class="flex items-center justify-center p-2 transition-all duration-300 hover:scale-110">
                        @if($isInWishlist)
                            <svg class="w-6 h-6 text-[#1e3a8a]" fill="currentColor" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
                            </svg>
                        @else
                            <svg class="w-6 h-6 text-[#1e3a8a]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
                            </svg>
                        @endif
                    </button>

                </div>
            </div>
        </div>
    </div>
</div>

<!-- Upload Modal -->
<div id="uploadModal" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center backdrop-blur-sm">
    <div class="bg-white rounded-2xl shadow-2xl p-6 max-w-md w-full mx-4 transform transition-all">
        <div class="flex items-center justify-between mb-5">
            <h3 class="text-lg font-bold text-gray-800">رفع دليل الإنجاز</h3>
            <button onclick="closeUploadModal()" class="text-gray-400 hover:text-gray-600 transition-colors">
                <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="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
        </div>

        <form id="uploadForm" action="#" method="POST" enctype="multipart/form-data" class="space-y-4">
            @csrf
            <input type="hidden" name="skill_id" id="skill_id">
            <input type="hidden" name="course_id" value="{{ $course->id }}">

            <div>
                <label class="text-xs font-bold text-gray-400 uppercase mb-2 block">الملف</label>
                <div class="relative">
                    <input type="file" name="file" id="fileInput" class="input-field w-full border border-gray-200 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-[#1e3a8a] focus:ring-2 focus:ring-[#1e3a8a]/20 transition-all" required accept=".pdf,.doc,.docx,.zip,.rar,.txt">
                    <div class="absolute inset-y-0 right-0 flex items-center pr-3 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path>
                        </svg>
                    </div>
                </div>
                <p class="text-xs text-gray-400 mt-1">PDF, DOC, DOCX, ZIP, RAR, TXT (حتى 10MB)</p>

                <!-- File Preview -->
                <div id="filePreview" class="hidden mt-3 p-3 bg-gray-50 rounded-xl border border-gray-200">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
                            <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"></path>
                            </svg>
                        </div>
                        <div class="flex-1 min-w-0">
                            <p id="fileName" class="text-sm font-medium text-gray-800 truncate"></p>
                            <p id="fileSize" class="text-xs text-gray-500"></p>
                        </div>
                        <button type="button" onclick="clearFile()" class="text-gray-400 hover:text-red-500 transition-colors">
                            <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="M6 18L18 6M6 6l12 12"></path>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>

            <div>
                <label class="text-xs font-bold text-gray-400 uppercase mb-2 block">الوصف</label>
                <textarea name="description" class="input-field w-full border border-gray-200 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-[#1e3a8a] focus:ring-2 focus:ring-[#1e3a8a]/20 transition-all resize-none" rows="3" required placeholder="اكتب وصفاً لهذا الإنجاز..."></textarea>
            </div>

            <button type="submit" id="submitBtn" class="w-full px-6 py-3 bg-gradient-to-r from-[#1e3a8a] to-[#1e40af] text-white font-bold rounded-xl hover:from-[#1e40af] hover:to-[#1e3a8a] transition-all duration-300 shadow-md hover:shadow-lg flex items-center justify-center gap-2">
                <span id="btnText">رفع الملف</span>
                <svg id="btnLoader" class="hidden w-5 h-5 animate-spin" 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>
            </button>
        </form>
    </div>
</div>

<script>
function openUploadModal(skillId) {
    document.getElementById('skill_id').value = skillId;
    document.getElementById('uploadModal').classList.remove('hidden');
}

function closeUploadModal() {
    document.getElementById('uploadModal').classList.add('hidden');
    clearFile();
}

function clearFile() {
    const fileInput = document.getElementById('fileInput');
    fileInput.value = '';
    document.getElementById('filePreview').classList.add('hidden');
}

// Skills filter function
function filterSkills(status) {
    const skills = document.querySelectorAll('[data-skill-status]');
    const buttons = document.querySelectorAll('.skill-filter-btn');

    // Update button styles
    buttons.forEach(btn => {
        btn.classList.remove('bg-[#1e3a8a]', 'text-white');
        btn.classList.add('bg-gray-100', 'text-gray-600');
    });

    event.target.classList.remove('bg-gray-100', 'text-gray-600');
    event.target.classList.add('bg-[#1e3a8a]', 'text-white');

    // Filter skills
    skills.forEach(skill => {
        const skillStatus = skill.getAttribute('data-skill-status');

        if (status === 'all' || skillStatus === status) {
            skill.classList.remove('hidden');
        } else {
            skill.classList.add('hidden');
        }
    });
}

// Toggle Wishlist function
function toggleWishlist(courseId) {
    const btn = document.getElementById('wishlistBtn');
    const svg = btn.querySelector('svg');
    const isInWishlist = svg.getAttribute('fill') === 'currentColor';
    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

    // Show loading state
    btn.disabled = true;
    btn.classList.add('opacity-50');

    // Determine which route to call
    const url = isInWishlist 
        ? `/trainee/courses/wishlist/${courseId}/remove`
        : `/trainee/courses/wishlist/${courseId}/add`;

    fetch(url, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': csrfToken,
            'Content-Type': 'application/json',
        },
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Toggle heart icon appearance
            if (isInWishlist) {
                // Remove from wishlist - make heart outline
                svg.setAttribute('fill', 'none');
            } else {
                // Add to wishlist - make heart filled
                svg.setAttribute('fill', 'currentColor');
            }

            // Show success notification
            showNotification(data.message, 'success');
        } else {
            showNotification(data.message, 'error');
        }
    })
    .catch(error => {
        showNotification('حدث خطأ أثناء الاتصال بالخادم', 'error');
    })
    .finally(() => {
        // Remove loading state
        btn.disabled = false;
        btn.classList.remove('opacity-50');
    });
}



// Show notification function
function showNotification(message, type) {
    const notification = document.createElement('div');
    notification.className = `fixed top-4 right-4 ${type === 'success' ? 'bg-emerald-500' : 'bg-red-500'} text-white px-6 py-3 rounded-xl shadow-lg z-50 transform transition-all duration-300`;
    notification.innerHTML = `
        <div class="flex items-center gap-3">
            ${type === 'success' 
                ? '<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>'
                : '<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="M6 18L18 6M6 6l12 12"></path></svg>'
            }
            <span class="font-medium">${message}</span>
        </div>
    `;
    document.body.appendChild(notification);

    setTimeout(() => {
        notification.classList.add('opacity-0', 'translate-x-full');
        setTimeout(() => notification.remove(), 300);
    }, 3000);
}

// File preview handler
document.getElementById('fileInput').addEventListener('change', function(e) {
    const file = e.target.files[0];
    const preview = document.getElementById('filePreview');
    const fileName = document.getElementById('fileName');
    const fileSize = document.getElementById('fileSize');
    const maxSize = 10 * 1024 * 1024; // 10MB in bytes

    if (file) {
        // Check file size
        if (file.size > maxSize) {
            const notification = document.createElement('div');
            notification.className = 'fixed top-4 right-4 bg-red-500 text-white px-6 py-3 rounded-xl shadow-lg z-50 transform transition-all duration-300';
            notification.innerHTML = `
                <div class="flex items-center gap-3">
                    <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 2.502-3.716V5.716c0-2.049-1.962-3.716-2.502-3.716H6.938C5.398 2 3.436 3.667 3.436 5.716v8.568c0 2.049 1.962 3.716 2.502 3.716h.016z"></path>
                    </svg>
                    <span class="font-medium">حجم الملف كبير جداً. الحد الأقصى هو 10 ميجابايت.</span>
                </div>
            `;
            document.body.appendChild(notification);

            setTimeout(() => {
                notification.classList.add('opacity-0', 'translate-x-full');
                setTimeout(() => notification.remove(), 300);
            }, 3000);

            this.value = '';
            preview.classList.add('hidden');
            return;
        }

        preview.classList.remove('hidden');
        fileName.textContent = file.name;

        // Format file size
        const sizeInBytes = file.size;
        const sizeInKB = sizeInBytes / 1024;
        const sizeInMB = sizeInKB / 1024;

        if (sizeInMB >= 1) {
            fileSize.textContent = sizeInMB.toFixed(2) + ' MB';
        } else {
            fileSize.textContent = sizeInKB.toFixed(2) + ' KB';
        }
    } else {
        preview.classList.add('hidden');
    }
});

// Handle form submission with AJAX
document.getElementById('uploadForm').addEventListener('submit', function(e) {
    e.preventDefault();

    const skillId = document.getElementById('skill_id').value;
    const courseId = {{ $course->id }};
    const formData = new FormData(this);

    // Show loading state
    const submitButton = document.getElementById('submitBtn');
    const btnText = document.getElementById('btnText');
    const btnLoader = document.getElementById('btnLoader');
    const originalText = btnText.textContent;

    btnText.textContent = 'جاري الرفع...';
    btnLoader.classList.remove('hidden');
    submitButton.disabled = true;

    fetch(`/trainee/courses/${courseId}/skills/${skillId}/upload`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Show success notification
            const notification = document.createElement('div');
            notification.className = 'fixed top-4 right-4 bg-emerald-500 text-white px-6 py-3 rounded-xl shadow-lg z-50 transform transition-all duration-300';
            notification.innerHTML = `
                <div class="flex items-center gap-3">
                    <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>
                    <span class="font-medium">تم رفع دليل الإنجاز بنجاح! جاري التقييم...</span>
                </div>
            `;
            document.body.appendChild(notification);

            setTimeout(() => {
                notification.classList.add('opacity-0', 'translate-x-full');
                setTimeout(() => notification.remove(), 300);
            }, 3000);

            closeUploadModal();
            location.reload();
        } else {
            // Reset button state
            btnText.textContent = originalText;
            btnLoader.classList.add('hidden');
            submitButton.disabled = false;
            // Show error notification
            const notification = document.createElement('div');
            notification.className = 'fixed top-4 right-4 bg-red-500 text-white px-6 py-3 rounded-xl shadow-lg z-50 transform transition-all duration-300';
            notification.innerHTML = `
                <div class="flex items-center gap-3">
                    <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="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                    <span class="font-medium">${data.message || 'حدث خطأ أثناء رفع الملف'}</span>
                </div>
            `;
            document.body.appendChild(notification);

            setTimeout(() => {
                notification.classList.add('opacity-0', 'translate-x-full');
                setTimeout(() => notification.remove(), 300);
            }, 3000);
        }
    })
    .catch(error => {
        // Show error notification

        setTimeout(() => {
            notification.classList.add('opacity-0', 'translate-x-full');
            setTimeout(() => notification.remove(), 300);
        }, 3000);

        // Reset button state
        btnText.textContent = originalText;
        btnLoader.classList.add('hidden');
        submitButton.disabled = false;
    });
});
</script>
@endsection