@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 Cart</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 ">Order #{{$Box->id}} Details</h1>

                    <div class="bg-[#F6F7F7] p-2 rounded-md">
                        <h3 class="text-green-700 text-xl font-medium mb-2"> Shipping To </h3>
                        <div class="bg-white p-3 flex flex-col gap-1  text-sm">
                            <p class="font-medium"> {{$Box->address['name']}} </p>
                            <div>
                                <b class="font-medium">City: </b>
                                <span> {{$Box->address['city_name']}} / {{$Box->address['district_name']}}</span>
                            </div>
                            <p> {{$Box->address['address']}} </p>
                            <div class="flex gap-6 flex-wrap">
                                <div>
                                    <b class="font-medium">street: </b>
                                    <span> {{$Box->address['street']}} </span>
                                </div>
                                <div>
                                    <b class="font-medium">building: </b>
                                    <span> {{$Box->address['building_no']}} </span>
                                </div>
                                <div>
                                    <b class="font-medium">City: </b>
                                    <span> {{$Box->address['apartment_no']}} </span>
                                </div>
                            </div>
                        </div>
                    </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]"> Order Summary </h2>

                        @foreach($Box->meals as $meal)
                        <div class="flex justify-between p-3 rounded-md  bg-white m-3">
                            <div>
                                <p class="text-sm"> {{$meal->title}} </p>
                                <p class="text-xs mt-1 text-[#00000099]"> {{$meal->serving}} Serving</p>
                            </div>
                            <p class="text-xs text-green-200"> ${{$meal->serving * $meal->price}} </p>
                        </div>
                        @endforeach

                        <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 {{$Box->total_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 {{$Box->tax_price}} </p>
                                </div>
                                <div class="border-t border-primary mt-2 pt-2   flex justify-between ">
                                    <p class="text-black text-sm font-medium"> Delivery </p>
                                    <p class="font-medium text-green-800" > AED {{$Box->shipping_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 {{$Box->final_price}} </p>
                                </div>

                            </section>


                        </div>

                    </div>

                </section>
            </div>

        </main>

    </div>


@endsection