@extends('front.layouts.app')

@section('content')

    <!--Page Header Start-->
    <section class="page-header">
        <div class="page-header-bg" style="background-image: url({{asset('front/assets/images/backgrounds/page-header-bg.jpg')}})">
        </div>
        <div class="container">
            <div class="page-header__inner">
                <ul class="thm-breadcrumb list-unstyled">
                    <li><a href="index.html">Home</a></li>
                    <li><span>/</span></li>
                    <li class="active">Shop</li>
                </ul>
                <h2>Products</h2>
            </div>
        </div>
    </section>
    <!--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="#">Technology</a></li>
                                <li class="active"><a href="#">Software</a></li>
                                <li><a href="#">Innovations</a></li>
                                <li><a href="#">Development</a></li>
                                <li><a href="#">Web Design</a></li>
                            </ul>
                        </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="{{asset('front/assets/images/shop/shop-product-1-1.jpg')}}" alt="">
                                        </div>
                                        <div class="product__all-content">

                                            <h4 class="product__all-title"><a href="{{route('arabiaMobiles.product-details')}}">Classy
                                                    chair</a></h4>
                                            <p class="product__all-price">$33.00</p>
                                            <div class="product__all-btn-box">
                                                <a href="cart.html" 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="{{asset('front/assets/images/shop/shop-product-1-1.jpg')}}" alt="">
                                        </div>
                                        <div class="product__all-content">

                                            <h4 class="product__all-title"><a href="{{route('arabiaMobiles.product-details')}}">Comfy
                                                    chair</a></h4>
                                            <p class="product__all-price">$66.00</p>
                                            <div class="product__all-btn-box">
                                                <a href="cart.html" 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="{{asset('front/assets/images/shop/shop-product-1-1.jpg')}}" alt="">
                                        </div>
                                        <div class="product__all-content">

                                            <h4 class="product__all-title"><a href="{{route('arabiaMobiles.product-details')}}">Boss
                                                    chair</a></h4>
                                            <p class="product__all-price">$50.00</p>
                                            <div class="product__all-btn-box">
                                                <a href="cart.html" 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="{{asset('front/assets/images/shop/shop-product-1-1.jpg')}}" alt="">
                                        </div>
                                        <div class="product__all-content">

                                            <h4 class="product__all-title"><a href="{{route('arabiaMobiles.product-details')}}">Sofa
                                                    chair</a></h4>
                                            <p class="product__all-price">$89.00</p>
                                            <div class="product__all-btn-box">
                                                <a href="cart.html" 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="{{asset('front/assets/images/shop/shop-product-1-1.jpg')}}" alt="">
                                        </div>
                                        <div class="product__all-content">

                                            <h4 class="product__all-title"><a href="{{route('arabiaMobiles.product-details')}}">Wooden
                                                    stool</a></h4>
                                            <p class="product__all-price">$46.00</p>
                                            <div class="product__all-btn-box">
                                                <a href="cart.html" 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="{{asset('front/assets/images/shop/shop-product-1-1.jpg')}}" alt="">
                                        </div>
                                        <div class="product__all-content">

                                            <h4 class="product__all-title"><a href="{{route('arabiaMobiles.product-details')}}">Big
                                                    sofa</a></h4>
                                            <p class="product__all-price">$82.00</p>
                                            <div class="product__all-btn-box">
                                                <a href="cart.html" 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="{{asset('front/assets/images/shop/shop-product-1-1.jpg')}}" alt="">
                                        </div>
                                        <div class="product__all-content">

                                            <h4 class="product__all-title"><a href="{{route('arabiaMobiles.product-details')}}">Round
                                                    chair</a></h4>
                                            <p class="product__all-price">$36.00</p>
                                            <div class="product__all-btn-box">
                                                <a href="cart.html" 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="{{asset('front/assets/images/shop/shop-product-1-1.jpg')}}" alt="">
                                        </div>
                                        <div class="product__all-content">

                                            <h4 class="product__all-title"><a href="{{route('arabiaMobiles.product-details')}}">Big
                                                    stool</a></h4>
                                            <p class="product__all-price">$19.00</p>
                                            <div class="product__all-btn-box">
                                                <a href="cart.html" 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="{{asset('front/assets/images/shop/shop-product-1-1.jpg')}}" alt="">
                                        </div>
                                        <div class="product__all-content">

                                            <h4 class="product__all-title"><a href="{{route('arabiaMobiles.product-details')}}">Classic
                                                    chair</a></h4>
                                            <p class="product__all-price">$23.00</p>
                                            <div class="product__all-btn-box">
                                                <a href="cart.html" 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-->
@endsection