{% extends "client_base.html" %}
{% load static %}
{% block title %}Home{% endblock  %}

{% block content %}
    <!-- hero-slider -->


    <section class="hero-slider">
        <div class="containers">
            <div class="row">
                <!-- Main Hero Slider -->
                <div class="col-lg-9 col-xl-9">
                    <div class="heroslider">
                        {% for slider in hero_sliders %}
                            <div class="items">
                                <img src="{{ slider.image.url }}" alt="slider img">
                            </div>
                        {% empty %}
                            <div class="items">
                                <img src="{% static 'assets/img/UmAixlXz4k9NyQwDpT8zx2ePDzNO3dOOhkbJn6NB.jpg' %}" alt="slider img">
                            </div>
                            <div class="items">
                                <img src="{% static 'assets/img/9t34nYXnE3QGpOta0nqIl2etOyG3tOrMayQ9azTW.jpg' %}" alt="slider img">
                            </div>
                            <div class="items">
                                <img src="{% static 'assets/img/IG73uQqG2GT2QNlIna4CRShJ66NsNRU9NK1xMLDp.jpg' %}" alt="slider img">
                            </div>
                        {% endfor %}
                    </div>
                </div>

                <!-- Side Sliders -->
                <div class="col-lg-3 col-xl-3">
                    {% for side in side_sliders %}
                        <div class="slideimg {% if not forloop.last %}mb-4{% endif %}">
                            <a href="{% url 'campaign_products' side.id %}"><img src="{{ side.image.url }}" alt="side slider img"></a>
                        </div>
                    {% empty %}
                    <div class="slideimg mb-4">
                            <img src="{% static 'assets/img/V6XGxnZXsekvObHLd3yam9R14OwFdtZViZmlQ9ZM.jpg' %}" alt="slider img">
                        </div>
                        <div class="slideimg">
                            <img src="{% static 'assets/img/8iFiqA7eVqpiPab5HhKM1tYcMq1VDRseks75hYQx.jpg' %}" alt="slider img">
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </section>

    <!-- Categories -->
    <div class="categories">
        <div class="containers">
            <div class="row">
                <div class="col-12">
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="title">
                            <h2>Categories</h2>
                        </div>
                        <div class="viewall slideall">
                            <a href="{% url 'all_categories' %}">View all</a>
                        </div>
                    </div>
                </div>
                <div class="categori-slider">
                {% for category in categories %}
                <div class="items">
                    <a href="{% url 'category_products' category.id %}">
                        {% if category.image %}
                         <img src="{{ category.image.url }}" alt="{{ category.name }}">
                        {% else %}
                         <img src="{% static 'assets/img/lCjRExEMOBrqGlmAq6SIXRgy5vVPEzjT9iQOIkfR.png' %}" alt="categories">
                        {% endif %}
                       
                        <p style="margin-top: 13px;">{{ category.name }}</p>
                    </a>
                </div>
                {% endfor %}
            </div>
                {% comment %} <div class="categori-slider">
                    <div class="items">
                        <a href="#">
                            <img src="{% static 'assets/img/lCjRExEMOBrqGlmAq6SIXRgy5vVPEzjT9iQOIkfR.png' %}" alt="categories">
                            <p>Beauty</p>
                        </a>
                    </div>
                </div> {% endcomment %}
            </div>
        </div>
    </div>
    <!-- Categories -->
    <section class="products-area p-0" id='product_list'>
        <div class="containers">
            <div class="row">
                <div class="col-12">
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="title">
                            <h2></h2>
                        </div>
                    </div>
                </div>
            </div>


                <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" id="product_list">
                <!-- products -->
                {% for item in oobj_list %}
                <div class="col">
                    <div class="products">
                        <div class="wishlist" data-product-id="{{item.id}}">
                            {% with varient=item.product_attribute.first %}
                                {% if varient.discount_price %}
                                    <span class="badge text-bg-danger">
                                        {{ varient.discount_percentage }}% OFF
                                    </span>
                                {% endif %}
                            {% endwith %}
                            {% comment %} <i class="loves bi {% if item.id in user_wishlist_ids %}bi-heart-fill text-danger{% else %}bi-heart{% endif %}"></i> {% endcomment %}
                        </div>
                        {% if item.product_attribute.all %}
                        <div class="productimg">
                            <a href="{% url 'product_details_page_url' item.id %}">
                                <img src="{{ item.product_attribute.first.image.url }}" alt="product img">
                            </a>
                        </div>
                        {% else %}
                        <div class="productimg">
                            {% with varient=item.product_varient.first %}
                            <a href="{% url 'product_details_page_url' item.id %}">
                                <img src="{{ varient.cover_photo.url }}" alt="product img">
                            </a>
                            {% endwith %}
                        </div>
                        {% endif %}
                        <div class="productcon">
                            <a href="{% url 'product_details_page_url' item.id %}">{{item.product_name}}</a>
                            {% for varient in item.product_attribute.all %}
                                {% if varient.discount_price %}
                                    <h5>৳ {{ varient.discount_price }} <del>৳ {{ varient.regular_price }}</del></h5>
                                {% else %}
                                    <h5>৳ {{ varient.regular_price }}</h5>
                                {% endif %}

                            {% comment %} <div class="starsold">
                                <p><i class="bi bi-star-fill"></i>10 (0)</p>
                                <div class="vr"></div>
                                <p>12 Sold</p>
                            </div> {% endcomment %}
                            <p class="small">
                                Stock: {{varient.product.product_stock_status}}
                                {% if varient.stock > 0 and variant.stock >= item.moq %}
                                    <span class="text-success">In stock</span>
                                {% else %}
                                    <span class="text-danger">Out of stock</span>
                                {% endif %}
                            </p>
                            {% endfor %}
                        </div>
                        <div class="buybtn">
                            {% comment %} <a href="javascript:void(0)" class="add-to-cart" data-product-id="{{item.id}}" data-variant-id="{{ item.product_attribute.first.id }}"> <i class="bi bi-bag-check"></i></a>
                            {% if varient.stock > 0 and variant.stock >= item.moq %}
                            <a href="{% url 'buy_now_product_url' item.product_attribute.first.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 %}
                <!-- products -->
            </div>
        </div>

        </div>
    </section>

    {% if flashsell_products %}
    <section class="products-area">
        <div class="containers">
            <div class="row">
                <div class="col-12">
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="title">
                            <h2>Flash Sale Products</h2>
                        </div>
                        <div class="viewall">
                            <a href="{% url 'flash_sell_products' %}">View all <i class="bi bi-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>


            <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">
            {% for item in flashsell_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">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 item.product_stock_status.flag %}
                        <a href="{% url 'buy_now_product_url' item.id %}">
                            Buy now
                        </a>
                        {% else %}
                        <a href="javascript:void(0)" diabled>
                            Buy now
                        </a>
                        {% endif %} {% endcomment %}

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

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

        </div>

        </div>
    </section>
    {% endif %}
    
    <!--Popular products -->
    <section class="products-area">
        <div class="containers">
            <div class="row">
                <div class="col-12">
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="title">
                            <h2>Popular Products</h2>
                        </div>
                        <div class="viewall">
                            <a href="{% url 'most_popular_products' %}">View all <i class="bi bi-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>


            <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">
            {% for item in popular_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">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 item.product_stock_status.flag %}
                        <a href="{% url 'buy_now_product_url' item.id %}">
                            Buy now
                        </a>
                        {% else %}
                        <a href="javascript:void(0)" diabled>
                            Buy now
                        </a>
                        {% endif %} {% endcomment %}

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

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

            </div>

        </div>
    </section>
    <!-- products -->

    <!--Best Deal products -->
    {% if best_deal_products %}
    <section class="products-area">
        <div class="containers">
            <div class="row">
                <div class="col-12">
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="title">
                            <h2>Best Deal Products</h2>
                        </div>
                        <div class="viewall">
                            <a href="{% url 'best_deal_products' %}">View all <i class="bi bi-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>


            <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">
            {% for item in best_deal_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">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 item.product_stock_status.flag %}
                        <a href="{% url 'buy_now_product_url' item.id %}">
                            Buy now
                        </a>
                        {% else %}
                        <a href="javascript:void(0)" diabled>
                            Buy now
                        </a>
                        {% endif %} {% endcomment %}

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

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

        </div>

        </div>
    </section>
    {% endif %}
    <!-- products -->


    <!-- products -->
    <section class="products-area">
        <div class="containers">
            <div class="row">
                <div class="col-12">
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="title">
                            <h2>Just For You</h2>
                        </div>
                        {% comment %} <div class="viewall">
                            <a href="{% url 'all_products' %}">View all <i class="bi bi-arrow-right"></i></a>
                        </div> {% endcomment %}
                    </div>
                </div>
            </div>


            <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"
                    id="product-container">

                    {% include 'client/products/product_card.html' %}
                </div>


        <div class="col-12 text-center mt-4">
            <button class="cusbtn" id="load-more-btn">
                Load More Products
            </button>
        </div>

        </div>
    </section>
    <!-- products -->
    

{% endblock  %}

{% block JS %}
<script>
    let offset = 9;
    const LOAD_MORE_URL = "{% url 'load_more_products' %}";
    const btn = document.getElementById('load-more-btn');
    const container = document.getElementById('product-container');

    if (btn) {
        btn.addEventListener('click', function () {
            btn.innerText = 'Loading...';
            btn.disabled = true;

            fetch(`${LOAD_MORE_URL}?offset=${offset}`, {
                method: 'GET',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.json())
            .then(data => {

                if (data.html.trim() !== '') {
                    container.insertAdjacentHTML('beforeend', data.html);
                    offset += 10;
                }

                btn.innerText = 'Load More Products';
                btn.disabled = false;

                if (!data.has_more) {
                    btn.style.display = 'none';
                }
            })
            .catch(error => {
                console.error('Load more error:', error);
                btn.innerText = 'Load More Products';
                btn.disabled = false;
            });
        });
    }

</script>

<script>
    $(document).on('click', '.loves', function(){
        let heart = $(this);
        let productId = heart.closest('.wishlist').data('product-id');

        $.ajax({
            url: '{% url "add_to_wishlist_url" %}',
            type: 'POST',
            data: {
                product_id: productId,
                csrfmiddlewaretoken: "{{ csrf_token }}"
            },
            success: function(response) {
                if(response.status === 'added'){
                    heart.removeClass('bi-heart').addClass('bi-heart-fill text-danger');
                }
                else if(response.status === 'removed'){
                    heart.removeClass('bi-heart-fill text-danger').addClass('bi-heart')
                }
            }
        });
    });

</script>
{% endblock  %}