{% extends 'extends/layout.html' %}
{% load static %}
{% load humanize %}
{% block content %}
    {% load mathfilters %}
    {% load humanize %}
    {% block scripts %}
        <script>
            document.getElementById('month').addEventListener('change', function () {
                document.getElementById('monthForm').submit();
            });
        </script>
    {% endblock %}
    <div class="row">
        {#        +++++++++++++++++++++++++++++++++ start ++++++++++++++++++++++++#}

        {#    ==================== end ================================#}
        <!-- Start col -->
        <div class="col-lg-12">
            <div class="card m-b-30">
                <div class="card-header">
                    <div class="button-list d-flex justify-content-end">
                    <a class="btn btn-dark btn-sm" href="{% url 'other_loans_report' %}"><i class='fa fa-refresh'></i> Clear</a>
                        <a href="{% url 'other_loans_report_excel' %}{% if request.GET.month is not None %}?month={{ request.GET.month }}{% endif %}" class="btn btn-success btn-sm"><i
                                class='fa fa-file-excel'></i> EXCEL</a>
                    </div>
                </div>
                <div class="card-body">
                    <form id="monthForm" method="get" action="{% url 'other_loans_report' %}"
                          class="form-inline justify-content-start">
                        <div class="form-row align-items-center">
                            <div class="col-auto">
                                <label for="month" class="mr-2">Select Year: {{ request.GET.month }}</label>
                                <select name="month" id="month" class="form-control" style="width: 50%">
                                    <option value="">Please select month</option>
                                    {% for month_id, month_name in months.items %}
                                        <option value="{{ month_id }}"
                                                {% if request.GET.month|add:'0' == month_id %}selected{% endif %}>{{ month_name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </form>

                    <div class="table-responsive">
                        <table class="table dt-responsive nowrap w-100">
                            <thead>
                            <tr>
                                <th>SN</th>
                                <th>Payment Date</th>
                                <th>Member</th>
                                <th>Account Number</th>
                                <th>Principal</th>
                                <th>Interest</th>
                                <th>Installment</th>
                                <th>Monthly Interest balance</th>
                                <th>Monthly Principle balance</th>
                                <th>Amount Paid</th>
                                <th>Monthly Schedule Balance</th>
                                <th>Details</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for loanapp in running_loans %}
                                <tr>
                                    <td>{{ forloop.counter }}.</td>
                                    <td>{{ loanapp.payment_date }}.</td>
                                    <td>{{ loanapp.applicant }}</td>
                                    <td>{{ loanapp.account }}</td>
                                    <td>{{ loanapp.principle|floatformat:'2'|intcomma }}</td>
                                    <td>{{ loanapp.interest|floatformat:'2'|intcomma }}</td>
                                    <td>{{ loanapp.installment|floatformat:'2'|intcomma }}</td>
                                    <td> {{ loanapp.interest_balance|floatformat:'2'|intcomma }}</td>
                                    <td>{{ loanapp.principle_balance|floatformat:'2'|intcomma }}</td>
                                    <td>{{ loanapp.paid|floatformat:'2'|intcomma }}</td>
                                    <td>{{ loanapp.schedule_balance|floatformat:'2'|intcomma }}</td>
                                    <td>
                                        <a href="{% url 'loan_details' loanapp.id %}" class="btn btn-success btn-sm"> <i
                                                class="fa fa-eye"></i> Details</a>
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                        <nav aria-label="Page navigation">
                            <ul class="pagination">
                                {% if running_loans.has_previous %}
                                    <li class="page-item">
                                        <a class="page-link"
                                           href="?page=1{% if request.GET.q is not None %}&q={{ request.GET.q }}{% endif %}{% if request.GET.officer is not None %}&officer={{ request.GET.officer }}{% endif %}"
                                           aria-label="Previous">
                                            <span aria-hidden="true">&laquo;</span>
                                            <span class="sr-only">begin</span>
                                        </a>
                                    </li>
                                {% endif %}
                                {% for n in running_loans.paginator.page_range %}
                                    {% if running_loans.number == n %}
                                        <li class="page-item active">
                                            <span class="page-link">{{ n }}<span class="sr-only">(current)</span></span>
                                        </li>
                                    {% elif n > running_loans.number|add:'-3' and n < running_loans.number|add:'3' %}
                                        <li class="page-item"><a class="page-link" href="?page=




                                                {{ n }}{% if request.GET.q is not None %}&q={{ request.GET.q }}{% endif %}{% if request.GET.officer is not None %}&officer={{ request.GET.officer }}{% endif %}">{{ n }}</a>
                                        </li>
                                    {% endif %}
                                {% endfor %}

                                {% if running_loans.has_next %}
                                    <li class="page-item">
                                        <a class="page-link" href="?page=




                                                {{ running_loans.paginator.num_pages }}{% if request.GET.q is not None %}&q={{ request.GET.q }}{% endif %}{% if request.GET.officer is not None %}&officer={{ request.GET.officer }}{% endif %}"
                                           aria-label="Next">
                                            <span aria-hidden="true">&raquo;</span>
                                            <span class="sr-only">end</span>
                                        </a>
                                    </li>
                                {% endif %}
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
        <!-- End col -->
    </div>
{% endblock %}