{% extends 'pos/base.html' %}
{% block content %}
<div class="container-fluid">
 
  <!-- Header -->
  <div class="row mb-3">
    <div class="col">
      <h4>Chart of Accounts</h4>
      <span class="badge {% if gl_enabled %}bg-success{% else %}bg-danger{% endif %}">
        GL {{ gl_enabled|yesno:"Enabled,Disabled" }}
      </span>
    </div>
    <div class="col-auto">
      <a href="{% url 'gl:coa_add' %}" class="btn btn-primary btn-sm">+ Add Account</a>
      {% if not gl_enabled %}
      <form method="post" action="{% url 'gl:enable_gl' %}" class="d-inline">
        {% csrf_token %}<input type="hidden" name="action" value="enable">
        <button class="btn btn-success btn-sm">Enable GL</button>
      </form>
      {% endif %}
      {% if total_accounts == 0 %}
      <form method="post" action="{% url 'gl:seed_coa' %}" class="d-inline">
        {% csrf_token %}
        <button class="btn btn-warning btn-sm">Seed Default COA</button>
      </form>
      {% endif %}
    </div>
  </div>

<!-- Navigation -->
<ul class="nav nav-tabs mb-3" id="coaTabs">
  <li class="nav-item">
    <a class="nav-link active" href="#" onclick="switchTab('asset'); return false;">Assets</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#" onclick="switchTab('liability'); return false;">Liabilities</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#" onclick="switchTab('equity'); return false;">Equity</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#" onclick="switchTab('income'); return false;">Income</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#" onclick="switchTab('cogs'); return false;">COGS</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#" onclick="switchTab('expense'); return false;">Expenses</a>
  </li>
</ul>

<div class="tab-content">
  {% for type_key, type_accounts in groups.items %}
  <div id="pane-{{ type_key }}" 
       style="display: {% if type_key == 'asset' %}block{% else %}none{% endif %};">
    <table class="table table-sm table-hover">
      <thead class="table-dark">
        <tr>
          <th>Code</th><th>Name</th><th>Type</th>
          <th class="text-end">Balance</th><th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for acct in type_accounts %}
        <tr class="{% if acct.is_group %}fw-bold table-secondary{% endif %}">
          <td>{{ acct.code }}</td>
          <td>
            {% if acct.parent_id %}<span class="ms-3 text-muted">↳</span>{% endif %}
            {{ acct.name }}
          </td>
          <td><small class="text-muted">{{ acct.account_type }}</small></td>
          <td class="text-end">{{ acct.balance|floatformat:2 }}</td>
          <td>
            <a href="{% url 'gl:coa_ledger' acct.id %}" 
               class="btn btn-sm btn-outline-primary py-0">Ledger</a>
          </td>
        </tr>
        {% empty %}
        <tr><td colspan="5" class="text-center text-muted py-3">No accounts</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% endfor %}
</div>

</div>
{% endblock %}


{% block javascripts %}
<script>
function switchTab(key) {
    // Hide all panes
    document.querySelectorAll('[id^="pane-"]').forEach(function(el) {
        el.style.display = 'none';
    });
    // Remove active from all nav links
    document.querySelectorAll('#coaTabs .nav-link').forEach(function(el) {
        el.classList.remove('active');
    });
    // Show selected pane
    var pane = document.getElementById('pane-' + key);
    if (pane) pane.style.display = 'block';
    // Set active on clicked link
    event.target.classList.add('active');
}
</script>
{% endblock %}