@extends("Site.Layouts.blank")
@section ("content")

    <div class="bg-green-dark  min-h-screen">
        <main class="x-container ">
            <div class="relative"  >
                <!--  -->
                <img src="{{asset('site_assets/images/meal_inner_banner.webp')}}" alt="home_banner" class="w-full   h-[300px] md:h-auto md:max-h-[400px] object-cover">
                <div class="absolute inset-0 flex justify-end flex-col " style="background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.50) 100%);">

                    <div class="ms-2 md:ms-8  mb-5">
                        <p class="mt-3  md:text-[25px] text-white font-semibold md:max-w-[40%]"> {{$course->title}} </p>
                    </div>

                </div>
            </div>

        </main>


        <!-- ************ Main *************** -->
        <main class="x-container bg-white  grid md:grid-cols-[2fr_1fr] gap-5  px-5 md:px-10 ">

            <!-- ************** left side ************ -->
            <section class="bg-LightGray-200 mt-6 rounded-md mb-20">
                <div class="mx-3 my-2">
                    <h1 class="mt-6 text-green-200 font-medium   text-[20px]">What Are you going to learn?  </h1>

                    <div class="p-2 relative my-4">
                        <img src="{{$course->image_path}}" alt="{{$course->title}}" class="h-[200px] w-full object-cover object-center rounded-md brightness-75">
                        <div class="absolute inset-0 center-by-flex">
                            @if($course->video_path)
                                <img src="{{asset('site_assets/images/play-media.svg')}}" onclick="showVideoDialog()"
                                     alt="play media" class="cursor-pointer">
                            @endif
                        </div>
                    </div>

                    <h2 class="mt-6 text-green-200 font-medium  text-[20px]">Available session dates</h2>

                    <course-booking
                        action_url="{{url('courses/checkout')}}"
                        :course="{{ $course }}"
                        :sessions="{{ $sessions }}"
                        asset_link="{{ asset('') }}"
                    >
                    </course-booking>


                </div>
            </section>


            <!-- ************** right Side ********************* -->
            <section class="relative">

                <!-- ************** Chef ************ -->
                <div class="bg-primary p-3 rounded-md flex items-center gap-3 relative md:top-[-35px] mb-4 md:mb-0">
                    <img src="{{$course?->instructor?->profile_img_path}}" alt="{{$course?->instructor?->name}}" class="rounded-full size-[65px] object-cover">
                    <div>
                        <h1 class="text-[#FCFF3C] font-semibold text-[18px]"> {{$course?->instructor?->name}} </h1>
                    </div>
                </div>

                <h3 class=" text-green-200 font-medium  mt-4 text-[18px]">About Class</h3>

                <p class="mt-5 font-light"> {{$course->description}} </p>

            </section>
            <br>
        </main>
        <br><br>



        <!-- ****************************************************** -->
        <!-- ******************* Dialog Element ******************* -->
        <!-- ****************************************************** -->
        <dialog id="videoDialog" class="overflow-hidden bg-transparent p-0  max-w-4xl rounded-lg  fixed inset-0 backdrop:bg-black/80">
            <div class="relative">
                <!-- Video Container -->
                <div class="aspect-w-16 aspect-h-9 bg-black">
                    <iframe
                        src="" id="reelVideo" class="w-full h-[70vh]" frameborder="0" allowfullscreen
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    >
                    </iframe>
                </div>

                <!-- Close Button -->
                <button
                    onclick="closeVideoDialog()" aria-label="Close video"
                    class="absolute  top-0 right-0 bg-white rounded-full p-1 shadow-lg hover:bg-gray-100 transition-colors"
                >
                    <svg xmlns="http://www.w3.org/2000/svg" class="size-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
        </dialog>

    </div>

@endsection


@section('script')
    <script>
        const video_url = '{{$course->video_path}}';
        function showVideoDialog() {
            document.getElementById('videoDialog').showModal();
            document.querySelector('#videoDialog iframe').src = video_url + "?autoplay=1";
        }
        function closeVideoDialog() {
            document.querySelector('#videoDialog iframe').src = '';
            document.getElementById('videoDialog').close();
        }
    </script>
@endsection