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

{% block title %}Investor Ledger{% endblock %}
{% block stylesheets %}

{% endblock %}
{% block heading %}Investor Ledger{% endblock %}

{% block content %}
<div class="card shadow mb-4">
  <div class="card-header py-3">
    <h6 class="m-0 font-weight-bold text-primary">Investor Ledger</h6>
  </div>
  <div class="card-body">

    <form method="get" class="form-inline mb-4 align-items-end">
      <div class="form-group mr-3">
        <label>Investor</label>
        <select name="investor" class="form-control ml-2">
          <option value="">All</option>
          {% for inv in investors %}
          <option value="{{ inv.t_id }}"
            {% if filters.investor == inv.t_id|stringformat:"s" %}selected{% endif %}>
            {{ inv.name }}
          </option>
          {% endfor %}
        </select>
      </div>

      <div class="form-group mr-3">
        <label>Date From</label>
        <input type="date" name="start_date" value="{{ filters.start_date }}"
               class="form-control ml-2">
      </div>
      <div class="form-group mr-3">
        <label>Date To</label>
        <input type="date" name="end_date" value="{{ filters.end_date }}"
               class="form-control ml-2">
      </div>

      <div class="form-group mr-3">
        <label>Type</label>
        <select name="subtype" class="form-control ml-2">
          <option value="">All</option>
          {% for key, code in t_cat.items %}
            {% comment %} Only keys beginning with "investor_" {% endcomment %}
            {% if key|slice:":9" == "investor_" %}
              <option value="{{ key }}"
                {% if filters.subtype == key %}selected{% endif %}>
                {{ key|cut:"investor_"|capfirst }}
              </option>
            {% endif %}
          {% endfor %}
        </select>
      </div>


      <button type="submit" class="btn btn-primary">Filter</button>
      <a href="{% url 'reports:investor_ledger' %}" class="btn btn-secondary ml-2">Reset</a>
    </form>

    <div class="table-responsive">
      <table id="ledgerTable" class="table table-bordered table-hover">
        <thead class="thead-light">
          <tr>
            <th>#</th>
            <th>Date</th>
            <th>Description</th>
            <th>Invoice #</th>
            <th class="text-right">Debit</th>
            <th class="text-right">Credit</th>
            <th class="text-right">Balance</th>
          </tr>
        </thead>
        <tbody>
          {% for row in ledger %}
          <tr>
            <td>{{ forloop.counter }}</td>
            <td>{{ row.date }}</td>
            <td>{{ row.desc }}</td>
            <td>{{ row.inv }}</td>
            <td class="text-right">{{ row.debit|floatformat:2 }}</td>
            <td class="text-right">{{ row.credit|floatformat:2 }}</td>
            <td class="text-right">{{ row.balance|floatformat:2 }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    <div class="text-right mt-3">
      <span class="badge badge-primary">Total Debit: {{ total_debit|floatformat:2 }}</span>
      <span class="badge badge-success">Total Credit: {{ total_credit|floatformat:2 }}</span>
      <span class="badge badge-info">Closing Bal: {{ grand_total|floatformat:2 }}</span>
    </div>

    <div class="mt-3">
    {% with request.GET.urlencode as qparams %}
      <a href="?{% if qparams %}{{ qparams }}&{% endif %}export_type=excel" …>Export Excel</a>
      <a href="?{% if qparams %}{{ qparams }}&{% endif %}export_type=pdf" …>Export PDF</a>
    {% endwith %}
    </div>

  </div>
</div>
{% endblock %}

{% block javascripts %}
<script src="{% static 'vendor/datatables/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'vendor/datatables/dataTables.bootstrap4.min.js' %}"></script>
<script>
$(function(){
  $('#ledgerTable').DataTable({ paging:false, searching:false, info:false });
});
</script>
{% endblock %}