{% extends 'base.html' %}
{% block content %}
  <h2>Customer Overview</h2>
  <div class="grid cols-4">
    <div class="card">
      <h3>Total Bought</h3>
      <div class="stat">{{ total_bought_kg|kg }}</div>
    </div>
    <div class="card">
      <h3>Demand Orders</h3>
      <div class="stat">
        <a href="{{ url_for('demand_orders_list') }}" class="btn-outline" style="text-decoration: none;">
          View Orders
        </a>
      </div>
    </div>
    <div class="card">
      <h3>Account</h3>
      <div class="stat">
        <a href="{{ url_for('customer_my_ledger') }}" class="btn-outline" style="text-decoration: none;">
          View My Ledger
        </a>
      </div>
    </div>
    <div class="card">
      <h3>Online Payment</h3>
      <div class="stat">
        <a href="{{ url_for('online_payment_home') }}" class="btn-primary" style="text-decoration: none;">
          Pay Online
        </a>
      </div>
    </div>
  </div>

  <div class="card" style="margin-top:16px">
    <h3>Recent Purchases</h3>
    <table class="table">
      <thead><tr><th>Date</th><th>Weight</th><th>Price/kg</th><th>Total</th></tr></thead>
      <tbody>
        {% for s in recent_sales %}
        <tr>
          <td>{{ s.date }}</td>
          <td>{{ s.weight_kg|kg }}</td>
          <td>{{ s.price_per_kg|currency }}</td>
          <td>{{ s.total_amount|currency }}</td>
        </tr>
        {% else %}
          <tr><td colspan="4" class="muted">No purchases yet.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
{% endblock %}