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

{% block content %}
  <h1 class="title">Account Ledger</h1>
  <p class="sub">{{ cust.name }} · {{ biz_label }}</p>

  <div class="card" style="margin-bottom:18px">
    <div class="pad">
      <form method="get" style="display:flex;gap:12px;align-items:end;flex-wrap:wrap">
        <div><label class="lab">From</label><input type="date" name="start_date" value="{{ start_date }}" class="fld" style="width:auto"></div>
        <div><label class="lab">To</label><input type="date" name="end_date" value="{{ end_date }}" class="fld" style="width:auto"></div>
        <button class="btn primary" type="submit">Apply</button>
        <a class="btn ghost" href="{% url 'customer_portal:ledger' %}">Reset</a>
        <div style="margin-left:auto;text-align:right">
          <div class="lbl" style="font-size:11.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.07em">Closing balance</div>
          <div style="font-family:'Fraunces',serif;font-size:26px;font-weight:600">{{ balance|floatformat:2 }}</div>
        </div>
      </form>
    </div>
  </div>

  <div class="card">
    <div class="tbl-wrap">
      {% if is_ticket %}
        <table>
          <thead><tr><th>Date</th><th>Invoice</th><th>Services</th><th class="r">Receivable</th><th class="r">Received</th><th class="r">Balance</th><th></th></tr></thead>
          <tbody>
            {% for r in led.rows %}
              {% if r.row_type == "opening" %}
                <tr class="opening"><td>{{ r.date }}</td><td colspan="4">Opening Balance</td><td class="r num">{{ r.balance|floatformat:2 }}</td><td></td></tr>
              {% elif r.row_type == "invoice" %}
                <tr>
                  <td>{{ r.date }}</td>
                  <td><strong>{{ r.folder_no }}</strong></td>
                  <td>{{ r.svc_flags }} {% if r.inv_title %}· {{ r.inv_title }}{% endif %}</td>
                  <td class="r num">{{ r.inv_amount|floatformat:2 }}</td>
                  <td class="r num pos">{{ r.received|floatformat:2 }}</td>
                  <td class="r num">{{ r.balance|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>
              {% endif %}
            {% endfor %}
          </tbody>
          <tfoot>
            <tr style="font-weight:800;background:#fbfcfe">
              <td colspan="3" style="padding:14px 16px">Totals</td>
              <td class="r num">{{ led.total_receivable|floatformat:2 }}</td>
              <td class="r num pos">{{ led.total_received|floatformat:2 }}</td>
              <td class="r num">{{ led.closing|floatformat:2 }}</td><td></td>
            </tr>
          </tfoot>
        </table>
      {% else %}
        <table>
          <thead><tr><th>Date</th><th>Detail</th><th>Invoice</th><th class="r">Charge</th><th class="r">Payment</th><th class="r">Balance</th><th></th></tr></thead>
          <tbody>
            {% for r in led.rows %}
              {% if r.row_type == "opening" %}
                <tr class="opening"><td>Opening</td><td colspan="4">Opening Balance</td><td class="r num">{{ r.balance|floatformat:2 }}</td><td></td></tr>
              {% else %}
                <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 neg">{{ r.charge|floatformat:2 }}</td>
                  <td class="r num pos">{{ r.payment|floatformat:2 }}</td>
                  <td class="r num">{{ r.balance|floatformat:2 }}</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>
              {% endif %}
            {% endfor %}
          </tbody>
          <tfoot>
            <tr style="font-weight:800;background:#fbfcfe">
              <td colspan="3" style="padding:14px 16px">Totals</td>
              <td class="r num neg">{{ led.total_charge|floatformat:2 }}</td>
              <td class="r num pos">{{ led.total_payment|floatformat:2 }}</td>
              <td class="r num">{{ led.closing|floatformat:2 }}</td><td></td>
            </tr>
          </tfoot>
        </table>
      {% endif %}
    </div>
  </div>
{% endblock %}