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

<div class="container py-4">
  <div class="row">

    <!-- Sidebar Filters (Hide on mobile) -->
    <div class="col-md-3 d-none d-md-block">
      <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>

    <!-- Products Section -->
    <div class="col-md-9">

      <!-- Mobile Category Slider -->
      <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-3">
              <button class="btn btn-outline-secondary btn-sm category-check-btn" data-id="{{ cat.id }}">
                {{ cat.name }}
              </button>
            </div>
          {% endfor %}
        </div>
      </div>

      <!-- Product Header -->
      <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>

      <!-- Products Grid -->
      <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>

<!-- ===== Custom Styles for Mobile Slider ===== -->
<style>
  .category-slider {
    display: flex;
    overflow-x: auto;
    gap: 4px;
    scroll-behavior: smooth;
    padding: 4px;
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
  }

  /* scrollbar style */
  .category-slider::-webkit-scrollbar {
    height: 6px;
  }
  .category-slider::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 3px;
  }

  /* make each button take equal width so 4 fit in one row */
  .category-slider .category-check-btn {
    flex: 0 0 calc(25% - 4px); /* 100 / 4 = 25% */
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

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

</style>

<!-- ===== JS Section ===== -->
<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 = "";
      document.querySelectorAll(".category-check-btn").forEach(btn => btn.classList.remove("active"));
      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");
        const checkbox = document.getElementById("cat" + id);
        if (checkbox) checkbox.checked = this.classList.contains("active");
        filterProducts();
      });
    });
</script>
{% endblock %}