@extends('layout.frontend.master')

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

@push('asset-top')
    
@endpush

@section('content')
   <section class="page-content ">        
      <section class="inner-page ">
         <div class="inner-banner-block">
            <div class="inner-banner">
               {{-- /gallery/category/ --}}
               <img src="{{ $category->banner ? '/gallery/category/'.$category->banner : asset('images/inner-banner.jpg') }}" alt="inner banner">
            </div>
            <div class="banner-content">
               <div class="container-fluid">
                  <div class="inner-content">
                     
                     <h2> {{ (app()->currentLocale() == 'en') ? $category->name_en : $category->name_ar }} </h2>
                     <p>{{ (app()->currentLocale() == 'en') ? $category->disp : $category->disp_ar }} </p>
                  </div>
               </div>
            </div>
         </div>
         <div class="container-fluid ">
            <div class="products-grid">
               <form class="" method="get" action="{{route('product_cat', ['slug'=>$category->slug])}}">
                  <div class="product-grid-header  " >
                     <div class="row">

                        <div class="col-lg-6 col-6">
                           <div class="product-grid-right">
                              <div class="filer">
                                 <div class="filter-btn">
                                    <a href="#" data-bs-toggle="modal" data-bs-target="#openFilter">
                                       {{__('Filter')}} </a>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class=" col-lg-6 col-6">
                           <div class="product-grid-left">                             
                              <div class="select-style">                                 
                                 <select class="form-select" name="sort_by" onchange="jQuery(this).closest('form').submit()">
                                    <option data-tokens="Popularity" value="default" @if(array_key_exists('sort_by',$request)) {{($request['sort_by']=='default')?'selected':''}} @endif>{{__('Sort by')}}</option>
                                    <!-- <option data-tokens="Default" value="default" @if(array_key_exists('sort_by',$request)) {{--($request['sort_by']=='default')?'selected':''--}} @endif>{{--__('Default')--}}</option> -->
                                    <option data-tokens="Low" value="price_low" @if(array_key_exists('sort_by',$request)) {{($request['sort_by']=='price_low')?'selected':''}} @endif>{{__('Price: Low to High')}}</option>
                                    <option data-tokens="High" value="price_high" @if(array_key_exists('sort_by',$request)) {{($request['sort_by']=='price_high')?'selected':''}} @endif>{{__('Price: High to Low')}}</option>
                                    <option data-tokens="First" value="new" @if(array_key_exists('sort_by',$request)) {{($request['sort_by']=='new')?'selected':''}} @endif> {{__('Newest First')}}</option>
                                 </select>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>

                  <div class="modal left fade side-filter" id="openFilter" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                     <div class="modal-dialog" role="document">
                        <div class="modal-content">
                           <div class="modal-header">
                              <h5 class="modal-title" id="myModalLabel2"> {{ (app()->currentLocale() == 'en') ? $category->name_en : $category->name_ar }} </h5>
                              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                              <span aria-hidden="true" class="cart-close"> </span></button>
                           </div>
                           <div class="modal-body">
                              <div class="sidebar ">
                                 <div class="other-filter">
                                    <div class="accordion" id="accordionPanelsStayOpenExample">
                                       <div class="accordion-item">
                                          <h3 class="accordion-header" id="panelsStayOpen-headingOne">
                                             <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
                                                {{__('Occasions')}}
                                             </button>
                                          </h3>
                                          <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne">
                                             <div class="accordion-body">
                                                <div class="checklist-block">
                                                   <ul class="normal-checkbox filter-listing">
                                                      @foreach($occasions as $occasion)
                                                         <li>
                                                            <label class="checkbox-style">
                                                               <input type="checkbox" name="occasion[]" value="{{$occasion->slug}}" @if(array_key_exists('occasion',$request)) {{(in_array($occasion->slug,$request['occasion']))?'checked':''}} @endif>
                                                               <span class="checkmark"></span>{{(app()->getLocale()=='en')?ucwords($occasion->name_en):$occasion->name_ar}}
                                                            </label>
                                                         </li>
                                                      @endforeach
                                                   </ul>
                                                </div>
                                             </div>
                                          </div>
                                       </div>
                                       <div class="accordion-item">
                                          <h3 class="accordion-header" id="panelsStayOpen-headingTwo">
                                             <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo">
                                                {{__('Size')}}
                                             </button>
                                          </h3>
                                          <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingTwo">
                                             <div class="accordion-body">
                                                <div class="checklist-block">
                                                   <ul class="normal-checkbox filter-listing">      
                                                      <li>
                                                         <label class="checkbox-style"><input type="checkbox" value="250" name="size[]" @if(array_key_exists('size',$request)) {{(in_array('250',$request['size']))?'checked':''}} @endif><span class="checkmark"></span>250 G</label>
                                                      </li>
                                                      <li>
                                                         <label class="checkbox-style"><input type="checkbox" value="500" name="size[]" @if(array_key_exists('size',$request)) {{(in_array('500',$request['size']))?'checked':''}} @endif><span class="checkmark"></span> 500 G  </label>
                                                      </li>
                                                      <li>
                                                         <label class="checkbox-style"><input type="checkbox" value="1000" name="size[]" @if(array_key_exists('size',$request)) {{(in_array('1000',$request['size']))?'checked':''}} @endif><span class="checkmark"></span>1KG</label>
                                                      </li>
                                                   </ul>     
                                                </div>
                                             </div>
                                          </div>
                                       </div>                                           
                                    </div>
                                 </div>       
                              </div>
                           </div>
                           <div class="modal-footer sidebar-cart-footer shadow">
                              <div class="w-100">                                 
                                 <div class="cart-button">
                                    <button class="btn btn-border clear-all">{{__('Clear all')}}</button>
                                    <button class="btn primery-btn bdr-radius ">{{__('Apply')}}</button>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <!-- modal-content -->
                     </div>
                     <!-- modal-dialog -->
                  </div>
               </form>
               <div class="product-listing inner-listing">
    
                  <div class="container-fluid">
                    @if(count($products) > 0)
                     <div class="  row">
                        @php
                        $sortedProducts = [];
                        $otherProducts = [];
                    
                        // First, categorize products based on 'location'
                        foreach($products as $product) {
                            if (!empty($product->location) && $product->location > 0) {
                                $sortedProducts[$product->location] = $product;
                            } else {
                                $otherProducts[] = $product;
                            }
                        }
                    
                        // Sort products based on 'location'
                        ksort($sortedProducts);
                    
                        // Take the first 9 sorted products
                        $finalProducts = array_slice($sortedProducts, 0, 9);
                        $remainingSlots = 9 - count($finalProducts);
                    
                        // If there are slots remaining, fill them with products that don't have a 'location'
                        if ($remainingSlots > 0) {
                            $finalProducts = array_merge($finalProducts, array_slice($otherProducts, 0, $remainingSlots));
                        }
                    
                        // Store any remaining products (both sorted and unsorted) for additional display
                        $moreProducts = array_merge(array_slice($sortedProducts, 9), array_slice($otherProducts, $remainingSlots));
                    @endphp
                    
                    {{-- Loop through final products and display them --}}
                     @foreach($products as $key => $product)
                        <div class="col-lg-3 col-6 col-sm-4 product-col">
                            <div class="product">
                                <div class="product-image">
                                    @if($product->new)
                                       <div class="ribbon new">{{__('New')}}</div> 
                                    @endif
                                    
                                    @if(!empty($product->single_sale_price) && $product->single_price != null &&  $product->single_price > 0)

                                       @php
                                          $percent = ceil((($product->single_price - $product->single_sale_price) / $product->single_price) * 100);                                       
                                       @endphp
                                       @if($percent!=0)
                                          <div class="ribbon offer">{{ $percent }}% {{ __('OFF') }}</div>
                                       @endif
                                    @endif
                                    @php
                                       $quantity = json_decode($product->quantity, true);
                                       $quantity = $product->single_quantity;
                                    @endphp
                                    {{-- @if(is_null($quantity) || !array_key_exists('Select', $quantity) || is_null($quantity['Select']))
                                       <div class="ribbon" style="right: 0; background: red; left: unset; font-size: 15px; padding: 10px 5px; border-radius: unset; top: 0;">
                                          {{__('Out Of Stock')}}
                                       </div> 
                                    @endif --}}
                                    
                                    @php
                                        $isOutOfStock = true;
                                        /*if (!is_null($quantity)) {
                                            foreach ($quantity as $key => $value) {
                                                if ($value > 0) {
                                                    $isOutOfStock = false;
                                                    break;  // No need to check further if one of the quantities is available
                                                }
                                            }
                                        } */
                                       if($quantity){
                                          $isOutOfStock = false;
                                       }
                                    @endphp
                                    
                                    @if($isOutOfStock)
                                       <div class="ribbon" style="right: 0; background: red; left: unset; font-size: 15px; padding: 10px 5px; border-radius: unset; top: 0;">
                                          {{__('Out Of Stock')}}
                                       </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 && $product->single_sale_price!=$product->single_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>
                            </div>
                        </div>
                    @endforeach
                    
                    {{-- Optionally, loop through more products if needed --}}
                    @foreach($moreProducts as $key => $product)
                        <!-- <div class="col-lg-3 col-6 col-sm-4 product-col">
                            <div class="product">
                                <div class="product-image">
                                    <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>
                            </div>
                        </div> -->
                    @endforeach
                    
                               
                     </div>
                     @else
                        <div class="py-2 px-2">
                            <p class="text-danger text-center h5">No Product Found</p>
                        </div>
                     @endif
                  </div>
               
                  {{-- @if($products->count()>10) --}}
                     <div class="pagination-box">
                        {{$products->appends(Request::except('page'))->links()}}
                     </div>
                  {{-- @endif --}}

                  <div class="recomend-product">
                     <div class="page-head">
                     <h2>{{__('Keep Browsing')}} </h2></div>

                     <div class="category-list">
                        <div class="category-slider main-slider">
                           @foreach($other_categories as $category)
                              <div class="cat-items">
                                 <div class="cat-block">
                                    <a href="{{route('product_cat', ['slug'=>$category->slug])}}">
                                       <div class="category-img">
                                          <img src="/gallery/category/{{$category->thumbnail}}" alt="category">
                                       </div>
                                       <div class="cate-head">
                                          <h3>  {{(app()->currentLocale()=='en')?$category->name_en:$category->name_ar}}  </h3>
                                          <div class="more-btn">{{__('Shop Now')}}</div>
                                       </div>
                                    </a>
                                 </div>                            
                              
                              </div>
                           @endforeach
                        </div>
                     </div>                              
                  </div>                         
               </div>
            </div>
         </div>
      </section>
   </section>
@endsection

@push('asset-bottom')
<script type="text/javascript">
   jQuery('body').on('click', '.clear-all', function(){
      jQuery(this).closest('form').find("input[type='checkbox']").prop('checked', false);
      setTimeOut(function(){
         jQuery(this).closest('form').submit();
      },200);
   });
</script>
@endpush