{% extends 'transactions/extends/layout.html' %}
{% load static %}
{% load humanize %}
{% block content %}
    {% block scripts %}
        <script>
            var global_state = {
                baseUrl: '{{ baseUrl }}',
                accTypesJson: '{{ accTypesJson|safe }}',
                transactionChargesJson: '{{ transactionChargesJson|safe }}'
            }
        </script>
    {% endblock %}
    <!-- start page title -->
    <div class="row p-0">
        <div class="col-md-12">
            <div class="card mt-2">
                <div class="card-header text-uppercase">
                    <div class="row align-content-between">
                        <div class="col-md-12">
                            <div class="page-title-right ">
                                <form action="/transactions/trial-balance/" method="POST">
                                    {% csrf_token %}
                                    <div class="row">
                                        <div class="col-md-2 form-group">
                                            <select class="form-control form-control-sm" name="report_for">
                                                {% for b in vbranches %}
                                                    <option value="{{ b.id }}">{{ b.name }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                        <div class="col-md-2 form-group">
                                            <select class="form-control form-control-sm" onchange="check_range(this.value)"
                                                    name="financial_year">
                                                {% for f in fy %}
                                                    <option value="{{ f.id }}">{{ f.name }}</option>
                                                {% endfor %}
                                                <option value="custom">Custom Date Range</option>
                                            </select>
                                        </div>
                                        <script>
                                            function check_range(val) {
                                                if (val == "custom") {
                                                    document.getElementById("date_from").style.display = "inline-block";
                                                    document.getElementById("date_to").style.display = "inline-block";
                                                } else {
                                                    document.getElementById("date_from").style.display = "none";
                                                    document.getElementById("date_to").style.display = "none";
                                                }
                                            }
                                        </script>

                                        <div class="col-md-2 form-group" id="date_from" style="display: none;">
                                            <input type="date" class="form-control form-control-sm" name="start_date">
                                        </div>
                                        <div class="col-md-2 form-group" id="date_to" style="display: none;">
                                            <input type="date" class="form-control form-control-sm" name="end_date">
                                        </div>
                                        <div class="col-md-2">
                                            <button class="btn btn-primary btn-sm"><i class="fa fa-filter"></i>
                                                Filter
                                            </button>
                                        </div>

                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end page title -->
         <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-md-8">
                                <h4 class="card-title">{{ user.staff.branch.name }} Trial Balance for the period {{ start_date }} to {{ end_date }}</h4>
                            </div>
                            <div class="col-md-4">
                                <div class="button-list d-flex justify-content-end">
                                    <form action="/transactions/pdf-tb/" method="post">
                                {% csrf_token %}
                                <input type="hidden" value="{{ start_date|date:'Y-m-d' }}" name="start_date">
                                    <input type="hidden" value="{{ end_date|date:'Y-m-d' }}" name="end_date">
                                    <button type="submit" class="btn btn-primary btn-sm"><i
                                        class="fa fa-file-pdf-o"></i> Export PDF</button>
                                </form>
{#                            <a href="/transactions/pdf-tb/" class="btn btn-primary btn-sm"><i class="fa fa-file-pdf-o"></i>#}
{#                                Export PDF</a>#}
                                <form action="/transactions/export-tb/" method="post">
                                    {% csrf_token %}
                                    <input type="hidden" value="{{ start_date|date:'Y-m-d' }}" name="start_date">
                                    <input type="hidden" value="{{ end_date|date:'Y-m-d' }}" name="end_date">
                                    <button type="submit" class="btn btn-success btn-sm"><i
                                        class="fa fa-file-excel-o"></i> Export Excel</button>
                                </form>
{#                            <a href="/transactions/export-tb/" class="btn btn-success btn-sm"><i#}
{#                                    class="fa fa-file-excel-o"></i> Export Excel</a>#}
                        </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                            <table class="table dt-responsive nowrap w-100">
                                <thead>
                                <tr>
                                    <td>GL Category</td>
                                    <td>TB Line</td>
                                    <th class="amounts">Amount DR</th>
                                    <th class="amounts">Amount CR</th>
                                    <th>Individual GL</th>

                                </tr>
                                </thead>
                                <tbody>
                                {% for ac in tb %}
                                    {% if ac.amount_cr == 0 and ac.amount_dr == 0 %}

                                    {% else %}
                                        {% if ac.is_negative %}
                                            <tr style="color: #FF0000; font-style: oblique;">
                                                {% else %}
                                            <tr>
                                        {% endif %}
                                    {% if ac.is_retained_earning %}
                                        <td>Reserves</td>
                                        <td>Retained Earnings</td>
                                        <td class="amounts">{{ ac.amount_dr|floatformat:2|intcomma }}</td>
                                        <td class="amounts">{{ ac.amount_cr|floatformat:2|intcomma }}</td>
                                        <td>
                                            {#                                                <form action="/transactions/individual-ledger/" method="POST" target="_blank">#}
                                            {#                                                    {% csrf_token %}#}
                                            {#                                                    <input type="hidden" value="{{ ac.account.id }}" name="id">#}
                                            {#                                                    <button type="submit" class="btn btn-primary">#}
                                            {#                                                        <i class="fa fa-file"></i>#}
                                            {#                                                    </button>#}
                                            {#                                                </form>#}

                                        </td>
                                    {% else %}
                                        {% if ac.is_members %}
                                            <td>Members</td>
                                            <td>Member Savings</td>
                                        {% else %}
                                            <td>{{ ac.account.category.name }}</td>
                                            <td>{{ ac.account.name }}</td>
                                        {% endif %}
                                        <td class="amounts">{{ ac.amount_dr|floatformat:2|intcomma }}</td>
                                        <td class="amounts">{{ ac.amount_cr|floatformat:2|intcomma }}</td>
                                        <td>
                                            {% if ac.is_members %}
                                                <form action="/transactions/individual-ledger/" method="POST"
                                                      target="_blank">
                                                    {% csrf_token %}
                                                    <input type="hidden" value="0" name="id">
                                                    <input type="hidden" value="{{ start_date|date:'Y-m-d' }}"
                                                           name="from">
                                                    <input type="hidden" value="{{ end_date|date:'Y-m-d' }}" name="to">
                                                    <button type="submit" class="btn btn-primary btn-sm btn-light"
                                                            style="color: blue">
                                                        <u>View GL</u>
                                                    </button>
                                                </form>
                                            {% else %}
                                                <form action="/transactions/individual-ledger/" method="POST"
                                                      target="_blank">
                                                    {% csrf_token %}
                                                    <input type="hidden" value="{{ ac.account.id }}" name="id">
                                                    <input type="hidden" value="{{ start_date|date:'Y-m-d' }}"
                                                           name="from">
                                                    <input type="hidden" value="{{ end_date|date:'Y-m-d' }}" name="to">
                                                    <button type="submit" class="btn btn-primary btn-sm btn-light"
                                                            style="color: blue">
                                                        <u>View GL</u>
                                                    </button>
                                                </form>
                                            {% endif %}
                                        </td>
                                    {% endif %}
                                    </tr>
                                    {% endif %}
                                {% endfor %}
                                </tbody>
                                <tfoot>
                                <tr>

                                    <th></th>
                                    <th><strong>TOTALS</strong></th>
                                    <th class="amounts"><strong>{{ total_dr|floatformat:2|intcomma }}</strong></th>
                                    <th class="amounts"><strong>{{ total_cr|floatformat:2|intcomma }}</strong></th>
                                    <th></th>

                                </tr>
                                </tfoot>
                            </table>
                    </div>
                </div>
            </div>
        </div>
{% endblock %}
{% block javascript %}

{% endblock %}