{% extends "website/home/base.html" %}
{% block title %} Product List {% endblock %}
{% load static %}
{% block content %}

<div class="container py-4">
  <div class="row">
    <!-- Sidebar Filters -->
    <div class="col-md-3">
      <div class="card shadow-sm">
        <div class="card-body">
          <div class="d-flex justify-content-between align-items-center mb-2">
            <h5 class="fw-bold">Filters</h5>
            <a href="javascript:void(0)" id="clearFilters" class="text-danger small">Clear All</a>
          </div>
          <hr>

          <!-- Category Filter -->
            <h6 class="fw-bold mb-2">Categories</h6>
            <div id="categoryFilters">
            {% for cat in categories %}
                <div class="form-check mb-2 d-flex justify-content-between align-items-center">
                <div>
                    <input class="form-check-input category-check" type="checkbox" value="{{ cat.id }}" id="cat{{ cat.id }}">
                    <label class="form-check-label" for="cat{{ cat.id }}">
                    {{ cat.name }}
                    </label>
                </div>
                <span class="badge bg-secondary">{{ cat.product_count }}</span>
                </div>
            {% endfor %}
            </div>
          <hr>

          <!-- Price Filter -->
          <h6 class="fw-bold mb-2">Price (৳)</h6>
          <input type="range" class="form-range" min="100" max="10000" step="50" id="priceRange" value="10000">
          <p class="small">Up to ৳ <span id="priceValue">10000</span></p>
        </div>
      </div>
    </div>

    <!-- Category Slider for Mobile -->
    <div class="d-md-none mb-3">
      <div class="category-slider d-flex overflow-auto py-2 px-1">
        {% for cat in categories %}
          <div class="me-2">
            <button 
              class="btn btn-outline-secondary btn-sm category-check-btn"
              data-id="{{ cat.id }}">
              {{ cat.name }}
            </button>
          </div>
        {% endfor %}
      </div>
    </div>

    <style>
      .category-slider {
        scrollbar-width: thin;
        scrollbar-color: #ccc transparent;
      }

      .category-slider::-webkit-scrollbar {
        height: 6px;
      }

      .category-slider::-webkit-scrollbar-thumb {
        background-color: #ccc;
        border-radius: 3px;
      }

      .category-check-btn.active {
        background-color: #dc3545;
        color: #fff;
        border-color: #dc3545;
      }

    </style>


    <!-- Products Grid -->
    <div class="col-md-9">
      <div class="d-flex justify-content-between align-items-center mb-3">
        <h4 class="fw-bold">Products</h4>
        <select class="form-select w-auto" id="sortProducts">
          <option value="">Sort By</option>
          <option value="low">Lowest Price</option>
          <option value="high">Highest Price</option>
        </select>
      </div>

      <div class="row g-3" id="productGrid">
        {% for product in product_list %}
          

          <div class="col-6 col-md-3 mb-2" data-aos="zoom-in">
                <div class="card product-card h-100 shadow-sm border-0">
                <a href="/product/{{product.id}}/{{product.slug}}">
                    <div class="product-image position-relative">
                    {% if product.product_image %}
                        <img src="{{product.product_image.url}}" class="card-img-top" alt="{{product.name_english}}">
                    {% else %}
                        <img src="/static/img/no-image.png" class="card-img-top" alt="No Image">
                    {% endif %}

                    {% if product.discount > 0 %}
                        <span class="badge bg-success position-absolute top-0 end-0 m-2">
                        -{{product.discount|floatformat:0}}%
                        </span>
                    {% endif %}
                    </div>
                    <div class="card-body productTitleAndPrice">
                    <h6 class="card-title fw-semibold">{{product.name_english}}</h6>
                    <p class="price mb-1 text-success fw-bold product_price_tag">
                        <span>৳</span> {{product.discount_price}}
                        {% if product.discount_price < product.unit_price %}
                        <del>{{product.unit_price}}</del>
                        {% endif %}
                    </p>

                    {% if product.stock_status == '1' %}
                        <h6 class="text-success"><i class="fa-solid fa-circle-check"></i> In Stock</h6>
                    {% else %}
                        <h6 class="stockout text-danger"><i class="fa-solid fa-circle-xmark"></i> Stock Out</h6>
                    {% endif %}
                    
                  <button class="btn btn-sm btn-outline-danger mt-2"><i class="fa fa-cart-plus"></i> Add to Cart</button>
                    </div>
                </a>
                </div>
            </div>

            
        {% empty %}
          <p>No products available.</p>
        {% endfor %}
      </div>
    </div>
  </div>
