{% extends "dashboard/base.html" %}
{% load humanize %}

{% block page_title %}{{ sale.title }}{% endblock %}
{% block header_actions %}
<div class="flex gap-2">
    {% if sale.is_upcoming %}
    <a href="{% url 'dashboard:sale_edit' sale.id %}" class="btn btn--primary btn--sm">Edit Upcoming Sale</a>
    {% endif %}
    <a href="{% url 'sales:detail' sale.slug %}" class="btn btn--secondary btn--sm" target="_blank">View Public Page</a>
</div>
{% endblock %}

{% block dashboard_content %}
<div class="flex gap-4 items-center mb-6 flex-wrap">
    <span class="badge badge--{{ sale.status }}">{{ sale.get_status_display }}</span>
    <span class="text-sm text-muted">{{ sale.start_at|date:"M d, H:i" }} - {{ sale.end_at|date:"M d, Y H:i" }}</span>
    <span class="text-sm text-muted">{{ sale.view_count }} view{{ sale.view_count|pluralize }}</span>
    <span class="text-sm text-secondary" style="margin-left:auto;">Payment Mode: <strong>{{ sale.get_pricing_model_display }}</strong></span>
</div>

<!-- Products in Sale (Card Layout) -->
<div class="dash-card mb-6">
    <div class="dash-card__header">
        <h3 class="dash-card__title">Products in This Sale</h3>
    </div>
    <div class="dash-card__body">
        {% if items %}
        <div class="grid grid--2">
            {% for item in items %}
            <div class="card card--flat">
                <div class="flex items-center gap-3 mb-3">
                    {% if item.product.primary_image %}
                    <img src="{{ item.product.primary_image.image.url }}" alt="" style="width:48px;height:48px;border-radius:var(--radius-sm);object-fit:cover;">
                    {% else %}
                    <div style="width:48px;height:48px;border-radius:var(--radius-sm);background:var(--color-border-light);display:flex;align-items:center;justify-content:center;color:var(--color-text-muted);font-size:10px;">No img</div>
                    {% endif %}
                    <div style="flex:1;">
                        <h4 style="font-size:var(--font-size-base);font-weight:700;">{{ item.product.name }}</h4>
                        {% if item.product.video %}<span class="badge badge--paid" style="font-size:10px;margin-top:2px;">Video Available</span>{% endif %}
                    </div>
                </div>
                <div class="flex justify-between items-center mb-2 text-sm">
                    <span class="text-secondary">Sale Price</span>
                    <strong style="color:var(--color-primary);font-size:var(--font-size-base);">GHS {{ item.price|floatformat:2 }}</strong>
                </div>
                {% if item.discount_percent %}
                <div class="flex justify-between items-center mb-2 text-sm">
                    <span class="text-secondary">Discount</span>
                    <span class="badge badge--live">-{{ item.discount_percent|floatformat:0 }}%</span>
                </div>
                {% endif %}
                <div class="mb-2">
                    <div class="flex justify-between items-center text-xs text-muted mb-1">
                        <span>Stock Remaining</span>
                        <span>{{ item.stock_remaining }} / {{ item.stock_total }}</span>
                    </div>
                    <div class="product-card__stock-bar">
                        <div class="product-card__stock-fill {% if item.stock_percentage < 20 %}product-card__stock-fill--critical{% elif item.stock_percentage < 50 %}product-card__stock-fill--low{% endif %}" style="width:{{ item.stock_percentage }}%"></div>
                    </div>
                </div>
                <div class="flex justify-between items-center text-xs text-muted mt-3 pt-2" style="border-top:1px solid var(--color-border-light);">
                    <span>Sold Units</span>
                    <strong>{{ item.stock_total|add:"-"|add:item.stock_remaining|default:"0" }}</strong>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="empty-state"><p class="text-sm text-muted">No items in this sale.</p></div>
        {% endif %}
    </div>
</div>

<!-- Orders (Card Layout) -->
<div class="dash-card">
    <div class="dash-card__header">
        <h3 class="dash-card__title">Orders</h3>
        <span class="text-sm text-muted">{{ orders.count }} total</span>
    </div>
    <div class="dash-card__body">
        {% if orders %}
        <div class="grid grid--2">
            {% for order in orders %}
            <div class="card card--flat">
                <div class="flex justify-between items-center mb-2">
                    <a href="{% url 'dashboard:order_detail' order.id %}" style="font-weight:700;">#{{ order.order_number }}</a>
                    <span class="badge badge--{{ order.status }}">{{ order.get_status_display }}</span>
                </div>
                <div class="text-sm mb-1"><strong>{{ order.buyer_name }}</strong></div>
                <div class="text-xs text-muted mb-3">{{ order.buyer_phone }} -- {{ order.buyer_email }}</div>
                <div class="flex justify-between items-center text-sm pt-2" style="border-top:1px solid var(--color-border-light);">
                    <span class="text-muted">{{ order.created_at|date:"M d, H:i" }}</span>
                    <strong style="color:var(--color-primary);font-size:var(--font-size-base);">GHS {{ order.total_amount|floatformat:2 }}</strong>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="empty-state"><p class="text-sm text-muted">No orders yet</p></div>
        {% endif %}
    </div>
</div>
{% endblock %}