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

{% block title %}General Ledger{% 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 %}General Ledger{% endblock %}

{% block content %}

<form method="get" class="form-inline mb-3 no-print" id="glFilterForm">
  <label class="mr-2">Account:</label>
  <select name="account_id" id="id_account" class="form-control mr-2 select2-account" style="min-width: 300px;">
    {% if ledger %}<option value="{{ ledger.account.id }}" selected>{{ ledger.account.code }} — {{ ledger.account.name }}</option>{% endif %}
  </select>
  <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">Show Ledger</button>
  {% if ledger %}
  <button type="button" onclick="window.print()" class="btn btn-outline-dark ml-2">Print</button>
  {% endif %}
</form>

{% if ledger %}

<h5>{{ ledger.account.code }} — {{ ledger.account.name }} <small class="text-muted">({{ ledger.account.get_account_type_display }})</small></h5>

<div class="row mb-3">
  <div class="col-md-4">
    <div class="card border-left-success shadow-sm">
      <div class="card-body py-2">
        <div class="text-xs text-muted text-uppercase">Total Debit</div>
        <div class="h6 mb-0">{{ ledger.total_debit|floatformat:2 }}</div>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card border-left-danger shadow-sm">
      <div class="card-body py-2">
        <div class="text-xs text-muted text-uppercase">Total Credit</div>
        <div class="h6 mb-0">{{ ledger.total_credit|floatformat:2 }}</div>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card border-left-primary shadow-sm">
      <div class="card-body py-2">
        <div class="text-xs text-muted text-uppercase">Closing Balance</div>
        <div class="h6 mb-0">{{ ledger.closing_balance|floatformat:2 }} {{ ledger.closing_balance_type }}</div>
      </div>
    </div>
  </div>
</div>

<table id="glTable" class="table table-bordered table-hover text-nowrap">
  <thead class="thead-light">
    <tr>
      <th>Date</th>
      <th>Voucher No</th>
      <th>Type</th>
      <th>Party</th>
      <th>Description</th>
      <th class="text-right">Debit</th>
      <th class="text-right">Credit</th>
      <th class="text-right">Balance</th>
    </tr>
  </thead>
  <tbody>
    {% for line in ledger.lines %}
    <tr>
      <td>{{ line.date }}</td>
      <td>{{ line.voucher_no }}</td>
      <td>{{ line.voucher_type }}</td>
      <td>{{ line.party_name }}</td>
      <td>{{ line.description }}</td>
      <td class="text-right">{% if line.debit %}{{ line.debit|floatformat:2 }}{% endif %}</td>
      <td class="text-right">{% if line.credit %}{{ line.credit|floatformat:2 }}{% endif %}</td>
      <td class="text-right">{{ line.running_balance|floatformat:2 }} {{ line.balance_side }}</td>
    </tr>
    {% empty %}
    <tr>
      <td colspan="8" class="text-center text-muted">No transactions in this period.</td>
    </tr>
    {% endfor %}
  </tbody>
  <tfoot>
    <tr class="font-weight-bold bg-light">
      <td colspan="5" class="text-right">Totals:</td>
      <td class="text-right">{{ ledger.total_debit|floatformat:2 }}</td>
      <td class="text-right">{{ ledger.total_credit|floatformat:2 }}</td>
      <td class="text-right">{{ ledger.closing_balance|floatformat:2 }} {{ ledger.closing_balance_type }}</td>
    </tr>
  </tfoot>
</table>

{% else %}
<div class="alert alert-info">Select an account above to view its ledger.</div>
{% endif %}

{% endblock %}

{% block javascripts %}
<script>
$(document).ready(function(){
  $('.select2-account').select2({
    width: '100%',
    ajax: {
      url: "{% url 'coa:ajax_account_search' %}",
      dataType: 'json',
      delay: 250,
      data: function (params) { return { q: params.term, leaf_only: 1 }; },
      processResults: function (data) { return { results: data.results }; }
    },
    minimumInputLength: 0
  });

  {% if ledger %}
  $('#glTable').DataTable({
    pageLength: 50,
    ordering: false,
    paging: false,
    searching: false,
    info: false
  });
  {% endif %}
});
</script>
{% endblock %}