{% extends 'extends/layout.html' %}
{% load static %}
{% load humanize %}
{% block content %}
    {% block styles %}
    {% endblock %}
    {% block scripts %}
        <script src="{% static 'sacco/assets/custom_js/custom_sms_center.js' %}"></script>
    {% endblock %}
    <div class="col-lg-12">
        <div class="card m-b-30">
            <div class="card-header">
                <div class="row">
                    <div class="col-md-12">
                        <form class="row g-3 justify-content-start" method="get">
                            {% if show_business_filters %}
                            <div class="col-md-2 form-group" >
                                <select class="form-control form-control-sm" name="business_filter" id="business_filter">
                                    <option value="" >Select branch</option>
                                    <option value="all_branches" {% if business_filter == 'all_branches' %}selected{% endif %}>All branches</option>

                                    {% for branch in businesses_list_filter %}
                                        <option value="{{ branch.business.id }}" {% if business_filter == branch.business.id|stringformat:"s" %}selected{% endif %}>{{ branch.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            {% endif %}
                            <div class="col-auto" style="width: 33%">
                                <label for="member" class="visually-hidden">Search Member</label>

                                <select class="form-control select2" id="member" data-toggle="select2"
                                        name="member">
                                    <option value="">Select Member</option>
                                    {% for member in members %}
                                        <option value="{{ member.id }}"
                                                {% if selected_member == member.id %}selected{% endif %}>
                                            {{ member.biodata.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-auto" style="width: 33%">
                                <label for="officer" class="visually-hidden">Search Loan officer</label>
                                <select class="form-control select2" id="officer" data-toggle="select2"
                                        name="officer">
                                    <option value="">Select Officer</option>
                                    {% for officer in officers %}
                                        <option value="{{ officer.id }}"
                                                {% if selected_officer == officer.id %}selected{% endif %}>{{ officer.biodata.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-auto">
                                <button type="submit" class="btn btn-primary mb-3">Filter</button>
                            </div>
                            <div class="col-auto">
                                <button onclick="location.href='{% url 'loan_aging_report' %}'" type="button"
                                        class="btn btn-secondary mb-3" >Clear Filter
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
                
            </div>

            <div class="card-body">
                <div class="row">
                    <div class="col-md-12">

                        <ul class="nav nav-tabs" id="myTab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab"
                                   aria-controls="home" aria-selected="true">Overdue payments</a>
                            </li>
                            <li class="nav-item" role="presentation">
                                <a class="nav-link" id="home-tab" data-bs-toggle="tab" href="#ind_summ" role="tab"
                                   aria-controls="ind_summ" aria-selected="true">Individual Arrears</a>
                            </li>
                            <li class="nav-item" role="presentation">
                                <a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#summary" role="tab"
                                   aria-controls="profile" aria-selected="false">Summary</a>
                            </li>
                        </ul>

                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                                <div class="row mb-2 mt-2">

                                    <!-- EXPORT MEMBER TO EXCEL --->
                                    <div class="col-md-12">
                                        <div class="button-list d-flex justify-content-end">
                                            <button type="button" class="btn btn-blue btn-outline-success btn-sm"
                                                    onclick="location.href='{% url 'loan_aging_report_excel_v2' %}?member={{ selected_member }}&officer={{ selected_officer }}&business_filter={{ business_filter }}&report=overdue_payments'">
                                                <i class="fa-regular fa-file-excel"></i> Export Overdue Payments
                                            </button>
                                        </div>
                                    </div>
                                </div>


                                <table  class="table dt-responsive nowrap w-100">
                                    <thead>
                                    <tr>
                                        <th>SN</th>
                                        <th>CLIENT</th>
                                        <th>CLIENT CONTACT</th>
                                        <th>OFFICER IN CHARGE</th>
                                        <th>PAYMENT DATE</th>
                                        <th>OVERDUE</th>
                                        <th>EXPECTED AMOUNT (UGX)</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    
                                    {% for row in the_data.df_overdue_payments %}

                                            <tr>
                                                <td>{{ forloop.counter }}</td>
                                                <td>{{ row.name }}</td>
                                                <td>{{ row.contact }}</td>
                                                <td>{{ row.loan_officer_names}}</td>

                                                <td>{{ row.payment_date }}</td>
                                                <td>{{ row.days_overdue }} day{{ row.days_overdue|pluralize:'s' }}</td>
                                                <td>{{ row.expected_amount|floatformat:2|intcomma }}</td>
                                            </tr>

                                    {% endfor %}
                                    </tbody>
                                </table>
                                {% if the_data.df_overdue_payments.has_other_pages %}
                                    <div class="row mt-3">
                                        <div class="col-md-6">
                                            <nav aria-label="Page navigation">
                                                <ul class="pagination mb-0">
                                                    {% if the_data.df_overdue_payments.has_previous %}
                                                        <li class="page-item">
                                                            <a class="page-link"
                                                               href="?page={{ the_data.df_overdue_payments.previous_page_number }}&the_active_tab=home&member={{ member }}&officer={{ officer }}&business_filter={{ business_filter }}"
                                                               aria-label="Previous">
                                                                <span aria-hidden="true">&laquo;</span>
                                                            </a>
                                                        </li>
                                                    {% else %}
                                                        <li class="page-item disabled">
                                                            <span class="page-link" aria-hidden="true">&laquo;</span>
                                                        </li>
                                                    {% endif %}

                                                    {% for num in the_data.df_overdue_payments.paginator.page_range %}
                                                        {% if the_data.df_overdue_payments.number == num %}
                                                            <li class="page-item active">
                                                <span class="page-link">
                                                    {{ num }}
                                                    <span class="sr-only">(current)</span>
                                                </span>
                                                            </li>
                                                        {% elif num > the_data.df_overdue_payments.number|add:'-3' and num < the_data.df_overdue_payments.number|add:'3' %}
                                                            <li class="page-item">
                                                                <a class="page-link"
                                                                   href="?page={{ num }}&the_active_tab=home&member={{ member }}&officer={{ officer }}&business_filter={{ business_filter }}">{{ num }}</a>
                                                            </li>
                                                        {% endif %}
                                                    {% endfor %}

                                                    {% if the_data.df_overdue_payments.has_next %}
                                                        <li class="page-item">
                                                            <a class="page-link"
                                                               href="?page={{ the_data.df_overdue_payments.next_page_number }}&the_active_tab=home&member={{ member }}&officer={{ officer }}&business_filter={{ business_filter }}"
                                                               aria-label="Next">
                                                                <span aria-hidden="true">&raquo;</span>
                                                            </a>
                                                        </li>
                                                    {% else %}
                                                        <li class="page-item disabled">
                                                            <span class="page-link" aria-hidden="true">&raquo;</span>
                                                        </li>
                                                    {% endif %}
                                                </ul>
                                            </nav>
                                        </div>
                                        <div class="col-md-6 text-md-right mt-3 mt-md-0">
                                            <p class="text-muted mb-0">
                                                Page {{ the_data.df_overdue_payments.number }} of {{ the_data.df_overdue_payments.paginator.num_pages }}
                                            </p>
                                        </div>
                                    </div>
                                {% endif %}
                            </div>
                            <div class="tab-pane fade show " id="ind_summ" role="tabpanel" aria-labelledby="ind-tab">

                                <div class="row mb-2 mt-2">

                                    <!-- EXPORT MEMBER TO EXCEL --->
                                    <div class="col-md-12">
                                        <div class="button-list d-flex justify-content-end">
                                            <button type="button" class="btn btn-blue btn-outline-success btn-sm"
                                                    onclick="location.href='{% url 'loan_aging_report_excel_v2' %}?member={{ selected_member }}&officer={{ selected_officer }}&business_filter={{ business_filter }}&report=individual_arrears'">
                                                <i class="fa-regular fa-file-excel"></i> Export individual arrears
                                            </button>
                                        </div>
                                    </div>
                                </div>



                                <table class="table dt-responsive nowrap w-100">
                                    <thead>
                                    <tr>
                                        <th>SN</th>
                                        <th>CLIENT</th>
                                        <th>CLIENT CONTACT</th>
                                        <th>AMOUNT (UGX)</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% for row in the_data.df_individual_arrears %}
                                        <tr>
                                            <td>{{ forloop.counter }}</td>
                                            <td>{{ row.name }}</td>
                                            <td>{{ row.contact }}</td>
                                            <td>{{ row.amount_due|floatformat:2|intcomma }}</td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                                {% if the_data.df_individual_arrears.has_other_pages %}
                                    <div class="row mt-3">
                                        <div class="col-md-6">
                                            <nav aria-label="Page navigation">
                                                <ul class="pagination mb-0">
                                                    {% if the_data.df_individual_arrears.has_previous %}
                                                        <li class="page-item">
                                                            <a class="page-link"
                                                               href="?page={{ the_data.df_individual_arrears.previous_page_number }}&the_active_tab=ind_summ&member={{ member }}&officer={{ officer }}&business_filter={{ business_filter }}"
                                                               aria-label="Previous">
                                                                <span aria-hidden="true">&laquo;</span>
                                                            </a>
                                                        </li>
                                                    {% else %}
                                                        <li class="page-item disabled">
                                                            <span class="page-link" aria-hidden="true">&laquo;</span>
                                                        </li>
                                                    {% endif %}

                                                    {% for num in the_data.df_individual_arrears.paginator.page_range %}
                                                        {% if the_data.df_individual_arrears.number == num %}
                                                            <li class="page-item active">
                                                <span class="page-link">
                                                    {{ num }}
                                                    <span class="sr-only">(current)</span>
                                                </span>
                                                            </li>
                                                        {% elif num > the_data.df_individual_arrears.number|add:'-3' and num < the_data.df_individual_arrears.number|add:'3' %}
                                                            <li class="page-item">
                                                                <a class="page-link"
                                                                   href="?page={{ num }}&the_active_tab=ind_summ&member={{ member }}&officer={{ officer }}&business_filter={{ business_filter }}">{{ num }}</a>
                                                            </li>
                                                        {% endif %}
                                                    {% endfor %}

                                                    {% if the_data.df_individual_arrears.has_next %}
                                                        <li class="page-item">
                                                            <a class="page-link"
                                                               href="?page={{ the_data.df_individual_arrears.next_page_number }}&the_active_tab=ind_summ&member={{ member }}&officer={{ officer }}&business_filter={{ business_filter }}"
                                                               aria-label="Next">
                                                                <span aria-hidden="true">&raquo;</span>
                                                            </a>
                                                        </li>
                                                    {% else %}
                                                        <li class="page-item disabled">
                                                            <span class="page-link" aria-hidden="true">&raquo;</span>
                                                        </li>
                                                    {% endif %}
                                                </ul>
                                            </nav>
                                        </div>
                                        <div class="col-md-6 text-md-right mt-3 mt-md-0">
                                            <p class="text-muted mb-0">
                                                Page {{ the_data.df_individual_arrears.number }} of {{ the_data.df_individual_arrears.paginator.num_pages }}
                                            </p>
                                        </div>
                                    </div>
                                {% endif %}
                            </div>
                            <div class="tab-pane fade" id="summary" role="tabpanel" aria-labelledby="profile-tab">
                                <table class="table dt-responsive nowrap w-100">
                                    <thead>
                                    <tr>
                                        <th>SN</th>
                                        <th>AGING (DAYS) (since missed date)</th>
                                        <th>TOTAL AMOUNT (UGX) (Amount in arrears)</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    
                                    <tr>
                                        <td>1</td>
                                        <td>0-30</td>
                                        <td>{{ the_data.all_loans.the_0_30|floatformat:2|intcomma }}</td>
                                    </tr>

                                    <tr>
                                        <td>2</td>
                                        <td>31-60</td>
                                        <td>{{ the_data.all_loans.the_31_60|floatformat:2|intcomma }}</td>
                                    </tr>

                                    <tr>
                                        <td>3</td>
                                        <td>61-90</td>
                                        <td>{{ the_data.all_loans.the_61_90|floatformat:2|intcomma }}</td>
                                    </tr>
                                    <tr>
                                        <td>4</td>
                                        <td>90 and above</td>
                                        <td>{{ the_data.all_loans.the_90_|floatformat:2|intcomma }}</td>
                                    </tr>
                                    
                                    </tbody>
                                </table>
                            </div>

                        </div>

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