{% extends 'base.html' %}
{% load static %}

{% block extra_head %}
<link rel="stylesheet" href="{% static 'css/product.css' %}?v=20260520">
{% endblock %}

{% block content %}
<section class="breadcrumb reveal">
    <a href="{% url 'home' %}">Home</a>
    <span class="breadcrumb-separator">/</span>
    <a href="{% url 'product_list' %}">Products</a>
    <span class="breadcrumb-separator">/</span>
    <span>{{ product.name }}</span>
</section>

<div class="product-detail-page">
    <div class="product-detail-card reveal">
        <div class="product-detail-image">
            {% if product.image %}
                <img src="{{ product.image.url }}" alt="{{ product.name }}">
            {% else %}
                <div class="image-placeholder">No image available</div>
            {% endif %}
        </div>

        <div class="product-detail-info">
            <div class="detail-head">
                <h1>{{ product.name }}</h1>
                {% if product.featured %}
                    <span class="badge-pill featured-badge">Featured</span>
                {% endif %}
            </div>

            <div class="detail-meta">
                <span>⭐ {{ product.rating|default:0|floatformat:1 }}/5</span>
                <span>Category: {{ product.category }}</span>
                <span>Stock: {{ product.stock|default:0 }}</span>
                {% if product.discount_percent %}<span>Save {{ product.discount_percent }}%</span>{% endif %}
            </div>

            <div class="product-pricing">
                <span class="price">Rs. {{ product.display_price|floatformat:2 }}</span>
                {% if product.discount_price %}
                    <span class="original-price">Rs. {{ product.price|floatformat:2 }}</span>
                    <span class="savings">Save Rs. {{ product.savings|floatformat:2 }}</span>
                {% endif %}
            </div>

            <p class="product-description">{{ product.description }}</p>

            <div class="product-extras">
                <div>
                    <strong>Fast delivery</strong>
                    <span>2–4 business days</span>
                </div>
                <div>
                    <strong>Secure checkout</strong>
                    <span>Wallet, COD, and verified payment flow</span>
                </div>
                <div>
                    <strong>Easy return</strong>
                    <span>Clear order tracking and customer support</span>
                </div>
            </div>

            <div class="detail-usp-grid">
                <article class="detail-usp-card reveal">
                    <strong>Smart purchase flow</strong>
                    <p>Move from product to cart, checkout, payment, and order tracking with cleaner visual feedback.</p>
                </article>
                <article class="detail-usp-card reveal">
                    <strong>Flexible payment</strong>
                    <p>Choose eSewa, Khalti, or cash on delivery, then change payment before shipment when supported.</p>
                </article>
                <article class="detail-usp-card reveal">
                    <strong>Order visibility</strong>
                    <p>Review payment status, timeline, and next actions from a more advanced order dashboard.</p>
                </article>
            </div>

            <div class="product-actions">
                <a href="{% url 'product_list' %}" class="btn btn-secondary">Back to Products</a>
                {% if user.is_authenticated %}
                <a href="{% url 'toggle_wishlist' product.id %}?next={{ request.path|urlencode }}" class="btn btn-secondary">{% if in_wishlist %}Saved to Wishlist{% else %}Save to Wishlist{% endif %}</a>
                {% endif %}
                {% if product.stock > 0 %}
                    <a href="{% url 'add_to_cart' product.id %}?next={{ request.path|urlencode }}" class="btn btn-secondary">Add to Cart</a>
                    <a href="{% url 'buy_now' product.id %}" class="btn btn-primary">Buy Now</a>
                {% else %}
                    <span class="btn btn-primary disabled">Sold Out</span>
                {% endif %}
            </div>
        </div>
    </div>

    <aside class="summary-box detail-support-card reveal">
        <div class="payment-summary-header">
            <div>
                <h3>Why this page feels better</h3>
                <p class="payment-caption">A cleaner, more informative product decision area.</p>
            </div>
            <span class="payment-badge">Advanced UI</span>
        </div>
        <div class="summary-row"><span>Listing type</span><strong>{{ product.listing_type|title }}</strong></div>
        <div class="summary-row"><span>Price now</span><strong>Rs. {{ product.display_price|floatformat:2 }}</strong></div>
        <div class="summary-row"><span>Wishlist support</span><strong>{% if user.is_authenticated %}Available{% else %}Login required{% endif %}</strong></div>
        <div class="summary-row"><span>Checkout state</span><strong>{% if product.available %}Ready{% else %}Unavailable{% endif %}</strong></div>
        <div class="cart-summary-note">
            <strong>Same theme, more depth.</strong>
            <p>The product page now highlights trust, pricing, and next steps before the customer commits.</p>
        </div>
    </aside>

    {% if related_products %}
    <section class="related-products section-shell reveal">
        <div class="section-heading">
            <div>
                <h2>Related products</h2>
                <p>Keep exploring similar options without losing the same design language.</p>
            </div>
        </div>
        <div class="cards related-grid">
            {% for related in related_products %}
            <div class="card small-card reveal">
                {% if related.image %}
                    <img src="{{ related.image.url }}" alt="{{ related.name }}">
                {% else %}
                    <div class="product-image-placeholder">No image</div>
                {% endif %}
                <div class="card-content">
                    <div class="tag-row">
                        {% if related.featured %}<span class="tag badge-pill">Featured</span>{% endif %}
                        <span class="tag category-tag">{{ related.category }}</span>
                        {% if related.discount_percent %}<span class="tag savings-tag">Save {{ related.discount_percent }}%</span>{% endif %}
                    </div>
                    <h3>{{ related.name }}</h3>
                    <p class="price">Rs. {{ related.display_price|floatformat:2 }}</p>
                    <a href="{% url 'product_detail' related.id %}" class="btn btn-secondary">View</a>
                </div>
            </div>
            {% endfor %}
        </div>
    </section>
    {% endif %}
</div>
{% endblock %}