@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">
                        يرجى ملء البيانات التالية بدقة لنشر الكورس في المنصة
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-8">

        <form action="{{ route('admin.courses.store') }}" method="POST" id="courseForm" novalidate>
            @csrf

            <!-- قسم 1: المعلومات الأساسية -->
            <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="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') }}"
                               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') }}</textarea>
                    </div>
                </div>
            </div>

            <!-- قسم 2: التصنيف والمدرب -->
            <div class="mb-8 grid grid-cols-1 md:grid-cols-2 gap-8">
                <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 }}">{{ $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">
                            <svg x-show="!selectedId" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                            </svg>
                            <svg x-show="selectedId" class="w-5 h-5 text-green-500" 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>
                        </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 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>

            <!-- قسم 3: التكاليف والجدول الزمني -->
            <div class="mb-8 bg-gray-50/50 p-6 rounded-xl border border-gray-100">
                <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="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">مدفوع</option>
                            <option value="free">مجاني</option>
                            <option value="sponsored">مدعوم</option>
                        </select>
                    </div>
                    <div>
                        <label class="text-xs font-semibold text-gray-500 mb-2 block">السعر (ل.س)</label>
                        <input type="number" name="price" value="0" class="input-field">
                    </div>
                    <div>
                        <label class="text-xs font-semibold text-gray-500 mb-2 block">سعة المتدربين</label>
                        <input type="number" name="capacity" value="20" 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">تاريخ البداية <span class="text-red-500">*</span></label>
                        <input type="date" name="start_date" class="input-field" required>
                    </div>
                    <div>
                        <label class="text-xs font-semibold text-gray-500 mb-2 block">تاريخ النهاية <span class="text-red-500">*</span></label>
                        <input type="date" name="end_date" class="input-field" required>
                    </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') }}"
                               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>

            <!-- قسم 4: المهارات العملية -->
            <div class="mb-12" x-data="{ skills: [{ name: '', description: '' }] }">
                <div class="flex items-center justify-between mb-6">
                    <h3 class="text-sm font-black text-gray-400 uppercase tracking-widest flex items-center gap-2">
                        <span class="w-2 h-2 bg-purple-500 rounded-full"></span>
                        المهارات التي سيتم تقييمها
                    </h3>
                    <button type="button" @click="skills.push({ name: '', description: '' })"
                            class="bg-purple-50 text-purple-600 px-4 py-2 rounded-xl text-xs font-black hover:bg-purple-600 hover:text-white transition-all">
                        + إضافة مهارة
                    </button>
                </div>
                <div class="space-y-4">
                    <template x-for="(skill, index) in skills" :key="index">
                        <div class="flex flex-col md:flex-row gap-4 bg-white p-4 rounded-2xl border border-gray-100 shadow-sm relative">
                            <input type="text" :name="'skills['+index+'][name]'" x-model="skill.name" class="flex-1 px-4 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-4 py-2 rounded-lg border border-gray-100 focus:border-[#1e3a8a] outline-none text-sm" placeholder="وصف معايير النجاح">
                            <button type="button" @click="skills.splice(index, 1)" x-show="skills.length > 1" class="text-red-400 hover:text-red-600">
                                <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 class="flex items-center justify-end gap-4 border-t border-gray-50 pt-8">
                <a href="{{ route('admin.courses.index') }}" class="text-gray-400 font-bold px-6">إلغاء</a>
                <button type="submit" class="bg-[#1e3a8a] hover:bg-[#152a63] text-white px-12 py-4 rounded-2xl text-lg font-black shadow-xl shadow-blue-900/20 transition-all active:scale-95">
                    نشر الكورس الآن
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    function instructorSearch() {
        return {
            query: '',
            selectedId: '',
            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;
            }
        }
    }

    document.getElementById('courseForm').addEventListener('submit', function(e) {
        if (!document.querySelector('input[name="instructor_id"]').value) {
            e.preventDefault();
            Swal.fire({ icon: 'warning', title: 'تنبيه', text: 'يرجى اختيار مدرب من القائمة المقترحة', confirmButtonColor: '#1e3a8a' });
        }
    });
</script>
@endsection