@extends('frontend::layouts.app')

@section('content')
       <!-- Page title -->
       <section id="page-title">
         <div class="container">
             <div class="page-title">
                 <h1>PRODUCTS</h1>
             </div>
             <div class="breadcrumb">
                 <ul>
                     <li><a href="{{ route('frontend.index') }}">Home</a> </li>
                     <li class="active"><a href="#">Products All</a> </li>
                 </ul>
             </div>
         </div>
     </section>
     <!-- end: Page title -->
     <!-- Shop products -->
     <section id="page-content" class="sidebar-left">
      <div class="container">
          <div class="row">
              <!-- Content-->
              <div class="content col-lg-9">
                  <div class="row">
                      <div class="col-lg-6">
                          <p>Items 1-35 of 61</p>
                      </div>
                  </div>
                  <div class="row">
                    @for ($i = 1; $i <= 12; $i++)
                    <div class="col-xs-12 col-sm-4 col-md-3 col-lg-3 m-b-30">
                     <div class="product-card">
                        <div class="product-image">
                            <a href="{{ route('frontend.productsdetail') }}"><img src="{{ asset('assets/frontend/images/product-2.jpg') }}" alt="Product Image" /></a>
                        </div>
                        <div class="product-content">
                            <div class="category">Category</div>
                            <div class="title"><a href="{{ route('frontend.productsdetail') }}">Product Title Have A Long Text</a></div>
                            <div class="price-area">
                                <div>
                                    <div class="original-price">550 THB</div>
                                    <div class="price">532 THB</div>
                                </div>
                                <div class="add-button"><a href="#"><i class="fa fa-heart"></i></a></div>
                                <div class="add-button"><a href="#">+</a></div>
                            </div>
                        </div>
                    </div>
                    </div>
                    @endfor
                  </div>   
                  <!--End: Product list-->
                  <!-- Pagination -->
            <div class="row">
               <div class="col-lg-12">
                   <ul class="pagination justify-content-center">
                       <li class="page-item disabled">
                           <a class="page-link" href="#" tabindex="-1" aria-disabled="true"><i class="fa fa-angle-left"></i></a>
                       </li>
                       <li class="page-item active" aria-current="page"><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="#"><i class="fa fa-angle-right"></i></a>
                       </li>
                   </ul>
               </div>
           </div>
           <!-- end: Pagination -->
              </div>
              <!-- end: Content-->
              <!-- Sidebar-->
              <div class="sidebar col-lg-3">
                  <!--widget newsletter-->
                  <div class="widget clearfix widget-archive">
                      <h4 class="widget-title">Product categories</h4>
                      <ul class="main-list">
                        <li class="dropdown ">
                            <a href="javascript:void(0)">Category A</a>
                            <ul class="dropdown-list">
                                <li class="dropdown ">
                                    <a href="javascript:void(0)">Sub Menu v.2</a>
                                    <ul class="dropdown-list">
                                        <li><a href="#">submenu v.3</a></li>
                                        <li><a href="#">submenu v.3</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Sub Menu v.2</a></li>
                                <li><a href="#">Sub Menu v.2</a></li>
                            </ul>
                        </li>
                        <li class="dropdown ">
                            <a href="javascript:void(0)">Category B</a>
                            <ul class="dropdown-list">
                                <li class="dropdown ">
                                    <a href="javascript:void(0)">Sub Menu v.2</a>
                                    <ul class="dropdown-list">
                                        <li><a href="#">submenu v.3</a></li>
                                        <li><a href="#">submenu v.3</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Sub Menu v.2</a></li>
                                <li><a href="#">Sub Menu v.2</a></li>
                            </ul>
                        </li>
                        <li class="dropdown ">
                            <a href="javascript:void(0)">Category C</a>
                            <ul class="dropdown-list">
                                <li class="dropdown ">
                                    <a href="javascript:void(0)">Sub Menu v.2</a>
                                    <ul class="dropdown-list">
                                        <li><a href="#">submenu v.3</a></li>
                                        <li><a href="#">submenu v.3</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Sub Menu v.2</a></li>
                                <li><a href="#">อุปกรณ์ทำความสะอาด</a></li>
                            </ul>
                        </li>

                    </ul>
                  </div>
                  <div class="widget clearfix widget-shop">
                      <h4 class="widget-title">Filters</h4>
                      <div class="filter-content" id="priceFilterContent">
                        <label><input type="checkbox" /> 0.00 THB – 1,000.00 THB</label>
                        <label><input type="checkbox" /> 1,000.00 THB – 2,000.00 THB</label>
                        <label><input type="checkbox" /> 2,000.00 THB – 3,000.00 THB</label>
                        <label><input type="checkbox" /> 3,000.00 THB – 4,000.00 THB</label>
                        <label><input type="checkbox" /> 4,000.00 THB – 5,000.00 THB</label>
                        <label><input type="checkbox" /> 5,000.00 THB – 6,000.00 THB</label>
                        <label><input type="checkbox" /> 6,000.00 THB – 7,000.00 THB</label>
                        <label><input type="checkbox" /> 7,000.00 THB And Above</label>
                      </div>
                  </div>
                  <div class="widget clearfix widget-tags">
                      <h4 class="widget-title">Brand</h4>
                      <div class="carousel" data-items="1" data-margin="0" data-dots="true" data-loop="true" data-autoplay="true"> 
                        <a href="#"><img src="{{ asset('assets/frontend/images/partners/01.png') }}" alt="image" /></a> 
                        <a href="#"><img src="{{ asset('assets/frontend/images/partners/02.png') }}" alt="image" /></a>
                     </div>
                  </div>
              </div>
              <!-- end: Sidebar-->
          </div>
      </div>
  </section>
  <!-- end: Shop products -->

@endsection