{% extends "portal_base.html" %}
{% block title %}Sales · Portal{% endblock %}
{% block topbar_title %}Sales{% endblock %}
{% block portal_content %}
<div class="stat-row">
  <div class="stat-card">
    <div class="label">Orders ({{ days }} days)</div>
    <div class="value">{{ order_count }}</div>
  </div>
  <div class="stat-card">
    <div class="label">Revenue ({{ days }} days)</div>
    <div class="value">{{ revenue }} {{ currency|upper }}</div>
  </div>
  <div class="stat-card">
    <div class="label">Units sold</div>
    <div class="value">{{ units_sold }}</div>
  </div>
  <div class="stat-card">
    <div class="label">Average order</div>
    <div class="value">{{ aov }} {{ currency|upper }}</div>
  </div>
</div>

<div class="panel">
  <div class="panel-h">
    <h2>Orders per day</h2>
    <span class="muted">Last {{ days }} days</span>
  </div>
  <div class="panel-b">
    <div class="chart-placeholder chart-daily" role="img"
         aria-label="Paid orders per day for the last {{ days }} days">
      {% for bar in daily_sales %}
      <div class="chart-bar-col">
        <div class="bar{% if not bar.count %} is-zero{% endif %}"
             style="height:{{ bar.pct }}%"
             title="{{ bar.label }}: {{ bar.count }} sale{{ bar.count|pluralize }} · {{ bar.revenue }} {{ currency|upper }}"></div>
        <div class="chart-bar-meta">
          <span class="chart-bar-label">{% if bar.tick %}{{ bar.tick_label }}{% else %}&nbsp;{% endif %}</span>
        </div>
      </div>
      {% endfor %}
    </div>
    {% if not has_sales %}
    <p class="empty-state" style="padding-top:12px">No paid orders in this window.</p>
    {% endif %}
  </div>
</div>

<div class="panel">
  <div class="panel-h">
    <h2>Revenue per day</h2>
    <span class="muted">Last {{ days }} days</span>
  </div>
  <div class="panel-b">
    <div class="chart-placeholder chart-daily chart-revenue" role="img"
         aria-label="Revenue per day for the last {{ days }} days">
      {% for bar in daily_revenue %}
      <div class="chart-bar-col">
        <div class="bar{% if not bar.revenue %} is-zero{% endif %}"
             style="height:{{ bar.pct }}%"
             title="{{ bar.label }}: {{ bar.revenue }} {{ currency|upper }}"></div>
        <div class="chart-bar-meta">
          <span class="chart-bar-label">{% if bar.tick %}{{ bar.tick_label }}{% else %}&nbsp;{% endif %}</span>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</div>

<div class="split">
  <div class="panel">
    <div class="panel-h">
      <h2>Top products</h2>
      <span class="muted">By units sold</span>
    </div>
    <div class="panel-b">
      {% if top_products %}
      <div class="hbar-chart" role="img" aria-label="Top products by units sold">
        {% for row in top_products %}
        <div class="hbar-row" title="{{ row.name }} · {{ row.units }} sold · {{ row.revenue }} {{ currency|upper }}">
          <div class="hbar-label">{{ row.name }}</div>
          <div class="hbar-track">
            <div class="hbar-fill" style="width:{{ row.bar_pct }}%"></div>
          </div>
          <div class="hbar-value">{{ row.units }}</div>
        </div>
        {% endfor %}
      </div>
      {% else %}
      <p class="empty-state" style="margin:0;padding:0">No product sales yet.</p>
      {% endif %}
    </div>
  </div>
  <div class="panel">
    <div class="panel-h">
      <h2>Product mix</h2>
      <a class="btn btn-sm btn-ghost" href="{% url 'shop_portal:product_list' %}">Products</a>
    </div>
    <div class="panel-b" style="padding:0">
      <table class="table">
        <thead>
          <tr><th>Product</th><th>SKU</th><th>Units</th><th>Revenue</th></tr>
        </thead>
        <tbody>
          {% for row in top_products %}
          <tr>
            <td>{{ row.name }}</td>
            <td>{{ row.sku }}</td>
            <td>{{ row.units }}</td>
            <td>{{ row.revenue }} {{ currency|upper }}</td>
          </tr>
          {% empty %}
          <tr><td colspan="4" class="empty-state">No paid line items in the last {{ days }} days.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="panel">
  <div class="panel-h">
    <h2>Recent sales</h2>
    <a class="btn btn-sm btn-ghost" href="{% url 'shop_portal:order_list' %}">All orders</a>
  </div>
  <div class="panel-b" style="padding:0">
    <table class="table">
      <thead>
        <tr><th>Number</th><th>Customer</th><th>Amount</th><th>Status</th></tr>
      </thead>
      <tbody>
        {% for order in recent_orders %}
        <tr>
          <td><a href="{% url 'shop_portal:order_detail' order.pk %}">{{ order.number }}</a></td>
          <td>{{ order.customer_name|default:order.email }}</td>
          <td>{{ order.amount }} {{ order.currency|upper }}</td>
          <td>{{ order.get_status_display }}</td>
        </tr>
        {% empty %}
        <tr><td colspan="4" class="empty-state">No paid orders yet.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}