@extends('layout.frontend.master')

@section('meta-title', 'LEREVE')

@push('asset-top')
    
@endpush

@section('content')


   <section class="page-content home-block">
      <section class="banner-area">
         <div class="hero-slider" {{(app()->getlocale()=='en') ? "dir='ltr'" :"dir='ltr'"}}>
            @php
    $sortedBanners = [];
    $otherBanners = [];

    // Sort banners based on 'location', if defined
    foreach($banner as $bannerItem) {
        if (!empty($bannerItem->location) && $bannerItem->location > 0) {
            $sortedBanners[$bannerItem->location] = $bannerItem;
        } else {
            $otherBanners[] = $bannerItem;
        }
    }

    // Sort the banners based on the 'location' key
    ksort($sortedBanners);

    // Fill any missing slots in the first 9 positions with remaining banners
    $finalBanners = array_slice($sortedBanners, 0, 9);
    $remainingSlots = 9 - count($finalBanners);

    if ($remainingSlots > 0) {
        $finalBanners = array_merge($finalBanners, array_slice($otherBanners, 0, $remainingSlots));
    }

    $moreBanners = array_merge(array_slice($sortedBanners, 9), array_slice($otherBanners, $remainingSlots));
@endphp

{{-- Loop through final banners --}}
@foreach($finalBanners as $key => $bannerItem)
    <div class="single-slider item-{{$key+1}}">
       <div class="banner-image">
          <a href="{{ $bannerItem->url }}">
          <img src="/{{ (app()->getlocale()=='en') ? $bannerItem->image : $bannerItem->image_ar }}" alt="{{ $bannerItem->location }}"></a>
       </div>
    </div>
@endforeach

{{-- Optionally, loop through more banners if needed --}}
@foreach($moreBanners as $key => $bannerItem)
    <div class="single-slider item-{{$key+1}}">
       <div class="banner-image">
          <a href="{{ $bannerItem->url }}">
          <img src="/{{ $bannerItem->image }}" alt="{{ $bannerItem->location }}"></a>
       </div>
    </div>
@endforeach

            <!--<div class="single-slider">-->
            <!--   <div class="banner-image"><a href="{{route('products')}}">-->
            <!--      <img src="{{ asset('images/banner/banner-2.jpg') }}"></a>-->
            <!--   </div>-->
            <!--</div>-->
         </div>
      </section>




      {{--  --}}
      <section class="product-block">
         <div class="page-head"><h2>{{__('Our bestsellers')}}</h2></div>
         <div class="product-listing">
            <div class="container-fluid">
               <div class="product-slider main-slider row">
                  @foreach($selectedProducts as $productes)
                     @if($productes->single_sale_price)
                        @php
                           $percent = (($productes->single_price-$productes->single_sale_price)/$productes->single_price) * 100;
                           $percent = ceil($percent);

                        @endphp
                     @endif
                 
                     @php
                        $percent = (($productes->single_price-$productes->single_sale_price)/$productes->single_price) * 100;
                        $percent = ceil($percent);
                        $weights = json_decode($productes->measurements, true);
                     @endphp
                     <div class="col-lg-6 product-col">
                        <div class="product">
                           <div class="product-image">
                              @if($productes->new)
                                    <div class="ribbon new">{{__('New')}}</div> 
                                 @endif    
                              @if($percent)
                              <div class="ribbon offer">{{$percent}}% {{__('OFF')}}</div>
                              @endif
                              <a  href="{{route('single.product', ['slug'=>$productes->slug])}}"><img class="img-fluid" src="/gallery/products/images/{{$productes->thumbnail}}" alt="product"></a>
                           </div>
                           <div class="product-content">
                              <h4> 
                                 <a  href="{{route('single.product', ['slug'=>$productes->slug])}}">{{ (app()->getlocale()=='en') ? $productes->name_en : $productes->name_ar }}</a>
                              </h4>
                              @if($productes->single_sale_price)
                                 <div class="price">{{$productes->single_sale_price}} {{__('KWD')}} <span class="offer-price">{{$productes->single_price}} {{__('KWD')}}</span></div>
                              @else
                                 <div class="price">{{$productes->single_price}} {{__('KWD')}}</div>
                              @endif                           
                              <div class="add-cart">
                                 @if(isset($weights) && is_countable($weights) && count($weights) > 1)
                                    <a href="{{route('single.product', ['slug'=>$productes->slug])}}" class="primery-btn"> <span class="cart-icon"></span>{{__('Select Options')}}</a>
                                 @else
                                    <a href="{{route('single.product', ['slug'=>$productes->slug])}}" class="primery-btn"> <span class="cart-icon"></span>{{__('Add To Cart')}}</a>
                                 @endif
                              </div>
                           </div>
                        </div>
                     </div>
                  @endforeach
               </div>
            </div>
         </div>
      </section>
      {{--  --}}





      <section class="top-categories ">
         <div class="page-head"><h2>{{__('Shop By Categories')}}</h2></div>
         <div class="container-fluid">
         <div class="product-slider main-slider row home-grid">
             {{--  @foreach($categories as $key=>$category)
                  <div class="item item-{{$key+1}}">
                     <div class="cat-block">
                        <a href="{{route('product_cat',['slug'=>$category->slug])}}">
                           <div class="category-img">
                              <img src="/gallery/category/{{$category->thumbnail}}" alt="{{$category->slug}}">
                           </div>
                           <div class="cate-head">
                              <h3>  {{app()->getLocale()=='en'?$category->name_en:$category->name_ar}} </h3>
                              <div class="more-btn">{{__('Shop Now')}}</div>
                           </div>
                        </a>
                     </div>
                  </div>
               @endforeach --}}
               
               <!---->
               @php
    $sortedCategories = [];
    $otherCategories = [];
    
    // Sort categories based on 'place', if defined
    foreach($categories as $category) {
        if (!empty($category->place) && $category->place > 0) {
            $sortedCategories[$category->place] = $category;
        } else {
            $otherCategories[] = $category;
        }
    }

    // Sort the categories based on the 'place' key
    ksort($sortedCategories);

    // Fill any missing slots in the first 9 positions with remaining categories
    $finalCategories = array_slice($sortedCategories, 0, 9);
    $remainingSlots = 9 - count($finalCategories);

    if ($remainingSlots > 0) {
        $finalCategories = array_merge($finalCategories, array_slice($otherCategories, 0, $remainingSlots));
    }

    $moreCategories = array_merge(array_slice($sortedCategories, 9), array_slice($otherCategories, $remainingSlots));
