{% extends "pos/base.html" %}
{% load static %}

{% block title %}Chart of Accounts{% endblock %}
{% block stylesheets %}
  <link href="{% static 'vendor/datatables/dataTables.bootstrap4.min.css' %}" rel="stylesheet"/>
  <style>
    .coa-indent-0 { padding-left: 0px; font-weight: 700; }
    .coa-indent-1 { padding-left: 20px; font-weight: 600; }
    .coa-indent-2 { padding-left: 40px; }
    .coa-indent-3 { padding-left: 60px; }
    .badge-group { background: #e3e6f0; color: #4e555b; }
  </style>
{% endblock %}

{% block heading %}Chart of Accounts{% endblock %}

{% block content %}

<div class="mb-3">
  <a href="{% url 'coa:account_add' %}" class="btn btn-primary">+ Add Account</a>
  <form method="post" action="{% url 'coa:seed_coa' %}" class="d-inline-block">
    {% csrf_token %}
    <button type="submit" class="btn btn-secondary">Load Default COA</button>
  </form>
</div>

<form method="get" class="form-inline mb-3">
  <label class="mr-2">Type:</label>
  <select name="type" class="form-control mr-2">
    <option value="">All</option>
    {% for val, label in account_types %}
      <option value="{{ val }}" {% if val == type_filter %}selected{% endif %}>{{ label }}</option>
    {% endfor %}
  </select>
  <div class="form-check mr-2">
    <input type="checkbox" name="show_inactive" class="form-check-input" id="show_inactive"
           value="1" {% if show_inactive %}checked{% endif %}>
    <label class="form-check-label" for="show_inactive">Show Inactive</label>
  </div>
  <button type="submit" class="btn btn-primary">Filter</button>
</form>

<table id="coaTable" class="table table-bordered table-hover text-nowrap">
  <thead class="thead-light">
    <tr>
      <th>Code</th>
      <th>Account Name</th>
      <th>Type</th>
      <th>Group?</th>
      <th>Opening Balance</th>
      <th>Current Balance</th>
      <th>Status</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    {% for acct in accounts %}
    <tr>
      <td>{{ acct.code }}</td>
      <td>
        <span class="coa-indent-{{ acct.code|length|add:"-4" }}">
          {{ acct.name }}
          {% if acct.is_group %}<span class="badge badge-group">Group</span>{% endif %}
        </span>
      </td>
      <td>{{ acct.get_account_type_display }}</td>
      <td>{% if acct.is_group %}Yes{% else %}No{% endif %}</td>
      <td>{{ acct.opening_balance|floatformat:2 }} {{ acct.opening_balance_type }}</td>
      <td>
        {% if not acct.is_group %}
          {{ acct.current_balance|floatformat:2 }}
        {% else %}
          —
        {% endif %}
      </td>
      <td>
        {% if acct.is_active %}
          <span class="badge badge-success">Active</span>
        {% else %}
          <span class="badge badge-secondary">Inactive</span>
        {% endif %}
      </td>
      <td>
        <a href="{% url 'coa:account_edit' acct.pk %}" class="btn btn-sm btn-primary">Edit</a>
        <form method="post" action="{% url 'coa:account_delete' acct.pk %}" style="display:inline;">
          {% csrf_token %}
          <button type="submit" class="btn btn-sm btn-danger"
                  onclick="return confirm('Delete this account?');">Delete</button>
        </form>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>

{% endblock %}

{% block javascripts %}
<script>
  $(document).ready(function(){
    $('#coaTable').DataTable({
      pageLength: 50,
      ordering: false
    });
  });
</script>
{% endblock %}