{% extends "customer_portal/old_portal_base.html" %}
{% block title %}Dashboard · Customer Portal{% endblock %}
{% block n_dash %}active{% endblock %}

{% block content %}
  <h1 class="title">Hello, {{ cust.name }}</h1>
  <p class="sub">Here's a snapshot of your account with {{ biz_label }}.</p>

  <div class="grid g3" style="margin-bottom:18px">
    <div class="stat hero">
      <div class="lbl">Current Balance</div>
      <div class="val">{{ balance|floatformat:2 }}</div>
      <span class="pill">{% if balance > 0 %}Payable by you{% elif balance < 0 %}In your credit{% else %}Settled{% endif %}</span>
    </div>
    <div class="stat">
      <div class="lbl">Account Type</div>
      <div class="val" style="font-size:24px">{% if is_ticket %}Travel / Ticketing{% else %}Trading{% endif %}</div>
      <div class="sub" style="margin:8px 0 0">Customer ID · {{ cust.t_id }}</div>
    </div>
    <div class="stat">
      <div class="lbl">Contact</div>
      <div class="val" style="font-size:20px">{{ cust.mobile|default:"—" }}</div>
      <div class="sub" style="margin:8px 0 0">{{ cust.address|default:"No address on file" }}</div>
    </div>
  </div>

  <div class="grid g2">
    <div class="card">
      <div class="pad" style="display:flex;align-items:center;justify-content:space-between">
        <strong style="font-size:15.5px">Recent activity</strong>
        <a class="btn ghost sm" href="{% url 'customer_portal:ledger' %}">Full ledger →</a>
      </div>
      <div class="tbl-wrap">
        <table>
          <thead><tr><th>Date</th><th>Detail</th><th>Invoice</th><th class="r">Amount</th><th></th></tr></thead>
          <tbody>
          {% if is_ticket %}
            {% for r in recent %}
              <tr>
                <td>{{ r.date }}</td>
                <td>{{ r.svc_flags }}</td>
                <td>{{ r.folder_no }}</td>
                <td class="r num">{{ r.inv_amount|floatformat:2 }}</td>
                <td class="r"><a class="btn ghost sm" href="{% url 'customer_portal:invoice_print' r.folder_no %}?kind=ticket">Print</a></td>
              </tr>
            {% empty %}
              <tr><td colspan="5" style="text-align:center;color:var(--muted);padding:26px">No invoices yet.</td></tr>
            {% endfor %}
          {% else %}
            {% for r in recent %}
              <tr>
                <td>{{ r.date }}</td>
                <td>{% if r.is_sale %}<span class="tag sale">Charge</span>{% else %}<span class="tag pay">Payment</span>{% endif %} {{ r.description }}</td>
                <td>{{ r.invoice_no }}</td>
                <td class="r num">{% if r.charge %}{{ r.charge|floatformat:2 }}{% else %}{{ r.payment|floatformat:2 }}{% endif %}</td>
                <td class="r">{% if r.is_sale %}<a class="btn ghost sm" href="{% url 'customer_portal:invoice_print' r.invoice_no %}">Print</a>{% endif %}</td>
              </tr>
            {% empty %}
              <tr><td colspan="5" style="text-align:center;color:var(--muted);padding:26px">No transactions yet.</td></tr>
            {% endfor %}
          {% endif %}
          </tbody>
        </table>
      </div>
    </div>

    <div class="card">
      <div class="pad">
        <strong style="font-size:15.5px">Quick actions</strong>
        <div style="display:grid;gap:11px;margin-top:16px">
          <a class="btn primary" href="{% url 'customer_portal:ledger' %}">View full ledger</a>
          <a class="btn ghost" href="{% url 'customer_portal:profile' %}">Update my details</a>
        </div>
        <div style="margin-top:22px;padding-top:18px;border-top:1px solid var(--line-2);color:var(--muted);font-size:13px;line-height:1.6">
          You can review every transaction and print any invoice from your ledger.
          Balances are maintained by the business and update in real time.
        </div>
      </div>
    </div>
  </div>
{% endblock %}