@extends('layouts.app')

@section('content')
    <div class="custom-cursor">

      @include('layouts.components.cursor-and-preloader')
        <!-- /cursor and preloader -->





        <div class="page-wrapper">



            @include('layouts.header')


            <div class="stricky-header stricked-menu main-menu">
                <div class="sticky-header__content"></div>
                <!-- /.sticky-header__content -->
            </div>
            <!-- /.stricky-header -->



              <!--Page Header Start-->
            @include('layouts.components.page-header', [
                'page_title' => 'Products',
            ])
            <!--Page Header End-->

            

            <!--Product Start-->
            <section class="product">
                <div class="container">
                    <div class="row">

                        <div class="col-xl-3 col-lg-3">
                            <div class="product__sidebar">
                                <div class="shop-search product__sidebar-single">
                                    <form action="#">
                                        <input type="text" placeholder="Search">
                                    </form>
                                </div>
                                <div class="product__price-ranger product__sidebar-single">
                                    <h3 class="product__sidebar-title">Price</h3>
                                    <div class="price-ranger">
                                        <div id="slider-range"></div>
                                        <div class="ranger-min-max-block">
                                            <input type="text" readonly class="min">
                                            <span>-</span>
                                            <input type="text" readonly class="max">
                                            <input type="submit" value="Filter">
                                        </div>
                                    </div>
                                </div>

                                <div class="shop-category product__sidebar-single">
                                    <h3 class="product__sidebar-title">Categories</h3>
                                    <ul class="list-unstyled">
                                        <li><a href="#">Make a Donation</a></li>
                                        <li class="active"><a href="#">Make World Happier</a></li>
                                        <li><a href="#">Education For People</a></li>
                                        <li><a href="#">Food & Build Home</a></li>
                                        <li><a href="#">Environtment Recyle</a></li>
                                    </ul>
                                </div>

                                <div class="shop-color-option product__sidebar-single">
                                    <h3 class="product__sidebar-title">Color Option</h3>
                                    <ul class="list-unstyled">
                                        <li>Black</li>
                                        <li>Blue</li>
                                        <li>Brown</li>
                                        <li>Pink</li>
                                        <li>Orange</li>
                                    </ul>
                                </div>
                                <div class="shop-product-tags product__sidebar-single">
                                    <h3 class="product__sidebar-title">Product Tags</h3>
                                    <div class="shop-product__tags-list">
                                        <a href="#">Art</a>
                                        <a href="#">Decor</a>
                                        <a href="#">Design</a>
                                        <a href="#">Electronix</a>
                                        <a href="#">Envato</a>
                                        <a href="#">Destination</a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-xl-9 col-lg-9">
                            <div class="product__items">
                                <div class="row">
                                    <div class="col-xl-12">
                                        <div class="product__showing-result">
                                            <div class="product__showing-text-box">
                                                <p class="product__showing-text">Showing 1–9 of 12 results</p>
                                            </div>
                                            <div class="product__showing-sort">
                                                <div class="select-box">
                                                    <select class="wide">
                                                        <option data-display="Sort by popular">Sort by popular</option>
                                                        <option value="1">Sort by popular</option>
                                                        <option value="2">Sort by Price</option>
                                                        <option value="3">Sort by Ratings</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="product__all">
                                    <div class="row">
                                        <!--Product All Single Start-->
                                        <div class="col-xl-4 col-lg-4 col-md-6">
                                            <div class="product__all-single">
                                                <div class="product__all-img">
                                                    <img src="assets/images/shop/shop-product-1-1.jpg" alt="">
                                                </div>
                                                <div class="product__all-content">
                                                    <div class="product__all-review">
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                    </div>
                                                    <h4 class="product__all-title"><a href="{{ route('products-details') }}">Classy
                                                            chair</a></h4>
                                                    <p class="product__all-price">$33.00</p>
                                                    <div class="product__all-btn-box">
                                                        <a href="{{ route('cart') }}" class="thm-btn product__all-btn">Add to
                                                            Cart</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--Product All Single End-->
                                        <!--Product All Single Start-->
                                        <div class="col-xl-4 col-lg-4 col-md-6">
                                            <div class="product__all-single">
                                                <div class="product__all-img">
                                                    <img src="assets/images/shop/shop-product-1-2.jpg" alt="">
                                                </div>
                                                <div class="product__all-content">
                                                    <div class="product__all-review">
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                    </div>
                                                    <h4 class="product__all-title"><a href="{{ route('products-details') }}">Comfy
                                                            chair</a></h4>
                                                    <p class="product__all-price">$68.00</p>
                                                    <div class="product__all-btn-box">
                                                        <a href="{{ route('cart') }}" class="thm-btn product__all-btn">Add to
                                                            Cart</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--Product All Single End-->
                                        <!--Product All Single Start-->
                                        <div class="col-xl-4 col-lg-4 col-md-6">
                                            <div class="product__all-single">
                                                <div class="product__all-img">
                                                    <img src="assets/images/shop/shop-product-1-3.jpg" alt="">
                                                </div>
                                                <div class="product__all-content">
                                                    <div class="product__all-review">
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                    </div>
                                                    <h4 class="product__all-title"><a href="{{ route('products-details') }}">Boss
                                                            chair</a></h4>
                                                    <p class="product__all-price">$23.00</p>
                                                    <div class="product__all-btn-box">
                                                        <a href="{{ route('cart') }}" class="thm-btn product__all-btn">Add to
                                                            Cart</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--Product All Single End-->
                                        <!--Product All Single Start-->
                                        <div class="col-xl-4 col-lg-4 col-md-6">
                                            <div class="product__all-single">
                                                <div class="product__all-img">
                                                    <img src="assets/images/shop/shop-product-1-4.jpg" alt="">
                                                </div>
                                                <div class="product__all-content">
                                                    <div class="product__all-review">
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                    </div>
                                                    <h4 class="product__all-title"><a href="{{ route('products-details') }}">Sofa
                                                            chair</a></h4>
                                                    <p class="product__all-price">$54.00</p>
                                                    <div class="product__all-btn-box">
                                                        <a href="{{ route('cart') }}" class="thm-btn product__all-btn">Add to
                                                            Cart</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--Product All Single End-->
                                        <!--Product All Single Start-->
                                        <div class="col-xl-4 col-lg-4 col-md-6">
                                            <div class="product__all-single">
                                                <div class="product__all-img">
                                                    <img src="assets/images/shop/shop-product-1-5.jpg" alt="">
                                                </div>
                                                <div class="product__all-content">
                                                    <div class="product__all-review">
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                    </div>
                                                    <h4 class="product__all-title"><a href="{{ route('products-details') }}">Wooden
                                                            stool</a></h4>
                                                    <p class="product__all-price">$39.00</p>
                                                    <div class="product__all-btn-box">
                                                        <a href="{{ route('cart') }}" class="thm-btn product__all-btn">Add to
                                                            Cart</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--Product All Single End-->
                                        <!--Product All Single Start-->
                                        <div class="col-xl-4 col-lg-4 col-md-6">
                                            <div class="product__all-single">
                                                <div class="product__all-img">
                                                    <img src="assets/images/shop/shop-product-1-6.jpg" alt="">
                                                </div>
                                                <div class="product__all-content">
                                                    <div class="product__all-review">
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                    </div>
                                                    <h4 class="product__all-title"><a href="{{ route('products-details') }}">Big
                                                            sofa</a></h4>
                                                    <p class="product__all-price">$44.00</p>
                                                    <div class="product__all-btn-box">
                                                        <a href="{{ route('cart') }}" class="thm-btn product__all-btn">Add to
                                                            Cart</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--Product All Single End-->
                                        <!--Product All Single Start-->
                                        <div class="col-xl-4 col-lg-4 col-md-6">
                                            <div class="product__all-single">
                                                <div class="product__all-img">
                                                    <img src="assets/images/shop/shop-product-1-7.jpg" alt="">
                                                </div>
                                                <div class="product__all-content">
                                                    <div class="product__all-review">
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                    </div>
                                                    <h4 class="product__all-title"><a href="{{ route('products-details') }}">Round
                                                            chair</a></h4>
                                                    <p class="product__all-price">$96.00</p>
                                                    <div class="product__all-btn-box">
                                                        <a href="{{ route('cart') }}" class="thm-btn product__all-btn">Add to
                                                            Cart</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--Product All Single End-->
                                        <!--Product All Single Start-->
                                        <div class="col-xl-4 col-lg-4 col-md-6">
                                            <div class="product__all-single">
                                                <div class="product__all-img">
                                                    <img src="assets/images/shop/shop-product-1-8.jpg" alt="">
                                                </div>
                                                <div class="product__all-content">
                                                    <div class="product__all-review">
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                    </div>
                                                    <h4 class="product__all-title"><a href="{{ route('products-details') }}">Big
                                                            stool</a></h4>
                                                    <p class="product__all-price">$23.00</p>
                                                    <div class="product__all-btn-box">
                                                        <a href="{{ route('cart') }}" class="thm-btn product__all-btn">Add to
                                                            Cart</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--Product All Single End-->
                                        <!--Product All Single Start-->
                                        <div class="col-xl-4 col-lg-4 col-md-6">
                                            <div class="product__all-single">
                                                <div class="product__all-img">
                                                    <img src="assets/images/shop/shop-product-1-9.jpg" alt="">
                                                </div>
                                                <div class="product__all-content">
                                                    <div class="product__all-review">
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                    </div>
                                                    <h4 class="product__all-title"><a href="{{ route('products-details') }}">Classic
                                                            chair</a></h4>
                                                    <p class="product__all-price">$33.00</p>
                                                    <div class="product__all-btn-box">
                                                        <a href="{{ route('cart') }}" class="thm-btn product__all-btn">Add to
                                                            Cart</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--Product All Single End-->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!--Product End-->

            <!--Site Footer Start-->
            @include('layouts.footer')
            <!--Site Footer End-->

        </div>
        <!-- /.page-wrapper -->


    </div>
@endsection