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

    <img src="{{asset('site_assets/images/home_banner.webp')}}" alt="home_banner" class="w-full max-h-[300px] object-cover">

    {{--
        <swiper-home-slider >
            @foreach($HomeSlider as $item)
                <swiper-slide class="relative">
                    <div class="relative image-container-add-top-shadow">
                        <img src="{{$item->image}}" alt="{{$item->title}}" class="w-full  min-h-[320px] md:h-[80vh] object-cover ">
                    </div>
                    <div class=" absolute bottom-10  start-2 md:start-20   w-5/6 md:w-[35rem]  	bg-white  p-2 md:p-6" >
                        <h2 class="text-2xl sm:text-2xl md:text-[30px]   mb-2 text-primary font-semibold animate_r_to_l"  > {!! nl2br(e($item->title)) !!} </h2>
                        <p class="text-sm md:text-[18px] animate_d_to_u"   > {!! nl2br(e($item->description)) !!}  </p>
                    </div>
                </swiper-slide>
            @endforeach
        </swiper-home-slider>
    --}}


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

    <main class="     ">

        <!-- *=*=*=*=*=*=*=*=*=* Section NEW COLLECTION *=*=*=*=*=*=*=*=*=* -->
        <div class="bg-[#faf7f152] mb-3">

            <section class="x-container">
                <form action="" type="get" class="flex justify-center items-center md:items-end gap-4 flex-col md:flex-row py-4">
                    <div>
                        <p class="text-yellow text-[10px] mb-1">Deliver my box to</p>
                        <select class="rounded-md  px-1 py-1 text-[12px] w-[250px]">
                            @foreach(countries_available_delivery() as $country)
                                <option value="{{$country}}">{{$country}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <p class="text-yellow text-[10px] mb-1">Search for a Chef or Meal</p>
                        <input type="search" name="name" value="{{$name}}" placeholder="Search Chef" class="rounded-md  px-1 py-1 text-[12px] w-[250px]">
                    </div>
                    <button type="submit" class="bg-yellow text-green-900 px-4 text-[12px] py-1 rounded-xl">Search</button>
                </form>
            </section>
        </div>


        <section class="x-container">

            <div class="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-5 gap-4">
                @foreach($meals as $meal)
                    <meal-cart :meal="{{$meal}}"></meal-cart>
                @endforeach
            </div>

            <div class="text-center mx-auto table  my-10">
                {{$meals->onEachSide(5)->links('pagination::tailwind')}}
            </div>
            <br><br>

        </section>

        @include("Site.Layouts.footer_cart")


{{--
        <div data-aos="zoom-in-up">

            <slider-dots-only
                :have_pagination="true"
                :slides_config="{
                    sm: { slidesPerView: 1.2, spaceBetween: 0 },
                    md: { slidesPerView: 2.1, spaceBetween: 0 },
                    lg: { slidesPerView: 3, spaceBetween: 0 },
                    xl: { slidesPerView: 3, spaceBetween: 0 },
                    default: { slidesPerView: 3, spaceBetween: 0 }
                  }">
                @foreach($new_products as $new_product)
                    <swiper-slide>
                        <a href="{{$new_product->path}}" class="block group mx-3 bg-primary md:bg-white hover:bg-primary p-3   relative transition-all " >
                            <img src="{{$new_product->image->image}}" alt="{{$new_product->name}}" class="w-full">
                            <p class="text-xl md:text-[25px] my-2 text-white md:text-primary group-hover:text-white">{{$new_product->name}}</p>
                            <p class="text-[13px] md:text-[15px] text-white md:text-black group-hover:text-white"> {{$new_product->category_name}} </p>

                            <!-- new icon for En  -->
                            <img src="{{asset('site_assets/images/icon/new.svg')}}"  alt="new"
                                   class="w-[60px] md:w-auto absolute top-0 end-[-9px] md:end-[-14px] rtl:hidden  md:hidden group-hover:ltr:inline ">
                            <!-- new icon for Ar  -->
                            <img src="{{asset('site_assets/images/icon/new_ar.png')}}"  alt="new"
                                   class="w-[60px] md:w-[80px] absolute top-0 end-[-9px] md:end-[-12px] ltr:hidden  md:hidden group-hover:rtl:inline ">
                        </a>
                    </swiper-slide >
                @endforeach
            </slider-dots-only>

        </div>
--}}

    </main>
    </div> <!-- End bg-[....] -->


@endsection