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

{% block title %}Trial Balance{% endblock %}
{% block stylesheets %}
  <link href="{% static 'vendor/datatables/dataTables.bootstrap4.min.css' %}" rel="stylesheet"/>
  <style>
    @media print { .no-print { display: none; } }
  </style>
{% endblock %}

{% block heading %}Trial Balance{% endblock %}

{% block content %}

<div class="no-print mb-3">
  <button onclick="window.print()" class="btn btn-outline-dark">Print</button>
</div>

<form method="get" class="form-inline mb-3 no-print">
  <label class="mr-2">From:</label>
  <input type="date" name="date_from" class="form-control mr-2" value="{{ date_from }}">
  <label class="mr-2">To:</label>
  <input type="date" name="date_to" class="form-control mr-2" value="{{ date_to }}">
  <button type="submit" class="btn btn-primary">Filter</button>
</form>

<div class="alert {% if tb.is_balanced %}alert-success{% else %}alert-danger{% endif %} no-print">
  {% if tb.is_balanced %}
    ✓ Trial Balance is balanced. Total Debit = Total Credit.
  {% else %}
    ⚠ Trial Balance is NOT balanced! Please review postings.
  {% endif %}
</div>

<table id="tbTable" class="table table-bordered table-hover text-nowrap">
  <thead class="thead-light">
    <tr>
      <th>Code</th>
      <th>Account Name</th>
      <th>Type</th>
      <th class="text-right">Opening Dr</th>
      <th class="text-right">Opening Cr</th>
      <th class="text-right">Period Dr</th>
      <th class="text-right">Period Cr</th>
      <th class="text-right">Closing Dr</th>
      <th class="text-right">Closing Cr</th>
    </tr>
  </thead>
  <tbody>
    {% for row in tb.rows %}
    <tr>
      <td>{{ row.account_code }}</td>
      <td>{{ row.account_name }}</td>
      <td>{{ row.account_type }}</td>
      <td class="text-right">{% if row.opening_dr %}{{ row.opening_dr|floatformat:2 }}{% endif %}</td>
      <td class="text-right">{% if row.opening_cr %}{{ row.opening_cr|floatformat:2 }}{% endif %}</td>
      <td class="text-right">{% if row.period_dr %}{{ row.period_dr|floatformat:2 }}{% endif %}</td>
      <td class="text-right">{% if row.period_cr %}{{ row.period_cr|floatformat:2 }}{% endif %}</td>
      <td class="text-right">{% if row.closing_dr %}{{ row.closing_dr|floatformat:2 }}{% endif %}</td>
      <td class="text-right">{% if row.closing_cr %}{{ row.closing_cr|floatformat:2 }}{% endif %}</td>
    </tr>
    {% empty %}
    <tr><td colspan="9" class="text-center text-muted">No data available.</td></tr>
    {% endfor %}
  </tbody>
  <tfoot>
    <tr class="font-weight-bold bg-light">
      <td colspan="7" class="text-right">Grand Total:</td>
      <td class="text-right">{{ tb.total_debit|floatformat:2 }}</td>
      <td class="text-right">{{ tb.total_credit|floatformat:2 }}</td>
    </tr>
  </tfoot>
</table>

{% endblock %}

{% block javascripts %}
<script>
  $(document).ready(function(){
    $('#tbTable').DataTable({
      pageLength: 100,
      ordering: false,
      paging: false,
      searching: false,
      info: false
    });
  });
</script>
{% endblock %}