{% extends "client_base.html" %}
{% load static %}
{% block title %} {% if page_title %}
{{page_title}}
{% else %}
Products
{% endif %} {% endblock %}

{% block content %}


<section class="products-area">
    <div class="containers">
    {% if is_popular == True %}
    <h4 class="mb-3 fw-bold">Most Popular</h4>
    {% endif %}
        <!-- PRODUCTS GRID -->
        <div class="row row-cols-2 row-cols-sm-2 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 row-cols-xxl-5">
            {% if products %}
            {% for item in products %}
            <div class="col">
                <div class="products">
                    <div class="wishlist" data-product-id="{{ item.id }}">
                        {% if item.cover_product_attribute.final_discount.total_discount%}
                            <span class="badge text-bg-danger">
                                {{ item.cover_product_attribute.final_discount.total_discount_percentage }}% OFF
                            </span>
                        {% endif %}
                        {% comment %} <i class="loves bi {% if item.id in user_wishlist_ids %}bi-heart-fill text-danger{% else %}bi-heart{% endif %}"></i> {% endcomment %}
                    </div>

                    <div class="productimg">
                        <a href="{% url 'product_details_page_url' item.id %}">
                            <img src="{{ item.cover_product_attribute.image.url }}" alt="product img">
                        </a>
                    </div>

                    <div class="productcon">
                        <a href="{% url 'product_details_page_url' item.id %}">
                            {{ item.product_name }}
                        </a>

                        {% if item.cover_product_attribute.final_discount.total_discount %}
                            <h5>৳ {{ item.cover_product_attribute.product_final_price  }} <del>৳ {{ item.cover_product_attribute.regular_price }}</del></h5>
                        {% else %}
                            <h5>৳ {{ item.cover_product_attribute.regular_price }}</h5>
                        {% endif %}

                        <p class="small">
                            {% if item.product_stock_status.flag  %}
                                <span class="text-success">In stock: {{item.product_stock_status.stock_qty}}</span>
                            {% else %}
                                <span class="text-danger">Out of stock</span>
                            {% endif %}
                        </p>
                    </div>

                    <div class="buybtn">
                        {% comment %} <a href="javascript:void(0)" class="add-to-cart"
                            data-product-id="{{ item.id }}"
                            data-variant-id="{{ cover.id }}">
                            <i class="bi bi-bag-check"></i>
                        </a>
                        {% if cover.stock > 0 and cover.stock >= item.moq %}
                        <a href="{% url 'buy_now_product_url' cover.id %}">
                            Buy now
                        </a>
                        {% else %}
                        <a href="javascript:void(0)">
                            Buy now
                        </a>
                        {% endif %} {% endcomment %}

                        <a href="{% url 'product_details_page_url' item.id %}">
                            Buy now
                        </a>
                    </div>

                </div>
            </div>
        {% endfor %}
        {% else %}
            <div class="col" style="width: 100%">
                <div class="products text-center">
                    <h5 style="color: red; text-align: center;">Products not found</h5>
                </div>
            </div>
        {% endif %}

        </div>

        <!-- RESULTS INFO + PAGINATION (Single Row) -->
        {% if products.paginator.count > 0 %}
        <div class="d-flex justify-content-between align-items-center mt-4 flex-wrap">

            <!-- Showing X to Y of Z results -->
            <p class="mb-0 text-muted small">
                Showing {{ products.start_index }} to {{ products.end_index }} of {{ products.paginator.count }} results
            </p>

            <!-- Pagination -->
            {% if products.paginator.num_pages > 1 %}
            <ul class="pagination mb-0">

                <!-- Previous -->
                {% if products.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ products.previous_page_number }}">&laquo;</a>
                </li>
                {% else %}
                <li class="page-item disabled">
                    <span class="page-link">&laquo;</span>
                </li>
                {% endif %}

                <!-- Page Numbers (Current ±2 pages) -->
                {% for num in products.paginator.page_range %}
                    {% if num >= products.number|add:'-2' and num <= products.number|add:'2' %}
                        {% if products.number == num %}
                        <li class="page-item active"><span class="page-link">{{ num }}</span></li>
                        {% else %}
                        <li class="page-item"><a class="page-link" href="?page={{ num }}">{{ num }}</a></li>
                        {% endif %}
                    {% endif %}
                {% endfor %}

                <!-- Next -->
                {% if products.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ products.next_page_number }}">&raquo;</a>
                </li>
                {% else %}
                <li class="page-item disabled"><span class="page-link">&raquo;</span></li>
                {% endif %}

            </ul>
            {% endif %}

        </div>
        {% endif %}

    </div>
</section>
{% endblock %}

{% block JS %}
{% endblock %}