@extends('components.web.main')

@section('content')
    <div x-data="{
        videos: {{ $videos->toJson() }},
        currentVideo: {{ $currentVideo ? $currentVideo->toJson() : 'null' }},
        activeTab: 'lesson',
        userRating: 0
    }" class="text-white min-h-screen" dir="rtl">
        <div class="flex flex-col lg:flex-row">

            {{-- Sidebar --}}
            <aside class="w-full lg:w-1/4 border-l border-white/20 p-6">
                <div class="flex flex-col h-full">
                    <div class="mb-6">
                        <a href="{{ url()->previous() }}" class="text-gray-400 hover:text-white transition-colors text-sm">←
                            العودة إلى المواد</a>
                        <h2 class="text-2xl font-bold mt-2">{{ $course->name }}</h2>
                    </div>
                    <div class="mb-6">
                        <div class="flex justify-between items-center mb-2">
                            <span class="text-sm font-medium text-gray-300">مستوى التقدم</span>
                            <span class="text-sm font-bold text-cyan-400">{{ round($progressPercentage) }}%</span>
                        </div>
                        <div class="w-full bg-gray-700 rounded-full h-2.5">
                            <div class="bg-gradient-to-r from-cyan-500 to-blue-500 h-2.5 rounded-full"
                                style="width: {{ $progressPercentage }}%">
                            </div>
                        </div>
                    </div>
                    <h3 class="font-semibold mb-3">محتوى الدورة</h3>
                    <nav class="space-y-2">
                        @foreach ($videos as $video)
                            <a href="{{ route('student.course.show', ['course' => $course, 'lesson' => $video]) }}"
                                :class="{
                                    'bg-cyan-500/10 border-r-2 border-cyan-400 text-white': currentVideo && currentVideo
                                        .id ===
                                        {{ $video->id }},
                                    'hover:bg-white/5 border-r-2 border-transparent': !currentVideo || currentVideo
                                        .id !== {{ $video->id }}
                                }"
                                class="flex items-start gap-4 p-3 rounded-lg transition-all duration-200">
                                <div class="mt-1">
                                    <svg class="w-5 h-5 text-gray-400" xmlns="http://www.w3.org/2000/svg"
                                        viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd"
                                            d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
                                            clip-rule="evenodd" />
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="font-semibold leading-tight"
                                        :class="{ 'text-cyan-300': currentVideo && currentVideo.id === {{ $video->id }} }">
                                        {{ $video->title }}</h4>
                                    <p class="text-xs text-gray-400 mt-1">{{ Str::limit($video->description, 50) }}</p>
                                </div>
                            </a>
                        @endforeach
                    </nav>
                </div>
            </aside>

            {{-- Main Content --}}
            <main class="w-full lg:w-3/4 p-6 sm:p-8">
                @if ($currentVideo)
                    <div class="bg-black rounded-xl shadow-2xl shadow-black/50 overflow-hidden aspect-video mb-6">
                        <div class="w-full h-full flex items-center justify-center">
                            {{-- This could be a real video player --}}
                            <h2 class="text-2xl" x-text="currentVideo.title"></h2>
                        </div>
                    </div>

                    {{-- Tabs Navigation --}}
                    <div class="border-b border-white/20 mb-6">
                        <nav class="flex space-x-6 -mb-px">
                            <button @click="activeTab = 'lesson'"
                                :class="{
                                    'border-cyan-400 text-cyan-400': activeTab === 'lesson',
                                    'border-transparent text-gray-400 hover:text-white': activeTab !== 'lesson'
                                }"
                                class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-lg transition-colors md:ml-4">عن
                                الدرس</button>
                            <button @click="activeTab = 'rating'"
                                :class="{
                                    'border-cyan-400 text-cyan-400': activeTab === 'rating',
                                    'border-transparent text-gray-400 hover:text-white': activeTab !== 'rating'
                                }"
                                class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-lg transition-colors">التقييمات</button>

                            <button @click="activeTab = 'ai'"
                                :class="{
                                    'border-cyan-400 text-cyan-400': activeTab === 'ai',
                                    'border-transparent text-gray-400 hover:text-white': activeTab !== 'ai'
                                }"
                                class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-lg transition-colors">مع
                                الذكاء الاصطناعي</button>

                            <button @click="activeTab = 'quiz'"
                                :class="{
                                    'border-cyan-400 text-cyan-400': activeTab === 'quiz',
                                    'border-transparent text-gray-400 hover:text-white': activeTab !== 'quiz'
                                }"
                                class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-lg transition-colors">الاختبار</button>
                        </nav>
                    </div>

                    {{-- Tabs Content --}}
                    <div class="p-8 rounded-xl min-h-[400px]">
                        {{-- Tab 1: Lesson Info --}}
                        <div x-show="activeTab === 'lesson'" x-transition>
                            <h3 class="text-3xl font-bold text-white mb-4" x-text="currentVideo.title"></h3>
                            <p class="text-gray-300 leading-relaxed" x-html="currentVideo.description"></p>
                        </div>

                        {{-- Tab 2: Ratings --}}
                        <div x-show="activeTab === 'rating'" x-transition>
                            @include('partials.ratings-section')
                        </div>

                        {{-- Tab 3: AI Assistant --}}
                        <div x-show="activeTab === 'ai'" x-transition:enter="transition ease-out duration-300"
                            x-transition:enter-start="opacity-0 transform scale-95"
                            x-transition:enter-end="opacity-100 transform scale-100"
                            x-transition:leave="transition ease-in duration-200"
                            x-transition:leave-start="opacity-100 transform scale-100"
                            x-transition:leave-end="opacity-0 transform scale-95">
                            @include('partials.ai-assistant_section')
                        </div>

                        {{-- Tab 4: Quiz --}}
                        @include('partials.quiz-section')

                    </div>
                @else
                    <div class="flex items-center justify-center h-[50vh]">
                        <div class="text-center">
                            <h2 class="text-2xl font-bold text-gray-300">لا توجد دروس في هذه الدورة بعد.</h2>
                            <p class="text-gray-500 mt-2">يرجى التحقق مرة أخرى قريبًا.</p>
                        </div>
                    </div>
                @endif
            </main>
        </div>
    </div>
@endsection