@extends('layouts.admin')

@section('title', 'تعديل الكورس - منصة ابدأ')

@section('page-title', 'تعديل الكورس')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Welcome Section -->
    <div class="bg-blue-50 rounded-2xl shadow-sm border border-blue-100 p-6 mb-6 relative overflow-hidden">
        <div class="relative z-10">
            <div class="flex items-center justify-between">
                <div>
                    <div class="flex items-center gap-2 mb-1">
                        <x-back-button href="{{ route('admin.courses.index') }}" label="العودة لإدارة الكورسات" />
                        <h1 class="text-2xl font-bold text-[#1e3a8a]">
                            تعديل بيانات الكورس
                        </h1>
                    </div>
                    <p class="text-gray-600 text-sm">
                        تحديث معلومات كورس: <span class="text-gray-700 font-semibold">{{ $course->title }}</span>
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content Card -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        <form action="{{ route('admin.courses.update', $course) }}" method="POST" id="courseForm" novalidate>
            @csrf
            @method('PUT')

            <!-- قسم 1: المعلومات الأساسية -->
            <div class="mb-8">
                <h3 class="text-base font-bold text-gray-800 mb-4 flex items-center gap-2">
                    <div class="w-8 h-8 bg-[#1e3a8a]/10 rounded-lg flex items-center justify-center">
                        <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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                    </div>
                    المعلومات الأساسية
                </h3>

                <div class="bg-gray-50/50 rounded-xl p-5 border border-gray-100">
                    <div class="space-y-6">
                    <!-- العنوان -->
                    <div class="space-y-2">
                        <label class="text-xs font-semibold text-gray-500 mb-2 block">عنوان الكورس <span class="text-red-500">*</span></label>
                        <input type="text" name="title" value="{{ old('title', $course->title) }}"
                               class="input-field"
                               placeholder="أدخل عنوان الكورس" required>
                    </div>

                    <!-- الوصف -->
                    <div class="space-y-2">
                        <label class="text-xs font-semibold text-gray-500 mb-2 block">وصف الكورس <span class="text-red-500">*</span></label>
                        <textarea name="description" rows="4"
                                  class="input-field resize-none"
                                  placeholder="أدخل وصفاً تفصيلياً..." required>{{ old('description', $course->description) }}</textarea>
                    </div>
                </div>
                </div>
            </div>

            <!-- قسم 2: التصنيف والمدرب -->
            <div class="mb-8">
                <h3 class="text-sm font-black text-gray-400 uppercase tracking-widest mb-6 flex items-center gap-2">
                    <span class="w-2 h-2 bg-blue-500 rounded-full"></span>
                    التصنيف والمدرب
                </h3>

                <div class="bg-gray-50/50 rounded-xl p-5 border border-gray-100">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="space-y-2">
                    <label class="text-xs font-semibold text-gray-500 mb-2 block">فئة الكورس <span class="text-red-500">*</span></label>
                    <select name="category_id" class="input-field" required>
                        <option value="">اختر الفئة</option>
                        @foreach($categories as $category)
                            <option value="{{ $category->id }}" {{ old('category_id', $course->category_id) == $category->id ? 'selected' : '' }}>
                                {{ $category->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <!-- محرك البحث عن المدرب مع جلب المدرب الحالي -->
                <div x-data="instructorSearch()" class="relative">
                    <label class="text-xs font-semibold text-gray-500 mb-2 block">المدرب المسؤول <span class="text-red-500">*</span></label>
                    <div class="relative">
                        <input type="text" x-model="query" @input="filter()" @focus="open = true" @click.away="open = false"
                               class="input-field pr-10"
                               :class="selectedId ? 'border-green-500 bg-green-50' : 'border-gray-100 focus:border-[#1e3a8a]'"
                               placeholder="ابحث عن اسم المدرب...">
                        <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                            <span x-show="!selectedId">🔍</span>
                            <span x-show="selectedId" class="text-green-500 text-xl">✓</span>
                        </div>
                    </div>
                    <input type="hidden" name="instructor_id" x-model="selectedId" required>

                    <!-- قائمة الاقتراحات -->
                    <div x-show="open && filtered.length > 0" class="absolute z-50 w-full mt-2 bg-white rounded-2xl shadow-2xl border border-gray-50 overflow-hidden">
                        <template x-for="item in filtered" :key="item.id">
                            <div @click="select(item)" class="px-5 py-3 hover:bg-blue-50 cursor-pointer flex items-center border-b border-gray-50 last:border-0 transition-colors">
                                <div class="w-8 h-8 rounded-lg bg-[#1e3a8a] text-white flex items-center justify-center font-bold ml-3" x-text="item.name.charAt(0)"></div>
                                <span class="text-sm font-bold text-gray-700" x-text="item.name"></span>
                            </div>
                        </template>
                    </div>
                </div>
                </div>
            </div>
            </div>

            <!-- قسم 3: التكاليف والجدول الزمني -->
            <div class="mb-8">
                <h3 class="text-sm font-black text-gray-400 uppercase tracking-widest mb-6 flex items-center gap-2">
                    <span class="w-2 h-2 bg-blue-500 rounded-full"></span>
                    التكاليف والجدول الزمني
                </h3>

                <div class="bg-gray-50/50 rounded-xl p-5 border border-gray-100">

                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
                    <div>
                        <label class="text-xs font-semibold text-gray-500 mb-2 block">نوع الكورس</label>
                        <select name="type" class="input-field">
                            <option value="paid" {{ old('type', $course->type) == 'paid' ? 'selected' : '' }}>مدفوع</option>
                            <option value="free" {{ old('type', $course->type) == 'free' ? 'selected' : '' }}>مجاني</option>
                            <option value="sponsored" {{ old('type', $course->type) == 'sponsored' ? 'selected' : '' }}>مدعوم</option>
                        </select>
                    </div>
                    <div>
                        <label class="text-xs font-semibold text-gray-500 mb-2 block">السعر (ل.س)</label>
                        <input type="number" name="price" value="{{ old('price', $course->price) }}" class="input-field">
                    </div>
                    <div>
                        <label class="text-xs font-semibold text-gray-500 mb-2 block">سعة المتدربين</label>
                        <input type="number" name="capacity" value="{{ old('capacity', $course->capacity) }}" class="input-field">
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div>
                        <label class="text-xs font-semibold text-gray-500 mb-2 block">تاريخ البداية</label>
                        <input type="date" name="start_date" value="{{ old('start_date', \Carbon\Carbon::parse($course->start_date)->format('Y-m-d')) }}" class="input-field">
                    </div>
                    <div>
                        <label class="text-xs font-semibold text-gray-500 mb-2 block">تاريخ النهاية</label>
                        <input type="date" name="end_date" value="{{ old('end_date', \Carbon\Carbon::parse($course->end_date)->format('Y-m-d')) }}" class="input-field">
                    </div>
                    <div>
                        <label class="text-xs font-semibold text-gray-500 mb-2 block">موقع التدريب (فيزيائي) <span class="text-red-500">*</span></label>
                        <input type="text" name="location" value="{{ old('location', $course->location) }}"
                               class="input-field {{ $errors->has('location') ? 'border-red-400' : '' }}"
                               placeholder="مثال: دمشق" required>
                        @error('location')
                            <p class="text-red-500 text-xs mt-1 flex items-center gap-1">
                                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>
                </div>
                </div>
            </div>

            <!-- قسم 4: المهارات العملية (مع جلب المهارات الحالية) -->
            <div class="mb-8" x-data="{ skills: @js($course->practicalSkills->map(fn($s) => ['id' => $s->id, 'name' => $s->skill_name, 'description' => $s->description])->toArray()) }">
                <h3 class="text-base font-bold text-gray-800 mb-4 flex items-center gap-2">
                    <div class="w-8 h-8 bg-purple-50 rounded-lg flex items-center justify-center">
                        <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="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 01-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 01-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
                        </svg>
                    </div>
                    المهارات التي سيتم تقييمها
                </h3>

                <div class="bg-gray-50/50 rounded-xl p-5 border border-gray-100">
                    <div class="flex items-center justify-between mb-4">
                        <button type="button" @click="skills.push({ name: '', description: '' })"
                                class="bg-purple-50 text-purple-600 px-4 py-2 rounded-lg text-xs font-semibold hover:bg-purple-600 hover:text-white transition-all">
                            + إضافة مهارة
                        </button>
                    </div>
                    <div class="space-y-3">
                        <template x-for="(skill, index) in skills" :key="index">
                            <div class="flex flex-col md:flex-row gap-3 bg-white p-3 rounded-xl border border-gray-100 shadow-sm">
                                <input type="hidden" :name="'skills['+index+'][id]'" x-model="skill.id">
                                <input type="text" :name="'skills['+index+'][name]'" x-model="skill.name" class="flex-1 px-3 py-2 rounded-lg border border-gray-100 focus:border-[#1e3a8a] outline-none text-sm" placeholder="اسم المهارة">
                                <input type="text" :name="'skills['+index+'][description]'" x-model="skill.description" class="md:w-2/3 px-3 py-2 rounded-lg border border-gray-100 focus:border-[#1e3a8a] outline-none text-sm" placeholder="الوصف">
                                <button type="button" @click="skills.splice(index, 1)" class="text-red-400 hover:text-red-600 hover:bg-red-50 p-2 rounded-lg transition-all" title="حذف المهارة">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                    </svg>
                                </button>
                            </div>
                        </template>
                    </div>
                </div>
                </div>
            </div>

            <!-- الحالة وتحديث البيانات -->
            <div class="mt-8 mb-6 bg-gray-50/50 rounded-xl p-5 border border-gray-100 flex items-center gap-4">
                <div class="flex items-center">
                    <input type="checkbox" name="is_visible" id="is_visible" value="1"
                           {{ old('is_visible', $course->is_visible) ? 'checked' : '' }}
                           class="w-5 h-5 text-[#1e3a8a] border-gray-300 rounded cursor-pointer">
                    <label for="is_visible" class="mr-3 text-sm font-semibold text-gray-600 cursor-pointer select-none">
                        تفعيل ظهور الكورس للجميع
                    </label>
                </div>
                <p class="text-xs text-gray-400">عند إلغاء التحديد، لن يظهر الكورس للمتدربين في المنصة.</p>
            </div>

            <!-- الأزرار -->
            <div class="flex items-center justify-end gap-4 pt-6">
                <a href="{{ route('admin.courses.index') }}" class="px-6 py-2.5 rounded-lg text-sm font-semibold text-gray-600 hover:bg-gray-50 transition-all border border-gray-200">
                    إلغاء
                </a>
                <button type="submit" class="bg-[#1e3a8a] hover:bg-[#152a63] text-white px-8 py-2.5 rounded-lg text-sm font-semibold shadow-sm transition-all active:scale-95">
                    حفظ التعديلات
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    function instructorSearch() {
        return {
            query: '{{ $course->instructor->name ?? '' }}',
            selectedId: '{{ $course->instructor_id }}',
            open: false,
            list: @json($instructors),
            filtered: [],
            filter() {
                this.selectedId = '';
                if (this.query.length < 1) { this.filtered = []; this.open = false; return; }
                this.filtered = this.list.filter(i => i.name.toLowerCase().includes(this.query.toLowerCase()));
                this.open = true;
            },
            select(item) {
                this.query = item.name;
                this.selectedId = item.id;
                this.open = false;
            }
        }
    }
</script>
@endsection