{% extends 'base.html' %}
{% block title %}Reports — Shiba Meals{% endblock %}
{% block page_title %}Reports{% endblock %}
{% block content %}
<div class="page-title">Daily Sales Report</div>
<div class="page-sub">{{ today }} · All outlets · Sorted by revenue</div>

<div class="grid-4" style="margin-bottom:.875rem">
  {% set total_revenue = sales_data | sum(attribute='revenue') %}
  {% set total_sold = sales_data | sum(attribute='sold') %}
  {% set total_wastage = sales_data | sum(attribute='wastage') %}
  {% set wastage_alerts_count = sales_data | selectattr('wastage_alert') | list | length %}
  <div class="metric blue">
    <div class="metric-label">Total Revenue</div>
    <div class="metric-value">KES {{ "{:,.0f}".format(total_revenue) }}</div>
    <div class="metric-sub">All products today</div>
  </div>
  <div class="metric green">
    <div class="metric-label">Units Sold</div>
    <div class="metric-value">{{ total_sold }}</div>
    <div class="metric-sub">Across all outlets</div>
  </div>
  <div class="metric {% if wastage_alerts_count > 0 %}red{% else %}green{% endif %}">
    <div class="metric-label">Wastage Alerts</div>
    <div class="metric-value">{{ wastage_alerts_count }}</div>
    <div class="metric-sub">Products over threshold</div>
  </div>
  <div class="metric amber">
    <div class="metric-label">Total Wastage</div>
    <div class="metric-value">{{ total_wastage }}</div>
    <div class="metric-sub">Units discarded today</div>
  </div>
</div>

<div class="card">
  <div class="card-title">Product Performance
    <span style="float:right;font-size:.72rem;color:var(--text3);font-weight:400">CPU = recipe ingredient cost per unit</span>
  </div>
  <div class="table-wrap">
  <table>
    <tr>
      <th>#</th>
      <th>Product</th>
      <th>Category</th>
      <th>Price</th>
      <th>CPU</th>
      <th>Margin</th>
      <th>Margin %</th>
      <th>Sold</th>
      <th>Revenue</th>
      <th>Wastage</th>
      <th>Wastage %</th>
    </tr>
    {% for s in sales_data %}
    <tr {% if s.wastage_alert %}style="background:var(--red-bg)"{% endif %}>
      <td style="color:var(--text3)">{{ loop.index }}</td>
      <td style="font-weight:600">{{ s.product.name }}</td>
      <td><span class="badge badge-gray">{{ s.product.category }}</span></td>
      <td>KES {{ "{:,.0f}".format(s.product.price) }}</td>
      <td style="color:var(--text2)">KES {{ "{:.2f}".format(s.cpu) }}</td>
      <td style="color:var(--green);font-weight:600">KES {{ "{:.2f}".format(s.margin) }}</td>
      <td>
        <span class="badge {% if s.margin_pct >= 70 %}badge-green{% elif s.margin_pct >= 40 %}badge-amber{% else %}badge-red{% endif %}">
          {{ s.margin_pct }}%
        </span>
      </td>
      <td style="font-weight:600">{{ s.sold }}</td>
      <td style="font-weight:600">KES {{ "{:,.0f}".format(s.revenue) }}</td>
      <td style="{% if s.wastage > 0 %}color:var(--red);font-weight:600{% endif %}">{{ s.wastage }}</td>
      <td>
        {% if s.wastage_alert %}
        <span class="badge badge-red" title="Exceeds {{ s.product.wastage_threshold_pct or 10 }}% threshold">⚠ {{ s.wastage_pct }}%</span>
        {% elif s.wastage > 0 %}
        <span class="badge badge-amber">{{ s.wastage_pct }}%</span>
        {% else %}
        <span style="color:var(--text3)">—</span>
        {% endif %}
      </td>
    </tr>
    {% else %}
    <tr><td colspan="11" style="color:var(--text3);font-style:italic;text-align:center;padding:1.5rem">No sales data for today yet.</td></tr>
    {% endfor %}
  </table>
  </div>
</div>

{% if sales_data | selectattr('wastage_alert') | list %}
<div class="card" style="border-color:var(--red-bd)">
  <div class="card-title" style="color:var(--red)">⚠ Wastage Action Required</div>
  {% for s in sales_data if s.wastage_alert %}
  <div style="padding:.5rem 0;border-bottom:1px solid var(--border);font-size:.85rem">
    <strong>{{ s.product.name }}</strong> — {{ s.wastage_pct }}% wasted today (threshold: {{ s.product.wastage_threshold_pct or 10 }}%).
    Consider reducing tomorrow's dispatch quantity or investigating storage/preparation.
    Revenue lost to wastage: <strong style="color:var(--red)">KES {{ "{:,.0f}".format(s.wastage * s.product.price) }}</strong>
  </div>
  {% endfor %}
</div>
{% endif %}
{% endblock %}