{% extends 'extends/layout.html' %}
{% load static %}

{% block content %}
    {% load mathfilters %}
    {% load humanize %}
    {% load countries %}
    {% block scripts %}
        <script>
            function noneGuarantor(val) {
                if (val == 1) {
                    document.getElementById('isaccount').style.display = "block"
                    document.getElementById('gname').style.display = "none"
                    document.getElementById('ggender').style.display = "none"
                    document.getElementById('gdob').style.display = "none"
                    document.getElementById('gcontact').style.display = "none"
                    document.getElementById('gcontact2').style.display = "none"
                    document.getElementById('gemail').style.display = "none"
                    document.getElementById('gnin').style.display = "none"
                    document.getElementById('gmarital').style.display = "none"
                    document.getElementById('gnationality').style.display = "none"
                    document.getElementById('gaddress').style.display = "none"

                    document.getElementById('g-name').required = false
                    document.getElementById('g-gender').required = false
                    document.getElementById('g-dob').required = false
                    document.getElementById('g-contact').required = false
                    document.getElementById('g-contact2').required = false
                    document.getElementById('g-email').required = false
                    document.getElementById('g-nin').required = false
                    document.getElementById('g-marital').required = false
                    document.getElementById('g-nationality').required = false
                    document.getElementById('g-address').required = false
                    document.getElementById('g-account').required = true
                } else {
                    document.getElementById('isaccount').style.display = "none"
                    document.getElementById('gname').style.display = "block"
                    document.getElementById('ggender').style.display = "block"
                    document.getElementById('gdob').style.display = "block"
                    document.getElementById('gcontact').style.display = "block"
                    document.getElementById('gcontact2').style.display = "block"
                    document.getElementById('gemail').style.display = "block"
                    document.getElementById('gnin').style.display = "block"
                    document.getElementById('gmarital').style.display = "block"
                    document.getElementById('gnationality').style.display = "block"
                    document.getElementById('gaddress').style.display = "block"

                    document.getElementById('g-name').required = true
                    document.getElementById('g-gender').required = true
                    document.getElementById('g-dob').required = false
                    document.getElementById('g-contact').required = true
                    document.getElementById('g-contact2').required = false
                    document.getElementById('g-email').required = false
                    document.getElementById('g-nin').required = false
                    document.getElementById('g-marital').required = true
                    document.getElementById('g-nationality').required = true
                    document.getElementById('g-address').required = true
                    document.getElementById('g-account').required = false
                }
            }

            function printDetails() {
                const printContents = document.getElementById('printloan').innerHTML;
                const originalContents = document.body.innerHTML;
                document.body.innerHTML = printContents;
                window.print();
                document.body.innerHTML = originalContents;
                location.reload();
            }

            function aapproved(val) {
                var todayDate = new Date().toISOString().slice(0, 10);
                //todayDate=todayDate.toLocaleDateString('en-CA')
                if (val == 1) {
                    document.getElementById('amount_approved').style.display = 'block'
                    document.getElementById('approved_date').style.display = 'block'
                    document.getElementById('approved_rate').style.display = 'block'
                    document.getElementById('approved_duration').style.display = 'block'
                } else {
                    document.getElementById('amount_approved').style.display = 'none'
                    document.getElementById('approved_rate').style.display = 'none'
                    document.getElementById('approved_date').style.display = 'none'
                    document.getElementById('approved_duration').style.display = 'none'
                }
            }

            function getnewamount(valu) {
                var ramount = parseFloat(valu.replace(/,/g, ''));
                var rbalance = "{{ principalbal }}"
                var neamount = parseInt(ramount) + parseInt(rbalance);
                //alert(neamount)
                document.getElementById('newloan').value = neamount
            }

            const showEditDurationModal = (id, period, current_number) => {
                $('#durationModal').modal('show')
                document.querySelector('#current_duration').value = current_number
                document.querySelector('#current_schedules').value = period
            }

            const showEditLoanOfficerModal = (id) => {
                $('#editLoanOfficerModal').modal('show')
                document.querySelector('#new_loan_officer').value = id
            }

            const handleChangeNewLoanOfficer = () =>{
                // console.log('Disabling the btn')
                document.querySelector('#update_loan_officer_submit').disabled = false
            }
        </script>
    {% endblock %}
    {% load countries %}
    {% get_countries as countries %}
    <div class="row">
        <div class="modal amountModal" tabindex="-1" role="dialog"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleLargeModalLabel">Amount Approved
                        </h5>
                        <button type="button" class="btn-close"
                                data-bs-dismiss="modal" aria-label="Close">
                        </button>
                    </div>
                    <div class="modal-body">
                        <form method="post" action="{% url 'edit_running_loans' detail.id %}">
                            {% csrf_token %}
                            <div class="row">
                                <div class="mb-2 col-md-12">
                                    <label class="form-label" for="approved_amount">Payment
                                        Amount</label>

                                    <input type="text" data-type="currency"
                                           class="form-control"
                                           id="approved_amount" name="amount" placeholder="amount"
                                           value="{{ detail.amount_approved|intcomma }}"
                                           required>

                                </div>


                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-warning"
                                        data-bs-dismiss="modal">Close
                                </button>
                                <button type="submit" class="btn btn-primary"
                                        id="paybtn"
                                        onclick="checksubmitted()">Continue
                                </button>
                            </div>
                        </form>
                    </div>
                    <script>
                        function checksubmitted() {

                            var easmount = document.getElementById('pamount{{ forloop.counter }}').value;
                            var ramount = parseFloat(easmount.replace(/,/g, ''));
                            var rbalance = "{{ generalbalance }}"

                            var prinncipal = document.getElementById('principalamount{{ forloop.counter }}').value
                            if (parseFloat(ramount) > parseFloat(rbalance)) {
                                document.getElementById('balancerror').innerHTML = 'Amount is greater than current balance'
                                document.getElementById('balancerror').style.display = 'block'
                                document.getElementById('balancerror').style.color = 'red'
                                document.getElementById('paybtn').disabled = true
                            } else {
                                return false
                            }
                        }
                    </script>
                </div>
            </div>
        </div>
        <div class="modal" tabindex="-1"
             role="dialog" aria-hidden="true" id="durationModal">
            <div class="modal-dialog ">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title"
                            id="exampleLargeModalLabel">Edit loan duration</h5>
                        <button type="button" class="btn-close"
                                data-bs-dismiss="modal"
                                aria-label="Close">
                        </button>
                    </div>
                    <div class="modal-body">
                        <form method="post" enctype="multipart/form-data"
                              action="{% url 'change_loan_duration' real_loan_details.id %}">
                            {% csrf_token %}
                            <div style="display: flex;width:100%;min-height: 10px;align-items: center">
                                <input type="number"
                                       class="form-control border border-primary"
                                       name="current_duration"
                                       id="current_duration"
                                       placeholder="Enter the duration"
                                       required
                                />
                                <div class="ms-2">
                                    <input type="text"
                                           class="form-control border border-primary"
                                           name="schedules"
                                           placeholder="Enter schedules"
                                           id="current_schedules"
                                           disabled
                                    />
                                </div>

                            </div>
                            <div class="mt-2">
                                <span style="color: gray;font-size: 13px">
                                    <span style="font-weight: bold">Note: </span>
                                    <span>Ensure to get the exact duration number basing on loan term that is displayed eg Days, Months etc.
                                        For example if new duration is 1 year but loan term displayed is in days, the duration that is to be
                                        submitted is 365.
                                    </span>
                                </span>
                            </div>

                            <div class="mt-2" style="display: flex;width:100%;justify-content: flex-end">
                                <button class="btn btn-primary" type="submit"
                                >Update
                                </button>
                            </div>

                        </form>


                    </div>
                </div>
            </div>
        </div>

        <!-- --------- edit loan officer ------------------ -->
        <div class="modal" tabindex="-1"
             role="dialog" aria-hidden="true" id="editLoanOfficerModal">
            <div class="modal-dialog ">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title"
                            id="exampleLargeModalLabel">Update loan officer</h5>
                        <button type="button" class="btn-close"
                                data-bs-dismiss="modal"
                                aria-label="Close">
                        </button>
                    </div>
                    <div class="modal-body">
                        <form method="post" enctype="multipart/form-data"
                              action="{% url 'update_loan_officer' real_loan_details.id %}">
                            {% csrf_token %}
                            <div class="mb-2 col-12">
                                <label class="form-label" for="loan_type">Staff (Loan officer)</label>
                                    <select class="form-control"  name="new_loan_officer" id="new_loan_officer" onchange="handleChangeNewLoanOfficer()" required>
                                        <option value="" disabled>Select Account</option>
                                        {% for staff in all_staff %}
                                            {% if staff.is_active %}
                                                <option value="{{staff.id}}">{{staff.biodata.name}}</option>
                                            {% else %}
                                                <option value="{{staff.id}}" disabled>{{staff.biodata.name}} (Removed)</option>
                                            {% endif %}

                                        {% endfor %}
                                        

                                    </select>
                            </div>
                            

                            <div class="mt-2" style="display: flex;width:100%;justify-content: flex-end">
                                <button class="btn btn-primary" type="submit" id="update_loan_officer_submit" disabled
                                >Update
                                </button>
                            </div>

                        </form>


                    </div>
                </div>
            </div>
        </div>
        <!-- ------------------ end edit loan officer -------------------- -->
        <!--  ===== PRINTABLE LOAN DETAIL AND AMORTISATION ==========  -->
        <div class="col-lg-12 d-none">
            <div class="card m-b-30">
                <div class="card-body" id="printloan">
                    <div style="font-family: Courier New, Courier,Lucida Sans Typewriter, Lucida Typewriter, monospace; color: #000;">
                        {% include 'includes/header.html' %}
                        <br>
                        <div style="text-align: center;"><h5
                                style="text-decoration: underline; text-transform: uppercase; color: #000;">{{ detail.member_name }}'s
                            loan details</h5></div>
                        <hr style="border-style: dashed;">
                        <div class="row">
                            <div class="col-md-6">
                                <table style="width: 100%;">
                                    <tbody>
                                    <tr>
                                        <td>Loan ID:</td>
                                        <td><strong>#{{ detail.id }}</strong></td>
                                    </tr>
                                    <tr>
                                        <td>Amount Requested:</td>
                                        <td><strong>{{ detail.amount_requested|intcomma }}</strong></td>
                                    </tr>
                                    <tr>
                                        <td>Total Deductions:</td>
                                        <td><strong>{{ totalcharges|intcomma }}</strong></td>
                                    </tr>
                                    <tr>
                                        <td>Loan Duration:</td>
                                        <td>
                                            <strong>{{ detail.requested_duration }} {{ detail.loan_type.get_interval_display }}</strong>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Rate Type:</td>
                                        <td>
                                            <strong>{{ detail.get_rate_type_display }}</strong>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Loan Type:</td>
                                        <td>
                                            <strong>{{ detail.loan_type.name }} {{ detail.rate }}% {{ detail.loan_type.get_formula_display|safe }}</strong>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Loan Dates:</td>
                                        <td><strong>{{ detail.approved_on }} - {{ date2 }}</strong></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="col-md-6">
                                <table style="width: 100%;">
                                    <tbody>
                                    <tr>
                                        <td>Amount Approved:</td>
                                        <td><strong>{{ principal|intcomma }}</strong></td>
                                    </tr>
                                    <tr>
                                        <td> Principal Balance</td>
                                        <td><strong>{{ principalbal|intcomma }}</strong></td>
                                    </tr>
                                    <tr>
                                        <td>Amount Disbursed:</td>
                                        <td><strong>{{ disbusable|intcomma }}</strong></td>
                                    </tr>
                                    <tr>
                                        <td>Total Payable:</td>
                                        <td><strong>{{ totalpayable|intcomma }}</strong></td>
                                    </tr>
                                    <tr>
                                        <td>Total Paid:</td>
                                        <td><strong>{{ paidamount|intcomma }}</strong></td>
                                    </tr>
                                    <tr>
                                        <td>Total loan Balance:</td>
                                        <td>
                                            <strong>{{ generalbalance|intcomma }}</strong>
                                        </td>
                                        {% if totaladjustments == 0 %}


                                        {% else %}
                                            <td>Total Adjustments :</td>
                                            <td>
                                                <strong>{{ totaladjustments|intcomma }}</strong>
                                            </td>
                                        {% endif %}
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <hr style="border-style: dashed;">
                        <div style="text-align: center;"><h5
                                style="text-decoration: underline; text-transform: uppercase; color: #000;">Amortisation
                            schedules</h5></div>
                        <table class="table">
                            <thead>
                            <tr>
                                <th>SN</th>
                                <th>SCHEDULE DATE</th>
                                <th>INSTALLMENT</th>
                                <th>PRINCIPAL</th>
                                <th>INTEREST</th>
                                <th>PAID</th>
                                <th>SCHEDULE BALANCE</th>
                                <th>ACCUMULATED PAYMENTS</th>
                                <th>PRINCIPAL BALANCE</th>
                                <th>BALANCE</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% if detail.rate_type == 1 %}
                                {% for p_date in days %}
                                    <tr>
                                        <td>{{ forloop.counter }}</td>
                                        <td>{{ p_date.0 }}</td>
                                        <td>{{ p_date.8|intcomma }}
                                        </td>
                                        <td>{{ schedules|intcomma }}</td>
                                        <td>{{ interestperschedue|intcomma }}</td>
                                        <td>{{ p_date.2 |intcomma }}</td>
                                        <td>{{ p_date.3 |intcomma }}</td>
                                        <td>{{ p_date.4 |intcomma }}</td>
                                        <td>{{ p_date.7|intcomma }}</td>
                                        <td>{{ p_date.4 |intcomma |intcomma }}</td>
                                    </tr>
                                {% endfor %}
                            {% endif %}
                            {% if detail.rate_type == 2 %}
                                {% for dat in data %}
                                    <tr>
                                        <td>{{ forloop.counter }}</td>
                                        <td>{{ dat.1 }}</td>
                                        <td>{{ dat.9|intcomma }} <span style="color: red">{% if dat.8 > 0 %}
                                            <span
                                                    style="color: red">({{ dat.8 }})</span>{% endif %}</span>
                                        </td>
                                        <td>{{ dat.0|intcomma }}</td>
                                        <td>{{ dat.3|intcomma }}</td>
                                        <td>{{ dat.5|intcomma }}</td>
                                        <td>{{ dat.6|intcomma }}</td>
                                        <td>{{ dat.11|intcomma }}</td>

                                        <td>{{ dat.10|intcomma }}</td>
                                        <td>{{ dat.2|intcomma }}</td>
                                    </tr>
                                {% endfor %}
                            {% endif %}
                            </tbody>
                        </table>
                        <hr style="border-style: dashed;">
                        <div>
                            <p align="center" style="font-size: 16px;">Served By:
                                <strong>{{ request.user.staff.biodata.name }}</strong></p>
                            <p align="center" style="font-size: 14px;">Signature & stamp</p>
                            <p align="center" style="font-size: 12px;">
                                .................................................</p>
                            <p align="center" style="font-size: 14px;">Applicant:
                                <strong>{{ detail.member_name }}</strong></p>
                            <p align="center" style="font-size: 14px;">Signature & stamp</p>
                            <p align="center" style="font-size: 12px;">
                                .................................................</p>
                            <p style="text-align: center;">Thank you for Trusting with
                                <strong>{{ mybranch.business.name|capfirst }}</strong>.<br> For Inquiry About this loan
                                Call: <strong>+{{ mybranch.business.contact }}</strong>.</p>
                        </div>
                        <hr style="border-style: dashed;">
                        <div>
                            <p align="center">Mfuko Plus - Microfinance Mgt Software </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--  ===== END OF PRINTABLE LOAN DETAIL AND AMORTISATION ======  -->

        <!-- End col -->
        <div class="col-md-12 mb-3">
            <div class="accordion custom-accordion" id="custom-accordion-one">
                <div class="card mb-0 border border-info">
                    <div class="card-header bg-dark" id="headingFive">
                        <h5 class="m-0 text-uppercase">
                            <a class="custom-accordion-title text-white collapsed d-block py-1"
                               data-bs-toggle="collapse" href="#collapseFive"
                               aria-expanded="false" aria-controls="collapseFive">
                                {{ detail.member_name }}'s Loan Details <i
                                    class="mdi mdi-chevron-down accordion-arrow"></i>
                            </a>
                        </h5>
                    </div>
                    <div id="collapseFive" class="collapse"
                         aria-labelledby="headingFive"
                         data-bs-parent="#custom-accordion-one">
                        <div class="card-body">
                            <div class="col-lg-12">
                                <div class="card m-b-30">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-4">
                                                <div class="table-responsive">
                                                    <table class="display table table-bordered">
                                                        <tbody>
                                                        <tr>
                                                            <th> Applicant Name
                                                            </th>
                                                            <td>
                                                                {{ detail.member_name }} <br>
                                                                {% if use_shares == True and detail.loan_status == 0 %}
                                                                    <span class="fs-6 text-danger">Savings:{{ applicant_savings }} Shares:{{ member_shares }}</span>
                                                                {% endif %}
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <th>Loan number</th>
                                                            <td>
                                                                {{ detail.loan_number }}
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <th> Rate Type</th>
                                                            <td>{{ detail.get_rate_type_display }}</td>
                                                        </tr>
                                                        <tr>
                                                            <th> Loan Type</th>
                                                            <td>{{ detail.loan_type.name }}</td>
                                                        </tr>
                                                        <tr>
                                                            <th> Amount Requested</th>
                                                            <td>{{ detail.amount_requested|intcomma }}</td>
                                                        </tr>
                                                        <tr>
                                                            <th>Requested Duration</th>
                                                            
                                                            <td>
                                                                <div style="display:flex;width:100%;min-height: 10px;align-items: center">
                                                                    <span>{{ real_loan_details.requested_duration }} {{ detail.loan_type.get_interval_display }}</span>
                                                                </div>

                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <th>Approved Duration</th>
                                                            <td>
                                                                <div style="display:flex;width:100%;min-height: 10px;align-items: center">
                                                                    <span>{{ real_loan_details.approved_duration }} {{ detail.loan_type.get_interval_display }}</span>
                                                                    <i class="fa-solid fa-pen-to-square"
                                                                       style="margin-left:10px;cursor: pointer"
                                                                       onclick="showEditDurationModal('{{ detail.id }}', '{{ detail.loan_type.get_interval_display }}', '{{ real_loan_details.approved_duration }}' )"></i>
                                                                </div>


                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <th>Interest generated per ?</th>
                                                            <td>
                                                                <div style="display:flex;width:100%;min-height: 10px;align-items: center">
                                                                    <span>{{ real_loan_details.loan_type.get_period }}</span>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <th> Interest Rate</th>
                                                            <td>{{ detail.rate }} %</td>
                                                        </tr>
                                                        <tr>
                                                            <th>Loan officer</th>
                                                            <td>
                                                                <div style="display:flex;width:100%;min-height: 10px;align-items: center">
                                                                    {% if real_loan_details.officer is None %}
                                                                        <span>No officer</span>
                                                                    {% else %}
                                                                        <span>{{ real_loan_details.officer.biodata.name }}</span>
                                                                    {% endif %}
                                                                    <i class="fa-solid fa-pen-to-square"
                                                                       style="margin-left:10px;cursor: pointer"
                                                                       onclick="showEditLoanOfficerModal('{{ real_loan_details.officer.id }}' )"></i>
                                                                </div>
                                                                
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <th> Applied On</th>
                                                            <td>{{ detail.requested_on }} </td>
                                                        </tr>
                                                        <tr>
                                                            <th> Repayment method</th>
                                                            <td>{{ detail.get_repayment_method_display }} </td>
                                                        </tr>
                                                        <tr>
                                                            <th>Loan status</th>
                                                            <td>{{ detail.get_loan_status_display }} </td>
                                                        </tr>
                                                        </tbody>
                                                    </table>

                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="table-responsive">

                                                    <table class="display table table-bordered">
                                                        <tbody>
                                                        {% for charge in actualcharges %}
                                                            <tr>
                                                                <th><span
                                                                        style="padding-left: 10px"></span> {{ charge.name }}
                                                                </th>
                                                                <td>{{ charge.amount|intcomma }}</td>
                                                            </tr>
                                                        {% endfor %}
                                                        {% if detail.is_topup == True %}
                                                            <tr>
                                                                <th> Total Charges</th>
                                                                <td>{{ totalcharges|floatformat:decimals|intcomma }}</td>
                                                            </tr>
                                                            <tr>
                                                                <th> Previous loan balance</th>
                                                                <td>{{ oldbalance|intcomma }}</td>
                                                            </tr>
                                                        {% else %}
                                                            <tr>
                                                                <th> Total Charges</th>
                                                                <td>{{ totalcharges|floatformat:decimals|intcomma }}</td>
                                                            </tr>
                                                        {% endif %}

                                                        </tbody>
                                                    </table>
                                                    {% if totaladjustments == 0 %}


                                                    {% else %}
                                                        <center><h5><u>Adjustments</u></h5></center>
                                                        <table class="display table table-bordered">
                                                            <tbody>
                                                            {% for adjust in adjustments %}
                                                                <tr>
                                                                    <th><span
                                                                            style="padding-left: 10px"></span> {{ adjust.tx_date }}
                                                                    </th>
                                                                    <td>{{ adjust.reporting_amount|intcomma }}</td>
                                                                    <td>
                                                                        <button class="btn btn-danger btn-xs"
                                                                                data-bs-toggle="modal"
                                                                                data-bs-target=".daj{{ adjust.id }}"><i
                                                                                class="fa fa-minus"> </i></button>
                                                                    </td>
                                                                </tr>



                                                                <div class="modal daj{{ adjust.id }}" tabindex="-1"
                                                                     role="dialog" aria-hidden="true">
                                                                    <div class="modal-dialog ">
                                                                        <div class="modal-content">
                                                                            <div class="modal-header">
                                                                                <h5 class="modal-title"
                                                                                    id="exampleLargeModalLabel">Delete
                                                                                    Adjustment</h5>
                                                                                <button type="button" class="btn-close"
                                                                                        data-bs-dismiss="modal"
                                                                                        aria-label="Close">
                                                                                </button>
                                                                            </div>
                                                                            <div class="modal-body">
                                                                                <form method="post"
                                                                                      enctype="multipart/form-data">
                                                                                    {% csrf_token %}
                                                                                    <div class="row">
                                                                                        <center style="color: red">

                                                                                            <i class="fa fa-warning fa-5x"></i><br>
                                                                                            <h5>Are you sure you want to
                                                                                                delete this
                                                                                                adjustment?</h5>

                                                                                            <input type="hidden"
                                                                                                   value="{{ adjust.id }}"
                                                                                                   name="del_adj">
                                                                                            <input type="hidden"
                                                                                                   name="form_type"
                                                                                                   value="adj_del"
                                                                                                   required>
                                                                                        </center>
                                                                                    </div>
                                                                                    <div class="modal-footer">
                                                                                        <button type="button"
                                                                                                class="btn btn-warning"
                                                                                                data-bs-dismiss="modal">
                                                                                            Cancel
                                                                                        </button>
                                                                                        <button type="submit"
                                                                                                class="btn btn-primary">
                                                                                            Yes
                                                                                        </button>
                                                                                    </div>
                                                                                </form>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                            {% endfor %}

                                                            </tbody>
                                                        </table>
                                                    {% endif %}


                                                </div>
                                                <div>
                                                    {% if this_loan_fines %}
                                                        <div class="table-responsive">
                                                            <table class="display table table-bordered">
                                                                <thead>
                                                                <tr>
                                                                    <th>Fines</th>
                                                                    <th>Reason</th>
                                                                </tr>
                                                                </thead>
                                                                <tbody>
                                                                {% for fine in this_loan_fines %}
                                                                    <tr>
                                                                        <td> {{ fine.amount|intcomma }}</td>
                                                                        <td>{{ fine.narration }}</td>
                                                                    </tr>
                                                                {% endfor %}
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    {% endif %}

                                                </div>
                                            </div>



                                            <div class="col-md-4">
                                                <div class="table-responsive">
                                                    <table class="display table table-bordered">
                                                        <tbody>
                                                        {% if detail.loan_status > 1 %}
                                                            <tr>
                                                                <th> Amount Approved</th>
                                                                <td>{{ principal|intcomma }}
                                                                    <i class="fa-solid fa-pen-to-square" data-bs-toggle="modal"
                                                                        data-bs-target=".amountModal"
                                                                       style="margin-left:10px;cursor: pointer; display: none"></i>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                {% if detail.loan_status < 3 %}
                                                                    <th> Disbursable Amount</th>
                                                                    <td>{{ disbusable|intcomma }}</td>
                                                                    </tr>
                                                                {% endif %}
                                                            <tr>
                                                                <th> Total loan Payable</th>
                                                                <td>{{ totalpayable|intcomma }}</td>
                                                            </tr>
                                                            <tr>
                                                                <th> Total Interest</th>
                                                                <td>{{ totalinterest|intcomma }}</td>
                                                            </tr>
                                                            <tr>
                                                                <th> Amount paid</th>
                                                                <td>{{ paidamount|intcomma }} ({{ percent_paid }}%)</td>
                                                            </tr>
                                                            {% if unpaid_fines > 0 %}
                                                                <tr style="color: red">
                                                                    <th> Loan Fines</th>
                                                                    <td>{{ unpaid_fines|intcomma }}</td>
                                                                </tr>
                                                            {% endif %}



                                                            <tr>
                                                                <th> Loan Balance</th>
                                                                <td>{{ generalbalance|intcomma }} ({{ percent_unpaid }}%)</td>
                                                            </tr>

                                                            {% if totaladjustments == 0 %}


                                                            {% else %}
                                                                <td>Total Adjustments :</td>
                                                                <td>
                                                                    <strong>{{ totaladjustments|intcomma }}</strong>
                                                                </td>
                                                            {% endif %}


                                                            <tr>
                                                                <th> Principal Balance</th>
                                                                <td>{{ principalbal|intcomma }}</td>
                                                            </tr>
                                                            <tr>
                                                                <th> Approved On</th>
                                                                <td>{{ detail.approved_on }} </td>
                                                            </tr>
                                                            <tr>
                                                                <th> Ending On</th>
                                                                <td>{{ date2 }}</td>
                                                            </tr>
                                                        {% endif %}
                                                        </tbody>
                                                    </table>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End col -->

        <!-- End col -->
        <div class="col-lg-12">
            <div class="card m-b-30">
                <div class="card-header">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="button-list d-flex justify-content-end">
                                {% if not real_loan_details.group_guaratorship %}
                                    {% if detail.loan_status == 0 and nguarantors >= minguarantors and total_security_value >= needed_value and more_savings_required <= 0 %}
                                        <button class="pull-right btn btn-sm btn-outline-info text-capitalize mr-3"
                                                data-bs-toggle="modal" data-bs-target=".submit-for-approval">
                                            <i class="fa fa-paper-plane"></i> Submit for approval
                                        </button>
                                    {% endif %}
                                {% else %}
                                    {% if detail.loan_status == 0 and remaining_required_security == 0 and more_savings_required <= 0 %}
                                        <button class="pull-right btn btn-sm btn-outline-info text-capitalize mr-3"
                                                data-bs-toggle="modal" data-bs-target=".submit-for-approval">
                                            <i class="fa fa-paper-plane"></i> Submit for approval
                                        </button>
                                    {% endif %}
                                {% endif %}

                                {% if can_access_committee_action %}
                                    {% if detail.loan_status == 1 %}
                                        {% if must_upload == 1 %}
                                            <button class="pull-right btn btn-sm btn-outline-secondary text-capitalize mr-3"
                                                    data-bs-toggle="modal" data-bs-target=".committee_action"><i
                                                    class="fa fa-check-double"></i> Committee
                                                Action
                                            </button>
                                        {% else %}
                                            <button class="pull-right btn btn-sm btn-outline-default text-capitalize mr-3"
                                                    data-bs-toggle="modal" data-bs-target=".committee_failed"><i
                                                    class="fa fa-close"></i>
                                                Committee Action
                                            </button>
                                        {% endif %}
                                    {% endif %}
                                {% endif %}
                                

                                {% if detail.loan_status == 0 or detail.loan_status == 1 %}
                                    <button class="pull-right btn btn-sm btn-outline-success text-capitalize mr-3"
                                            data-bs-toggle="modal" data-bs-target=".edit_loan"><i
                                            class="fa fa-edit mr-2"></i>
                                        Edit application
                                    </button>
                                    <button data-bs-toggle="modal" data-bs-target=".delete_loan"
                                            class="pull-right btn btn-sm btn-outline-danger text-capitalize mr-3"><i
                                            class="fa fa-trash"></i>Delete loan
                                    </button>
                                {% endif %}

                                {% if can_delete_loan and detail.loan_status >= 2  %}
                                    <button data-bs-toggle="modal" data-bs-target=".delete_loan"
                                            class="pull-right btn btn-sm btn-outline-danger text-capitalize mr-3"><i
                                            class="fa fa-trash"></i>Delete loan
                                    </button>
                                {% endif %}

                                {% if can_disburse_loan_money %}
                                    {% if detail.loan_status == 2 %}
                                        <button data-bs-toggle="modal" data-bs-target=".disburse"
                                                class="pull-right btn btn-sm btn-outline-dark text-capitalize mr-3"><i
                                                class="fa fa-check"></i> disburse
                                        </button>
                                    {% endif %}
                                {% endif %}

                                {% if detail.loan_status == 3 %}

                                        <button class="btn btn-sm btn-dark btn-sm pull-right mr-3"
                                                data-bs-toggle="modal" data-bs-target=".add_fines">
                                            <i class="fa fa-plus mr-2"></i> Add Fines
                                        </button>
                                {% endif %}
                                {% if detail.loan_status == 3 and sometopup == 0 %}
                                    {% if top_up_limit > percent_paid %}
                                        <a title="To top up this loan at least {{ top_up_limit }}% should be paid, Only {{ percent_paid }}% is paid so far"
                                           class="pull-right btn btn-sm btn-danger text-capitalize mr-3">
                                            <i class="fa fa-layer-group"></i> TopUp <i class="fa fa-ban"></i>
                                        </a>
                                    {% else %}
                                        <button data-bs-toggle="modal" data-bs-target=".topup"
                                                class="pull-right btn btn-sm btn-outline-primary text-capitalize mr-3">
                                            <i
                                                    class="fa fa-layer-group"></i> TopUp <i class="fa fa-check"></i>
                                        </button>
                                    {% endif %}
                                {% endif %}
                                {% if detail.loan_status == 3 or detail.loan_status == 4 %}
                                    <button class="btn btn-success btn-sm pull-right mr-3" onclick="printDetails()"><i
                                            class='fa fa-print'></i> Print
                                    </button>
                                {% endif %}
                                {% if detail.loan_status == 3 and sometopup == 1 %}
                                    <a href="/loans/loan-details/{{ checktopup.id }}"
                                       class="pull-right btn btn-sm btn-outline-secondary text-capitalize mr-3"><i
                                            class="fa fa-eye"></i> View topUp application </a>
                                {% endif %}

                                {% if isoverdue == True and detail.loan_status > 2 %}
                                    <button data-bs-toggle="modal" data-bs-target=".adjust"
                                            class="pull-right btn btn-sm btn-outline-warning text-capitalize mr-3"><i
                                            class="fa fa-toggle-off"></i> Adjust Loan
                                    </button>


                                    {#           =========================================== ADJUST LOAN============================#}

                                    <div class="modal adjust" tabindex="-1" role="dialog" aria-hidden="true">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title" id="exampleLargeModalLabel">Add Loan
                                                        Adjustment</h5>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                            aria-label="Close">
                                                    </button>
                                                </div>
                                                <div class="modal-body">

                                                    <form method="post" enctype="multipart/form-data">
                                                        {% csrf_token %}

                                                        <div class="row">


                                                            <input type="hidden" name="loanid" value="{{ loanid }}"
                                                                   required>
                                                            <input type="hidden" name="form_type" value="adjust"
                                                                   required>


                                                            <div class="form-group col-md-12">

                                                                {#                                    <center>#}
                                                                {#                                        <i class="fa fa-warning fa-5x" style="color: red"></i>#}
                                                                {#                                        <h4 style="color: red"><b>You are writting off a loan.</b></h4>#}
                                                                {##}
                                                                {#                                        <h5 style="color: Blue">This loan will be written off and closed</h5>#}
                                                                {#                                    </center>#}
                                                                <div class="form-group col-md-12">


                                                                    <div class="form-group col-md-12">
                                                                        <label for="wdate">Date of adjustment</label>
                                                                        <input type="date"
                                                                               class="form-control border border-primary"
                                                                               id="wdate" name="wdate"
                                                                               value='{{ nowdate|date:"Y-m-d" }}'
                                                                               placeholder="Enter date" required>

                                                                    </div>


                                                                    <div class="form-group col-md-12">
                                                                        <label>Adjust Principle or interest?</label>
                                                                        <select class="form-control " name="type"
                                                                                required>
                                                                            <option value="1" selected>Interest</option>
                                                                            <option value="2">Principal</option>
                                                                        </select>
                                                                    </div>


                                                                    <div class="form-group col-md-12">
                                                                        <label for="wdate">Add/subtract</label>
                                                                        <select class="form-control border border-primary"
                                                                                name="add" required>
                                                                            <option value="1" selected>Add</option>
                                                                            <option value="2">Subtract</option>

                                                                        </select>

                                                                    </div>


                                                                    <div class="form-group col-md-12">
                                                                        <label for="narration">Amount</label>

                                                                        <input type="text" data-type="currency"
                                                                               class="form-control border border-primary"
                                                                               name="amount"
                                                                               placeholder="amount"></input>

                                                                    </div>

                                                                    <div class="form-group col-md-12">
                                                                        <label for="wdate">Narration</label>
                                                                        <textarea
                                                                                class="form-control border border-primary"
                                                                                name="narration" minlength="10"
                                                                                required></textarea>

                                                                    </div>
                                                                </div>


                                                            </div>
                                                        </div>


                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-dark"
                                                                    data-bs-dismiss="modal"
                                                            >No
                                                            </button>
                                                            <button type="submit" class="btn btn-primary">Adjust
                                                            </button>
                                                        </div>

                                                    </form>

                                                </div>
                                                {#                                            <div class="modal-footer">#}
                                                {#                                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>#}
                                                {#                                                <button type="button" class="btn btn-primary">Save changes</button>#}
                                                {#                                            </div>#}
                                            </div>
                                        </div>
                                    </div>

                                {% endif %}

                                {% if isoverdue == True and detail.loan_status == 3 %}
                                    <button data-bs-toggle="modal" data-bs-target=".write-off"
                                            class="pull-right btn btn-sm btn-outline-danger text-capitalize mr-3"><i
                                            class="fa fa-toggle-off"></i> Write off bad debt
                                    </button>




                                    <div class="modal write-off" tabindex="-1" role="dialog" aria-hidden="true">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title" id="exampleLargeModalLabel">Write off
                                                        Loan</h5>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                            aria-label="Close">
                                                    </button>
                                                </div>
                                                <div class="modal-body">

                                                    <form method="post" enctype="multipart/form-data">
                                                        {% csrf_token %}

                                                        <div class="row">


                                                            <input type="hidden" name="loanid" value="{{ loanid }}"
                                                                   required>
                                                            <input type="hidden" name="form_type" value="writeoff"
                                                                   required>


                                                            <div class="form-group col-md-12">

                                                                <center>
                                                                    <i class="fa fa-warning fa-5x"
                                                                       style="color: red"></i>
                                                                    <h4 style="color: red"><b>You are writting off a
                                                                        loan.</b></h4>

                                                                    <h5 style="color: Blue">This loan will be written
                                                                        off and closed</h5>
                                                                </center>
                                                                <div class="form-group col-md-12">


                                                                    <div class="form-group col-md-12">
                                                                        <label for="wdate">Date of writting off</label>
                                                                        <input type="date"
                                                                               class="form-control border border-primary"
                                                                               id="wdate" name="wdate"
                                                                               value='{{ nowdate|date:"Y-m-d" }}'
                                                                               placeholder="Enter date" required>

                                                                    </div>
                                                                    <div class="form-group col-md-12">
                                                                        <label for="narration">Narration</label>

                                                                        <textarea
                                                                                class="form-control border border-primary"
                                                                                id="narration" name="narration"
                                                                                placeholder="Narration"></textarea>

                                                                    </div>
                                                                </div>


                                                            </div>
                                                        </div>


                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-dark"
                                                                    data-bs-dismiss="modal"
                                                            >No
                                                            </button>
                                                            <button type="submit" class="btn btn-primary">Yes Write
                                                                Off
                                                            </button>
                                                        </div>

                                                    </form>

                                                </div>
                                                {#                                            <div class="modal-footer">#}
                                                {#                                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>#}
                                                {#                                                <button type="button" class="btn btn-primary">Save changes</button>#}
                                                {#                                            </div>#}
                                            </div>
                                        </div>
                                    </div>






                                {% endif %}
                                {% if detail.loan_status == 3 and principalbal < 1 %}
                                    <button data-bs-toggle="modal" data-bs-target=".close-loan"
                                            class="pull-right btn btn-sm btn-outline-dark text-capitalize mr-3">
                                        <i class="fa-regular fa-circle-xmark"></i> Close Loan
                                    </button>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
                <!--- End of buttons -->


                {#======================================DELETE LOAN======================================================================#}
                <div class="modal delete_loan" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleLargeModalLabel">Delete Loan</h5>
                                <button type="button" class="btn btn-secondary"
                                        data-bs-dismiss="modal">X
                                </button>
                            </div>
                            <div class="modal-body">

                                <form method="post" enctype="multipart/form-data">
                                    {% csrf_token %}

                                    <div class="row">


                                        <input type="hidden" name="loanid" value="{{ loanid }}" required>
                                        <input type="hidden" name="form_type" value="deleteloan" required>


                                        <div class="form-group col-md-12">

                                            <center>
                                                <i class="fa fa-warning fa-5x" style="color: red"></i>
                                                <h4 style="color: red"><b>Are you sure you want to delete this
                                                    loans?</b></h4>

                                                <h5 style="color: Blue">Note: This process can not be reversed. If there some existing transactions connected to the loan, they will also be removed.</h5>
                                            </center>

                                        </div>


                                    </div>


                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary"
                                                data-bs-dismiss="modal">Close
                                        </button>
                                        <button type="submit" class="btn btn-primary">Yes Delete</button>
                                    </div>

                                </form>

                            </div>
                        </div>
                    </div>
                </div>


                <div class="card-body">
                    <ul class="nav nav-pills bg-nav-pills nav-justified mb-3">
                        <li class="nav-item">
                            <a href="#schedules-tab" data-bs-toggle="tab" aria-expanded="true"
                               class="nav-link active rounded-0">
                                <i class="fa fa-clipboard-list d-md-none d-block"></i>
                                <span class="d-none d-md-block">Schedule</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="#payments-tab" data-bs-toggle="tab" aria-expanded="false"
                               class="nav-link rounded-0">
                                <i class="fa fa-money-check-dollar d-md-none d-block"></i>
                                <span class="d-none d-md-block">Payment History</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="#securities-tab" data-bs-toggle="tab" aria-expanded="false"
                               class="nav-link rounded-0">
                                <i class="fa fa-user-shield d-md-none d-block"></i>
                                <span class="d-none d-md-block">Securities</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="#guarantors-tab" data-bs-toggle="tab" aria-expanded="false"
                               class="nav-link rounded-0">
                                <i class="fa fa-restroom d-md-none d-block"></i>
                                <span class="d-none d-md-block">Guarantors</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="#uploads-tab" data-bs-toggle="tab" aria-expanded="false"
                               class="nav-link rounded-0">
                                <i class="fa fa-list-check d-md-none d-block"></i>
                                <span class="d-none d-md-block">File Uploads</span>
                            </a>
                        </li>
                    </ul>

                    <div class="tab-content">
                        <!-- Loan Schedules Tab-->
                        <div class="tab-pane show active" id="schedules-tab">
                            {% if detail.loan_status == 3 or detail.loan_status == 4 %}
                                <table class="table dt-responsive nowrap w-100">
                                    <thead>
                                    <tr>
                                        <th>SN</th>
                                        <th>SCHEDULE DATE</th>
                                        <th>INSTALLMENT</th>
                                        <th>PRINCIPAL</th>
                                        <th>INTEREST</th>
                                        <th>PAID</th>
                                        <th>SCHEDULE BALANCE</th>
                                        <th>PRINCIPAL BALANCE</th>
                                        <th>BALANCE</th>
                                        <th>Action</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% if detail.rate_type == 1 %}

                                        {% for p_date in days %}
                                            <tr>
                                                <td>{{ forloop.counter }}</td>
                                                <td>{{ p_date.0 }}</td>
                                                <td>{{ p_date.8|floatformat:'2'|intcomma }}</td>
                                                <td>{{ schedules|floatformat:'2'|intcomma }}{% if p_date.6 > 0 %}
                                                    <span style="color: red">({{ p_date.6 }})</span>{% endif %}</td>
                                                <td>{{ interestperschedue|floatformat:'2'|intcomma }}</td>
                                                <td>{{ p_date.2|floatformat:'2'|intcomma }}</td>
                                                {% if unpaid_fines > 0 and p_date.1 == 1 %}
                                                    <td>{{ p_date.3|add:unpaid_fines|intcomma }}
                                                        <span style="color: red">({{ unpaid_fines }})</span>
                                                    </td>
                                                {% else %}
                                                    <td>{{ p_date.3|floatformat:'2'|intcomma }}</td>
                                                {% endif %}
                                                <td>{{ p_date.7|floatformat:'2'|intcomma }}</td>
                                                <td>{{ p_date.4|floatformat:'2'|intcomma }}</td>
                                                <td>
                                                    {% if real_loan_details.loan_status == 4 %}
                                                        <button class="btn btn-success btn-sm" disabled><i
                                                                class="fa fa-check"></i>
                                                            Paid
                                                        </button>
                                                    {% else %}

                                                        {% if p_date.1 == 1 %}
                                                            <button data-bs-toggle="modal"
                                                                    data-bs-target=".pay{{ p_date.0 }}"
                                                                    class="btn btn-primary btn-sm" {% if not can_handle_loan_repayment %}disabled{% endif %}><i
                                                                    class="spinner-grow spinner-grow-sm"
                                                                    role="status"><span
                                                                    class="sr-only">Loading...</span></i> Pay Now
                                                            </button>
                                                        {% endif %}

                                                        {% if p_date.1 == 0 %}
                                                            <button class="btn btn-success btn-sm" disabled><i
                                                                    class="fa fa-check"></i>
                                                                Paid
                                                            </button>
                                                        {% endif %}


                                                        {% if p_date.1 == 2 %}
                                                            <button class="btn btn-secondary btn-sm" disabled><i
                                                                    class="fa fa-recycle"></i>
                                                                Pending
                                                            </button>
                                                        {% endif %}
                                                    {% endif %}
                                                </td>
                                            </tr>
{#                                            ==================== MODAL FOR FLAT RATE ====================================================#}
                                            <div class="modal pay{{ p_date.0 }}" tabindex="-1" role="dialog"
                                                 aria-hidden="true">
                                                <div class="modal-dialog">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title" id="exampleLargeModalLabel">Loan
                                                                Repayment
                                                            </h5>
                                                            <button type="button" class="btn-close"
                                                                    data-bs-dismiss="modal" aria-label="Close">
                                                            </button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <form method="post" enctype="multipart/form-data">
                                                                {% csrf_token %}
                                                                <div class="row">
                                                                    <div class="mb-2 col-md-12">
                                                                        <label class="form-label" for="d_date">Payment
                                                                            Date</label>
                                                                        <input type="date"
                                                                               class="form-control"
                                                                               id="d_date" max="{% now 'Y-m-d' %}"
                                                                               name="d_date"
                                                                               placeholder="date"
                                                                               required>
                                                                    </div>

                                                                    <div class="mb-2 col-md-12">
                                                                        <label class="form-label" for="pamount">Payment
                                                                            Amount</label>

                                                                        <input type="text" data-type="currency"
                                                                               class="form-control"
                                                                               id="pamount{{ forloop.counter }}"
                                                                               onkeyup="updateprincipal{{ forloop.counter }}(this.value);"

                                                                               name="amount" placeholder="amount"
                                                                               value={% if unpaid_fines > 0 %}"{{ p_date.3|add:p_date.6|add:unpaid_fines|intcomma }}" {% else %}"{{ p_date.3|add:p_date.6|add:p_date.6|intcomma }}"{% endif %}
                                                                               required>

                                                                    </div>


                                                                    <div class="mb-2 col-md-12">
                                                                        <label class="form-label"
                                                                               for="principalamount">Principal
                                                                            Amount</label>

                                                                        <input type="text" readonly
                                                                               class="form-control"
                                                                               id="principalamount{{ forloop.counter }}"
                                                                               name="principalamount"
                                                                               placeholder="principalamount"
                                                                               value="{{ p_date.3|sub:p_date.5|intcomma }}"
                                                                               required>

                                                                    </div>

                                                                    <div class="mb-2 col-md-12">
                                                                        <label class="form-label" for="d_date">Interest
                                                                            Amount</label>

                                                                        <input type="text"
                                                                               class="form-control"

                                                                               id="interestamount{{ forloop.counter }}"
                                                                               name="interestamount"
                                                                               data-type="currency"
                                                                               placeholder="interestamount"
                                                                               onkeyup="updateprincipalOnInterestChange{{ forloop.counter }}(this.value);"
                                                                               value="{{ p_date.5 }}" required>

                                                                    </div>

                                                                    {% if p_date.6 > 0 or unpaid_fines > 0 %}
                                                                        <div class="mb-2 col-md-12">
                                                                            <label class="form-label"
                                                                                   for="d_date">Fine</label>

                                                                            <input type="text"
                                                                                   class="form-control"

                                                                                   id="fineamount{{ forloop.counter }}"
                                                                                   name="fineamount"
                                                                                   placeholder="fineamount"
                                                                                   oninput="updateFineChange{{ forloop.counter }}(this.value)"
                                                                                   value={% if unpaid_fines > 0 %}"{{ unpaid_fines|intcomma }}"{% else %}"{{ p_date.6|intcomma }}"{% endif %}
                                                                                   required>

                                                                        </div>

                                                                    {% else %}
                                                                        <input type="hidden"
                                                                               class="form-control"
                                                                               name="fineamount"
                                                                               placeholder="fineamount" value="0"
                                                                               required>
                                                                    {% endif %}




                                                                    <div class="mb-2 col-md-12">
                                                                        <label class="form-label" for="d_date">Reference
                                                                            Number</label>

                                                                        <input type="text"
                                                                               class="form-control"
                                                                               name="reference"
                                                                               placeholder="Reference Number"
                                                                               value="{{ reference }}" required>

                                                                    </div>


                                                                    {% if detail.repayment_method == 1 %}
                                                                        <div class="mb-2 col-md-12">
                                                                            <label class="form-label" for="debited">Recieved
                                                                                through
                                                                                (Dr
                                                                                account)</label>
                                                                            <select class="form-control"
                                                                                    id="debited" name="debited"
                                                                                    required>
                                                                                <option value="" selected disabled>
                                                                                    Select Account
                                                                                </option>
                                                                                <option value="m">Member Acct</option>
                                                                                {% for acct in bankaccounts %}
                                                                                    <option value={{ acct.id }}> {{ acct.name }}
                                                                                    </option>
                                                                                {% endfor %}
                                                                            </select>
                                                                        </div>
                                                                    {% else %}
                                                                        <input type="hidden" name="debited"
                                                                               value="{{ memberledger.id }}"
                                                                               required>
                                                                    {% endif %}
                                                                    <div class="mb-2 col-md-12">
                                                                        <label class="form-label" for="narration">Narration</label>
                                                                        <textarea
                                                                                class="form-control"
                                                                                id="narration" name="narration"
                                                                                placeholder="Narration"></textarea>
                                                                    </div>
                                                                    <input type="hidden" name="loanid"
                                                                           value="{{ loanid }}"
                                                                           required>

                                                                    <input type="hidden" class="form-control"
                                                                           value="{{ principalbal }}"
                                                                           name="principalbalance">
                                                                    <input type="hidden" name="form_type"
                                                                           value="repay"
                                                                           required>
                                                                </div>
                                                                <div class="modal-footer">
                                                                    <button type="button" class="btn btn-warning"
                                                                            data-bs-dismiss="modal">Close
                                                                    </button>
                                                                    <button type="submit" class="btn btn-primary"
                                                                            id="paybtn"
                                                                            onclick="checksubmitted()">Continue
                                                                    </button>
                                                                </div>
                                                            </form>
                                                        </div>
                                                        <script>
                                                            function checksubmitted() {

                                                                var easmount = document.getElementById('pamount{{ forloop.counter }}').value;
                                                                var ramount = parseFloat(easmount.replace(/,/g, ''));
                                                                var rbalance = "{{ generalbalance }}"

                                                                var prinncipal = document.getElementById('principalamount{{ forloop.counter }}').value
                                                                if (parseFloat(ramount) > parseFloat(rbalance)) {
                                                                    document.getElementById('balancerror').innerHTML = 'Amount is greater than current balance'
                                                                    document.getElementById('balancerror').style.display = 'block'
                                                                    document.getElementById('balancerror').style.color = 'red'
                                                                    document.getElementById('paybtn').disabled = true
                                                                } else {
                                                                    return false
                                                                }
                                                            }
                                                        </script>
                                                    </div>
                                                </div>
                                            </div>
                                            <script>
                                                function updateprincipal{{forloop.counter}}(vala) {
                                                    //payment amount value
                                                    if(vala.trim() === ''){
                                                        vala = '0'
                                                    }
                                                    val = parseFloat(vala.replace(/,/g, ''));

                                                    var interestVal = document.getElementById('interestamount{{ forloop.counter }}').value
                                                    if(interestVal.trim() === ''){
                                                        interestVal = '0'
                                                    }

                                                    interestVal = parseFloat(interestVal.replace(/,/g, ''));
                                                    var fineVal = ''
                                                    try{
                                                        fineVal = document.getElementById('fineamount{{ forloop.counter }}').value
                                                        if(fineVal.trim() === ''){
                                                            fineVal = '0'
                                                        }
                                                    }catch(e){
                                                        fineVal = '0'
                                                    }
                                                    fineVal = parseFloat(fineVal.replace(/,/g, ''));

                                                    var princ = val - interestVal - fineVal
                                                    document.getElementById('principalamount{{ forloop.counter }}').value = princ
                                                    document.getElementById('balancerror').style.display = 'block'
                                                    document.getElementById('pamount{{ forloop.counter }}').value = vala
                                                }

                                                function updateFineChange{{forloop.counter}}(vala) {
                                                    if(vala.trim() === ''){
                                                        vala = '0'
                                                    }
                                                    val = parseFloat(vala.replace(/,/g, ''));

                                                    let paymentAmt = document.getElementById('pamount{{ forloop.counter }}').value
                                                    if(paymentAmt.trim() === ''){
                                                        paymentAmt = '0'
                                                    }
                                                    paymentAmt = parseFloat(paymentAmt.replace(/,/g, ''));
                                                    var interestAmt = document.getElementById('interestamount{{ forloop.counter }}').value
                                                    if(interestAmt.trim() === ''){
                                                        interestAmt = '0'
                                                    }
                                                    interestAmt = parseFloat(interestAmt.replace(/,/g, ''));

                                                    var princ = paymentAmt - interestAmt - val

                                                    {#var principal = val - intval#}
                                                    document.getElementById('principalamount{{ forloop.counter }}').value = princ
                                                    document.getElementById('balancerror').style.display = 'block'

                                                }

                                                function updateprincipalOnInterestChange{{forloop.counter}}(vala) {

                                                    console.log('GE GE GE')
                                                    if(vala.trim() === ''){
                                                        vala = '0'
                                                    }
                                                    val = parseFloat(vala.replace(/,/g, ''));

                                                    let paymentAmt = document.getElementById('pamount{{ forloop.counter }}').value
                                                    if(paymentAmt.trim() === ''){
                                                        paymentAmt = '0'
                                                    }
                                                    paymentAmt = parseFloat(paymentAmt.replace(/,/g, ''));
                                                    var fineVal = ''
                                                    try{
                                                        fineVal = document.getElementById('fineamount{{ forloop.counter }}').value
                                                        if(fineVal.trim() === ''){
                                                            fineVal = '0'
                                                        }
                                                    }catch(e){
                                                        fineVal = '0'
                                                    }
                                                    fineVal = parseFloat(fineVal.replace(/,/g, ''));


                                                    var princ = paymentAmt - fineVal - val

                                                    document.getElementById('principalamount{{ forloop.counter }}').value = princ


                                                }


                                            </script>
                                        {% endfor %}
                                    {% endif %}
                                    {% if detail.rate_type == 2 %}
                                        {% for dat in data %}
                                            <tr>
                                                <td>{{ forloop.counter }}</td>
                                                <td>{{ dat.1 }}</td>
                                                <td>{{ dat.9|intcomma }} <span style="color: red">{% if dat.8 > 0 %}
                                                    <span
                                                            style="color: red">({{ dat.8 }})</span>{% endif %}</span>
                                                </td>
                                                <td>{{ dat.0|intcomma }}</td>
                                                <td>{{ dat.3|intcomma }}</td>
                                                <td>{{ dat.5|intcomma }}</td>
{#                                                <td>{{ dat.6|intcomma }}</td>#}
                                                {% if unpaid_fines > 0 and dat.4 == 1 %}
                                                    <td>{{ dat.6|add:unpaid_fines |intcomma }}
                                                        <span style="color: red">({{ unpaid_fines }})</span>
                                                    </td>
                                                {% else %}
                                                    <td>{{ dat.6|intcomma }}</td>
                                                {% endif %}
                                                <td>{{ dat.10|intcomma }}</td>
                                                <td>{{ dat.2|intcomma }}</td>
                                                <td>
                                                    {% if real_loan_details.loan_status == 4 %}
                                                        <button class="btn btn-success btn-sm" disabled><i
                                                                class="fa fa-check"></i>
                                                            Paid
                                                        </button>
                                                    {% else %}

                                                        {% if dat.4 == 1 %}
                                                            <button data-bs-toggle="modal"
                                                                    data-bs-target=".pay{{ forloop.counter }}"
                                                                    class="btn btn-primary btn-sm"{% if not can_handle_loan_repayment %}disabled{% endif %}><i
                                                                    class="spinner-grow spinner-grow-sm"
                                                                    role="status"><span
                                                                    class="sr-only">Loading...</span></i> Pay Now
                                                            </button>
                                                        {% endif %}

                                                        {% if dat.4 == 0 %}
                                                            <button class="btn btn-success btn-sm"><i
                                                                    class="fa fa-check"></i>
                                                                Paid
                                                            </button>
                                                        {% endif %}

                                                        {% if dat.4 == 2 %}
                                                            <button class="btn btn-secondary btn-sm"
                                                                    title="You cannot pay this schedule now"><i
                                                                    class="fa fa-recycle"></i> Pending
                                                            </button>
                                                        {% endif %}
                                                    {% endif %}


                                                </td>
                                            </tr>
                                            <div class="modal pay{{ forloop.counter }}" tabindex="-1" role="dialog"
                                                 aria-hidden="true">
                                                <div class="modal-dialog">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title" id="exampleLargeModalLabel">Loan
                                                                Repayment
                                                            </h5>
                                                            <button type="button" class="btn-close"
                                                                    data-bs-dismiss="modal"
                                                                    aria-label="Close">
                                                            </button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <form method="post" enctype="multipart/form-data">
                                                                {% csrf_token %}
                                                                <div class="row">
                                                                    <div class="mb-2 col-md-12">
                                                                        <label class="form-label" for="d_date">Payment
                                                                            Date</label>
                                                                        <input type="date"
                                                                               class="form-control"
                                                                               id="d_date" max="{% now 'Y-m-d' %}"
                                                                               name="d_date"
                                                                               placeholder="date"
                                                                               required>
                                                                    </div>
                                                                    <div class="mb-2 col-md-12">
                                                                        <label class="form-label" for="pamount">Payment
                                                                            Amount</label>
                                                                        <input type="text"
                                                                               class="form-control" data-type="currency"
                                                                               id="pamount{{ forloop.counter }}"
                                                                               onkeyup="updateprincipal{{ forloop.counter }}(this.value);"
                                                                               name="amount" placeholder="amount"
{#                                                                               value="{{ dat.6|intcomma }}"#}

                                                                               value={% if unpaid_fines > 0 %}"{{ dat.6|add:unpaid_fines|intcomma }}" {% else %}"{{ dat.6|add:dat.8|intcomma }}"{% endif %}
{#                                                                               value={% if unpaid_fines > 0 %} "{{ unpaid_fines|intcomma }}" {% else %}"{{ dat.8|intcomma }}"{% endif %}#}
                                                                               required>
                                                                    </div>


                                                                    <div class="mb-2 col-md-12">
                                                                        <label class="form-label"
                                                                               for="principalamount">Principal
                                                                            Amount</label>

                                                                        <input type="text" readonly
                                                                               class="form-control"
                                                                               id="principalamount{{ forloop.counter }}"
                                                                               name="principalamount"
                                                                               placeholder="principalamount"
                                                                               value="{{ dat.6|sub:dat.7|sub:dat.8|intcomma }}"
                                                                               required>

                                                                    </div>

                                                                    <div class="mb-2 col-md-12">
                                                                        <label class="form-label" for="d_date">Interest
                                                                            Amount</label>

                                                                        <input type="text" data-type="currency"
                                                                               class="form-control"

                                                                               id="interestamount{{ forloop.counter }}"
                                                                               name="interestamount"
                                                                               placeholder="interestamount"
                                                                               onkeyup="updateprincipalOnInterestChange{{ forloop.counter }}(this.value);"
                                                                               value="{{ dat.7 }}" required>

                                                                    </div>
                                                                    {% if dat.8 > 0 or unpaid_fines > 0 %}
                                                                        <div class="mb-2 col-md-12">
                                                                            <label class="form-label"
                                                                                   for="d_date">Fine</label>

                                                                            <input type="text"
                                                                                   class="form-control"
                                                                                   id="fineamount{{ forloop.counter }}"
                                                                                   name="fineamount"
                                                                                   placeholder="fineamount"
                                                                                   oninput="updateFineChange{{ forloop.counter }}(this.value)"
                                                                                   value={% if unpaid_fines > 0 %} "{{ unpaid_fines|intcomma }}" {% else %}"{{ dat.8|intcomma }}"{% endif %}
                                                                                   required>

                                                                        </div>
                                                                    {% else %}
                                                                        <input type="hidden"
                                                                               class="form-control"
                                                                               name="fineamount"
                                                                               placeholder="fineamount" value="0"
                                                                               required>
                                                                    {% endif %}
                                                                    {% if detail.repayment_method == 1 %}
                                                                        <div class="mb-2 col-md-12">
                                                                            <label class="form-label" for="debited">Recieved
                                                                                through
                                                                                (Dr
                                                                                account)</label>
                                                                            <select class="form-control"
                                                                                    id="debited" name="debited"
                                                                                    required>
                                                                                <option value="" selected disabled>
                                                                                    Select Account
                                                                                </option>
                                                                                <option value="m">Member Acct</option>
                                                                                {% for acct in bankaccounts %}
                                                                                    <option value={{ acct.id }}> {{ acct.name }}
                                                                                    </option>
                                                                                {% endfor %}
                                                                            </select>
                                                                        </div>



                                                                        <div class="mb-2 col-md-12">
                                                                            <label class="form-label" for="d_date">Reference
                                                                                Number</label>

                                                                            <input type="text"
                                                                                   class="form-control"
                                                                                   name="reference"
                                                                                   placeholder="Reference Number"
                                                                                   value="{{ reference }}" required>

                                                                        </div>
                                                                    {% else %}
                                                                        <input type="hidden" name="debited"
                                                                               value="{{ memberledger.id }}"
                                                                               required>
                                                                    {% endif %}
                                                                    <div class="mb-2 col-md-12">
                                                                        <label class="form-label" for="narration">Narration</label>
                                                                        <textarea
                                                                                class="form-control"
                                                                                id="narration" name="narration"
                                                                                placeholder="Narration"></textarea>
                                                                    </div>
                                                                    <input type="hidden" name="loanid"
                                                                           value="{{ loanid }}"
                                                                           required>

                                                                    <input type="hidden" class="form-control"
                                                                           value="{{ principalbal }}"
                                                                           name="principalbalance">
                                                                    <input type="hidden" name="form_type"
                                                                           value="repay"
                                                                           required>
                                                                </div>
                                                                <div class="modal-footer">
                                                                    <button type="button" class="btn btn-warning"
                                                                            data-bs-dismiss="modal">Close
                                                                    </button>
                                                                    <button type="submit" class="btn btn-primary"
                                                                            id="paybtn"
                                                                            onclick="checksubmitted()">Continue
                                                                    </button>
                                                                </div>
                                                            </form>
                                                        </div>
                                                        <script>
                                                            function checksubmitted() {

                                                                var easmount = document.getElementById('pamount{{ forloop.counter }}').value;
                                                                var ramount = parseFloat(easmount.replace(/,/g, ''));
                                                                var rbalance = "{{ generalbalance }}"

                                                                var prinncipal = document.getElementById('principalamount{{ forloop.counter }}').value
                                                                if (parseFloat(ramount) > parseFloat(rbalance)) {
                                                                    document.getElementById('balancerror').innerHTML = 'Amount is greater than current balance'
                                                                    document.getElementById('balancerror').style.display = 'block'
                                                                    document.getElementById('balancerror').style.color = 'red'
                                                                    document.getElementById('paybtn').disabled = true
                                                                } else {
                                                                    return false
                                                                }
                                                            }
                                                        </script>
                                                    </div>
                                                </div>
                                            </div>
                                            <script>
                                                function updateprincipal{{forloop.counter}}(vala) {

                                                    //payment amount value
                                                    if(vala.trim() === ''){
                                                        vala = '0'
                                                    }
                                                    val = parseFloat(vala.replace(/,/g, ''));

                                                    var interestVal = document.getElementById('interestamount{{ forloop.counter }}').value
                                                    if(interestVal.trim() === ''){
                                                        interestVal = '0'
                                                    }

                                                    interestVal = parseFloat(interestVal.replace(/,/g, ''));
                                                    var fineVal = ''
                                                    try{
                                                        fineVal = document.getElementById('fineamount{{ forloop.counter }}').value
                                                        if(fineVal.trim() === ''){
                                                            fineVal = '0'
                                                        }
                                                    }catch(e){
                                                        fineVal = '0'
                                                    }
                                                    fineVal = parseFloat(fineVal.replace(/,/g, ''));

                                                    var princ = val - interestVal - fineVal
                                                    document.getElementById('principalamount{{ forloop.counter }}').value = princ
                                                    document.getElementById('balancerror').style.display = 'block'
                                                    document.getElementById('pamount{{ forloop.counter }}').value = vala
                                                }

                                                function updateFineChange{{forloop.counter}}(vala) {
                                                    if(vala.trim() === ''){
                                                        vala = '0'
                                                    }
                                                    val = parseFloat(vala.replace(/,/g, ''));

                                                    let paymentAmt = document.getElementById('pamount{{ forloop.counter }}').value
                                                    if(paymentAmt.trim() === ''){
                                                        paymentAmt = '0'
                                                    }
                                                    paymentAmt = parseFloat(paymentAmt.replace(/,/g, ''));
                                                    var interestAmt = document.getElementById('interestamount{{ forloop.counter }}').value
                                                    if(interestAmt.trim() === ''){
                                                        interestAmt = '0'
                                                    }
                                                    interestAmt = parseFloat(interestAmt.replace(/,/g, ''));

                                                    var princ = paymentAmt - interestAmt - val

                                                    {#var principal = val - intval#}
                                                    document.getElementById('principalamount{{ forloop.counter }}').value = princ
                                                    document.getElementById('balancerror').style.display = 'block'

                                                }

                                                function updateprincipalOnInterestChange{{forloop.counter}}(vala) {
                                                    console.log(
                                                        'currently'
                                                    )
                                                    if(vala.trim() === ''){
                                                        vala = '0'
                                                    }
                                                    val = parseFloat(vala.replace(/,/g, ''));

                                                    let paymentAmt = document.getElementById('pamount{{ forloop.counter }}').value
                                                    if(paymentAmt.trim() === ''){
                                                        paymentAmt = '0'
                                                    }
                                                    paymentAmt = parseFloat(paymentAmt.replace(/,/g, ''));
                                                    var fineVal = ''
                                                    try{
                                                        fineVal = document.getElementById('fineamount{{ forloop.counter }}').value
                                                        if(fineVal.trim() === ''){
                                                            fineVal = '0'
                                                        }
                                                    }catch(e){
                                                        fineVal = '0'
                                                    }
                                                    fineVal = parseFloat(fineVal.replace(/,/g, ''));


                                                    var princ = paymentAmt - fineVal - val

                                                    document.getElementById('principalamount{{ forloop.counter }}').value = princ


                                                }


                                            </script>
                                        {% endfor %}
                                    {% endif %}
                                    </tbody>
                                </table>
                            {% elif detail.loan_status == 7 %}
                                <h4 style="color: #11338a">LOAN WRITTEN OFF AS A BAD DEBT</h4>
                            {% elif detail.loan_status == 7 %}
                                <h4 style="color: #11338a">LOAN WRITTEN OFF AS A BAD DEBT</h4>
                            {% elif detail.loan_status == 8 %}
                                <h4 style="color: #11338a">LOAN TOPPED AND CLOSED</h4>
                            {% elif detail.loan_status == 5 %}
                                <h4 style="color: #11338a">LOAN APPLICATION REJECTED</h4>
                            {% else %}
                                <h4 style="color: #11338a">LOAN NOT YET DISBURSED</h4>
                            {% endif %}
                        </div>

                        <!-- Loan payment history Tab-->
                        <div class="tab-pane" id="payments-tab">
                            {% if detail.loan_status > 2 %}
                                <table class="table dt-responsive nowrap w-100">
                                    <thead>
                                    <tr>
                                        <th>SN</th>
                                        <th>PAYMENT DATE</th>
                                        <th>PRINCIPAL PAID</th>
                                        <th>INTEREST PAID</th>
                                        <th>FINE PAID</th>
                                        <th>TOTAL PAID</th>
                                        <th>RECEIPT</th>

                                        {% if 'delete_loan' in user_perms %}
                                            <th>Action</th>
                                        {% endif %}
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% for repayment in repayments %}
                                        <tr>
                                            <td>{{ forloop.counter }}</td>
                                            <td>{{ repayment.date_added }}</td>
                                            <td>{{ repayment.principal_paid|intcomma }}</td>
                                            <td>{{ repayment.interest_paid|intcomma }}</td>
                                            <td>{{ repayment.loan_fine|intcomma }}</td>
                                            <td>{{ repayment.reporting_amount|intcomma }}</td>
                                            {% if repayment.receipt != 'no_receipt'  %}
                                                <td>
                                                    <button class="btn btn-link"
                                                            title="Click to reprint Receipt No. {{ repayment.receipt }}"
                                                            onclick="location.href='{% url 'loan_receipt' repayment.id  %}?fine={{ repayment.loan_fine }}'">
                                                        <i class="fa fa-print"></i> {{ repayment.receipt }}</button>
                                                </td>
                                            {% else %}
                                                <td>
                                                </td>
                                            {% endif %}
                                            {% if 'delete_loan' in user_perms %}
                                                <td>

                                                    <button data-bs-toggle="modal"
                                                            data-bs-target=".delete_payment{{ forloop.counter }}"
                                                            class="btn btn-outline-danger btn-sm"><i
                                                            class="fa fa-trash"></i>
                                                        Delete
                                                    </button>


                                                </td>
                                            {% endif %}

                                            <div class="modal delete_payment{{ forloop.counter }}" tabindex="-1"
                                                 role="dialog"
                                                 aria-hidden="true">
                                                <div class="modal-dialog">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title" id="exampleLargeModalLabel">Delete
                                                                Loan Payment
                                                            </h5>
                                                            <button type="button" class="btn-close"
                                                                    data-bs-dismiss="modal"
                                                                    aria-label="Close">
                                                            </button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <form method="post" enctype="multipart/form-data">
                                                                {% csrf_token %}
                                                                <div class="row">
                                                                    <input type="hidden" name="receipt"
                                                                           value="{{ repayment.receipt }}" required>
                                                                    <input type="hidden" name="loanid"
                                                                           value="{{ loanid }}"
                                                                           required>
                                                                    <input type="hidden" name="form_type"
                                                                           value="deleterepayment"
                                                                           required>

                                                                    <input type="hidden" name="amount"
                                                                           value="{{ repayment.paidamount|intcomma }}"
                                                                           required>

                                                                    <input type="hidden" name="tdate"
                                                                           value="{{ repayment.tx_date }}"
                                                                           required>
                                                                    <div class="mb-2 col-md-12">

                                                                        <div style="text-align: center;">
                                                                            <i class="fa fa-warning fa-5x"
                                                                               style="color: red"></i>
                                                                            <h4 style="color: red"><b>Are you sure you
                                                                                want to
                                                                                delete payment
                                                                                <strong>{{ repayment.paidamount|intcomma }}</strong>
                                                                                from this loans?</b>
                                                                            </h4>
                                                                            <h5 style="color: Blue">This process can not
                                                                                be
                                                                                reversed</h5>


                                                                            <label>Reason: (Provide a reason why you are
                                                                                deleting this payment)</label>
                                                                            <input type="text" minlength="5"
                                                                                   class="form-control" name="reason"
                                                                                   placeholder="Enter Reason...."
                                                                                   required>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="modal-footer">
                                                                    <button type="button" class="btn btn-secondary"
                                                                            data-bs-dismiss="modal">No
                                                                    </button>
                                                                    <button type="submit" class="btn btn-primary">Yes
                                                                        Delete
                                                                    </button>
                                                                </div>
                                                            </form>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            {% else %}
                                <h4 style="color: #131b6e">NO PAYMENTS FOUND</h4>
                            {% endif %}
                        </div>

                        <!-- Loan Securities Tab -->
                        <div class="tab-pane" id="securities-tab">
                            
                            {% if detail.loan_status == 0 %}
                                <div class="button-list d-flex justify-content-end">
                                    {% if nsecurities >= maxi_securities %}
                                        <button class="pull-right btn btn-sm btn-secondary disabled text-capitalize mr-3"
                                                disabled
                                                title="Sorry you can not add more securities. You might have reached the security limit of {{ maxi_securities }}">
                                            <i
                                                    class="fa fa-ban mr-2"></i> Security
                                        </button>
                                    {% endif %}
                                    {% if nsecurities < maxi_securities %}
                                        <button
                                                class="pull-right btn btn-sm btn-outline-primary text-capitalize mr-3"
                                                data-bs-toggle="modal" data-bs-target=".add_security"><i
                                                class="fa fa-plus mr-2"></i> Security
                                        </button>
                                    {% endif %}
                                </div>
                            {% endif %}
                            <div class="mt-2">
                                {% if remaining_required_security == 0 %}
                                    {% if real_loan_details.loan_status < 3 %}
                                        <div class="alert alert-success" role="alert">
                                            All the security has been provided
                                        </div>
                                    {% endif %}
                                {% else %}
                                    <div class="alert alert-danger" role="alert">
                                        More security is required
                                    </div>
                                {% endif %}

                            </div>

                            {% if savings_required > applicant_savings %}
                                <div class="alert alert-danger mt-2" role="alert">
                                    More savings of {{ currency.currency }} {{more_savings_required|intcomma}} are required
                                </div>
                            {% endif %}
                            
                            {% if securities %}
                                <table class="table dt-responsive nowrap w-100">
                                    <thead>
                                    <tr>
                                        <th>SN</th>
                                        <th>Security</th>
                                        <th>Value</th>
                                        <th>Proof</th>
                                        <th>Description</th>
                                        <th>Action</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% for security in securities %}
                                        <tr>
                                            <td>{{ forloop.counter }}</td>
                                            <td>{{ security.name }}</td>
                                            <td>{{ security.value|intcomma }}</td>
                                            <td><a target="popup"
                                                   onclick="window.open('{{ security.file_url|default_if_none:'#' }}','popup','width=600,height=600'); return false;"
                                                   href="{{ security.file_url|default_if_none:'#' }}">Proof</a></td>
                                            <td>{{ security.description }}</td>
                                            <td>
                                                <div class="button-list">
                                                    {% if detail.loan_status == 0 %}
                                                        <button data-bs-toggle="modal"
                                                                data-bs-target=".edit_security{{ security.id }}"
                                                                class="btn btn-outline-info btn-sm"><i
                                                                class="fa fa-edit"></i>
                                                            Edit
                                                        </button>
                                                        <button data-bs-toggle="modal"
                                                                data-bs-target=".delete_security{{ security.id }}"
                                                                class="btn btn-outline-danger btn-sm"><i
                                                                class="fa fa-trash"></i>
                                                            Delete
                                                        </button>
                                                    {% else %}
                                                        <button class="btn btn-outline-info btn-sm"
                                                                title="You can not complete this action. Loan is already appraised">
                                                            <i
                                                                    class="fa fa-ban"></i> Edit
                                                        </button>
                                                        <button class="btn btn-outline-danger btn-sm"
                                                                title="You can not complete this action. Loan is already appraised">
                                                            <i
                                                                    class="fa fa-ban"></i> Delete
                                                        </button>
                                                    {% endif %}
                                                </div>
                                            </td>
                                        </tr>
                                        <div class="modal edit_security{{ security.id }}" tabindex="-1"
                                             role="dialog"
                                             aria-hidden="true">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="exampleLargeModalLabel">Edit
                                                            Security
                                                        </h5>
                                                        <button type="button" class="btn-close"
                                                                data-bs-dismiss="modal"
                                                                aria-label="Close">
                                                        </button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <form method="post" enctype="multipart/form-data">
                                                            {% csrf_token %}
                                                            <div class="row">
                                                                <div class="mb-2 col-md-12">
                                                                    <label class="form-label"
                                                                           for="name">Name</label>
                                                                    <input type="text"
                                                                           class="form-control"
                                                                           id="name"
                                                                           name="name"
                                                                           placeholder="Enter Loan Security Name"
                                                                           value="{{ security.name }}" required>
                                                                    <input type="hidden" name="securityid"
                                                                           value="{{ security.id }}" required>
                                                                    <input type="hidden" name="loanid"
                                                                           value="{{ loanid }}"
                                                                           required>
                                                                    <input type="hidden" name="form_type"
                                                                           value="editsecurity" required>
                                                                </div>
                                                                <div class="mb-2 col-md-12">
                                                                    <label class="form-label"
                                                                           for="value">Value</label>
                                                                    <input type="text"
                                                                           class="form-control"
                                                                           id="value"
                                                                           value="{{ security.value|intcomma }}"
                                                                           name="value" data-type="currency"
                                                                           placeholder="Enter Security Value"
                                                                           required>
                                                                </div>
                                                                <div class="mb-2 col-md-12">
                                                                    <label class="form-label" for="description">Description</label>
                                                                    <textarea
                                                                            class="form-control"
                                                                            id="description" name="description"
                                                                            placeholder="Enter Security Description"> {{ security.description }}</textarea>
                                                                </div>
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-secondary"
                                                                        data-bs-dismiss="modal">Close
                                                                </button>
                                                                <button type="submit"
                                                                        class="btn btn-primary">Submit
                                                                </button>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        {# =================DELETE SECURITY ==============#}
                                        <div class="modal delete_security{{ security.id }}" tabindex="-1"
                                             role="dialog"
                                             aria-hidden="true">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="exampleLargeModalLabel">Delete
                                                            security
                                                        </h5>
                                                        <button type="button" class="btn-close"
                                                                data-bs-dismiss="modal"
                                                                aria-label="Close">
                                                        </button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <form method="post" enctype="multipart/form-data">
                                                            {% csrf_token %}
                                                            <div class="row">
                                                                <input type="hidden" name="securityid"
                                                                       value="{{ security.id }}" required>
                                                                <input type="hidden" name="loanid"
                                                                       value="{{ loanid }}"
                                                                       required>
                                                                <input type="hidden" name="form_type"
                                                                       value="deletesecurity"
                                                                       required>
                                                                <div class="mb-2 col-md-12">
                                                                    <div style="text-align: center;">
                                                                        <i class="fa fa-warning fa-5x"
                                                                           style="color: red"></i>
                                                                        <h4 style="color: red"><b>Are you sure you
                                                                            want to
                                                                            delete Security <strong>{{ security.name
                                                                                    }}</strong> from this loans?</b>
                                                                        </h4>
                                                                        <h5 style="color: Blue">This process can not
                                                                            be
                                                                            reversed</h5>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-secondary"
                                                                        data-bs-dismiss="modal">No
                                                                </button>
                                                                <button type="submit" class="btn btn-primary">Yes
                                                                    Delete
                                                                </button>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    {% endfor %}
                                    </tbody>
                                </table>
                                <!-- ==========SECURITY VALUE =============== -->
                                
                                <div class="col-md-12">
                                    
                                    <div class="row mt-4">
                                        <div class="col-md-6">
                                            <h5><b>Total Security value Required:</b></h5>
                                        </div>
                                        
                                        <div class="col-md-6">
                                            <h5><b>{{ currency.currency }} {{ needed_value|intcomma }}</b></h5>
                                        </div>
                                    </div>
                                    <div class="row mt-4">
                                        <div class="col-md-6">
                                            <h5><b>Total Security value Provided:</b></h5>
                                        </div>
                                        <div class="col-md-6">
                                            <h5><b>{{ currency.currency }} {{ total_security_value|intcomma }}</b></h5>
                                        </div>
                                    </div>
                                </div>
                            {% else %}
                                <!-- ==========SECURITY VALUE =============== -->
                                
                                <div class="col-md-12">
                                    <div class="row mt-4">
                                        <div class="col-md-6">
                                            <h5><b>Total Security value Required:</b></h5>
                                        </div>
                                        <div class="col-md-6">
                                            <h5><b>{{ currency.currency }} {{ needed_value|intcomma }}</b></h5>
                                        </div>
                                    </div>
                                </div>
                            {% endif %}
                            {% if use_shares == True %}
                                <div class="col-md-12">
                                    <div class="row mt-4">
                                        <div class="col-md-6">
                                            <h5><b>Total Savings Required:</b></h5>
                                        </div>
                                        <div class="col-md-6">
                                            <h5><b>{{ currency.currency }} {{ savings_required|intcomma }} ({{loan_percentage_required}} Must be met)</b></h5>
                                        </div>
                                    </div>
                                    <div class="row mt-4">
                                        <div class="col-md-6">
                                            <h5><b>Total Savings:</b></h5>
                                        </div>
                                        <div class="col-md-6">
                                            <h5><b>{{ currency.currency }} {{ applicant_savings|intcomma }}</b></h5>
                                        </div>
                                    </div>
                                    <!-- <div class="row mt-4">
                                        <div class="col-md-6">
                                            <h5><b>Total Shares Value:</b></h5>
                                        </div>
                                        <div class="col-md-6">
                                            <h5><b>{{ currency.currency }} {{ member_shares|intcomma }}</b></h5>
                                        </div>
                                    </div> -->
                                    <div class="row mt-4">
                                        <div class="col-md-6">
                                            <h5><b>Remaining security:</b></h5>
                                        </div>
                                        <div class="col-md-6">
                                            <h5><b>{{ currency.currency }} {{ remaining_required_security|intcomma }}</b></h5>
                                        </div>
                                    </div>
                                
                                </div>
                            {% endif %}
                        </div>

                        <!-- Loan Guarantors Tab -->
                        <div class="tab-pane" id="guarantors-tab">
                            <div class="button-list d-flex justify-content-end">
                                {% if detail.loan_status == 0 and not real_loan_details.group_guaratorship %}
                                    <button class="btn btn-primary pull-right mr-3" data-bs-toggle="modal"
                                            data-bs-target=".add_guarantor"><i class="fa fa-plus"></i> Add
                                        Guarantor
                                    </button>
                                {% endif %}
                            </div>
                            {% if not real_loan_details.group_guaratorship %}
                                {% if guarantors %}
                                    <table class="table dt-responsive nowrap w-100">
                                        <thead>
                                        <tr>
                                            <th>SN</th>
                                            <th>Guarantor</th>
                                            <th>Contact</th>
                                            <th>Action</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        {% for guarantor in guarantors %}
                                            <tr>
                                                <td>{{ forloop.counter }}</td>
                                                <td>{{ guarantor.biodata.name }}</td>
                                                <td>{{ guarantor.biodata.contact }}</td>
                                                <td>
                                                    {% if detail.loan_status == 0 %}
                                                        <button data-bs-toggle="modal"
                                                                data-bs-target=".delete_guarantor{{ guarantor.id }}"
                                                                class="btn btn-danger btn-outline btn-sm"><i
                                                                class="fa fa-trash"></i>
                                                            Delete
                                                        </button>
                                                    {% else %}
                                                        <button class="btn btn-outline-danger btn-sm"
                                                                title="You can not complete this action. Loan is already appraised">
                                                            <i
                                                                    class="fa fa-ban"></i> Delete
                                                        </button>
                                                    {% endif %}
                                                </td>
                                            </tr>
                                            {# ==============DELETE SECURITY ===========#}
                                            <div class="modal delete_guarantor{{ guarantor.id }}" tabindex="-1"
                                                role="dialog"
                                                aria-hidden="true">
                                                <div class="modal-dialog">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title" id="exampleLargeModalLabel">Delete
                                                                security
                                                            </h5>
                                                            <button type="button" class="btn-close"
                                                                    data-bs-dismiss="modal"
                                                                    aria-label="Close">
                                                            </button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <form method="post" enctype="multipart/form-data">
                                                                {% csrf_token %}
                                                                <div class="row">
                                                                    <input type="hidden" name="guarantorid"
                                                                        value="{{ guarantor.id }}" required>
                                                                    <input type="hidden" name="loanid"
                                                                        value="{{ loanid }}"
                                                                        required>
                                                                    <input type="hidden" name="form_type"
                                                                        value="deleteguarantor" required>
                                                                    <div class="mb-2 col-md-12">
                                                                        <div style="text-align: center;">
                                                                            <i class="fa fa-warning fa-5x"
                                                                            style="color: red"></i>
                                                                            <h4 style="color: red"><b>Are you sure you
                                                                                want to
                                                                                delete Guarantor <strong>{{
                                                                                        guarantor.biodata.name }}</strong>
                                                                                from
                                                                                this loans?</b></h4>
                                                                            <h5 style="color: Blue">This process can not
                                                                                be
                                                                                reversed</h5>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="modal-footer">
                                                                    <button type="button" class="btn btn-secondary"
                                                                            data-bs-dismiss="modal">No
                                                                    </button>
                                                                    <button type="submit" class="btn btn-primary">Yes
                                                                        Delete
                                                                    </button>
                                                                </div>
                                                            </form>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        {% endfor %}
                                        </tbody>
                                    </table>
                                {% else %}
                                    <h2>At least {{ minguarantors }} Guarantors are required</h2>
                                {% endif %}
                            {% else %}
                            <div>
                                <div class="alert alert-success" role="alert">
                                    <span>Guarantors automatically determined. This member belong to the group below and the whole group and its members are guarantors</span><br/>
                                    {% if the_group_guarantor is not None%}
                                        <h4>{{the_group_guarantor.name}}</h4>
                                        <a href="{% url 'group_detail' the_group_guarantor.id %}">View members</a>
                                    {% else %}
                                        <h5>Group nolonger exists</h5>
                                    {% endif %}

                                </div>
                            </div>
                            
                            {% endif %}
                        </div>

                        <!-- Loan file uploads Tab -->
                        <div class="tab-pane" id="uploads-tab">
                            {% if can_access_committee_action %}
                                {% if detail.loan_status <= 3 %}
                                    <div class="button-list d-flex justify-content-end">
                                        <button class="btn btn-outline-primary btn-sm pull-right mr-3"
                                                data-bs-toggle="modal"
                                                data-bs-target=".add_document"><i class="feather icon-plus mr-2"></i>Add
                                            Document
                                        </button>
                                    </div>
                                {% endif %}
                            {% endif %}
                            <!-- ========ADD DOCUMENT MODAL ====== -->
                            <div class="modal add_document" tabindex="-1" role="dialog" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="exampleLargeModalLabel">Add loan document</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                    aria-label="Close">
                                            </button>
                                        </div>
                                        <div class="modal-body">
                                            <form method="post" enctype="multipart/form-data">
                                                {% csrf_token %}
                                                <div class="mb-2">
                                                    <label class="form-label" for="name">Name</label>
                                                    <input type="text" class="form-control"
                                                           id="name"
                                                           name="name" placeholder="Enter Loan Security Name"
                                                           value="{{ security.name }}" required>
                                                    <input type="hidden" name="loanid" value="{{ loanid }}" required>
                                                    <input type="hidden" name="form_type" value="addfile" required>
                                                </div>
                                                <div class="mb-2">
                                                    <label class="form-label" for="file">Loan file</label>
                                                    <div class="custom-file">
                                                        <input class="form-control" name="file"
                                                               id="file" type="file">
                                                    </div>
                                                </div>
                                                <div class="mb-2">
                                                    <label class="form-label" for="description">Description</label>
                                                    <textarea class="form-control"
                                                              id="description"
                                                              name="description"
                                                              placeholder="Enter Security Description"> {{ security.description }}</textarea>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary"
                                                            data-bs-dismiss="modal">Close
                                                    </button>
                                                    <button type="submit" class="btn btn-primary">Submit</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <table class="table dt-responsive nowrap w-100">
                                <thead>
                                <tr>
                                    <th>SN</th>
                                    <th>Document Name</th>
                                    <th>Document</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for doc in docs %}
                                    <tr>
                                        <td>{{ forloop.counter }}</td>
                                        <td>{{ doc.file_name }}</td>
                                        <td><a target="popup"
                                               onclick="window.open('{{ doc.file.url }}','popup','width=600,height=600'); return false;"
                                               href="{{ doc.file.url }}">File</a></td>
                                        <td>
                                            {% if detail.loan_status == 0 or detail.loan_status == 1 or detail.loan_status == 2 %}
                                                <button class="btn btn-info btn-outline btn-sm"><i
                                                        class="fa fa-edit"></i>Edit
                                                </button>
                                                <button class="btn btn-danger btn-outline btn-sm"><i
                                                        class="fa fa-trash"></i> Delete
                                                </button>
                                            {% else %}
                                                <button class="btn btn-outline-info btn-sm"
                                                        title="You can not complete this action. Loan is already Disbursed">
                                                    <i
                                                            class="fa fa-ban"></i> Edit
                                                </button>
                                                <button class="btn btn-outline-danger btn-sm"
                                                        title="You can not complete this action. Loan is already Disbursed">
                                                    <i
                                                            class="fa fa-ban"></i> Delete
                                                </button>
                                            {% endif %}
                                        </td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End col -->

        <!-- ==================UPDATE LOAN ================ -->
        <div class="modal edit_loan" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleLargeModalLabel">Edit Loan application</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        </button>
                    </div>
                    <div class="modal-body">
                        <form method="post" enctype="multipart/form-data">
                            {% csrf_token %}
                            <div class="row">
                                <div class="mb-2 col-md-6">
                                    <label class="form-label" for="account">Member Account</label>
                                    <input type="text" disabled class="form-control border-primary" id="amount"
                                           name="amount" placeholder="Enter amount" value="{{ detail.account }}"
                                           required>
                                    <input type="hidden" name="loanid" value="{{ loanid }}" required>
                                    <input type="hidden" name="form_type" value="editloan" required>
                                </div>
                                <div class="mb-2 col-md-6">
                                    <label class="form-label" for="loan_type">Loan Type</label>
                                    <select class="select2 form-control  border-primary" name="loan_type"
                                            id="loan_type" required>
                                        {% for item in loantypes %}
                                            <option {% if item.id == detail.loan_type.id %} selected {% endif %}
                                                                                            value="{{ item.id }}">{{ item.name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="mb-2 col-md-6">
                                    <label class="form-label" for="amount">Amount Requested</label>
                                    <input type="number" class="form-control" id="amount"
                                           name="amount" value="{{ detail.amount_requested }}"
                                           placeholder="Enter amount"
                                           required>
                                </div>
                                <div class="mb-2 col-md-6">
                                    <label class="form-label" for="adate">Application Date</label>
                                    <input type="date" class="form-control" id="adate"
                                           name="adate"
                                           value='{{ detail.requested_on|date:"Y-m-d" }}' placeholder="Enter date"
                                           required>
                                </div>
                                <div class="mb-2 col-md-6">
                                    <label class="form-label" for="interest">Interest Rate</label>
                                    <input type="number" class="form-control" id="interest"
                                           value="{{ detail.rate }}" name="interest" placeholder="Enter interest rate"
                                           required>
                                </div>
                                <div class="mb-2 col-md-6">
                                    <label class="form-label" for="duration">Requested Duration</label>
                                    <input type="number" class="form-control" id="duration"
                                           value="{{ detail.requested_duration }}" name="duration"
                                           placeholder="Enter Duration"
                                           required>
                                </div>
                                <div class="mb-2 col-md-6">
                                    <label class="form-label" for="rate_type">Rate type</label>
                                    <select class="form-control" id="rate_type" name="rate_type"
                                            required>
                                        <option {% if detail.rate_type == 1 %} selected {% endif %} value=1>Flat rate
                                        </option>
                                        <option {% if detail.rate_type == 2 %} selected {% endif %} value=2>Reducing
                                            balance
                                        </option>
                                    </select>
                                </div>
                                <div class="mb-2 col-md-6" id="paymentmethod">
                                    <label class="form-label" for="payment_method">Repayment method</label>
                                    <select class="form-control" id="payment_method"
                                            name="payment_method">
                                        <option {% if detail.repayment_method == 1 %} selected {% endif %} value=1>
                                            Payment by
                                            cash
                                        </option>
                                        <option {% if detail.repayment_method == 2 %} selected {% endif %} value=2>By
                                            Members
                                            Account
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                <button type="submit" class="btn btn-primary">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- ====================add security modal================================-->
        <div class="modal add_security" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleLargeModalLabel">Add Security</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        </button>
                    </div>
                    <div class="modal-body">
                        <form method="post" enctype="multipart/form-data">
                            {% csrf_token %}
                            <div class="row">
                                <div class="mb-2 col-md-12">
                                    <label class="form-label" for="name">Name</label>
                                    <input type="text" class="form-control" id="name" name="name"
                                           placeholder="Enter Loan Security Name" required>
                                    <input type="hidden" name="loanid" value="{{ loanid }}" required>
                                    <input type="hidden" name="form_type" value="1" required>
                                </div>
                                <div class="mb-2 col-md-12">
                                    <label class="form-label" for="value">Value</label>
                                    <input type="text" class="form-control" value="0" id="value"
                                           name="value" data-type="currency" placeholder="Enter Security Value"
                                           required>
                                </div>
                                <div class="mb-2 col-md-12">
                                    <label class="form-label" for="proof">Security proof</label>
                                    <div class="custom-file">
                                        <input class="form-control" name="proof" id="proof"
                                               type="file">
                                    </div>
                                </div>
                                <div class="mb-2 col-md-12">
                                    <label class="form-label" for="description">Description</label>
                                    <textarea class="form-control" id="description"
                                              name="description"
                                              placeholder="Enter Security Description" required> </textarea>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-warning" data-bs-dismiss="modal">Close</button>
                                <button type="submit" class="btn btn-primary">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- ====================add fines modal================================-->
        <div class="modal add_fines" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleLargeModalLabel">Add New Fine or penalty</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        </button>
                    </div>
                    <div class="modal-body">
                        <form method="post" enctype="multipart/form-data">
                            {% csrf_token %}
                            <div class="row">
                                <div class="mb-2 col-md-12">
                                    <label class="form-label" for="fine_amount">Fine Charged</label>
                                    <input type="text" name="fine_amount" id="fine_amount" data-type="currency"
                                           class="form-control" required>
                                    <input type="hidden" name="form_type" value="add_fines">
                                    <input type="hidden" name="loan_id" value="{{ loanid }}">
                                </div>
                                <div class="mb-2 col-md-12">
                                    <label class="form-label" for="fine_desc">Fine description</label>
                                    <textarea class="form-control" name="fine_desc" id="fine_desc" required></textarea>
                                </div>
                                <div class="mb-2 col-md-12">
                                    <label class="form-label" for="approved_dat">Fine date</label>
                                    <input type="date" class="form-control" id="fine_date" name="fine_date" required>
                                </div>

                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-warning" data-bs-dismiss="modal">Close</button>
                                <button type="submit" class="btn btn-primary">Add Fines</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- ======= COMMITTEE ACTION ======================= -->
        <div class="modal committee_action" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog ">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleLargeModalLabel">Commit actions</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        </button>
                    </div>
                    <div class="modal-body">
                        <form method="post" enctype="multipart/form-data">
                            {% csrf_token %}
                            <div class="row">
                                <div class="mb-2 col-md-12">
                                    <label class="form-label" for="comaction">Action</label>
                                    <select class="form-control" id="comaction"
                                            onchange="aapproved(this.value)" name="comaction" required>
                                        <option value="" selected disabled>Select action</option>
                                        <option value=1> Approve</option>
                                        <option value=2> Reject</option>
                                        <option value=3> Ask for modification</option>
                                    </select>
                                </div>
                                <div class="mb-2 col-md-12" id="amount_approved" style="display: none">
                                    <label class="form-label" for="a_approved">Amount Approved</label>
                                    <input class="form-control" id="a_approved" name="a_approved"
                                           value="{{ detail.amount_requested }}" required>
                                </div>

                                <div class="mb-2 col-md-12" id="approved_rate" style="display: none">
                                    <label class="form-label" for="approved_rat">Interest Rate</label>
                                    <input class="form-control" id="approved_rat"
                                           name="approved_rate"
                                           value="{{ detail.rate }}" required>
                                </div>
                                <div class="mb-2 col-md-12" id="approved_date" style="display: none">
                                    <label class="form-label" for="approved_dat">Approval Date </label>
                                    <input type="date" class="form-control" id="approved_dat"
                                           name="approved_date" value='{{ nowdate }}' required>
                                </div>
                                <div class="mb-2 col-md-12" id="approved_duration" style="display: block">
                                    <label class="form-label" for="approved_duration">Approved duration </label>
                                    <input class="form-control" id="approved_duratio"
                                           name="approved_duration" value="{{ detail.requested_duration }}" required>
                                </div>
                                <div class="mb-2 col-md-12">
                                    <label class="form-label" for="remarks">Remarks</label>
                                    <textarea class="form-control" id="remarks" name="remarks"
                                              placeholder="Remarks"></textarea>
                                </div>
                                <input type="hidden" name="loanid" value="{{ loanid }}" required>
                                <input type="hidden" name="form_type" value="com_action" required>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-warning" data-bs-dismiss="modal">Close</button>
                                <button type="submit" class="btn btn-primary">Continue</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- ======== DISBURSE LOAN ===================== -->
        <div class="modal disburse" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleLargeModalLabel">Disburse Loan</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        </button>
                    </div>
                    <div class="modal-body">
                        <form method="post" enctype="multipart/form-data">
                            {% csrf_token %}
                            <div class="row">
                                <div class="mb-2 col-md-12"><label class="form-label" for="d_date">Date</label>
                                    <input type="date" class="form-control" id="d_date"
                                           name="d_date"
                                           placeholder="date" required>
                                </div>

                                <div class="mb-2 col-md-12">
                                    <label class="form-label" for="credited">Credit account</label>
                                    <select class="form-control" id="credited" name="credited"
                                            required>
                                        <option value="" selected disabled>Select Acct</option>
                                        {% for acct in bankaccounts %}
                                            <option value="{{ acct.id }}"> {{ acct.name }} </option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="mb-2 col-md-12">
                                    <label class="form-label" for="credited">Are charges paid, Or topped up on the
                                        loan?</label>
                                    <select class="form-control" id="chargespaid" name="chargespaid"
                                            onchange="disbursable(this.value)"
                                            required>
                                        <option value="" selected disabled>Select Option</option>
                                        <option value="1"> Paid</option>
                                        <option value="2"> Added to the loan Principal</option>
                                        <option value="3"> Deducted From the loan amount</option>
                                        <option value="4">Member Acct</option>
                                    </select>
                                </div>

                                <div class="mb-2 col-md-12" style="display: none" id="charges-div"
                                     onchange="chargesacct(this.value)">
                                    <label class="form-label" for="charges-account">Charges Paid to which
                                        account?</label>
                                    <select class="form-control" id="charges-account" name="chargesaccoun">
                                        <option value="" selected disabled>Select Acct</option>
                                        {% for acct in bankaccounts %}
                                            <option value="{{ acct.id }}"> {{ acct.name }} </option>
                                        {% endfor %}
                                    </select>
                                </div>

                                <div class="mb-2 col-md-12"><label class="form-label" for="damount">Amount disbusable To
                                    the applicant</label>
                                    <input type="text" class="form-control" id="damount"
                                           name="damount" placeholder="amount" readonly value="{{ disbusable }}"
                                           required>
                                </div>

                                <div class="mb-2 col-md-12">
                                    <label class="form-label" for="credited">Disburse to member account</label>
                                    <select class="form-control" id="chargespaid" name="disburse_to" required>
                                        <option value="" selected disabled>Select Option</option>
                                        <option value="yes">Yes</option>
                                        <option value="no">No</option>
                                    </select>
                                </div>

                                <script>
                                    function disbursable(val) {
                                        let charges = '{{ totalcharges }}'
                                        let disburable = '{{ disbusable }}'

                                        if (val == 1) { //PAID
                                            document.getElementById('charges-account').required = true
                                            document.getElementById('damount').value = disburable
                                            document.getElementById('charges-div').style.display = "block"
                                        } else if (val == 2) {
                                            //Added to principal
                                            disburable = parseFloat(disburable) + parseFloat(charges)
                                            document.getElementById('damount').value = disburable
                                            document.getElementById('charges-div').style.display = "none"
                                            document.getElementById('charges-account').required = false
                                        } else if (val == 4) {
                                            // Picked from savings
                                            //Added to principal or picked from savings
                                            document.getElementById('damount').value = disburable
                                            document.getElementById('charges-div').style.display = "none"
                                            document.getElementById('charges-account').required = false
                                        } else {
                                            //Reduced from principal
                                            disburable = parseFloat(disburable) - parseFloat(charges)
                                            document.getElementById('damount').value = disburable
                                            document.getElementById('charges-div').style.display = "none"
                                            document.getElementById('charges-account').required = false
                                        }
                                    }
                                </script>
                                <div class="mb-2 col-md-12">
                                    <label class="form-label" for="voucher">Loan Voucher</label>
                                    <input type="text" class="form-control" id="voucher" name="voucher"
                                           placeholder="Loan Voucher Number"/>
                                </div>
                                <div class="mb-2 col-md-12"><label class="form-label" for="narration">Narration</label>
                                    <textarea class="form-control" id="narration" name="narration"
                                              placeholder="Narration"></textarea>
                                </div>
                                <input type="hidden" name="totalcharges" value="{{ totalcharges }}" required>
                                <input type="hidden" name="oldbalance" value="{{ oldbalance }}" required>
                                <input type="hidden" name="loanid" value="{{ loanid }}" required>
                                <input type="hidden" name="oldloanid" value="{{ oldloanid }}" required>
                                <input type="hidden" name="istopup" value="{{ istopup }}" required>
                                <input type="hidden" name="approved_amount" value="{{ detail.amount_approved }}"
                                       required>
                                <input type="hidden" name="form_type" value="disburse" required>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-warning" data-bs-dismiss="modal">Close</button>
                                <button type="submit" class="btn btn-primary">Continue</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- ======== LOAN TOPUP ============== -->
        <div class="modal topup" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleLargeModalLabel">Add loan Topup</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        </button>
                    </div>
                    <div class="modal-body">
                        <form method="post" enctype="multipart/form-data">
                            {% csrf_token %}
                            <div class="row">
                                <div class="mb-2 col-md-12">
                                    <label class="form-label" for="d_date">Date</label>
                                    <input type="date" class="form-control" id="d_date"
                                           name="d_date"
                                           placeholder="date" required>
                                </div>
                                <div class="mb-2 col-md-12">
                                    <label class="form-label" for="damount">Amount Requested</label>
                                    <input type="text" class="form-control" id="amount"
                                           onkeyup="getnewamount(this.value)" data-type="currency"
                                           name="oldamount" placeholder="Enter amount" required>
                                </div>
                                <div class="mb-2 col-md-12">
                                    <label class="form-label" for="damount">New loan amount will be</label>
                                    <input type="text" readonly class="form-control" id="newloan"
                                           value="{{ principalbal }}" data-type="currency"
                                           name="amount" required>
                                </div>
                                <div class="mb-2 col-md-12">
                                    <label class="form-label" for="duration">Duration</label>
                                    <input type="number" class="form-control" id="duration"
                                           name="duration"
                                           placeholder="Enter duration in {{ detail.loan_type.get_interval_display }}"
                                           required>


                                </div>
                                <div class="mb-2 col-md-12">
                                    <label class="form-label" for="narration">Narration</label>
                                    <textarea class="form-control" id="narration" name="narration"
                                              placeholder="Narration"></textarea>
                                </div>
                                <input type="hidden" name="loanid" value="{{ loanid }}" required>
                                <input type="hidden" name="form_type" value="topup" required>
                                <input type="hidden" name="account" value="{{ detail.accountid }}" required>
                                <input type="hidden" name="interest" value="{{ detail.rate }}" required>
                                <input type="hidden" name="rate_type" value="{{ detail.rate_type }}" required>
                                <input type="hidden" name="loan_type" value="{{ detail.loan_type.id }}" required>
                                <input type="hidden" name="payment_method" value="{{ detail.repayment_method }}"
                                       required>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-warning" data-bs-dismiss="modal">Close</button>
                                <button type="submit" class="btn btn-primary">Continue</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- ======= Committee must upload minutes warning ====== -->
        <div class="modal committee_failed" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleLargeModalLabel">Submitting for approval</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="text-center">
                            <i class="fa fa-warning fa-5x text-warning"></i>
                            <h4 class="text-danger"><b>You can not finish this action. You must upload committee
                                Minutes</b>
                            </h4>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-warning" data-bs-dismiss="modal">OK Close</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- ======= SUBMIT FOR APPROVAL ======================== -->
        <div class="modal submit-for-approval" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleLargeModalLabel">Submit for approval</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        </button>
                    </div>
                    <div class="modal-body">
                        <form method="post" enctype="multipart/form-data">
                            {% csrf_token %}
                            <div class="row">
                                <input type="hidden" name="loanid" value="{{ loanid }}" required>
                                <input type="hidden" name="form_type" value="approval" required>
                                <div class="mb-2 col-md-12">
                                    <div class="text-center">
                                        <i class="fa fa-warning fa-5x text-primary"></i>
                                        <h4 class="text-primary"><b>You are about to submit this loan application to the
                                            committee</b></h4>
                                        <h5 class="text-warning">Do you want to proceed?</h5>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-warning" data-bs-dismiss="modal">No Close</button>
                                <button type="submit" class="btn btn-primary">Yes Continue</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- ========== add Guarantor modal =========== -->
        <div class="modal fade add_guarantor" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
             aria-hidden="true">
            <div {% if nonemember == True %} class="modal-dialog modal-lg" {% else %} class="modal-dialog" {% endif %}
                                             role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Add Guarantor</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        </button>
                    </div>
                    <form method="post" enctype="multipart/form-data">
                        {% csrf_token %}
                        <div class="modal-body row">
                            {% if nonemember == True %}
                                <div class="mb-2 col-md-12">
                                    <label class="form-label" for="nonemember">Select Guarantor Type</label>
                                    <select class="form-control" name="gtype" id="nonemember"
                                            onchange="noneGuarantor(this.value)">
                                        <option value="" selected disabled>Select Guarantor Type</option>
                                        <option value=1>{{ this_business.short_name }} member/Client</option>
                                        <option value=2>None {{ this_business.short_name }} member/Client</option>
                                    </select>
                                </div>
                            {% else %}
                                <input type="hidden" name="gtype" value="0">
                            {% endif %}
                            <div class="mb-2 col-md-12" id="isaccount" {% if nonemember == True %}
                                 style="display: none"
                            {% endif %}>
                                <label class="form-label" for="gaccount">Choose a guarantor</label>
                                <div>
                                    <select data-placeholder="Choose a guarantor from the members..."
                                            class="chosen-select" tabindex="4" name="account" id="gaccount">
                                        <option value=""></option>
                                        {% for member in members_accts %}
                                            {% if detail.biodata_id == member.biodata.id %}
                                            {% else %}
                                                <option value="{{ member.biodata.id }}">{{ member.biodata.name }}
                                                    - {{ member.biodata.contact }}</option>
                                            {% endif %}
                                        {% endfor %}
                                    </select>
                                </div>
                                <input type="hidden" name="form_type" value="2">
                                <input type="hidden" name="loanid" value="{{ loanid }}">
                            </div>
                            <div class="mb-2 col-md-6" id="gname" style="display: none">
                                <label class="form-label" for="g-name">Full Name *</label>
                                <input type="text" class="form-control" id="g-name" name="name"
                                       placeholder="Enter Full name">
                            </div>
                            <div class="mb-2 col-md-6" id="ggender" style="display: none">
                                <label class="form-label" for="g-gender">Gender *</label>
                                <select class="form-control" id="g-gender" name="gender">
                                    <option value="" selected disabled>Select Gender</option>
                                    <option value="M">Male</option>
                                    <option value="F">Female</option>

                                </select>
                            </div>
                            <div class="mb-2 col-md-6" id="gdob" style="display: none">
                                <label class="form-label" for="g-dob">Date Of birth</label>
                                <br>
                                <input id="g-dob" type="date" class="form-control" name="dob">
                            </div>
                            <div class="mb-2 col-md-6" id="gcontact" style="display: none">
                                <label class="form-label" for="g-contact">Primary Contact *</label>
                                <div class="row gy-2 gx-2 align-items-center">
                                    <div class="col col-sm-3 col-md-3 col-lg-3">
                                        <select id="g-code" name="code" class="form-control"
                                                style="display:inline-block;">
                                            {% for country in countries %}
                                                <option value="{{ country.code }}">{{ country.code }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                    <div class="col col-sm-9 col-md-9 col-lg-9">
                                        <input id="g-contact" type="text" class="form-control"
                                               name="contact" placeholder="Enter Guarantor Contact"
                                               style="display:inline-block; width: 100%">
                                    </div>
                                </div>
                            </div>
                            <div class="mb-2 col-md-6" id="gcontact2" style="display: none">
                                <label class="form-label" for="g-contact2">Other Contact</label>
                                <div class="row gy-2 gx-2 align-items-center">
                                    <div class="col col-sm-3 col-md-3 col-lg-3">
                                        <select name="code1" class="form-control"
                                                style="display:inline-block;">
                                            {% for country in countries %}
                                                <option value="{{ country.code }}">{{ country.code }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                    <div class="col col-sm-9 col-md-9 col-lg-9">
                                        <input id="g-contact2" type="text" class="form-control"
                                               name="other_contact" placeholder="Other Contact"
                                               style="display:inline-block;">
                                    </div>
                                </div>
                            </div>
                            <div class="mb-2 col-md-6" id="gemail" style="display: none">
                                <label class="form-label" for="g-email">Email</label>
                                <input type="email" class="form-control" id="g-email" name="email"
                                       placeholder="Enter Email">
                            </div>
                            <div class="mb-2 col-md-6" id="gnin" style="display: none">
                                <label class="form-label" for="g-nin">NIN</label>
                                <input type="text" class="form-control" id="g-nin" name="nin"
                                       placeholder="Enter NIN">
                            </div>
                            <div class="mb-2 col-md-6" id="gmarital" style="display: none">
                                <label class="form-label" for="g-marital">Marital Status *</label>
                                <select class="form-control" name="marital_status" id="g-marital">
                                    <option value="" selected disabled>Select Marital</option>
                                    <option value="1">Single</option>
                                    <option value="2">Married</option>
                                    <option value="3">Widowed</option>
                                    <option value="4">Divorced</option>
                                </select>
                            </div>
                            <div class="mb-2 col-md-6" id="gnationality" style="display: none">
                                <label class="form-label" for="g-nationality">Nationality *</label>
                                <select class="form-control" name="country" id="g-nationality">
                                    <option value="" selected disabled>Select Country</option>
                                    {% for country in countries %}
                                        <option {% if country.code == 'UG' %}selected{% endif %}
                                                value="{{ country.code }}">{{ country.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="mb-2 col-md-6" id="gaddress" style="display: none">
                                <label class="form-label" for="g-address">Address *</label>
                                <textarea id="g-address" name="location" class="form-control"
                                          cols="4"
                                          rows="1" placeholder="Location"></textarea>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary">Save Guarantor</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- ======= Mannualy Close the loan ======================== -->
        <div class="modal close-loan" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleLargeModalLabel">Manually Close this Loan</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        </button>
                    </div>
                    <div class="modal-body">
                        <form method="post" enctype="multipart/form-data">
                            {% csrf_token %}
                            <div class="row">
                                <input type="hidden" name="loanid" value="{{ loanid }}" required>
                                <input type="hidden" name="form_type" value="close_loan">
                                <div class="mb-2 col-md-12">
                                    <div class="text-center">
                                        <i class="fa fa-warning fa-5x text-primary"></i>
                                    </div>
                                    <h4 class="text-info"><b>
                                        This is action is available because the Paid Amount
                                        (<code>{{ paidamount|intcomma }}</code>) is more or Equal to the Loan Principal
                                        (<code>{{ principal|intcomma }}</code>).
                                    </b></h4>
                                    <h4 class="text-info"><b>
                                        At this stage, loan will not close automatically because the system still
                                        notices some unpaid amount even when the equivalent of loan principal have been
                                        recovered.
                                    </b></h4>
                                    <h5>By clicking <span class="text-primary">Yes Continue</span> button, you accept
                                        that the remaining balance can be Ignored</h5>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-warning" data-bs-dismiss="modal">No Close</button>
                                <button type="submit" class="btn btn-primary">Yes Continue</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}