{% extends "base.html" %}
{% block title %}{{ t('Chart of Accounts') }}{% endblock %}
{% block content %}
<div class="page-head">
  <h1>{{ t('Chart of Accounts') }} <small>({{ rows|length }})</small></h1>
  <div class="actions">
    <input type="search" id="coa-search" placeholder="{{ t('Search…') }}" aria-label="{{ t('Search…') }}">
    {% if grouped %}<div class="seg" role="group">
      <button type="button" data-coa="expand">{{ t('Expand all') }}</button>
      <button type="button" data-coa="collapse">{{ t('Collapse all') }}</button></div>{% endif %}
    {% if editable %}
      <a class="btn ghost" href="{{ url_for('setup.form_view', model='accounts', group=1) }}">+ {{ t('New group') }}</a>
      <a class="btn" href="{{ url_for('setup.form_view', model='accounts') }}">+ {{ t('New account') }}</a>
    {% endif %}
  </div>
</div>
{% if ungrouped and editable and is_admin %}
<div class="card coa-hint">
  <div><b>{{ ungrouped }} {{ t('accounts are not in any group.') }}</b>
    <small class="muted">{{ t('Place them in the standard groups (Assets › Current Assets › Cash and Bank…) by their type. You can move any account afterwards; past entries are not changed.') }}</small></div>
  <form method="post" action="{{ url_for('setup.accounts_auto_group') }}" data-confirm="{{ t('Create the standard groups and place the ungrouped accounts in them?') }}">
    <button class="btn">{{ t('Group them automatically') }}</button></form>
</div>
{% endif %}
<div class="card flush">
  <table class="coa" id="coa">
    <thead><tr><th>{{ t('Account') }}</th><th>{{ t('Type') }}</th><th class="num">{{ t('Balance') }}{% if currency %} <small>({{ currency }})</small>{% endif %}</th>{% if editable %}<th></th>{% endif %}</tr></thead>
    <tbody>
    {% for a, depth in rows %}
      {% set v = total.get(a.id, 0) %}
      <tr class="{{ 'grp' if a.is_group }} {{ 'inactive' if not a.active }}" data-id="{{ a.id }}" data-parent="{{ a.parent_id or '' }}" data-depth="{{ depth }}" data-href="{{ url_for('setup.form_view', model='accounts', key=a.id) }}">
        <td style="padding-inline-start: {{ 14 + 22 * (depth - 1) }}px">
          {% if a.id in kids %}<button type="button" class="tw" aria-label="{{ t('Show or hide the accounts under it') }}" aria-expanded="true">▾</button>{% else %}<span class="tw-sp"></span>{% endif %}
          <span class="code">{{ a.code }}</span> {{ nm(a) }}
          {% if a.intercompany %}<span class="tag">{{ t('Inter-branch') }}</span>{% endif %}
          {% if not a.active %}<span class="tag">{{ t('Inactive') }}</span>{% endif %}
        </td>
        <td class="muted">{{ t('Group') if a.is_group else kinds.get(a.kind, a.kind) }}</td>
        <td class="num">{% if v %}{% if not a.is_group %}<a href="{{ url_for('reports.gl', account_id=a.id, date_from='0000-01-01') }}">{% endif %}{{ (v if v > 0 else -v)|money(currency) }} <small class="drcr">{{ t('Dr') if v > 0 else t('Cr') }}</small>{% if not a.is_group %}</a>{% endif %}{% endif %}</td>
        {% if editable %}<td class="num">{% if a.is_group %}<a class="btn ghost small" href="{{ url_for('setup.form_view', model='accounts', parent=a.id) }}" title="{{ t('Add an account under this group') }}">+</a>{% endif %}</td>{% endif %}
      </tr>
    {% else %}
      <tr><td class="empty" colspan="4">{{ t('Nothing yet.') }}</td></tr>
    {% endfor %}
    </tbody>
  </table>
  <div class="notes">{{ t('Group balances are the total of every account under them, as of today, for the branches in view. Dr = debit balance, Cr = credit balance.') }}</div>
</div>
<script>
(function () {
  const rows = [...document.querySelectorAll('#coa tbody tr[data-id]')];
  const byParent = {};
  rows.forEach(r => (byParent[r.dataset.parent] = byParent[r.dataset.parent] || []).push(r));
  function setOpen(row, open) {
    const b = row.querySelector('.tw');
    if (!b) return;
    b.textContent = open ? '▾' : '▸';
    b.setAttribute('aria-expanded', open);
    (function hide(id, show) {
      (byParent[id] || []).forEach(c => {
        c.hidden = !show;
        const cb = c.querySelector('.tw');
        hide(c.dataset.id, show && (!cb || cb.getAttribute('aria-expanded') === 'true'));
      });
    })(row.dataset.id, open);
  }
  document.getElementById('coa').addEventListener('click', e => {
    const b = e.target.closest('.tw');
    if (!b) return;
    e.stopPropagation();
    setOpen(b.closest('tr'), b.getAttribute('aria-expanded') !== 'true');
  }, true);
  document.querySelectorAll('[data-coa]').forEach(btn => btn.addEventListener('click', () => {
    const open = btn.dataset.coa === 'expand';
    rows.forEach(r => { const b = r.querySelector('.tw'); if (b) { b.textContent = open ? '▾' : '▸'; b.setAttribute('aria-expanded', open); } });
    rows.forEach(r => { r.hidden = !open && r.dataset.parent !== ''; });
  }));
  const search = document.getElementById('coa-search');
  const byId = Object.fromEntries(rows.map(r => [r.dataset.id, r]));
  search.addEventListener('input', () => {
    const s = search.value.trim().toLowerCase();
    if (!s) { rows.forEach(r => (r.hidden = false)); return; }
    rows.forEach(r => (r.hidden = true));
    rows.forEach(r => {
      if (!r.cells[0].textContent.toLowerCase().includes(s)) return;
      let x = r;
      while (x) { x.hidden = false; x = byId[x.dataset.parent]; }
    });
  });
})();
</script>
{% endblock %}