{% extends 'site/base_reseller_shop.html' %}
{% load static %}
{% load main_filters %}

{% block title %}

{% endblock title %}


{% block css %}

<link rel="stylesheet" href="/static/css/main.css">
<link rel="stylesheet" href="/static/css/shop.css">

{% endblock css %}


{% block content %}

<div class="shop">

  <!--=====================================
                    PRODUCT VIEW START
        =======================================-->
  <div class="modal fade" id="product-view">
    <div class="modal-dialog">
      <div class="modal-content">
        <button class="modal-close icofont-close" data-bs-dismiss="modal"></button>
        <div class="product-view">
          <div class="row">
            <div class="col-md-6 col-lg-6">
              <div class="view-gallery">
                <div class="view-label-group">
                  <label class="view-label new">new</label>
                  <label class="view-label off">-10%</label>
                </div>
                <ul class="preview-slider slider-arrow">
                  <li><img src="images/product/01.jpg" alt="product"></li>
                  <li><img src="images/product/01.jpg" alt="product"></li>
                  <li><img src="images/product/01.jpg" alt="product"></li>
                  <li><img src="images/product/01.jpg" alt="product"></li>
                  <li><img src="images/product/01.jpg" alt="product"></li>
                  <li><img src="images/product/01.jpg" alt="product"></li>
                  <li><img src="images/product/01.jpg" alt="product"></li>
                </ul>
                <ul class="thumb-slider">
                  <li><img src="images/product/01.jpg" alt="product"></li>
                  <li><img src="images/product/01.jpg" alt="product"></li>
                  <li><img src="images/product/01.jpg" alt="product"></li>
                  <li><img src="images/product/01.jpg" alt="product"></li>
                  <li><img src="images/product/01.jpg" alt="product"></li>
                  <li><img src="images/product/01.jpg" alt="product"></li>
                  <li><img src="images/product/01.jpg" alt="product"></li>
                </ul>
              </div>
            </div>
            <div class="col-md-6 col-lg-6">
              <div class="view-details">
                <h3 class="view-name">
                  <a href="product-video.html">existing product name</a>
                </h3>
                <div class="view-meta">
                  <p>SKU:<span>1234567</span></p>
                  <p>BRAND:<a href="#">radhuni</a></p>
                </div>
                <div class="view-rating">
                  <i class="active icofont-star"></i>
                  <i class="active icofont-star"></i>
                  <i class="active icofont-star"></i>
                  <i class="active icofont-star"></i>
                  <i class="icofont-star"></i>
                  <a href="product-video.html">(3 reviews)</a>
                </div>
                <h3 class="view-price">
                  <del>$38.00</del>
                  <span>$24.00<small>/per kilo</small></span>
                </h3>
                <p class="view-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit non tempora magni
                  repudiandae sint suscipit tempore quis maxime explicabo veniam eos reprehenderit fuga</p>
                <div class="view-list-group">
                  <label class="view-list-title">tags:</label>
                  <ul class="view-tag-list">
                    <li><a href="#">organic</a></li>
                    <li><a href="#">vegetable</a></li>
                    <li><a href="#">chilis</a></li>
                  </ul>
                </div>
                <div class="view-list-group">
                  <label class="view-list-title">Share:</label>
                  <ul class="view-share-list">
                    <li><a href="#" class="icofont-facebook" title="Facebook"></a></li>
                    <li><a href="#" class="icofont-twitter" title="Twitter"></a></li>
                    <li><a href="#" class="icofont-linkedin" title="Linkedin"></a></li>
                    <li><a href="#" class="icofont-instagram" title="Instagram"></a></li>
                  </ul>
                </div>
                <div class="view-add-group">
                  <button class="product-add" title="Add to Cart">
                    <i class="fas fa-shopping-basket"></i>
                    <span>add to cart</span>
                  </button>
                  <div class="product-action">
                    <button class="action-minus" title="Quantity Minus"><i class="icofont-minus"></i></button>
                    <input class="action-input" title="Quantity Number" type="text" name="quantity" value="1">
                    <button class="action-plus" title="Quantity Plus"><i class="icofont-plus"></i></button>
                  </div>
                </div>
                <div class="view-action-group">
                  <a class="view-wish wish" href="#" title="Add Your Wishlist">
                    <i class="icofont-heart"></i>
                    <span>add to wish</span>
                  </a>
                  <a class="view-compare" href="compare.html" title="Compare This Item">
                    <i class="fas fa-random"></i>
                    <span>Compare This</span>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--=====================================
                    PRODUCT VIEW END
        =======================================-->

  <section class="inner-section single-banner"
    style="background: url(/static/images/single-banner.jpg) no-repeat center;">
    <div class="container">
      <h3>Reseller Shop </h3>
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item active" aria-current="page">reseller-shop</li>
      </ol>
    </div>
  </section>
  <section class="inner-section shop-part">
    <div class="container">
      <div class="row content-reverse">
        <div class="col-lg-3">
          <div class="shop-widget-promo"><a href="#"><img src="/static/images/promo/shop/01.jpg" alt="promo"></a>
          </div>
          <div class="shop-widget">
            <h6 class="shop-widget-title">Filter by Price</h6>
            <form>
              <div class="shop-widget-group"><input type="text" placeholder="Min - 00"><input type="text"
                  placeholder="Max - 5k"></div><button class="shop-widget-btn"><i
                  class="fas fa-search"></i><span>search</span></button>
            </form>
          </div>
          <div class="shop-widget">
            <h6 class="shop-widget-title">Filter by Rating</h6>
            <form>
              <ul class="shop-widget-list">
                <li>
                  <div class="shop-widget-content"><input type="checkbox" id="feat1"><label for="feat1"><i
                        class="fas fa-star active"></i><i class="fas fa-star active"></i><i
                        class="fas fa-star active"></i><i class="fas fa-star active"></i><i
                        class="fas fa-star active"></i></label></div><span class="shop-widget-number">(13)</span>
                </li>
                <li>
                  <div class="shop-widget-content"><input type="checkbox" id="feat2"><label for="feat2"><i
                        class="fas fa-star active"></i><i class="fas fa-star active"></i><i
                        class="fas fa-star active"></i><i class="fas fa-star active"></i><i
                        class="fas fa-star"></i></label></div>
                  <span class="shop-widget-number">(28)</span>
                </li>
                <li>
                  <div class="shop-widget-content"><input type="checkbox" id="feat3"><label for="feat3"><i
                        class="fas fa-star active"></i><i class="fas fa-star active"></i><i
                        class="fas fa-star active"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></label>
                  </div><span class="shop-widget-number">(35)</span>
                </li>
                <li>
                  <div class="shop-widget-content"><input type="checkbox" id="feat4"><label for="feat4"><i
                        class="fas fa-star active"></i><i class="fas fa-star active"></i><i class="fas fa-star"></i><i
                        class="fas fa-star"></i><i class="fas fa-star"></i></label></div><span
                    class="shop-widget-number">(47)</span>
                </li>
                <li>
                  <div class="shop-widget-content"><input type="checkbox" id="feat5"><label for="feat5"><i
                        class="fas fa-star active"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i
                        class="fas fa-star"></i><i class="fas fa-star"></i></label></div><span
                    class="shop-widget-number">(59)</span>
                </li>
              </ul><button class="shop-widget-btn"><i class="far fa-trash-alt"></i><span>clear
                  filter</span></button>
            </form>
          </div>
          <div class="shop-widget">
            <h6 class="shop-widget-title">Filter by Tag</h6>
            <form>
              <ul class="shop-widget-list">
                <li>
                  <div class="shop-widget-content"><input type="checkbox" id="tag1"><label for="tag1">new items</label>
                  </div><span class="shop-widget-number">(13)</span>
                </li>
                <li>
                  <div class="shop-widget-content"><input type="checkbox" id="tag2"><label for="tag2">sale items</label>
                  </div><span class="shop-widget-number">(28)</span>
                </li>
                <li>
                  <div class="shop-widget-content"><input type="checkbox" id="tag3"><label for="tag3">rating
                      items</label></div><span class="shop-widget-number">(35)</span>
                </li>
                <li>
                  <div class="shop-widget-content"><input type="checkbox" id="tag4"><label for="tag4">feature
                      items</label></div><span class="shop-widget-number">(47)</span>
                </li>
                <li>
                  <div class="shop-widget-content"><input type="checkbox" id="tag5"><label for="tag5">discount
                      items</label></div><span class="shop-widget-number">(59)</span>
                </li>
              </ul><button class="shop-widget-btn"><i class="far fa-trash-alt"></i><span>clear
                  filter</span></button>
            </form>
          </div>
          <div class="shop-widget">
            <h6 class="shop-widget-title">Filter by Brand</h6>
            <form><input class="shop-widget-search" type="text" placeholder="Search...">
              <ul class="shop-widget-list shop-widget-scroll">
                <li>
                  <div class="shop-widget-content"><input type="checkbox" id="brand1"><label for="brand1">mari
                      gold</label></div><span class="shop-widget-number">(13)</span>
                </li>
                <li>
                  <div class="shop-widget-content"><input type="checkbox" id="brand2"><label for="brand2">tredar</label>
                  </div><span class="shop-widget-number">(28)</span>
                </li>
                <li>
                  <div class="shop-widget-content"><input type="checkbox" id="brand3"><label for="brand3">keya</label>
                  </div><span class="shop-widget-number">(35)</span>
                </li>
                <li>
                  <div class="shop-widget-content"><input type="checkbox" id="brand4"><label
                      for="brand4">diamond</label></div><span class="shop-widget-number">(47)</span>
                </li>
                <li>
                  <div class="shop-widget-content"><input type="checkbox" id="brand5"><label
                      for="brand5">lilly's</label></div><span class="shop-widget-number">(59)</span>
                </li>
                <li>
                  <div class="shop-widget-content"><input type="checkbox" id="brand6"><label
                      for="brand6">fremant</label></div><span class="shop-widget-number">(64)</span>
                </li>
                <li>
                  <div class="shop-widget-content"><input type="checkbox" id="brand7"><label
                      for="brand7">avocads</label></div><span class="shop-widget-number">(77)</span>
                </li>
                <li>
                  <div class="shop-widget-content"><input type="checkbox" id="brand8"><label
                      for="brand8">boroclas</label></div><span class="shop-widget-number">(85)</span>
                </li>
              </ul><button class="shop-widget-btn"><i class="far fa-trash-alt"></i><span>clear
                  filter</span></button>
            </form>
          </div>
          <div class="shop-widget">
            <h6 class="shop-widget-title">Filter by Category</h6>
            <form><input class="shop-widget-search" type="text" placeholder="Search...">
              <ul class="shop-widget-list shop-widget-scroll">
                <li>
                  <div class="shop-widget-content"><input type="checkbox" id="cate1"><label
                      for="cate1">vegetables</label></div><span class="shop-widget-number">(13)</span>
                </li>
                <li>
                  <div class="shop-widget-content"><input type="checkbox" id="cate2"><label
                      for="cate2">groceries</label></div><span class="shop-widget-number">(28)</span>
                </li>
                <li>
                  <div class="shop-widget-content"><input type="checkbox" id="cate3"><label for="cate3">fruits</label>
                  </div><span class="shop-widget-number">(35)</span>
                </li>
                <li>
                  <div class="shop-widget-content"><input type="checkbox" id="cate4"><label for="cate4">dairy
                      farm</label></div><span class="shop-widget-number">(47)</span>
                </li>
                <li>
                  <div class="shop-widget-content"><input type="checkbox" id="cate5"><label for="cate5">sea
                      foods</label></div><span class="shop-widget-number">(59)</span>
                </li>
                <li>
                  <div class="shop-widget-content"><input type="checkbox" id="cate6"><label for="cate6">diet
                      foods</label></div><span class="shop-widget-number">(64)</span>
                </li>
                <li>
                  <div class="shop-widget-content"><input type="checkbox" id="cate7"><label for="cate7">dry
                      foods</label></div><span class="shop-widget-number">(77)</span>
                </li>
                <li>
                  <div class="shop-widget-content"><input type="checkbox" id="cate8"><label for="cate8">fast
                      foods</label></div><span class="shop-widget-number">(85)</span>
                </li>
                <li>
                  <div class="shop-widget-content"><input type="checkbox" id="cate9"><label for="cate9">drinks</label>
                  </div><span class="shop-widget-number">(92)</span>
                </li>
                <li>
                  <div class="shop-widget-content"><input type="checkbox" id="cate10"><label for="cate10">coffee</label>
                  </div><span class="shop-widget-number">(21)</span>
                </li>
                <li>
                  <div class="shop-widget-content"><input type="checkbox" id="cate11"><label for="cate11">meats</label>
                  </div><span class="shop-widget-number">(14)</span>
                </li>
                <li>
                  <div class="shop-widget-content"><input type="checkbox" id="cate12"><label for="cate12">fishes</label>
                  </div><span class="shop-widget-number">(56)</span>
                </li>
              </ul><button class="shop-widget-btn"><i class="far fa-trash-alt"></i><span>clear
                  filter</span></button>
            </form>
          </div>
        </div>
        <div class="col-lg-9">

          <div class="row row-cols-2 row-cols-md-3 row-cols-lg-3 row-cols-xl-3">
            {% for product in products %}
            <div class="col product-item">
              <div class="product-card">
                <div class="product-media">
                  {% if product.remark %}
                  <div class="product-label"><label class="label-text {{ product.remark }}">{{ product.remark }}</label>
                  </div>
                  {% endif %}
                  
                  <a class="product-image" href="{% url 'product_details' product.id %}"><img src="{{ product.image.url }}" alt="{{ product.title }}"></a>

                </div>
                <div class="product-content" x-data="productAddComponent">
                  <div class="product-rating">
                    {% with product.rating|get_rating_stars as data_dict %}
                    <div class="product-rating">
                      {% for _ in data_dict.full_stars %}
                      <i class="active icofont-star"></i>
                      {% endfor %}
                      {% if data_dict.half_stars %}
                      <i class="active icofont-star"></i>
                      {% endif %}
                      {% for _ in data_dict.empty_stars %}
                      <i class="icofont-star"></i>
                      {% endfor %}
                      {% if product.rating|floatformat %}
                      <a href="#">{{ product.rating }}</a>
                      {% endif %}
                    </div>
                    {% endwith %}
                  </div>

                  <h6 class="product-name" style="height: 52px; overflow: hidden;"><a href="#">{{ product.title }}</a></h6>
                  <h6 class="product-price">

                    <span>{{ product.reseller_price }}<small>/piece</small></span>

                  </h6>
                  <button class="product-add" 
                  data-product-img="{{ product.image.url }}"
                  data-product-id="{{ product.id }}" 
                  data-product-price="{{ product.reseller_price }}" 
                  data-product-points="{{ product.points }}" 
                  data-product-title="{{ product.title }}"
                  @click="addToCart($event)" 

                  title="Add to Cart">
                    <i class="fas fa-shopping-basket"></i><span>add</span>
                  </button>

                </div>
              </div>
            </div>
            {% endfor %}


          </div>
          <!-- site/page/shop-3column.html -->

        <div class="row">
          <div class="col-lg-12">
              <!-- Your existing content goes here -->


              
              <!-- Pagination section -->
              <div class="bottom-paginate">
                  <p class="page-info">Showing {{ products.start_index }} - {{ products.end_index }} of {{ products.paginator.count }} Results</p>
                  
                  <ul class="pagination">
                      {% if products.has_previous %}
                          <li class="page-item">
                              <a class="page-link" href="?page=1"><i class="fas fa-long-arrow-alt-left"></i></a>
                          </li>
                          <li class="page-item">
                              <a class="page-link" href="?page={{ products.previous_page_number }}">{{ products.previous_page_number }}</a>
                          </li>
                      {% endif %}
                      
                      <li class="page-item ">
                          <span class="page-link active">{{ products.number }}</span>
                      </li>
                      
                      {% if products.has_next %}
                          <li class="page-item">
                              <a class="page-link" href="?page={{ products.next_page_number }}">{{ products.next_page_number }}</a>
                          </li>
                          <li class="page-item">
                              <a class="page-link" href="?page={{ products.paginator.num_pages }}"><i class="fas fa-long-arrow-alt-right"></i></a>
                          </li>
                      {% endif %}
                  </ul>
              </div>
          </div>
        </div>

        </div>
      </div>
    </div>
  </section>
  <section class="news-part" style="background: url(/static/images/newsletter.jpg) no-repeat center;">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-md-5 col-lg-6 col-xl-7">
          <div class="news-text">
            <h2>Get 20% Discount for Subscriber</h2>
            <p>Lorem ipsum dolor consectetur adipisicing accusantium</p>
          </div>
        </div>
        <div class="col-md-7 col-lg-6 col-xl-5">
          <form class="news-form"><input type="text" placeholder="Enter Your Email Address"><button><span><i
                  class="icofont-ui-email"></i>Subscribe</span></button></form>
        </div>
      </div>
    </div>
  </section>
  <section class="intro-part">
    <div class="container">
      <div class="row intro-content">
        <div class="col-sm-6 col-lg-3">
          <div class="intro-wrap">
            <div class="intro-icon"><i class="fas fa-truck"></i></div>
            <div class="intro-content">
              <h5>free home delivery</h5>
              <p>Lorem ipsum dolor sit amet adipisicing elit nobis.</p>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-3">
          <div class="intro-wrap">
            <div class="intro-icon"><i class="fas fa-sync-alt"></i></div>
            <div class="intro-content">
              <h5>instant return policy</h5>
              <p>Lorem ipsum dolor sit amet adipisicing elit nobis.</p>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-3">
          <div class="intro-wrap">
            <div class="intro-icon"><i class="fas fa-headset"></i></div>
            <div class="intro-content">
              <h5>quick support system</h5>
              <p>Lorem ipsum dolor sit amet adipisicing elit nobis.</p>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-3">
          <div class="intro-wrap">
            <div class="intro-icon"><i class="fas fa-lock"></i></div>
            <div class="intro-content">
              <h5>secure payment way</h5>
              <p>Lorem ipsum dolor sit amet adipisicing elit nobis.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>
{% endblock content %}

{% block js %}


{% endblock js %}