{% extends 'extends/layout.html' %}
{% load static %}
{% block content %}
    {% load humanize %}
    <div class="row">
        <!-- Start col -->
        <div class="col-lg-12">
            <div class="card m-b-30">
                <div class="card-header">
                    <div class="row justify-content-between">
                        <div class="col-md-8">
                            <form method="get" style="padding-bottom: 3px">
                                {% csrf_token %}
                                <div class="row">
                                    {% 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-md-3 form-group d-flex" id="date_from" style="min-height: 10px;align-items: center;">
                                        <div class="me-1">From: </div>
                                        <input type="date" class="form-control form-control-sm" name="start_date">
                                    </div>
                                    <div class="col-md-3 form-group d-flex" id="date_to" style="min-height: 10px;align-items: center;">
                                        <div class="me-1">To: </div>
                                        <input type="date" class="form-control form-control-sm" name="end_date">
                                    </div>
                                    <div class="col-md-3 form-group d-flex" id="date_to" style="min-height: 10px;align-items: center;">
                                        <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 all_staff %}
                                                <option value="{{ officer.id }}"
                                                        {% if selected_officer == officer.id %}selected{% endif %}>{{ officer.biodata.name }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>

                                    <div class="col-md-3">
                                        <button class="btn btn-primary btn-sm"><i class="fa fa-filter"></i>
                                            Filter
                                        </button>
                                        <a href="{% url 'loan_disbursement_report' %}"><button class="btn btn-secondary btn-sm" type="button"><i class="fa fa-filter"></i>
                                            Reset
                                        </button></a>
                                    </div>
                                    
                                </div>
                            </form>
                        </div>
                        <div class="col-md-4">
                            <div class="button-list d-flex justify-content-end">
                                <a href="{% url 'loan_disbursement_excel' %}?start_date={{start_date_str}}&end_date={{ end_date_str }}&officer={{ officer }}&business_filter={{ business_filter }}" class="btn btn-success btn-sm"><i
                                        class='fa fa-file-excel-o'></i>EXPORT EXCEL</a>
                            </div>
                        </div>
                        
                    </div>
                    {% if start_date_str is not None or end_date_str is not None  %}
                        <div class="row mt-2" style="display: flex;">
                            <span style="font-size: 20px;">
                                <span style="font-weight: bold;">Results</span>

                            {% if start_date_str %}
                                    <span style="font-weight: bold;">From {{start_date_str}}</span>
                            {% endif %}
                            {% if end_date_str %}
                                    <span style="font-weight: bold;">up to {{end_date_str}}</span>
                            {% endif %}
                            {% if officer_name %}
                                    <span style="font-weight: bold;">for {{officer_name}}</span>
                            {% endif %}
                            </span>
                        </div>
                    {% endif %}
                </div>

                <div class="col-lg-12 col-xl-12">
                    <!-- Start row -->
                    <div class="row d-flex justify-content-between m-2">
                        <!-- Start col -->
                        <div class="col-md-6">
                            <div class="card m-b-15 border border-dark">
                                <div class="card-body">
                                    
                                    <h5 class="text-muted fw-normal mt-0" title="Number of Members or Clients">Total Amount Disbursed</h5>
                                    <h4 class="mt-1 mb-1">{{ total_amt|intcomma }}</h4>
                                    
                                </div> <!-- end card-body-->
                            </div> <!-- end card-->
                        </div>

                        <div class="col-md-6">
                            <div class="card m-b-15 border border-dark">
                                <div class="card-body">
                                    
                                    <h5 class="text-muted fw-normal mt-0" title="Number of Members or Clients">Total loans given</h5>
                                    <h4 class="mt-1 mb-1">{{ total_count }}</h4>
                                    
                                </div> <!-- end card-body-->
                            </div> <!-- end card-->
                        </div>
                    </div>
                </div>





                <div class="card-body">
                    <div class="table-responsive">
                        <table  class="table dt-responsive nowrap w-100">
                            <thead>
                            <tr>
                                <th>SN</th>
                                <th>Member</th>
                                <th>Contact</th>
                                <th>Amount approved</th>
                                <th>Duration</th>
                                <th>Schedule start</th>
                                <th>Officer</th>
                                <th>Status</th>
                                {% if show_business_filters %}
                                    <th>Branch</th>
                                {% endif %}
                                <th>Action</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for loanapp in all_loans %}
                                <tr>
                                    <td>{{ forloop.counter }}.</td>
                                    <td>{{ loanapp.applicant.biodata.name }}</td>
                                    <td>{{ loanapp.applicant.biodata.contact| default_if_none:"N/A" }}</td>
                                    <td>{{ loanapp.amount_approved|intcomma }}</td>
                                    <td>{{ loanapp.approved_duration }} {{loanapp.interval_display}}</td>
                                    <td>{{ loanapp.schedule_start }}</td>
                                    <td>{{ loanapp.officer.biodata.name }}</td>
                                    <td>{{ loanapp.get_loan_status_display }}</td>
                                    {% if show_business_filters %}
                                        <td>{{ loanapp.branch.name }}</td>
                                    {% endif %}
                                    <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>
                    </div>
                    {% if all_loans.has_other_pages %}
                        <div class="row mt-3">
                            <div class="col-md-6">
                                <nav aria-label="Page navigation">
                                    <ul class="pagination mb-0">
                                        {% if all_loans.has_previous %}
                                            <li class="page-item">
                                                <a class="page-link"
                                                   href="?page={{ all_loans.previous_page_number }}&start_date={{start_date_str}}&end_date={{ end_date_str }}&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 all_loans.paginator.page_range %}
                                            {% if all_loans.number == num %}
                                                <li class="page-item active">
                                    <span class="page-link">
                                        {{ num }}
                                        <span class="sr-only">(current)</span>
                                    </span>
                                                </li>
                                            {% elif num > all_loans.number|add:'-3' and num < all_loans.number|add:'3' %}
                                                <li class="page-item">
                                                    <a class="page-link"
                                                       href="?page={{ num }}&start_date={{start_date_str}}&end_date={{ end_date_str }}&officer={{ officer }}&business_filter={{ business_filter }}">{{ num }}</a>
                                                </li>
                                            {% endif %}
                                        {% endfor %}

                                        {% if all_loans.has_next %}
                                            <li class="page-item">
                                                <a class="page-link"
                                                   href="?page={{ all_loans.next_page_number }}&start_date={{start_date_str}}&end_date={{ end_date_str }}&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 {{ all_loans.number }} of {{ all_loans.paginator.num_pages }}
                                </p>
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        <!-- End col -->
    </div>
{% endblock %}