@include('components.seo')
<div class="grid grid-cols-1 lg:grid-cols-3 mt-8 gap-8 ">
    <div class="col-span-1 md:col-span-2 space-y-8">
        <x-client.breadcrumbs :breadcrumb="$breadcrumb"/>
        <img
            class="rounded-xl md:w-4/6 mx-auto"
            src="{{$course->avatar}}" alt="{{$course->name}}">
        <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 href="#sections">سرفصل ها</a>
            <a href="#my-vi">معرفی دوره</a>
            <a href="#description">توضیحات</a>
            <a href="#comments">پرسش و پاسخ</a>
        </div>
        <div>
            <h2 id="sections" class="font-bold text-gray-950 dark:text-gray-50">سرفصل های دوره {{$course->name}}</h2>
            <div class="bg-gray-50 dark:bg-stone-700 p-2 rounded-xl shadow shadow-gray-200 divide-y-2">
                @foreach($course->sections as $section )
                    <div
                        class="bg-gray-50 dark:bg-stone-700"
                        x-data="{ expanded: false }">
                        <div
                            class="cursor-pointer flex p-2 justify-between items-center"
                            @click="expanded = ! expanded">
                            <div>
                                <h2 class="font-bold">{{$section->name}}</h2>
                                <span>تعداد درس :{{count($section->videos)}}</span>
                            </div>
                            <div class="text-amber-500">
                                <x-icons.chevron-down/>
                            </div>
                        </div>
                        <div
                            class="space-y-4 mr-8 p-2"
                            x-show="expanded" x-collapse.duration.500ms>
                            @foreach($section->videos as $video)
                                <a href="{{route('show.show-episode' ,['course'=>$course->slug, 'episode'=>$video->slug])}}"
                                   class="flex items-center justify-between p-2 bg-stone-200 dark:bg-stone-800 rounded-xl">
                                    <div class="flex items-center gap-2 ">
                                        <x-icons.video/>
                                        <h2 class="font-thin">{{$video->title}}</h2>
                                    </div>
                                    @if($course->isPurchased() || $video->type == '0')
                                        <x-icons.eye/>
                                    @else
                                        <x-icons.lock-closed/>
                                    @endif
                                </a>
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
                <div class="flex flex-col items-center">
                    <video
                        id="my-vi"
                        class="video-js  w-full xl:w-[750px] h-96 "
                        controls
                        preload="auto"
                        poster="{{$course->cover_video}}"
                        data-setup="{}">
                        <source src="{{route('introduce' , $course->id)}}" type="video/mp4"/>
                        <p class="vjs-no-js">
                            این ویدو در دستگاه شما پشتیبانی نمیشود لطفا از دستگاه به روز تری استفاده کنید.
                        </p>
                    </video>
                </div>

        <div id="description" class="text-justify">
            {!! $course->description !!}
        </div>
        <div id="comments">
            <livewire:client.component.comments :id="$course->id" type="course"/>
        </div>
        <livewire:client.component.free-advice/>
    </div>
    <div class="h-fit sticky top-4 space-y-4">
        <div class="rounded-xl shadow shadow-gray-500 p-4  space-y-5 font-bold bg-gray-200 dark:bg-stone-700">
            <h1>{{$course->name}}</h1>
            <div class="flex justify-between">
                <p>هزینه آموزش</p>
                <div>
                    @if($course->price)
                        @if($course->discount && \Carbon\Carbon::parse($course->time_out_discount)->format('Y-m-d H-i-s') > \Carbon\Carbon::now()->format('Y-m-d H-i-s'))
                            <span class="line-through flex gap-1 items-center ">
                            {{number_format($course->price)}}
                                <x-icons.toman/>
                            </span>
                        @else
                            <span class="flex gap-1 items-center">
                            {{number_format($course->price)}}
                            <x-icons.toman/>
                            </span>
                        @endif
                    @else
                        رایگان
                    @endif
                </div>
            </div>
            @if($course->discount && \Carbon\Carbon::parse($course->time_out_discount)->format('Y-m-d H-i-s') > \Carbon\Carbon::now()->format('Y-m-d H-i-s'))
                <div class="flex justify-between items-center">
                    <div class="flex items-center gap-2 ">
                        <p>
                            تخفیف
                        </p>
                        <div class="bg-amber-500 text-white p-2 rounded-md">
                            % {{round((($course->price - $course->discount) / $course->price) * 100)}}
                        </div>
                    </div>
                    <div class="discountElement text-amber-500"
                         time_out_discount="{{$course->time_out_discount}}"></div>
                    <div class="text-amber-500 flex gap-1 items-center">
                        {{number_format($course->discount)}}
                        <x-icons.toman/>
                    </div>
                </div>
            @endif
            <x-client.pages.purchase-button course="{{$course->id}}"/>
            <div class="flex justify-between">
                <p>مدت زمان دوره</p>
                <p>{{$course->duration_of_the_course}}</p>
            </div>
            <div class="flex justify-between">
                <p>تعداد سرفصل</p>
                <p>{{count($course->sections)}} سرفصل </p>
            </div>
            <div class="flex justify-between">
                <p>پشتیبانی</p>
                <p>پرسش و پاسخ</p>
            </div>
            <div class="flex justify-between">
                <p>تعداد دانشجو</p>
                <p>{{count($course->PurchasedCourses)}} نفر </p>
            </div>
        </div>
        <div class="flex flex-col items-center border shadow shadow-gray-500 rounded-xl p-2 ">
            @if($course->course_instructor->avatar)
                <img
                    class="rounded-full w-24"
                    src="/{{$course->course_instructor->avatar}}" alt="">
            @else
                <div class="border border-amber-500 rounded-full p-4 ">
                    <x-icons.user/>
                </div>
            @endif
            <p>مدرس دوره </p>
            {{$course->course_instructor->name}}
            {!! $course->course_instructor->description !!}
        </div>
        <div class=" rounded-xl shadow shadow-gray-500 p-4  space-y-5 font-bold">
            @foreach($latestCourses as $latestCourse)
                <a href="{{route('show.courses', $latestCourse->slug)}}"
                   target="_blank"
                   class="flex items-center gap-2 border-2 border-gray-400 dark:border-amber-400 rounded-md p-2 ">
                    <img
                        class="w-16 "
                        src="{{$latestCourse->avatar}}" alt="">
                    <h2>{{$latestCourse->name}}</h2>
                </a>
            @endforeach
        </div>
    </div>
    <script>
        let discountElement = document.querySelectorAll('.discountElement');
        discountElement.forEach(function (discountItem) {
            let discountTime = discountItem.getAttribute('time_out_discount');
            if (discountTime.trim() !== "") {
                var targetDateStr = "2024-12-31T23:59:59"; // به عنوان مثال
                var targetDate = new Date(discountTime);

                function updateCountdown() {
                    var now = new Date();
                    var timeDifference = targetDate - now;
                    if (timeDifference <= 0) {
                        discountItem.innerHTML = "پایان تخفیف!";
                        clearInterval(intervalId);
                        return;
                    }
                    var days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
                    var hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                    var minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
                    var seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);
                    discountItem.innerHTML =
                        days + " روز " + hours + " ساعت " + minutes + " دقیقه " + seconds + " ثانیه ";
                }

                var intervalId = setInterval(updateCountdown, 1000);
                updateCountdown();
            }
        })


    </script>
</div>