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

{% block title %}Cash / Bank Accounts{% endblock %}
{% block stylesheets %}
  <link href="{% static 'vendor/datatables/dataTables.bootstrap4.min.css' %}" rel="stylesheet"/>
{% endblock %}

{% block heading %}Cash / Bank Accounts{% endblock %}

{% block content %}

<div class="mb-3">
  <a href="{% url 'coa:cashbank_add' %}" class="btn btn-primary">+ Add Account</a>
</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 cb_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="cbTable" class="table table-bordered table-hover text-nowrap">
  <thead class="thead-light">
    <tr>
      <th>Account Name</th>
      <th>Type</th>
      <th>Bank Name</th>
      <th>Account #</th>
      <th>Linked COA</th>
      <th>Current Balance</th>
      <th>Status</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    {% for cb in accounts %}
    <tr>
      <td>{{ cb.account_name }}</td>
      <td>{{ cb.get_account_type_display }}</td>
      <td>{{ cb.bank_name }}</td>
      <td>{{ cb.account_number }}</td>
      <td>{% if cb.linked_account %}{{ cb.linked_account.code }} — {{ cb.linked_account.name }}{% else %}—{% endif %}</td>
      <td>{{ cb.current_balance|floatformat:2 }}</td>
      <td>
        {% if cb.is_active %}
          <span class="badge badge-success">Active</span>
        {% else %}
          <span class="badge badge-secondary">Inactive</span>
        {% endif %}
      </td>
      <td>
        <a href="{% url 'coa:cashbank_book' cb.pk %}" class="btn btn-sm btn-info">Book</a>
        <a href="{% url 'coa:cashbank_edit' cb.pk %}" class="btn btn-sm btn-primary">Edit</a>
        <form method="post" action="{% url 'coa:cashbank_delete' cb.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(){
    $('#cbTable').DataTable({
      pageLength: 25,
      ordering: false
    });
  });
</script>
{% endblock %}