@extends('layouts.front')

@section('content')

<div class="pl-200 pr-200 overflow clearfix">
    <div class="categori-menu-slider-wrapper clearfix">
        <div class="categories-menu">

            <div class="sidebar-widget mb-40" style="margin-top:10px; padding: 10px; ">
                        <h3 class="sidebar-title">Filter by Price</h3>
                        <div class="price_filter">
                            
                            <div id="slider-range"></div>
                         
                            <div class="price_slider_amount">
                                <div class="label-input">
                                    <label>price : </label>
                                    <input type="text" id="amount" name="price" placeholder="Add Your Price" />
                                </div>
                                <button type="button" style="background-color: black; border-radius: 5px; color:white; padding: 5px 10px 5px 10px;">Filter</button>

                                
                            </div>
                        </div>
                    </div>


            <div class="category-heading">
                <h3>Browse Categories</h3>
            </div>
            <div class="category-menu-list">
                <ul style="padding-bottom:-30px; ">
                    @foreach($categories as $category)
                        <li>
                        <a style="color:#007340" href="{{route('products.index', ['category_id' => $category->id])}}">{{$category->name}}<i
                                    class="pe-7s-angle-right"></i></a>

                                    @php
                                        $children = TCG\Voyager\Models\Category::where('parent_id', $category->id)->get();
                                    @endphp

                               @if($children->isNotEmpty())
                                <div class="category-menu-dropdown">

                                    @foreach ($children as $child)
                                        <div class="category-dropdown-style category-common3">
                                            <h4 class="categories-subtitle">
                                                <a href="{{route('products.index', ['category_id' => $child->id])}}">
                                                {{$child->name}}
                                                </a>

                                              </h4>
                                            @php
                                                $grandChild = TCG\Voyager\Models\Category::where('parent_id', $child->id)->get();
                                            @endphp
                                            @if($grandChild->isNotEmpty())
                                                <ul>
                                                    @foreach ($grandChild as $c)
                                                        <li style="height: 30px; margin-top: -30px; color:#007340"><a href="{{route('products.index', ['category_id' => $c->id])}}">{{$c->name}}</a></li>
                                                    @endforeach
                                                </ul>
                                            @endif
                                        </div>
                                    @endforeach


                                </div>

                              @endif
                        </li>

                    @endforeach

                </ul>
            </div>

       

        <div class="sidebar-widget mb-40" style="margin-top:10px; padding: 10px; ">
                        <h3 class="sidebar-title" style="border-bottom: solid 1px #EBEDEF">size</h3>
                        <div class="product-size">

                            
                            <ul>
                                <li><a  href="">S</li>
                                    <li><a  href="">M</li>
                                        <li><a  href="">L</li>
                               
                            </ul>
                          
                        </div>
                    </div>






            </div>



        <div class="menu-slider-wrapper">
              <div class="electro-product-wrapper wrapper-padding pt-95 pb-45">

            <div class="container-fluid">
            <div class="mb-40" style="margin-left: -20px; margin-top: -90px; border-bottom: solid 1px #EBEDEF">
            <h4 >Recommended Products</h4>
            </div>
            <div class="top-product-style">

            <div>
            <div id="electro1">
            <div class="custom-row-2">

            @foreach($allProducts as $product)
            @include('product._single_product')

            @endforeach

            </div>
            </div>

            </div>
            </div>
            </div>
</div>
            <!-- show all product -->
      <div class="electro-product-wrapper wrapper-padding pt-95 pb-45">
             <div class="container-fluid">
            <div class="mb-40" style="margin-left: -20px; margin-top: -90px; border-bottom: solid 1px #EBEDEF">
            <h4 >Top Products</h4>
            </div>
            <div class="top-product-style">

            <div>
            <div id="electro1">
            <div class="custom-row-2">

            @foreach($allProducts as $product)
            @include('product._single_product')

            @endforeach

            </div>
            </div>

            </div>
            </div>
            </div>

    </div>
            
        </div>
    </div>
</div>

    

  

@endsection