@include('components.seo')
<div class="mt-12">
    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-8">
        <div class="col-span-1 md:col-span-2 lg:col-span-3 space-y-4">
        <x-client.breadcrumbs :breadcrumb="$breadcrumb" />
            <h1 class="font-bold text-3xl my-2">{{$course->name}}</h1>
            <div class="relative  rounded-md space-y-4">
                <div class="flex flex-col items-center">
                    <video
                        class="video-js myvideo w-full xl:w-[760px] h-[429px] "
                        controls
                        preload="auto"
                        poster="{{$course->avatar}}"
                        src="{{route('video_stream' , $this->episode->id)}}"
                        data-setup="{}">
                        <p class="vjs-no-js">
                            این ویدو در دستگاه شما پشتیبانی نمیشود لطفا از دستگاه به روز تری استفاده کنید.
                        </p>
                    </video>
                </div>
                @if(!$this->episode->type == '0')
                    @if(!auth()->check() || !$course->isPurchased() || auth()->user()->is_active == '0')
                        <div
                            class="absolute flex justify-center items-center -top-4 left-0 w-full h-full z-10 backdrop-blur-md	 ">
                            <div class=" flex flex-col items-center">
                                <div class="border rounded-md px-8 py-2">
                                    <x-icons.lock-closed/>
                                </div>
                                <p class="text-center border-b p-2">برای دسترسی به این بخش لطفا وارد حساب کاربری خود
                                    شوید و
                                    یا دوره را خریداری کرده و حساب کاربری خود را فعال کنید.</p>
                            </div>
                        </div>
                    @endif
                @endif
            </div>
            @guest
                <div class="my-20 flex items-center bg-amber-400 p-2 rounded-md w-fit text-white">
                     <x-icons.information-circle/>
                    <p>
                         جهت دانلود فایل های ضمینه وارد اکانت شوید
                    </p>
                </div>
            @endguest
            @auth
                @foreach($this->episode->media as  $file)
                    @if($showButton)
                        <button
                            wire:click.prevent="downloadFile({{ $file->id}} , {{  $course }})"
                            class="border rounded-xl bg-amber-400 px-4 py-2 text-amber-400 font-bold"> ایجاد لینک دانلود : {{ $file->body }}
                        </button>
                    @endif
                    @if($downloadButton)
                        <button wire:click.prevent="download"
                                class="border rounded-xl bg-blue-500 px-4 py-2 text-amber-400 font-bold">دانلود فایل
                        </button>
                    @endif
                @endforeach
            @endauth
            <div
                class="sticky top-4 z-10 flex w-full space-x-4 space-x-reverse border-b border-gray-500 p-2 bg-gradient-to-l from-stone-300 dark:from-stone-700">
                <a class="font-bold" href="#description">توضیحات</a>
                <a class="font-bold" href="#comments">پرسش و پاسخ</a>
            </div>
            <div id="description" class="my-3">
                {!! $this->episode->description !!}
            </div>
            <div class="space-y-5">
                <div id="comments">
                    <livewire:client.component.comments :id="$this->episode->id" type="section"/>
                </div>
                <div
                    id="tickets">
                    <h2 class="font-bold">سوالات دانشجویانی که در دوره شرکت کرده اند</h2>
                    @foreach($tickets as $ticket)
                        <div
                            class="flex items-start gap-4 border-2 border-gray-400 dark:border-amber-400 p-2 rounded-3xl space-y-8">
                            <div class="flex gap-4 items-center">
                                @if($ticket->user->avatar)
                                    <img src="{{$ticket->user->avatar}}" class="w-16 rounded-full" alt="">
                                @else
                                    <div class="border border-amber-400 rounded-full p-2">
                                        <x-icons.user/>
                                    </div>
                                @endif
                                <span>
                                @if($ticket->user->name)
                                        {{$ticket->user->name}}
                                    @else
                                        بدون نام
                                    @endif
                            </span>
                            </div>
                            <h3 class="font-bold">{{$ticket->title}}</h3>
                            <p>
                                @foreach($ticket->response as $ttt)
                                    dew
                                @endforeach
                            </p>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
        <div class="space-y-4">
            <h1 class="font-bold text-2xl my-2">سر فصل های دوره {{$course->name}}</h1>
            <div class=" rounded-xl divide-y bg-gray-50 dark:bg-stone-700 h-fit">
                @foreach($this->course->sections as $section)
                    <div
                        class="py-2 px-4"
                        x-data="{ expanded: false }">
                        <div
                            class="flex justify-between cursor-pointer  items-center"
                            @click="expanded = ! expanded">
                            <h2 class="font-bold text-lg">{{$section->name}}</h2>
                            <div class=" text-amber-400">
                                <x-icons.chevron-down/>
                            </div>
                        </div>
                        <div
                            class="mr-2 space-y-4 p-2"
                            x-show="expanded" x-collapse>
                            @foreach($section->videos as $video)
                                <a
                                    class="flex items-center gap-2 bg-stone-200 dark:bg-stone-800 p-2 rounded-xl font-thin"
                                    href="{{route('show.show-episode' ,['course'=>$course->slug, 'episode'=>$video->slug])}}">
                                    @if($course->isPurchased() || $video->type == '0')
                                        <x-icons.video/>
                                    @else
                                        <span class="text-amber-400">
                                        <x-icons.lock-closed/>
                                        </span>
                                    @endif
                                    <h2 class="text-lg">{{$video->title}}</h2>

                                </a>
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>
            <div>
                <a href="#">
                    <img src="{{asset('assets/images/delete.jpg')}}" alt="">
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="{{asset('assets/images/delete.jpg')}}" alt="">
                </a>
            </div>
        </div>
    </div>
    <livewire:client.component.free-advice/>

        <x-loader/>
</div>