</div>

<script>
const priceRange = document.getElementById("priceRange");
const priceValue = document.getElementById("priceValue");

priceRange.addEventListener("input", function() {
  priceValue.textContent = this.value;
  filterProducts();
});

document.querySelectorAll(".category-check").forEach(el => {
  el.addEventListener("change", filterProducts);
});

document.getElementById("sortProducts").addEventListener("change", filterProducts);

document.getElementById("clearFilters").addEventListener("click", function() {
  document.querySelectorAll(".category-check").forEach(el => el.checked = false);
  priceRange.value = 10000;
  priceValue.textContent = 10000;
  document.getElementById("sortProducts").value = "";
  filterProducts();
});

function filterProducts() {
  let selectedCategories = [];
  document.querySelectorAll(".category-check:checked").forEach(el => {
    selectedCategories.push(el.value);
  });
  let price = priceRange.value;
  let sort = document.getElementById("sortProducts").value;


  fetch("{% url 'filter_products' %}", {
    method: "POST",
    headers: {
      "X-CSRFToken": "{{ csrf_token }}",
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      categories: selectedCategories,
      price: price,
      sort: sort
    })
  })
  .then(res => res.json())
  .then(data => {
    let grid = document.getElementById("productGrid");
    grid.innerHTML = "";
    if (data.products.length > 0) {
      data.products.forEach(prod => {
        grid.innerHTML += `
          <div class="col-6 col-md-3 mb-2" data-aos="zoom-in">
            <div class="card product-card h-100 shadow-sm border-0">
              <a href="/product/${prod.id}/${prod.slug}">
                <div class="product-image position-relative">
                  <img src="${prod.image}" class="card-img-top" alt="${prod.name}" style="height:220px; object-fit:cover;">
                  ${prod.discount > 0 ? `<span class="badge bg-success position-absolute top-0 end-0 m-2">-${prod.discount}%</span>` : ""}
                </div>
                <div class="card-body productTitleAndPrice">
                  <h6 class="card-title fw-semibold">${prod.name}</h6>
                  <p class="price mb-1 text-success fw-bold product_price_tag">
                    <span>৳</span> ${prod.price} ${prod.old_price ? `<del>${prod.old_price}</del>` : ""}
                  </p>
                  ${prod.stock_status === '1' 
                    ? `<h6 class="text-success"><i class="fa-solid fa-circle-check"></i> In Stock</h6>` 
                    : `<h6 class="stockout text-danger"><i class="fa-solid fa-circle-xmark"></i> Stock Out</h6>`}
                  <button class="btn btn-sm btn-outline-danger mt-2"><i class="fa fa-cart-plus"></i> Add to Cart</button>
                </div>
              </a>
            </div>
          </div>
        `;
      });
    } else {
      grid.innerHTML = "<p>No products found.</p>";
    }
  });
}




// Mobile Category Button Filter
document.querySelectorAll(".category-check-btn").forEach(btn => {
  btn.addEventListener("click", function () {
    this.classList.toggle("active");
    const id = this.getAttribute("data-id");

    // Checkbox status sync করো
    const checkbox = document.getElementById("cat" + id);
    if (checkbox) checkbox.checked = this.classList.contains("active");

    // Filter call
    filterProducts();
  });
});




</script>
{% endblock %}