@endphp

{{-- Loop through final categories --}}
@foreach($finalCategories as $key => $category)
    <div class="item item-{{$key+1}}">
        <div class="cat-block">
            <a href="{{ route('product_cat', ['slug' => $category->slug]) }}">
                <div class="category-img">
                    <img src="/gallery/category/{{$category->thumbnail}}" alt="{{$category->slug}}">
                </div>
                <div class="cate-head">
                    <h3>{{ app()->getLocale() == 'en' ? $category->name_en : $category->name_ar }}</h3>
                    <div class="more-btn">{{ __('Shop Now') }}</div>
                </div>
            </a>
        </div>
    </div>
@endforeach

{{-- Optionally, loop through more categories if needed --}}
@foreach($moreCategories as $key => $category)
    <div class="item item-{{$key+1}}">
        <div class="cat-block">
            <a href="{{ route('product_cat', ['slug' => $category->slug]) }}">
                <div class="category-img">
                    <img src="/gallery/category/{{$category->thumbnail}}" alt="{{$category->slug}}">
                </div>
                <div class="cate-head">
                    <h3>{{ app()->getLocale() == 'en' ? $category->name_en : $category->name_ar }}</h3>
                    <div class="more-btn">{{ __('Shop Now') }}</div>
                </div>
            </a>
        </div>
    </div>
