@extends('layout.frontend.master')

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

@push('asset-top')
    
@endpush

@section('content')
   <section class="page-content ">        
      <section class="inner-page ">
         <div class="inner-banner-block">
            <div class="inner-banner">
               <img src="{{ 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') ? $occasion->name_en : $occasion->name_ar }} </h2>
                     <p>From Chocolate Cakes, to Fruity Cakes, to cheesecakes  and so many more, there is a cake for any celebration and occassion. Why not personalise a special birthday message on your chosen cake to make the celebration extra special.</p>
                  </div>
               </div>
            </div>
         </div>
         <div class="container-fluid ">
            <div class="products-grid">
               <form class="" method="get" action="{{route('pro_occasion', ['slug'=>$occasion->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') ? $occasion->name_en : $occasion->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">
                                                {{__('Category')}}
                                             </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($categories as $category)
                                                         <li>
                                                            <label class="checkbox-style">
                                                               <input type="checkbox" name="category[]" value="{{$category->slug}}" @if(array_key_exists('category',$request)) {{(in_array($category->slug,$request['category']))?'checked':''}} @endif>
                                                               <span class="checkmark"></span>{{(app()->getLocale()=='en')?ucwords($category->name_en):$category->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">
                     <div class="  row">
                        @foreach($products as $product)
                           @php
                              $percent = '';
                              $weights = json_decode($product->measurements, true);
                           @endphp
                           @if($product->dsale_price)

                              @php
                                 $percent = (($product->dprice-$product->dsale_price)/$product->dprice) * 100;
                                 $percent = ceil($percent);
                              @endphp
                           @endif
                           @php
                              $weights = json_decode($product->measurements, true);
                           @endphp
                           <div class="col-lg-3 col-6 col-sm-4  product-col">
                              <div class="product">
                                 <div class="product-image">
                                    @if(!empty($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->dsale_price)
                                       <div class="price">{{$product->dsale_price}} {{__('KWD')}} <span class="offer-price">{{$product->dprice}} {{__('KWD')}}</span></div>
                                    @else
                                       <div class="price">{{$product->dprice}} {{_('KWD')}}</div>
                                    @endif
                                 
                                    <div class="add-cart">
                                       @if(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>
               
                  @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