@extends('panel.layouts.master')
@section('content')
    <div
            class="content transition-[margin,width] duration-100 rtl:xl:pr-3.5 ltr:xl:pl-3.5 pt-[54px] pb-16 relative z-10 group mode content--compact rtl:xl:mr-[275px] ltr:xl:ml-[275px] mode--light rtl:[&.content--compact]:xl:mr-[91px] ltr:[&.content--compact]:xl:ml-[91px]">
        <div class="px-5 mt-16">
            <div class="container">
                <div class="grid grid-cols-12 gap-x-6 gap-y-10">
                    <div class="col-span-12">
                        <div class="box box--stacked flex flex-col p-1.5">
                            <div
                                    class="relative h-48 w-full rounded-[0.6rem] bg-gradient-to-b from-theme-1/95 to-theme-2/95">
                                <div
                                        class="w-full h-full relative overflow-hidden before:content-[''] before:absolute before:inset-0 before:bg-texture-white before:-mt-[50rem] after:content-[''] after:absolute after:inset-0 after:bg-texture-white after:-mt-[50rem]"></div>
                                <div class="absolute inset-x-0 top-0 mx-auto mt-24 h-32 w-32">
                                    <div
                                            class="box image-fit h-full w-full overflow-hidden rounded border-[6px] border-white">
                                        <img src="{{ asset("dist/images/logo/logo.png") }}"
                                             alt="{{ $course->title }}" style="object-fit: contain">
                                    </div>
                                </div>
                            </div>
                            <div class="rounded-[0.6rem] bg-slate-50 pt-12">
                                <div class="flex items-center justify-center text-xl font-medium">
                                    {{ $course->title }}
                                    <i data-tw-merge="" data-lucide="badge-check"
                                       class="stroke-[1] w-5 h-5 rtl:mr-2 ltr:ml-2 fill-blue-500/30 text-blue-500"></i>
                                </div>
                                <div class="mt-8">
                                    @if($lesson)
                                        <div class="box box--stacked col-span-12 flex flex-col md:col-span-6 xl:col-span-4 my-5">
                                            <video class="w-full h-auto mx-auto rounded" controlsList="nodownload"
                                                   poster="{{ asset($lesson->cover) }}" controls>
                                                <source src="{{ asset($lesson->file) }}" type="video/mp4">
                                                Your browser does not support the video tag.
                                            </video>

                                            <div class="box-body p-5">
                                                <p class="flex items-center gap-3 text-xl font-bold mb-5">
                                                    @if($lesson->cover)
                                                        <img src="{{ asset($lesson->cover) }}"
                                                             alt="{{ $lesson->title }}" style="object-fit: contain"
                                                             width="30px"
                                                             height="30px">
                                                    @endif
                                                    {{ $lesson->title }}</p>
                                                <hr>
                                                <div class="grid grid-cols-12 gap-x-6 gap-y-10 mt-3 mb-4">
{{--                                                    @if(file_exists(public_path() . $lesson->booklet))--}}
{{--                                                        <div class="col-span-4">--}}
{{--                                                            <a href="{{ asset($lesson->booklet) }}"--}}
{{--                                                               class="transition duration-200 border shadow-md inline-flex items-center justify-center py-2 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&amp;:hover:not(:disabled)]:bg-opacity-90 [&amp;:hover:not(:disabled)]:border-opacity-90 [&amp;:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary px-4">--}}
{{--                                                                <i data-lucide="download"--}}
{{--                                                                   class="ml-2 h-5 w-5 stroke-[1.3]"></i>--}}
{{--                                                                دانلود جزوه--}}
{{--                                                            </a>--}}
{{--                                                        </div>--}}
{{--                                                    @endif--}}
                                                    @if(file_exists(public_path() . $lesson->filled_booklet))
                                                        <div class="col-span-4">
                                                            <a href="{{ asset($lesson->filled_booklet) }}"
                                                               class="transition duration-200 border shadow-md inline-flex items-center justify-center py-2 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&amp;:hover:not(:disabled)]:bg-opacity-90 [&amp;:hover:not(:disabled)]:border-opacity-90 [&amp;:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary px-4">
                                                                <i data-lucide="download"
                                                                   class="ml-2 h-5 w-5 stroke-[1.3]"></i>
                                                                دانلود جزوه پر شده
                                                            </a>
                                                        </div>
                                                    @endif
{{--                                                    @if(file_exists(public_path() . $lesson->homework))--}}
{{--                                                        <div class="col-span-4">--}}
{{--                                                            <a href="{{ asset($lesson->homework) }}"--}}
{{--                                                               class="transition duration-200 border shadow-md inline-flex items-center justify-center py-2 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&amp;:hover:not(:disabled)]:bg-opacity-90 [&amp;:hover:not(:disabled)]:border-opacity-90 [&amp;:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary px-4">--}}
{{--                                                                <i data-lucide="download"--}}
{{--                                                                   class="ml-2 h-5 w-5 stroke-[1.3]"></i>--}}
{{--                                                                دانلود تکلیف--}}
{{--                                                            </a>--}}
{{--                                                        </div>--}}
{{--                                                    @endif--}}
                                                </div>
                                                @can('admin')
                                                    <p class="flex">
                                                        <i data-lucide="eye"></i>
                                                        {{ $lesson->views }}
                                                    </p>
                                                @endcan
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="mt-10">
                            <div class="grid grid-cols-1 gap-y-3">
                                @if($lessons)
                                    @foreach($lessons as $item)
                                        <a href="{{ route('courses.show', [$course->id, $item->id]) }}">
                                            <div class="flex items-center shadow-md p-5 my-4 gap-4 rounded">
                                                <img src="{{ asset($course->cover) }}"
                                                     class="rounded ml-3" width="50" height="50">
                                                <p>{{ $item->title }}</p>
                                            </div>
                                        </a>
                                    @endforeach
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>
        $("body").on("contextmenu", function (e) {
            return false;
        });
    </script>
@endsection