{% 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/general-ledger/" method="POST" autocomplete="off">
                                    {% csrf_token %}
                                    <div class="row align-items-center">
                                        <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 %}
{#                                                    <option value="business">Business Report</option>#}
                                                </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>
                                    </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">{{ bran.name }} General Ledger for the
                                period {{ start_date }} to {{ end_date }}</h4>
                        </div>
                        <div class="col-md-4">
                            <div class="button-list d-flex justify-content-end">
                                <a class="btn btn-primary btn-sm" href="/transactions/export-gl-pdf/"><i
                                        class="fa fa-file-pdf-o"></i> Export PDF</a>
                                <a href="/transactions/export-gl/" 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">
                    <form autocomplete="off">
                        <div class="input-field mb-3" style="width: 40%">
                            <input type="text" class="form-control" name="q" value="{{ request.GET.q }}"
                                   placeholder="Search Here..." id="search_gll">
                        </div>
                    </form>
                    <div id="table_search_results">
                        <table class="table dt-responsive nowrap w-100">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>Txn</th>
                                <th>Reference number</th>
                                <th>Date</th>
                                <th>Transaction</th>
                                <th>Ledger (Account)</th>
                                <th>Amount(debit)</th>
                                <th>Amount(Credit)</th>
                                <th>Description</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for gl in general_ledger %}
                                <tr>
                                    <td>{{ forloop.counter }}</td>
                                    <td>{{ gl.txno }}</td>
                                    <td>{{ gl.reference }}</td>


                                    <td>{{ gl.tx_date|date:"d/m/Y" }}</td>
                                    <td>{{ gl.transaction_type }}</td>
                                    <td>{{ gl.account_dr.member.member_names|default:gl.account_dr.name }}</td>
                                    <td>{{ gl.reporting_amount|intcomma }}</td>
                                    <td></td>
                                    <td>{{ gl.narration }}</td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td>{{ gl.txno }}</td>
                                    <td>{{ gl.reference }}</td>
                                    <td>{{ gl.tx_date|date:"d/m/Y" }}</td>
                                    <td>{{ gl.action }}</td>
                                    <td>{{ gl.account_cr.member.member_names|default:gl.account_cr.name }}</td>
                                    <td></td>
                                    <td>{{ gl.reporting_amount|intcomma }}</td>
                                    <td>{{ gl.narration }}</td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                        {% if general_ledger.has_other_pages %}
                            <nav aria-label="Page navigation example">
                                <ul class="pagination justify-content-end">
                                    {% if general_ledger.has_previous %}
                                        <li class="page-item active ml-1"><a class="page-link" href="?page=1">&laquo;
                                            first</a></li>
                                        <li class="page-item active ml-1"><a class="page-link"
                                                                             href="?page={{ general_ledger.previous_page_number }}">previous</a>
                                        </li>
                                    {% endif %}
                                    <li class="page-item ml-1">
                                    <span class="current page-item">
                                    Page {{ general_ledger.number }} of {{ general_ledger.paginator.num_pages }}.
                                </span></li>
                                    {% if general_ledger.has_next %}
                                        <li class="page-item active ml-1"><a class="page-link"
                                                                             href="?page={{ general_ledger.next_page_number }}">next</a>
                                        </li>
                                        <li class="page-item active ml-1"><a class="page-link"
                                                                             href="?page={{ general_ledger.paginator.num_pages }}">last
                                            &raquo;</a></li>
                                    {% endif %}
                                </ul>
                            </nav>
                            </div>
                        {% endif %}
                </div>
            </div>
        </div>
    </div>

{% endblock %}
{% block javascript %}
    <script>
        var request;

        $(function () {

            $('#search_gll').keyup(function () {
                var item = null;
                if (request) {
                    request.abort();
                }

                if ($('#search_gll').val()) {
                    item = $('#search_gll').val();
                } else {
                    item = null;
                }


                request = $.ajax({
                    type: "GET",
                    url: "{{request.path}}",
                    data: {
                        'q': item,
                        'csrfmiddlewaretoken': $("input[name=csrfmiddlewaretoken]").val()
                    },

                    success: searchSuccess,
                    dataType: 'html'
                });
            });
        });

        function searchSuccess(data, textStatus, jqXHR) {
            // $('#table_search_results').html(data)
            document.getElementById("table_search_results").innerHTML = data;
        }

    </script>
{% endblock %}