@extends('layouts.app')
@section('title_and_meta')
    <title>{{ $Maincategory->meta_title }} | Wishours</title>
    <meta name="description" content="{{ $Maincategory->meta_description }}" />
    <meta name="keywords" content="{{ $Maincategory->meta_keywords }}" />
@endsection
@section('content')

    <div id="loading" class="product_loader">
        <div>
       <img src="{{ asset('frontEnd')}}/images/loader.gif" alt="loading product">
      </div>    
    </div> 
    <div class="main-container">
    <div class="fullWith ">
        <div class="container-fluid">
            <div class=" product-single-default">
                <nav aria-label="breadcrumb" class="breadcrumb-nav">
                  
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ url('/') }}"><i class="icon-home"></i></a></li>
                                                        <li class="breadcrumb-item active" aria-current="page">{{ $Maincategory->title }}</li>
                        </ol>
                  
                </nav>
            </div><!-- End .product-single-container -->

        
        </div><!-- End .container-fluid -->

                <div class="banner banner-cat mb-3">
                    <div class="banner-content container">
                        <!--<h2 class="banner-subtitle">check out over <span>200+</span></h2>-->
                        <h1 class="banner-title">
                        {{ $Maincategory->title }}
                        </h1>
                       <!-- <a href="#" class="btn btn-dark">Shop Now</a>-->
                    </div><!-- End .banner-content -->
                </div><!-- End .banner -->
                <div class="subList">
                    <div class="container">
                         <ul>
                    @if(isset($flavors))
                      @foreach($flavors->subCategories as $key => $flavor)
                         @if($key <=7) 
                         <li><a href="{{ route('product.listing', ['category'=>$flavors->parent_category->slug,'url'=> $flavor->slug]) }}">{{ $flavor->title }}</a></li>
                         @endif
                      @endforeach
                    @endif
                    </ul>
                    <button id="showAllFlavor"><i class="fas fa-ellipsis-h"></i></button>
                    </div>
                    
                   
                </div>
                                             <div class="product-not-fount">
                             <div class="warning_img">
                                 <img src="{{ asset('frontEnd')}}/images/space.svg" >
                             </div>
                             <h1>Product not found !</h1>
                         </div>
                                        </div>
                <div class="container">
                 <div class="row">
                  
                </div>
                </div>
                <div class="container">
                <div class="products-carousel owl-carousel owl-theme">
                    
                

                </div><!-- End .products-carousel -->
                <div class="container">
                    <div class="row row-sm">
                    @foreach($allProductslist as $proList)
                    @if($proList->addonproduct == 0)
                    <div class="col-6 col-md-4 col-lg-3 col-xl-5col">
                    <div class="product-default">
                        <figure>
                            <a href="{{ url("products", [$proList->slug])}}">
                                <img src="{{ asset("/uploads") }}/{{ $proList->thumbnail }}">
                            </a>
                        </figure>
                        <div class="product-details">
                            <span class="product-title">
                                <a href="{{ url("products", [$proList->slug]) }}">{{ $proList->title }}</a>
                            </span>
                             <div class='ratings-container'>
                                                     @foreach ($proList->reviews as $rew) 
                                                      @endforeach
                                                           
                            </div>
                            <div class="price-box">
                                <span class="product-price">₹{{ $proList->price }}</span>
                            </div><!-- End .price-box -->
                           
                        </div><!-- End .product-details -->
                    </div>
                </div>  
                           
@endif
                    @endforeach
                    </div>
                    
                       
                    
                   
                </div>
                
                 

                </div>
                <div class="mb-widgets">
                     <div class="widget wdg-1">
                         <div class="widget_header">
                              <h3 class="widget-title">Flavour</h3>
                              <button class="cancel-btn"><i class="fas fa-times"></i></button>
                         </div>
                       
                            <ul>
                    @if(isset($flavors))
                      @foreach($flavors->subCategories as $key => $flavor)
                       
                         <li><a href="{{ route('product.listing', ['category'=>$flavors->parent_category->slug,'url'=> $flavor->slug]) }}">{{ $flavor->title }}</a></li>
                         
                      @endforeach
                    @endif
                    </ul>
                    </div><!-- End .widget -->
                   
                    <div class="widget wdg-2">
                      
                        <div class="widget_header">
                              <h3 class="widget-title">Price Range</h3>
                              <button class="cancel-btn"><i class="fas fa-times"></i></button>
                         </div>
                        <div class="price-range-check">
                            <div class="radio-box">
                               <input type="radio" id="l2h" name="price_filer" value="l2h"> 
                               <label for="l2h">Price: low to high</label>
                            </div>
                             <div class="radio-box">
                                <input type="radio" id="h2l" name="price_filer" value="h2l"> 
                               <label for="h2l">Price: high to low</label>
                             </div>
                         
                        </div>
                        <div class="filter-footer">
                    <button class="filter-done-btn">Done</button>
                </div>
                    </div><!-- End .widget -->
                    
                </div>
                
                 <div class="mobile-filter">
                   <div class="tab-list">
                     <button class="filter_item" data-id="flavor"><i class="fas fa-filter"></i> Flavour</button>
                      <button class="filter_item" data-id="price_range"><i class="fas fa-sliders-h"></i> Price Range</button>
                   </div>
                  </div>
                </div><!-- End .main-content -->
          

  
    </div>
         <script>
        $(".filter_item").click(function() {
            
            $('.filter-pro-main').addClass('sidebar-opened');
            var dataId = $(this).data('id');
          
            if (dataId == 'flavor') {
                $('.wdg-1').addClass('active');
                $('.wdg-2').removeClass('active');
            } else if (dataId == 'price_range') {
                $('.wdg-1').removeClass('active');
                $('.wdg-2').addClass('active');
               
            } else {
                 $('.wdg-1').removeClass('active');
                 $('.wdg-2').removeClass('active');
            }
    
        });
        $('.cancel-btn').click(function() {
          $('.wdg-1').removeClass('active');
          $('.wdg-2').removeClass('active');
        })
        $('.done-btn').click(function() {
          $('.wdg-1').removeClass('active');
          $('.wdg-2').removeClass('active');
        })
    </script>
@endsection