@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">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
                <!-- Title & Category -->
                <div class="flex items-center gap-5 flex-1">
                    <div class="bg-white/90 rounded-xl shadow-md hover:bg-white transition-colors flex items-center justify-center shrink-0">
                        <x-back-button href="{{ route('courses.index') }}" />
                    </div>
                    <div>
                        @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>
                    </div>
                </div>

                <!-- Price -->
                <div class="flex-shrink-0">
                    @if($course->is_free)
                        <span class="text-lg md:text-xl font-bold">مدعوم</span>
                    @else
                        <span class="text-lg md:text-xl font-bold">{{ number_format($course->price) }} ل.س</span>
                    @endif
                </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">
                <!-- Description Card -->
                <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
                    <h2 class="text-lg font-bold text-gray-800 mb-3">عن الكورس</h2>
                    <p class="text-gray-600 text-sm leading-relaxed">
                        {{ $course->description }}
                    </p>
                </div>

                <!-- Practical Skills -->
                <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>
                    @if($course->practicalSkills && $course->practicalSkills->count() > 0)
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                            @foreach($course->practicalSkills as $skill)
                                <div class="flex items-center p-3 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl border border-blue-100">
                                    <div class="w-8 h-8 bg-[#1e3a8a] rounded-lg flex items-center justify-center flex-shrink-0 ml-3">
                                        <svg class="w-4 h-4 text-white" 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>
                                    </div>
                                    <span class="text-xs font-bold text-gray-800">{{ $skill->skill_name }}</span>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-6">
                            <svg class="w-12 h-12 text-gray-400 mx-auto mb-3" 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>
                            <p class="text-gray-500 text-sm font-medium">سيتم إضافة المهارات العملية قريباً</p>
                        </div>
                    @endif
                </div>
            </div>

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

                <!-- Info Card -->
                <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-5 space-y-3">
                    <!-- Location -->
                    @if($course->location)
                        <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-xs font-bold text-gray-800">{{ $course->location }}</p>
                            </div>
                        </div>
                    @endif

                    <!-- 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-1">التاريخ</p>
                                <p class="text-xs font-bold text-gray-800">{{ $course->start_date->format('d/m/Y') }}</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-1">السعة</p>
                                <p class="text-xs font-bold text-gray-800">{{ $course->capacity }} متدرب</p>
                            </div>
                        </div>
                    @endif
                </div>

                <!-- Action Buttons -->
                <div class="space-y-2">
                    @php
                        $enrollment = $course->trainees()
                            ->where('course_trainee.user_id', auth()->id())
                            ->first();
                        
                        $isEnrolled = $enrollment && !$enrollment->pivot->is_wishlist;
                        $isPending = $isEnrolled && $enrollment->pivot->status === 'pending';
                        
                        $isFull = $course->trainees()->count() >= $course->capacity;
                        $isExpired = $course->end_date && $course->end_date->isPast();
                        $isInWishlist = $enrollment && $enrollment->pivot->is_wishlist;
                    @endphp

                    <!-- Wishlist Button -->
                    @if(!$isEnrolled)
                        <x-wishlist-btn
                            :course-id="$course->id"
                            :is-active="$isInWishlist"
                            size="full"
                        />
                    @endif

                    @if($isEnrolled)
                        @if($isPending)
                            <div class="w-full px-6 py-3 bg-yellow-50 text-yellow-700 font-bold rounded-xl text-center border border-yellow-200">
                                <svg class="w-5 h-5 mx-auto mb-1" 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>
                        @else
                            <div class="w-full px-6 py-3 bg-green-50 text-green-700 font-bold rounded-xl text-center border border-green-200">
                                <svg class="w-5 h-5 mx-auto mb-1" 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>
                        @endif
                    @elseif($isFull)
                        <div class="w-full px-6 py-3 bg-red-50 text-red-700 font-bold rounded-xl text-center border border-red-200">
                            <svg class="w-5 h-5 mx-auto mb-1" 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>
                            وصلت السعة القصوى للكورس
                        </div>
                    @elseif($isExpired)
                        <div class="w-full px-6 py-3 bg-gray-50 text-gray-700 font-bold rounded-xl text-center border border-gray-200">
                            <svg class="w-5 h-5 mx-auto mb-1" 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>
                    @else
                        <form id="enrollForm" action="#" method="POST">
                            @csrf
                            <input type="hidden" name="course_id" value="{{ $course->id }}">
                            <button type="button" id="enrollBtn" onclick="enrollInCourse()" class="w-full px-6 py-3 bg-[#1e3a8a] text-white font-bold rounded-xl hover:bg-[#1e40af] transition-colors shadow-lg shadow-[#1e3a8a]/20">
                                سجل الآن في هذا الكورس
                            </button>
                        </form>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // Wishlist toggling is handled globally by EbdaWishlist (resources/js/wishlist.js)
    // The x-wishlist-btn component calls EbdaWishlist.toggle(courseId) directly

    function enrollInCourse() {
        const btn = document.getElementById('enrollBtn');
        const form = document.getElementById('enrollForm');

        btn.disabled = true;
        btn.textContent = 'جاري التسجيل...';

        const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
        const formData = new FormData();
        formData.append('course_id', {{ $course->id }});
        formData.append('_token', csrfToken);

        fetch('{{ route('trainee.courses.apply') }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': csrfToken,
                'Accept': 'application/json',
            },
            body: formData
        })
        .then(response => {
            if (!response.ok && response.status === 302) {
                throw new Error('redirect');
            }
            return response.json().catch(() => { throw new Error('not_json'); });
        })
        .then(data => {
            if (data.success) {
                EbdaAlert.success('تم تسجيلك في الكورس بنجاح! سيتواصل معك المدرب قريباً.', 'أهلاً بك في الكورس 🎓');
                form.outerHTML = `
                    <div class="w-full px-6 py-3 bg-green-50 text-green-700 font-bold rounded-xl text-center border border-green-200">
                        <svg class="w-5 h-5 mx-auto mb-1" 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>
                `;
            } else {
                btn.disabled = false;
                btn.textContent = 'سجل الآن في هذا الكورس';
                EbdaAlert.error(data.message || 'حدث خطأ غير متوقع أثناء التسجيل', 'فشل التسجيل');
            }
        })
        .catch(err => {
            btn.disabled = false;
            btn.textContent = 'سجل الآن في هذا الكورس';
            if (err.message === 'redirect' || err.message === 'not_json') {
                EbdaAlert.warning('يجب تسجيل الدخول كمتدرب لإتمام عملية التسجيل.', 'غير مصرح');
            } else {
                EbdaAlert.error('تعذّر الاتصال بالخادم. تحقق من الشبكة.', 'خطأ في الاتصال');
            }
        });
    }
</script>
@endsection