{% load humanize %}

<div class="product-card">
    <div class="card-image">
        {% if product.is_new_arrival %}
        <span class="card-badge badge-new">New</span>
        {% elif product.discount_percent > 0 %}
        <span class="card-badge badge-sale">-{{ product.discount_percent }}%</span>
        {% elif product.is_best_seller %}
        <span class="card-badge badge-hot">Hot</span>
        {% endif %}

        {% if user.is_authenticated %}
        <button class="card-wishlist {% if product in user.wishlist.products.all %}active{% endif %}"
                onclick="toggleWishlist(this, {{ product.id }}); event.preventDefault();"
                title="Add to wishlist">
            <i class="{% if product in user.wishlist.products.all %}fas{% else %}far{% endif %} fa-heart"></i>
        </button>
        {% else %}
        <a href="{% url 'users:login' %}" class="card-wishlist" title="Login to wishlist">
            <i class="far fa-heart"></i>
        </a>
        {% endif %}

        <a href="{{ product.get_absolute_url }}">
            {% if product.image %}
            <img src="{{ product.image.url }}" alt="{{ product.name }}" loading="lazy">
            {% else %}
            <div class="no-image">
                <i class="fas fa-tshirt"></i>
                <span>No Image</span>
            </div>
            {% endif %}
        </a>

        <div class="card-actions">
            <form class="add-to-cart-form" action="{% url 'store:add_to_cart' product.id %}" method="POST" style="flex:1"
                data-product-name="{{ product.name }}">
                {% csrf_token %}
                <input type="hidden" name="quantity" value="1">
                <button type="submit" class="btn btn-gold btn-sm btn-full add-to-cart-btn">
                    <i class="fas fa-shopping-bag"></i> Add to Cart
                </button>
            </form>
            <a href="{{ product.get_absolute_url }}" class="btn btn-outline btn-sm"
                style="color:white;border-color:rgba(255,255,255,0.4)">
                <i class="fas fa-eye"></i>
            </a>
        </div>
    </div>
    <div class="card-body">
        <div class="card-category">{{ product.category.name }}</div>
        <a href="{{ product.get_absolute_url }}"><h3 class="card-title">{{ product.name }}</h3></a>
        <div class="card-price">
            <span class="price-current">₦{{ product.effective_price|floatformat:0|intcomma }}</span>
            {% if product.discount_price %}
            <span class="price-original">₦{{ product.price|floatformat:0|intcomma }}</span>
            {% endif %}
        </div>
        {% if product.review_count > 0 %}
        <div class="card-rating">
            <div class="stars">
                {% for i in "12345" %}
                {% if forloop.counter <= product.average_rating %}★{% else %}☆{% endif %}
                {% endfor %}
            </div>
            <span class="rating-count">({{ product.review_count }})</span>
        </div>
        {% endif %}
    </div>
</div>



{% block extra_js %}
<style>
    @keyframes cartPulse {
        0% {
            transform: scale(1);
        }

        40% {
            transform: scale(1.4);
        }

        100% {
            transform: scale(1);
        }
    }

    .cart-pulse {
        animation: cartPulse 0.35s ease-out;
    }

    /* Minimal fix for number inside circle */
    .cart-badge,
    .cart-count,
    [data-cart-count] {
        display: flex !important;
        align-items: center;
        justify-content: center;
        line-height: 1;
        width: 20px;          /* Adjust if your circle size is different */
        height: 20px;
        font-size: 12px;
        font-weight: bold;
    }
</style>

<script>
    // We use a safe check that automatically re-binds if a refresh drops the listener
    (function () {
        function initCartService() {
            // Use event delegation on the body so refreshes/DOM changes don't break the listener
            document.body.removeEventListener('submit', handleCartSubmit);
            document.body.addEventListener('submit', handleCartSubmit);
        }

        function handleCartSubmit(e) {
            const form = e.target.closest('.add-to-cart-form');
            if (!form) return;

            e.preventDefault();

            const btn = form.querySelector('.add-to-cart-btn');
            if (!btn || btn.disabled || btn.classList.contains('is-loading')) return;

            const originalHTML = btn.innerHTML;
            btn.disabled = true;
            btn.classList.add('is-loading');
            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Adding...';

            fetch(form.action, {
                method: 'POST',
                body: new FormData(form),
                headers: { 'X-Requested-With': 'XMLHttpRequest' }
            })
                .then(res => {
                    if (!res.ok) throw new Error('Network error');
                    return res.json();
                })
                .then(data => {
                    if (data.success) {
                        updateCartCount(data.cart_count);
                        btn.innerHTML = '<i class="fas fa-check"></i> Added!';
                        btn.style.background = '#2ecc71';

                        setTimeout(() => {
                            btn.innerHTML = originalHTML;
                            btn.style.background = '';
                            btn.disabled = false;
                            btn.classList.remove('is-loading');
                        }, 1500);
                    } else {
                        resetButton(btn, originalHTML);
                    }
                })
                .catch(() => {
                    resetButton(btn, originalHTML);
                });
        }

        function resetButton(btn, originalHTML) {
            btn.innerHTML = originalHTML;
            btn.disabled = false;
            btn.classList.remove('is-loading');
        }

        function updateCartCount(count) {
            // Force look for elements even if they just rendered via a refresh
            const targets = document.querySelectorAll('.cart-count, .cart-badge, [data-cart-count]');

            targets.forEach(el => {
                el.textContent = count;

                // Hard override style attributes to guarantee visibility changes register instantly
                if (parseInt(count) > 0) {
                    el.style.setProperty('display', 'flex', 'important');   // Changed to flex
                } else {
                    el.style.setProperty('display', 'none', 'important');
                }

                // Animation pulse trigger
                el.classList.remove('cart-pulse');
                void el.offsetWidth;
                el.classList.add('cart-pulse');
            });
        }

        // Run immediately, and also listen for standard page load finishes
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', initCartService);
        } else {
            initCartService();
        }
    })();
</script>
{% endblock %}