@endforeach

               <!---->
            </div>
         </div>
      </section>
      <section class="product-block">
         <div class="page-head">
         <h2>{{ __('Our Customers') }} {{ __('Favourites') }} </h2></div>
         <div class="product-listing">
            <div class="container-fluid">
               <div class="product-slider main-slider row">
                  @foreach($products as $product)
              
                     @if($product->single_sale_price)
                        @php
                           $percent = (($product->single_price-$product->single_sale_price)/$product->single_price) * 100;
                           $percent = ceil($percent);                           
                        @endphp
                     @endif
                     @php
                        $weights = json_decode($product->measurements, true);
                        //$percent = (($product->single_price-$product->single_sale_price)/$product->single_price) * 100;
                        //$percent = ceil($percent);
                     @endphp
                     <div class="col-lg-6 product-col">
                        <div class="product">
                           <div class="product-image">
                              @if($product->new)
                                 <div class="ribbon new">{{__('New')}}</div> 
                              @endif
                              @if($percent)
                              <div class="ribbon offer">{{$percent}}% {{__('OFF')}}</div>
                              @endif
                              <a  href="{{route('single.product', ['slug'=>$product->slug])}}"><img class="img-fluid" src="/gallery/products/images/{{$product->thumbnail}}" alt="product"></a>
                           </div>
                           <div class="product-content">
                              <h4> 
                                 <a  href="{{route('single.product', ['slug'=>$product->slug])}}">{{ (app()->getlocale()=='en') ? $product->name_en : $product->name_ar }}</a>
                              </h4>
                              @if($product->single_sale_price)
                                 <div class="price">{{$product->single_sale_price}} {{__('KWD')}} <span class="offer-price">{{$product->single_price}} {{__('KWD')}}</span></div>
                              @else
                                 <div class="price">{{$product->single_price}} {{__('KWD')}}</div>
                              @endif                           
                              <div class="add-cart">
                                  
                                 @if(isset($weights) && is_countable($weights) && count($weights) > 1)
                                    <a href="{{route('single.product', ['slug'=>$product->slug])}}" class="primery-btn"> <span class="cart-icon"></span>{{__('Select Options')}}</a>
                                 @else
                                    <a href="{{route('single.product', ['slug'=>$product->slug])}}" class="primery-btn"> <span class="cart-icon"></span>{{__('Add To Cart')}}</a>
                                 @endif
                              </div>
                           </div>
                        </div>
                     </div>
                  @endforeach
               </div>
            </div>
         </div>
      </section>
      <section class="blog-block">
         <div class="page-head">
         <h2>{{__('More ways to enjoy')}} </h2></div>
         <section class="blog-grid-v3 ">
            <div class="container">
               <div class="row blog-slider-three main-slider">
                  <div class="col-lg-3">
                     <div class="blog-post-item mb-30">
                        <a href="#">
                           <div class="post-thumbnail">
                              <img src="{{ asset('images/news/1.jpg') }}" alt="news">
                           </div>
                           <div class="entry-content">
                              <h3 class="title">   Treats for any Occasion  </h3>
                              <p> We’ve got you covered for any holiday, special occasion, or cause for 
                                 celebration. 
                              </p>
                              <div class="more-btn">{{__('Shop Now')}} </div>
                           </div>
                        </a>
                     </div>
                  </div>
                  <div class="col-lg-3">
                     <div class="blog-post-item mb-30">
                        <a href="#">
                           <div class="post-thumbnail">
                              <img src="{{ asset('images/news/2.jpg') }}" alt="news">
                           </div>
                           <div class="entry-content">
                              <h3 class="title">Create Your Own Box</h3>
                              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac blandit nisi. Suspendisse in varius velit.</p>
                              <div class="more-btn">{{__('Shop Now')}} </div>
                           </div>
                        </a>
                     </div>
                  </div>
                  <div class="col-lg-3">
                     <div class="blog-post-item mb-30">
                        <a href="#">
                           <div class="post-thumbnail">
                              <img src="{{ asset('images/news/3.jpg') }}" alt="news">
                           </div>
                           <div class="entry-content">
                              <h3 class="title">Corporate Gifts</h3>
                              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac blandit nisi. Suspendisse in varius velit.</p>
                              <div class="more-btn">{{__('Shop Now')}} </div>
                           </div>
                        </a>
                     </div>
                  </div>
                  <div class="col-lg-3">
                     <div class="blog-post-item mb-30">
                        <a href="#">
                           <div class="post-thumbnail">
                              <img src="{{ asset('images/news/4.jpg') }}" alt="news">
                           </div>
                           <div class="entry-content">
                              <h3 class="title">Bookable Afternoon Tea</h3>
                              <p>Bookable Afternoon Tea is served in our beautiful Imperial Room, Harrogate and Belmont Room, York.</p>
                              <div class="more-btn">{{__('Shop Now')}} </div>
                           </div>
                        </a>
                     </div>
                  </div>
               </div>
            </div>
         </section>
      </section>

      
      <section class="news-block main-slider">
         <div class="page-head">
         <h2>{{__('About Lereve')}}</h2></div>
         <div class="container-fluid">
            <div class="row">              
               <div class="news-col col-lg-6 col-12 ">
                  <a href="{{route('about')}}">
                     <div class="news-area">
                        <div class="news-img">
                           <img src="{{ asset('images/news/about-1.jpg') }}">
                        </div>
                        <div class="news-bottom">
                           <h3>The Story of Lereve</h3>
                           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac blandit nisi. Suspendisse in varius velit.</p>
                        </div>
                     </div>
                  </a>
               </div>
               <div class="news-col col-lg-6 col-12 ">
                  <a href="{{route('contact')}}">
                     <div class="news-area">
                        <div class="news-img">
                           <img src="{{ asset('images/news/about-2.jpg') }}">
                        </div>
                        <div class="news-bottom">
                           <h3>Contact Us
                           </h3>
                           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac blandit nisi. Suspendisse in varius velit.</p>
                        </div>
                     </div>
                  </a>
               </div>
            </div>
         </div>
      </section>
      <section class="testimonials main-slider">
         <div class="container-fluid">
            <div class="page-head"> <h2>{{__('sweet talk')}}</h2></div>
            <div class="testimonial-slider">
               <div class="testimonial-list">
                  <div class="testi-area">
                     <div class="testi-content">
                        <p>
                           Hands down, the most moist & delicious chocolate cake you'll ever eat in NYC. They are my hidden gem in Manhattan!                              
                        </p>
                     </div>
                     <div class="testi-bottom">
                        <h3>Loram Ipsam</h3>
                     </div>
                  </div>
               </div>
               <div class="testimonial-list">
                  <div class="testi-area">
                     <div class="testi-content">
                        <p>
                           Lorem ipsum dolor sit amet, consectetur adipiscing elit.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                        </p>
                     </div>
                     <div class="testi-bottom">
                        <h3>Loram Ipsam</h3>
                     </div>
                  </div>
               </div>
               <div class="testimonial-list">
                  <div class="testi-area">
                     <div class="testi-content">
                        <p>
                           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus iaculis tincidunt nulla quis volutpat.  turpis egestas.
                        </p>
                     </div>
                     <div class="testi-bottom">
                        <h3>Loram Ipsam</h3>
                     </div>
                  </div>
               </div>
               <div class="testimonial-list">
                  <div class="testi-area">
                     <div class="testi-content">
                        <p>
                           Vivamus iaculis tincidunt nulla quis volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                        </p>
                     </div>
                     <div class="testi-bottom">
                        <h3>Loram Ipsam</h3>
                     </div>
                  </div>
               </div>
               <div class="testimonial-list">
                  <div class="testi-area">
                     <div class="testi-content">
                        <p>
                           Lorem ipsum dolor sit amet, Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                        </p>
                     </div>
                     <div class="testi-bottom">
                        <h3>Loram Ipsam</h3>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </section>    

      <section class="instagram-block">
         <div class="page-head">
         <h2>{{__('Find us on Instagram')}}</h2>
         </div>
         <div class="instagrm-gallery">
            <ul class="gallery-list instagram-slider">
               <li>
                  <div class="gallery-img">
                     <img src="{{ asset('images/instagram/1.jpg') }}" alt="instagram">
                  </div>
               </li>
               <li>
                  <div class="gallery-img">
                     <img src="{{ asset('images/instagram/2.jpg') }}" alt="instagram">
                  </div>
               </li>
               <li>
                  <div class="gallery-img">
                     <img src="{{ asset('images/instagram/3.jpg') }}" alt="instagram">
                  </div>
               </li>
               <li>
                  <div class="gallery-img">
                     <img src="{{ asset('images/instagram/4.jpg') }}" alt="instagram">
                  </div>
               </li>
               <li>
                  <div class="gallery-img">
                     <img src="{{ asset('images/instagram/5.jpg') }}" alt="instagram">
                  </div>
               </li>
               <li>
                  <div class="gallery-img">
                     <img src="{{ asset('images/instagram/6.jpg') }}" alt="instagram">
                  </div>
               </li>
               <li>
                  <div class="gallery-img">
                     <img src="{{ asset('images/instagram/7.jpg') }}" alt="instagram">
                  </div>
               </li>
            </ul>
         </div>
      </section>
      <section class="page-bottom">
         <div class="container-fluid">
            <div class="row">
               <div class="col-lg-3 col-md-3 col-6">
                  <div class="delivery-block">
                     <img src="{{ asset('images/vehicle.svg') }}" alt="Vehicle">
                     <h3>{{__('Home delivery')}}</h3>
                  </div>
               </div>
               <div class="col-lg-3 col-md-3 col-6">
                  <div class="delivery-block">
                     <img src="{{ asset('images/take-way.svg') }}" alt="take way">
                     <h3>
                        {{__('Take Away')}}
                     </h3>
                  </div>
               </div>
               <div class="col-lg-3 col-md-3 col-6">
                  <div class="delivery-block">
                     <img src="{{ asset('images/dining.svg') }}" alt="Dining">
                     <h3>{{__('Dine-In')}}</h3>
                  </div>
               </div>
               <div class="col-lg-3 col-md-3 col-6">
                  <div class="delivery-block">
                     <img src="{{ asset('images/gift.svg') }}" alt="Dining">
                     <h3>{{__('Gift')}} </h3>
                  </div>
               </div>
            </div>
         </div>
      </section>
   </section>
@endsection

@push('asset-bottom')
@endpush