@extends('users.store.layout.layout')

@section('title', 'Store | Products')

@section('store-main-content')
<!-- INNERPAGES BANNER START -->
<section class="innerpagesbanner">
   <div class="container">
      <div class="row align-items-center">
         <div class="col-md-12">
            <div class="innerpageheading">
               <h1>Products</h1>
            </div>
         </div>
      </div>
   </div>
</section>
<!-- INNERPAGES BANNER END -->
<!-- CategorySection Html Start -->
<section class="CategorySection CategorySectionInnerPage">
   <div class="container-fluid">
      <div class="row">
         <div class="col-md-3">
            <div class="mainFilerBox">
               <div class="HomeAssign">
                  <ul>
                     <li><a href="#">home ></a></li>
                     <li><a href="#">Product ></a></li>
                     <li><a href="#">Page 1 of 1</a></li>
                  </ul>
               </div>
               <div class="filterheading">
                  <h5>SHOP BY CATEGORIES</h5>
               </div>
               <div class="filterCategories">
                  <ul>
                     <li><a href="#"><i class="fas fa-long-arrow-alt-right"></i> Clothing</a></li>
                     <li><a href="#"><i class="fas fa-long-arrow-alt-right"></i> Trending</a></li>
                     <li><a href="#"><i class="fas fa-long-arrow-alt-right"></i> Men</a></li>
                     <li><a href="#"><i class="fas fa-long-arrow-alt-right"></i> Women</a></li>
                  </ul>
               </div>
               <div class="slidecontainer">
                  <label>Filter by price</label>
                  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
                  <div class="Valueinn">
                     <p>
                        Price: $49 — $86
                     </p>
                  </div>
               </div>
               <div>
                  <div class="colorsHeading">
                     <h4>COLOR</h4>
                  </div>
               </div>
               <div class="form-check">
                  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                  <label class="form-check-label" for="flexCheckDefault">
                  black
                  </label>
                  <span class="black"></span>
               </div>
               <div class="form-check">
                  <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" >
                  <label class="form-check-label" for="flexCheckChecked">
                  grey
                  </label>
                  <span class="grey"></span>
               </div>
               <div class="form-check">
                  <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" >
                  <label class="form-check-label" for="flexCheckChecked">
                  red
                  </label>
                  <span ></span>
               </div>
               <div class="form-check">
                  <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" >
                  <label class="form-check-label" for="flexCheckChecked">
                  blue
                  </label>
                  <span class="blue"></span>
               </div>
               <div class="form-check">
                  <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" >
                  <label class="form-check-label" for="flexCheckChecked">
                  yellow
                  </label>
                  <span class="yellow"></span>
               </div>
               <div class="form-check">
                  <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" >
                  <label class="form-check-label" for="flexCheckChecked">
                  green
                  </label>
                  <span class="green"></span>
               </div>
               <div class="btncustomchecked">
                  <button class="btn btn-red btnbtnChecked" type="submit">Filter</button>
               </div>
            </div>
         </div>
         <div class="col-md-9">
            <div class="row">
               <div class="col-lg-4">
                  <div class="FeaturedBox">
                     <figure>
                        <img src="{{ asset('user-assets/store/assets') }}/images/category2.png" alt="" class="img-fluid">
                     </figure>
                     <div class="featuredContent">
                        <div class="firstLine">
                           <h4>Nike Air M2 Jordan <br>Shoes</h4>
                           <span class="box box1"></span>
                           <span class="box box2"></span>
                           <span class="box box3"></span>
                        </div>
                        <div class="secondLine">
                           <h6>$ 35</h6>
                           <div class="carttext">
                              <a href="#" class="Wishlist"><i class="fas fa-heart"></i></a>
                              <a href="#" class="Wishlist"><i class="fas fa-shopping-cart"></i></a>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="FeaturedBox">
                     <figure>
                        <img src="{{ asset('user-assets/store/assets') }}/images/category2.png" alt="" class="img-fluid">
                     </figure>
                     <div class="featuredContent">
                        <div class="firstLine">
                           <h4>Nike Air M2 Jordan <br>Shoes</h4>
                           <span class="box box1"></span>
                           <span class="box box2"></span>
                           <span class="box box3"></span>
                        </div>
                        <div class="secondLine">
                           <h6>$ 35</h6>
                           <div class="carttext">
                              <a href="#" class="Wishlist"><i class="fas fa-heart"></i></a>
                              <a href="#" class="Wishlist"><i class="fas fa-shopping-cart"></i></a>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="FeaturedBox">
                     <figure>
                        <img src="{{ asset('user-assets/store/assets') }}/images/category2.png" alt="" class="img-fluid">
                     </figure>
                     <div class="featuredContent">
                        <div class="firstLine">
                           <h4>Nike Air M2 Jordan <br>Shoes</h4>
                           <span class="box box1"></span>
                           <span class="box box2"></span>
                           <span class="box box3"></span>
                        </div>
                        <div class="secondLine">
                           <h6>$ 35</h6>
                           <div class="carttext">
                              <a href="#" class="Wishlist"><i class="fas fa-heart"></i></a>
                              <a href="#" class="Wishlist"><i class="fas fa-shopping-cart"></i></a>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="col-lg-4">
                  <div class="FeaturedBox">
                     <figure>
                        <img src="{{ asset('user-assets/store/assets') }}/images/category3.png" alt="" class="img-fluid">
                     </figure>
                     <div class="featuredContent">
                        <div class="firstLine">
                           <h4>Nike Air M2 Jordan <br>Shoes</h4>
                           <span class="box box1"></span>
                           <span class="box box2"></span>
                           <span class="box box3"></span>
                        </div>
                        <div class="secondLine">
                           <h6>$ 35</h6>
                           <div class="carttext">
                              <a href="#" class="Wishlist"><i class="fas fa-heart"></i></a>
                              <a href="#" class="Wishlist"><i class="fas fa-shopping-cart"></i></a>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="FeaturedBox">
                     <figure>
                        <img src="{{ asset('user-assets/store/assets') }}/images/category3.png" alt="" class="img-fluid">
                     </figure>
                     <div class="featuredContent">
                        <div class="firstLine">
                           <h4>Nike Air M2 Jordan <br>Shoes</h4>
                           <span class="box box1"></span>
                           <span class="box box2"></span>
                           <span class="box box3"></span>
                        </div>
                        <div class="secondLine">
                           <h6>$ 35</h6>
                           <div class="carttext">
                              <a href="#" class="Wishlist"><i class="fas fa-heart"></i></a>
                              <a href="#" class="Wishlist"><i class="fas fa-shopping-cart"></i></a>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="FeaturedBox">
                     <figure>
                        <img src="{{ asset('user-assets/store/assets') }}/images/category3.png" alt="" class="img-fluid">
                     </figure>
                     <div class="featuredContent">
                        <div class="firstLine">
                           <h4>Nike Air M2 Jordan <br>Shoes</h4>
                           <span class="box box1"></span>
                           <span class="box box2"></span>
                           <span class="box box3"></span>
                        </div>
                        <div class="secondLine">
                           <h6>$ 35</h6>
                           <div class="carttext">
                              <a href="#" class="Wishlist"><i class="fas fa-heart"></i></a>
                              <a href="#" class="Wishlist"><i class="fas fa-shopping-cart"></i></a>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="col-lg-4">
                  <div class="FeaturedBox">
                     <figure>
                        <img src="{{ asset('user-assets/store/assets') }}/images/category4.png" alt="" class="img-fluid">
                     </figure>
                     <div class="featuredContent">
                        <div class="firstLine">
                           <h4>Nike Air M2 Jordan <br>Shoes</h4>
                           <span class="box box1"></span>
                           <span class="box box2"></span>
                           <span class="box box3"></span>
                        </div>
                        <div class="secondLine">
                           <h6>$ 35</h6>
                           <div class="carttext">
                              <a href="#" class="Wishlist"><i class="fas fa-heart"></i></a>
                              <a href="#" class="Wishlist"><i class="fas fa-shopping-cart"></i></a>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="FeaturedBox">
                     <figure>
                        <img src="{{ asset('user-assets/store/assets') }}/images/category4.png" alt="" class="img-fluid">
                     </figure>
                     <div class="featuredContent">
                        <div class="firstLine">
                           <h4>Nike Air M2 Jordan <br>Shoes</h4>
                           <span class="box box1"></span>
                           <span class="box box2"></span>
                           <span class="box box3"></span>
                        </div>
                        <div class="secondLine">
                           <h6>$ 35</h6>
                           <div class="carttext">
                              <a href="#" class="Wishlist"><i class="fas fa-heart"></i></a>
                              <a href="#" class="Wishlist"><i class="fas fa-shopping-cart"></i></a>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="FeaturedBox">
                     <figure>
                        <img src="{{ asset('user-assets/store/assets') }}/images/category4.png" alt="" class="img-fluid">
                     </figure>
                     <div class="featuredContent">
                        <div class="firstLine">
                           <h4>Nike Air M2 Jordan <br>Shoes</h4>
                           <span class="box box1"></span>
                           <span class="box box2"></span>
                           <span class="box box3"></span>
                        </div>
                        <div class="secondLine">
                           <h6>$ 35</h6>
                           <div class="carttext">
                              <a href="#" class="Wishlist"><i class="fas fa-heart"></i></a>
                              <a href="#" class="Wishlist"><i class="fas fa-shopping-cart"></i></a>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div class="col-md-12">
            <div class="pignationStart">
               <nav aria-label="Page navigation example">
                  <ul class="pagination">
                     <li class="page-item"><a class="page-link" href="#">1</a></li>
                     <li class="page-item"><a class="page-link" href="#">2</a></li>
                     <li class="page-item"><a class="page-link" href="#">3</a></li>
                     <li class="page-item"><a class="page-link" href="#">4</a></li>
                     <li class="page-item"><a class="page-link" href="#">5</a></li>
                     <li class="page-item"><a class="page-link" href="#">6</a></li>
                     <li class="page-item"><a class="page-link" href="#">7</a></li>
                     <li class="page-item"><a class="page-link" href="#">8</a></li>
                     <li class="page-item"><a class="page-link" href="#">9</a></li>
                  </ul>
               </nav>
            </div>
         </div>
      </div>
   </div>
</section>
<!-- CategorySection Html End -->


@endsection