{% extends 'pos/base.html' %}
{% block content %}
<div class="container-fluid">

  <div class="row mb-3">
    <div class="col">
      <h4>Account Ledger</h4>
      <div>
        <strong>{{ account.code }} — {{ account.name }}</strong>
        <span class="badge bg-secondary">{{ account.account_type|title }}</span>
        <span class="badge bg-info text-dark">Normal: {{ account.normal_balance|title }}</span>
        {% if account.is_control %}<span class="badge bg-warning text-dark">Control</span>{% endif %}
      </div>
    </div>
    <div class="col-auto">
      <a href="{% url 'gl:coa_list' %}" class="btn btn-sm btn-outline-secondary">← Back to COA</a>
    </div>
  </div>

  <!-- Date filter -->
  <form method="get" class="row g-2 mb-3">
    <div class="col-md-3">
      <label class="form-label small mb-0">Start Date</label>
      <input type="date" name="start_date" class="form-control form-control-sm" value="{{ start_date|date:'Y-m-d' }}">
    </div>
    <div class="col-md-3">
      <label class="form-label small mb-0">End Date</label>
      <input type="date" name="end_date" class="form-control form-control-sm" value="{{ end_date|date:'Y-m-d' }}">
    </div>
    <div class="col-md-2 d-flex align-items-end">
      <button class="btn btn-sm btn-primary">Filter</button>
    </div>
  </form>

  <!-- Summary -->
  <div class="row mb-3">
    <div class="col-md-4">
      <div class="card">
        <div class="card-body p-2">
          <small class="text-muted">Opening Balance</small>
          <h6 class="mb-0">{{ opening_bal|floatformat:2 }}</h6>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card">
        <div class="card-body p-2">
          <small class="text-muted">Closing Balance</small>
          <h6 class="mb-0">{{ closing_bal|floatformat:2 }}</h6>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card">
        <div class="card-body p-2">
          <small class="text-muted">Transactions</small>
          <h6 class="mb-0">{{ ledger_rows|length }}</h6>
        </div>
      </div>
    </div>
  </div>

  <!-- Ledger table -->
  <div class="table-responsive">
    <table class="table table-sm table-striped table-bordered">
      <thead class="table-light">
        <tr>
          <th>Date</th>
          <th>Entry #</th>
          <th>Narration</th>
          <th>Party</th>
          <th class="text-end">Debit</th>
          <th class="text-end">Credit</th>
          <th class="text-end">Balance</th>
        </tr>
      </thead>
      <tbody>
        <tr class="table-secondary">
          <td colspan="6"><em>Opening Balance</em></td>
          <td class="text-end"><strong>{{ opening_bal|floatformat:2 }}</strong></td>
        </tr>

        {% for row in ledger_rows %}
        <tr>
          <td>{{ row.date|date:'Y-m-d' }}</td>
          <td><small class="text-muted">{{ row.entry_no }}</small></td>
          <td>{{ row.narration }}</td>
          <td>{{ row.party }}</td>
          <td class="text-end">{% if row.debit %}{{ row.debit|floatformat:2 }}{% endif %}</td>
          <td class="text-end">{% if row.credit %}{{ row.credit|floatformat:2 }}{% endif %}</td>
          <td class="text-end"><strong>{{ row.balance|floatformat:2 }}</strong></td>
        </tr>
        {% empty %}
        <tr>
          <td colspan="7" class="text-center text-muted p-3">No transactions in selected period.</td>
        </tr>
        {% endfor %}

        <tr class="table-secondary">
          <td colspan="6"><strong>Closing Balance</strong></td>
          <td class="text-end"><strong>{{ closing_bal|floatformat:2 }}</strong></td>
        </tr>
      </tbody>
    </table>
  </div>

</div>
{% endblock %}