@extends('frontend.layouts.master')
@section('title','products')
@section('content')



<div class="mt-4">
    <div class="container">
      <!-- row -->
      <div class="row ">
        <!-- col -->
        <div class="col-12">
          <!-- breadcrumb -->
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
              <li class="breadcrumb-item"><a href="{{route('front.index')}}">Home</a></li>
              <li class="breadcrumb-item"><a href="{{route('frontend.shop')}}">Products</a></li>
              <li class="breadcrumb-item active" aria-current="page">Print Category Name</li>
            </ol>
          </nav>
        </div>
      </div>
    </div>
  </div>


  <div class=" mt-8 mb-lg-14 mb-8">
    <!-- container -->
    <div class="container">
      <!-- row -->
      <div class="row gx-10">
        <!-- col -->
        <aside class="col-lg-3 col-md-4 mb-6 mb-md-0">
          <div class="offcanvas offcanvas-start offcanvas-collapse w-md-50 " tabindex="-1" id="offcanvasCategory" aria-labelledby="offcanvasCategoryLabel">

            <div class="offcanvas-header d-lg-none">
              <h5 class="offcanvas-title" id="offcanvasCategoryLabel">Filter</h5>
              <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body ps-lg-2 pt-lg-0">
            

          @include('frontend.partials.category-filter')
          @include('frontend.partials.brand-filter')

          
         
         
          <div class="mb-8 position-relative">
            <!-- Banner Design -->
            <!-- Banner Content -->
            <div class="position-absolute p-5 py-8">
              <h3 class="mb-0">EA Perfumes </h3>
              <p>Retailer Or Whole Saler</p>
              <a href="#" class="btn btn-dark">Login to see Price<i class="feather-icon icon-arrow-right ms-1"></i></a>
            </div>
            <!-- Banner Content -->
            <!-- Banner Image -->
            <!-- img --><img src="{{asset('assets/frontend/assets/images/banner/assortment-citrus-fruits.png')}}" alt="" class="img-fluid rounded ">
            <!-- Banner Image -->
          </div>
          </div>
            </div>
        </aside>



        <section class="col-lg-9 col-md-12">
          <!-- card -->
          
          <!-- list icon -->
          <div class="d-lg-flex justify-content-between align-items-center">
            <div class="mb-3 mb-lg-0">
              <p class="mb-0"> <span class="text-dark">24 </span> Products found </p>
            </div>

            <!-- icon -->
            <div class="d-md-flex justify-content-between align-items-center">
              <div class="d-flex align-items-center justify-content-between">
              <div>

              <a href="shop-list.html" class="text-muted me-3"><i class="bi bi-list-ul"></i></a>
              <a href="shop-grid.html" class=" me-3 active"><i class="bi bi-grid"></i></a>
              <a href="shop-grid-3-column.html" class="me-3 text-muted"><i class="bi bi-grid-3x3-gap"></i></a>
              </div>
              <div class="ms-2 d-lg-none">
                <a class="btn btn-outline-gray-400 text-muted" data-bs-toggle="offcanvas" href="#offcanvasCategory" role="button" aria-controls="offcanvasCategory"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-filter me-2">
                  <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
                </svg> Filters</a>
              </div>
            </div>

              <div class="d-flex mt-2 mt-lg-0">
                <div class="me-2 flex-grow-1">
                  <!-- select option -->
                  <select class="form-select">
                    <option selected="">Show: 50</option>
                    <option value="10">10</option>
                    <option value="20">20</option>
                    <option value="30">30</option>
                  </select></div>
                <div>
                  <!-- select option -->
                  <select class="form-select">
                    <option selected="">Sort by: Featured</option>
                    <option value="Low to High">Price: Low to High</option>
                    <option value="High to Low"> Price: High to Low</option>
                    <option value="Release Date"> Release Date</option>
                    <option value="Avg. Rating"> Avg. Rating</option>

                  </select></div>

              </div>

            </div>
          </div>
          <!-- row -->
          <div class="row g-4 row-cols-xl-4 row-cols-lg-3 row-cols-2 row-cols-md-2 mt-2">

            @php
                $products = ['a','b','a','b','a','b','a','b','a','b'];
            @endphp


            <!-- col -->
           @foreach ($products as $product)
            <div class="col">
                <!-- card -->
                <div class="card card-product">
                <div class="card-body">

                    <!-- badge -->
                    <div class="text-center position-relative ">
                    <div class=" position-absolute top-0 start-0">
                        <span class="badge bg-danger">Sale</span>
                    </div>
                    <a href="shop-single.html">
                        <!-- img --><img src="{{asset('assets/frontend')}}/assets/images/products/product-img-1.jpg" alt="Grocery Ecommerce Template" class="mb-3 img-fluid"></a>
                    <!-- action btn -->
                    <div class="card-product-action">
                        <a href="#!" class="btn-action" data-bs-toggle="modal" data-bs-target="#quickViewModal"><i class="bi bi-eye" data-bs-toggle="tooltip" data-bs-html="true" aria-label="Quick View" data-bs-original-title="Quick View"></i></a>
                        <a href="shop-wishlist.html" class="btn-action" data-bs-toggle="tooltip" data-bs-html="true" aria-label="Wishlist" data-bs-original-title="Wishlist"><i class="bi bi-heart"></i></a>
                    </div>
                    </div>

                    <h2 class="fs-6">
                        <a href="shop-single.html" class="text-inherit text-decoration-none">
                            Product Main Title
                        </a>
                    </h2>



                    <p class="fs-6">
                        Ibuprofen 200ml Caplets
                    </p>


                    <!-- heading -->
                    <div class="text-small mb-1 text-muted">
                        <small> 5 x 600 ml |  6598</small>
                    </div>
                    
                   
                    <!-- price -->
                    <div class="d-flex justify-content-between align-items-center mt-3">
                    <div><span class="text-dark">$18</span> <span class="text-decoration-line-through text-muted">$24</span>
                    </div>
                    <!-- btn -->
                    <div><a href="#!" class="btn btn-primary btn-sm">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
                            <line x1="12" y1="5" x2="12" y2="19"></line>
                            <line x1="5" y1="12" x2="19" y2="12"></line>
                        </svg> Add</a></div>
                    </div>
                </div>
                </div>
            </div>
           @endforeach
                
            <!-- end col -->
            


          </div>



          <div class="row mt-8">
            <div class="col">
                     <!-- nav -->
              <nav>
                <ul class="pagination">
                  <li class="page-item disabled">
                    <a class="page-link  mx-1 " href="#" aria-label="Previous">
                      <i class="feather-icon icon-chevron-left"></i>
                    </a>
                  </li>
                  <li class="page-item "><a class="page-link  mx-1 active" href="#">1</a></li>
                  <li class="page-item"><a class="page-link mx-1 text-body" href="#">2</a></li>

                  <li class="page-item"><a class="page-link mx-1 text-body" href="#">...</a></li>
                  <li class="page-item"><a class="page-link mx-1 text-body" href="#">12</a></li>
                  <li class="page-item">
                    <a class="page-link mx-1 text-body" href="#" aria-label="Next">
                      <i class="feather-icon icon-chevron-right"></i>
                    </a>
                  </li>
                </ul>
              </nav>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>


 

@endsection