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

    <div class="relative"  >
        <!--  -->
        <img src="{{asset('site_assets/images/meal_inner_banner.webp')}}" alt="home_banner" class="w-full  h-[200px] md:h-[300px]  object-cover">
        <div class="absolute inset-0 center-by-flex " style="background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.50) 100%);">
            <h1 class="text-white text-[40px] font-medium">My Bookings </h1>
        </div>
    </div>

    <div class="bg-green-dark  ">

        <main class="x-container bg-white px-5 md:px-10 min-h-[80vh] py-5">

            <div class="grid md:grid-cols-[2fr_1fr] gap-6 mt-6">
                <section>
                    <h1 class="text-green-700 font-medium text-3xl mb-6 ">Booking #{{$course->id}} Details</h1>

                    <div class="bg-[#F6F7F7] p-2 rounded-md">
                        <h3 class="text-green-700 text-xl font-medium mb-2"> See you at class: </h3>

                        <div class="bg-white p-2 rounded mt-4">
                            <p class="font-medium text-sm"> Booking Information: </p>

                            <div class="my-2">
                                <p> {{$course->session?->course?->title}} </p>
                            </div>

                            <div class="text-sm  flex gap-4  my-2">
                                <div class="flex gap-2">
                                    <p class="font-medium"> Start Date: </p>
                                    <p> {{$course->session->start_time->toDateString()}} </p>
                                </div>
                                <div class="flex gap-2">
                                    <p class="font-medium"> Time: </p>
                                    <p> {{$course->session->start_time->toTimeString()}} </p>
                                </div>
                            </div>

                            <div class="flex gap-2 text-sm ">
                                <p class="font-medium "> Remaining Time: </p>
                                <p> {{$course->session?->start_time?->diffForHumans()}} </p>
                            </div>

                        </div>

                        <section class="mt-4 md:mx-5 grid md:grid-cols-3 gap-4  text-white text-center  text-sm md:text-base">
                            <a href="{{$course->session?->link}}" target="_blank" class="bg-primary py-2 md:py-3 rounded-full center-by-flex text-sm md:text-base">
                                Class Link
                            </a>
                            <a href="{{urlLang('course/'.$course->id.'/calendar')}}" class="bg-primary py-2 md:py-3 rounded-full center-by-flex text-sm md:text-base">
                                Add to Calendar
                            </a>
                            <a
                                href="https://wa.me/971568107320?text={{ urlencode('I am asking about my course: ' . ($course->session?->course?->title ?? '')) }}"
                                target="_blank" class="bg-green-200 py-2 md:py-3 rounded-full center-by-flex text-sm md:text-base"
                            >
                                Live Assistance
                            </a>

                        </section>

                    </div>

                </section>

                <!-- ******** right side ********** -->
                <section>

                    <div class="bg-[#F4F0F8] text-green-dark py-4 rounded-lg ">

                        <h2 class="ms-3 mb-5 text-xl font-semibold   text-[#0C8A64]"> Booking Summary </h2>

                        <div class="flex justify-between p-3 rounded-md  bg-white m-3">
                            <div>
                                <p class="text-sm"> {{$course->session?->course?->title}} </p>
                                <p class="text-xs mt-1 text-[#00000099]"> {{$course->session->start_time->format('d-m-Y H:i')}}  </p>
                            </div>
                            <p class="text-xs text-green-200"> ${{$course->session?->course?->price}} </p>
                        </div>


                        <div class="mx-4">
                            <section class="   ">
                                <!-- *** Sub Total *** -->
                                <div class="border-t border-primary mt-2 pt-2   flex justify-between ">
                                    <p class="text-black text-sm font-medium"> Sub Total</p>
                                    <p class="font-medium text-green-800" > AED {{$course->session?->course?->price}} </p>
                                </div>
{{--                                <div class="border-t border-primary mt-2 pt-2   flex justify-between ">--}}
{{--                                    <p class="text-black text-sm font-medium">Vat </p>--}}
{{--                                    <p class="font-medium text-green-800" > AED {{$course->tax_price}} </p>--}}
{{--                                </div>--}}
                                <div class="border-t border-primary mt-2 pt-2   flex justify-between ">
                                    <p class="text-black text-sm font-semibold"> Total</p>
                                    <p class="font-semibold text-green-800" > AED {{$course->session?->course?->price}} </p>
                                </div>

                            </section>


                        </div>

                    </div>

                </section>
            </div>

        </main>

    </div>


@endsection