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

  <!-- Header -->
  <div class="row mb-3">
    <div class="col">
      <h4>Parties</h4>
      <p class="text-muted mb-0">Central registry of customers, vendors, debitors, investors, staff &amp; banks.</p>
    </div>
    <div class="col-auto">
      <a href="{% url 'gl:party_add' %}" class="btn btn-primary btn-sm">+ Add Party</a>
    </div>
  </div>

  <!-- Filter tabs -->
  <ul class="nav nav-pills mb-3">
    <li class="nav-item">
      <a class="nav-link {% if not current_type %}active{% endif %}" href="{% url 'gl:party_list' %}">All</a>
    </li>
    {% for pt in party_types %}
    <li class="nav-item">
      <a class="nav-link {% if current_type == pt %}active{% endif %}" href="?type={{ pt }}">
        {{ pt|title }}
      </a>
    </li>
    {% endfor %}
  </ul>

  <!-- Table -->
  <div class="table-responsive">
    <table class="table table-sm table-striped table-hover table-bordered">
      <thead class="table-light">
        <tr>
          <th>Code</th>
          <th>Name</th>
          <th>Type</th>
          <th>Mobile</th>
          <th>COA Account</th>
          <th class="text-end">GL Balance</th>
        </tr>
      </thead>
      <tbody>
        {% for p in parties %}
        <tr>
          <td><small class="text-muted">{{ p.party_code }}</small></td>
          <td><strong>{{ p.party_name }}</strong></td>
          <td>
            <span class="badge bg-info text-dark">{{ p.party_type|title }}</span>
          </td>
          <td>{{ p.mobile }}</td>
          <td>
            {% if p.coa_account_id %}
              {% for c in coa_accounts %}
                {% if c.id == p.coa_account_id %}{{ c.code }} — {{ c.name }}{% endif %}
              {% endfor %}
            {% else %}
              <span class="text-danger small">Not linked</span>
            {% endif %}
          </td>
          <td class="text-end">
            {% if p.gl_balance >= 0 %}
              <span class="text-success">{{ p.gl_balance|floatformat:2 }}</span>
            {% else %}
              <span class="text-danger">{{ p.gl_balance|floatformat:2 }}</span>
            {% endif %}
          </td>
        </tr>
        {% empty %}
        <tr>
          <td colspan="6" class="text-center text-muted p-4">No parties found.</td>
        </tr>
        {% endfor %}
      </tbody>
      <tfoot class="table-light">
        <tr>
          <td colspan="5"><strong>Total parties: {{ parties|length }}</strong></td>
          <td></td>
        </tr>
      </tfoot>
    </table>
  </div>

  <div class="alert alert-info small">
    <strong>Note:</strong> GL Balance is a positive Dr balance / negative Cr balance as per ledger.
    For a customer (A/R), positive means the customer owes us. For a vendor (A/P), negative means we owe the vendor.
  </div>

</div>
{% endblock %}