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

{% block page_title %}Overview{% endblock %}

{% block dashboard_content %}
<div class="stats mb-8">
    <div class="card stat-card animate-in">
        <div class="stat-card__value">{{ total_orders }}</div>
        <div class="stat-card__label">Paid Orders</div>
    </div>
    <div class="card stat-card animate-in animate-in--delay-1">
        <div class="stat-card__value">GHS {{ total_revenue|floatformat:2 }}</div>
        <div class="stat-card__label">Total Revenue</div>
    </div>
    <div class="card stat-card animate-in animate-in--delay-2">
        <div class="stat-card__value">{{ total_products }}</div>
        <div class="stat-card__label">Products</div>
    </div>
    <div class="card stat-card animate-in animate-in--delay-3">
        <div class="stat-card__value">{{ upcoming_sales }}</div>
        <div class="stat-card__label">Upcoming Sales</div>
    </div>
</div>

{% if active_sale %}
<div class="dash-card mb-6 animate-in">
    <div class="dash-card__header">
        <h3 class="dash-card__title">Active Sale</h3>
        <span class="badge badge--live">Live</span>
    </div>
    <div class="dash-card__body">
        <h4 style="font-weight:700;margin-bottom:var(--space-2);">{{ active_sale.title }}</h4>
        <p class="text-sm text-secondary mb-4">
            Ends {{ active_sale.end_at|date:"M d, Y H:i" }} -- {{ active_sale.view_count }} view{{ active_sale.view_count|pluralize }}
        </p>
        <div class="flex gap-3">
            <a href="{% url 'dashboard:sale_manage' active_sale.id %}" class="btn btn--primary btn--sm">Manage Sale</a>
            <a href="{% url 'sales:detail' active_sale.slug %}" class="btn btn--secondary btn--sm" target="_blank">View Public Page</a>
        </div>
    </div>
</div>
{% endif %}

<div class="dash-card animate-in">
    <div class="dash-card__header">
        <h3 class="dash-card__title">Recent Orders</h3>
        <a href="{% url 'dashboard:order_list' %}" class="btn btn--ghost btn--sm">View All</a>
    </div>
    <div class="dash-card__body">
        {% if recent_orders %}
        <div class="grid grid--2">
            {% for order in recent_orders %}
            <div class="card card--flat">
                <div class="flex justify-between items-center mb-3">
                    <a href="{% url 'dashboard:order_detail' order.id %}" style="font-weight:700;font-size:var(--font-size-base);">#{{ order.order_number }}</a>
                    <span class="badge badge--{{ order.status }}">{{ order.get_status_display }}</span>
                </div>
                <div class="text-sm mb-2">
                    <strong style="color:var(--color-text);">{{ order.buyer_name }}</strong>
                </div>
                <div class="flex justify-between items-center text-sm">
                    <span class="text-muted">{{ order.created_at|date:"M d, H:i" }}</span>
                    <strong style="font-size:var(--font-size-lg);color:var(--color-primary);">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 %}