{% 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">
                            <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.applicant_id }}"
                                                {% if request.GET.member == member.applicant_id %}selected{% endif %}>
                                            {{ member.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 request.GET.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 class="row">

                    <!-- EXPORT MEMBER TO EXCEL --->
                    <div class="col-md-12">
                        <div class="button-list d-flex justify-content-end">
                            
                        </div>
                    </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">
                                <table id="basic-datatable" class="table dt-responsive nowrap w-100">
                                    <thead>
                                    <tr>
                                        <th>SN</th>
                                        <th>CLIENT</th>
                                        <th>OFFICER IN CHARGE</th>
                                        <th>PAYMENT DATE</th>
                                        <th>OVERDUE</th>
                                        <th>EXPECTED AMOUNT (UGX)</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% for loan in loans_summary %}
                                        <tr>
                                            <td>{{ forloop.counter }}</td>
                                            <td>{{ loan.client }}</td>
                                            <td>{{ loan.officer }}</td>
                                            <td>{{ loan.payment_date }}</td>
                                            <td>{{ loan.overdue_days }} day{{ loan.overdue_days|pluralize:'s' }}</td>
                                            <td>{{ loan.amount_outstanding|floatformat:2|intcomma }}</td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            <div class="tab-pane fade show " id="ind_summ" role="tabpanel" aria-labelledby="ind-tab">
                                <table class="table dt-responsive nowrap w-100">
                                    <thead>
                                    <tr>
                                        <th>SN</th>
                                        <th>CLIENT</th>
                                        <th>AMOUNT (UGX)</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% for client in clients %}
                                        <tr>
                                            <td>{{ forloop.counter }}</td>
                                            <td>{{ client.client }}</td>
                                            <td>{{ client.amount_outstanding|floatformat:2|intcomma }}</td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </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)</th>
                                        <th>TOTAL AMOUNT (UGX)</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% for loan in aging_summary %}
                                        <tr>
                                            <td>{{ forloop.counter }}</td>
                                            <td>{{ loan.aging }}</td>
                                            <td>{{ loan.total_amount|floatformat:2|intcomma }}</td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>

                        </div>

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