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

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

{% block content %}
<section class="breadcrumb">
    <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">
        <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 }}/5</span>
                <span>Category: {{ product.category }}</span>
                <span>Stock: {{ product.stock|default:0 }}</span>
            </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>Fast delivery</div>
                <div>Secure checkout</div>
                <div>Easy return</div>
            </div>

            <div class="product-actions">
                <a href="{% url 'product_list' %}" class="btn btn-secondary">Back to Products</a>
                {% 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>

    {% if related_products %}
    <section class="related-products">
        <h2>Related products</h2>
        <div class="cards related-grid">
            {% for related in related_products %}
            <div class="card small-card">
                {% 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>
                    </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 %}