{% extends 'extends/layout.html' %}
{% load static %}
{% load countries %}
{% get_countries as countries %}
{% load mathfilters %}
{% load humanize %}
{% load countries %}
{% load custom_tags %}
{% block content %}

    {% block scripts %}
        <script>
            var globalState = {
                baseUrl: '{{ base_url|safe }}',
                theId: '{{ detail.id | safe }}'
            }

            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
            }
        </script>
        <script src="{% static 'sacco/assets/custom_js/new_loans_details.js' %}"></script>
        <script>
            function edit_security(pk, name, value, description) {
                let url = "/new-loans/edit-security/" + '{{ detail.id }}/' + pk + '/'
                let form = document.getElementById("edit_security_form");
                form.setAttribute("action", url);
                document.getElementById('edit_name').value = name
                document.getElementById('edit_value').value = value
                document.getElementById('edit_des').value = description

            }

        </script>
        <script>
            function delete_security(pk, name) {
                let url = "/new-loans/delete-security/" + '{{ detail.id }}/' + pk + '/'
                let form = document.getElementById("delete_security_form");
                form.setAttribute("action", url);
                document.getElementById('security_name').innerHTML = name
            }
        </script>
        <script>
            function edit_file(file, name, description, pk) {
                console.log(file)
                let url = "/new-loans/edit-document/" + '{{ detail.id }}/' + pk + '/'
                let form = document.getElementById("edit_security_form");
                form.setAttribute("action", url);
                let doc_path = document.getElementById('doc_path')
                if (file !== '') {
                    var fileLink = document.createElement('a');
                    let url = '{{ base_url }}' + file
                    fileLink.href = url;
                    fileLink.textContent = 'Click to view file';
                    doc_path.appendChild(fileLink);
                } else {
                    doc_path.innerText = 'No file attached here'
                }
                document.getElementById('document_name').value = name
                document.getElementById('document_description').value = description

            }
        </script>
        <script>
            function delete_document(pk, name) {
                let url = "/new-loans/delete-document/" + '{{ detail.id }}/' + pk + '/'
                let form = document.getElementById("delete_document_form");
                form.setAttribute("action", url);
                document.getElementById('the_doc').innerHTML = name
            }
        </script>
        <script>
            function payLoan(pay_amount, princ_amount, int_amount) {
                document.getElementById('pamount').value = pay_amount
                document.getElementById('principalamount').value = princ_amount
                document.getElementById('interestamount').value = int_amount

            }
        </script>
        <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>
        <script>
            function deleteRepayment(receipt, amount, date) {
                console.log(receipt)
                var csrfToken = document.getElementById('csrf-token').value;
                var form = document.getElementById('delete_payment_form');
                document.getElementById('repaidamount').value = amount;
                document.getElementById('repaidDate').value = date;

                form.addEventListener('submit', function (event) {
                    event.preventDefault();
                    document.getElementById("repayBtn").disabled = true;
                    //button.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...'; // Replace the button text with a loader
                    var formData = new FormData(form);
                    var xhr = new XMLHttpRequest();
                    let url = "/new-loans/delete-repayment/" + '{{ detail.id }}/' + receipt + '/'
                    xhr.open('POST', url);
                    xhr.setRequestHeader('X-CSRFToken', csrfToken);
                    xhr.onreadystatechange = function () {
                        console.log('roam')
                        if (xhr.readyState === 4 && xhr.status === 200) {
                            console.log('am happy')
                            window.location.href = '{% url 'new_loan_details' detail.id %}'
                        } else {
                            window.location.href = '{% url 'new_loan_details' detail.id %}'
                        }
                    };
                    xhr.send(formData);
                });


            }
        </script>
        <script>
            const showEditDurationModal = (id, period, current_number) => {
                console.log('Current values', id, period, current_number)
                $('#durationModal').modal('show')
                document.querySelector('#current_duration').value = current_number
                document.querySelector('#current_schedules').value = period


            }
        </script>
        {#        <script>#}
        {#            console.log('wewe')#}
        {##}
        {#            function deleteRepayment(receipt) {#}
        {#                let url = "/new-loans/delete-repayment/" + '{{ detail.id }}/' + receipt + '/'#}
        {#                let form = document.getElementById("delete_payment_form");#}
        {##}
        {#                form.setAttribute("action", url);#}
        {#            }#}
        {#        </script>#}
    {% endblock %}

    <div class="row">
        <!--  ===== PRINTABLE LOAN DETAIL AND AMORTISATION ==========  -->

        <!--  ===== 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">
                                Click to view {{ applicant }}'s Loan Details <i
                                    class="mdi mdi-chevron-down accordion-arrow text-white"></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>
                                                                {{ applicant }} <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> 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>{{ requested_duration }}</td>
                                                        </tr>
                                                        <tr>
                                                            <th>Approved Duration</th>
                                                            <td>
                                                                <div style="display:flex;width:100%;min-height: 10px;align-items: center">
                                                                    <span>{{ approved_duration }}</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 }}', '{{ detail.approved_duration }}' )"></i>
                                                                </div>


                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <th> Interest Rate</th>
                                                            <td>{{ detail.rate }} %</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"
                                                                                      action="{% url 'delete_adjustment' detail.id %}">
                                                                                    {% 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">
                                                                                        </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>
                                            <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>{{ detail.amount_approved|floatformat:2|intcomma }}</td>
                                                            </tr>
                                                            {% if detail.loan_status < 4 %}
                                                                <tr>

                                                                    <th> Disbursable Amount</th>
                                                                    <td>{{ disbusable|floatformat:2|intcomma }}</td>
                                                                </tr>
                                                            {% endif %}
                                                            <tr>
                                                                <th> Total loan Payable</th>
                                                                <td>{{ totalpayable|floatformat:2|intcomma }}</td>
                                                            </tr>
                                                            <tr>
                                                                <th> Total Interest</th>
                                                                <td>{{ totalinterest|floatformat:2|intcomma }}</td>
                                                            </tr>
                                                            <tr>
                                                                <th> Amount paid</th>
                                                                <td>{{ paidamount|floatformat:2|intcomma }}
                                                                    ({{ cleared_percent|floatformat:2 }}%)
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <th> Loan Balance</th>
                                                                <td>{{ totalpayable|sub:paidamount|floatformat:2|intcomma }}
                                                                    ({{ remaining_percent|floatformat:2 }}%)
                                                                </td>
                                                            </tr>

                                                            {% if totaladjustments == 0 %}


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


                                                            <tr>
                                                                <th> Principal Balance</th>
                                                                <td>{{ receivable|sub:principal_paid|floatformat:2|intcomma }}</td>
                                                            </tr>
                                                            <tr>
                                                                <th> Approved On</th>
                                                                <td>{{ detail.approved_on }} </td>
                                                            </tr>
                                                            <tr>
                                                                <th> Ending On</th>
                                                                <td>{{ final_payment|date|default_if_none:'' }}</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 detail.loan_status == 0 and nguarantors >= minguarantors and total_security_value >= needed_value %}
                                    <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 %}
                                {% if detail.loan_status == 1 %}

                                    {% if must_upload == True %}
                                        <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 %}

                                {% 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>
                                {% endif %}

                                {% if detail.loan_status == 0 or detail.is_topup == True %}
                                    <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
                                    </button>
                                {% endif %}

                                {% 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 %}
                                {% 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">
                                                                <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>
                                        </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>
                                        </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>

                                        <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">This process can not be reversed</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">
                    {% include 'new_loans/includes/detail_tabs.html' %}
                </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" action="{% url 'edit_loan' detail.id %}">
                            {% 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>
                                </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" action="{% url 'add_security' detail.pk %}">
                            {% 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>
                                </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>

        <!-- ======= 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" action="{% url 'loan_committee_action' detail.pk %}">
                            {% 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" action="{% url 'disburse_loan' detail.id %}">
                            {% 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="ddate"
                                           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>
                                {% if has_charges is True %}
                                    <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)"
                                                {% if has_charges is True %}required{% endif %}>
                                            <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>
                                {% endif %}

                                <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 disbursable
                                    To
                                    the applicant</label>
                                    <input type="text" class="form-control" id="damount"
                                           name="damount" placeholder="amount" readonly value="{{ disbusable }}"
                                           required>
                                </div>

                                <script>
                                    function disbursable(val) {
                                        let disburable = 0
                                        let charges = {{ totalcharges }}
                                            disburable =
                                        {{ detail.amount_approved }}

                                        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="oldloanid" value="{{ oldloanid }}" required>
                                <input type="hidden" name="istopup" value="{{ istopup }}" required>
                                <input type="hidden" name="approved_amount" value="{{ detail.amount_approved }}">
                            </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" action="{% url 'loan_submit_approval' detail.id %}">
                            {% csrf_token %}
                            <div class="row">
                                <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" action="{% url 'add_guarantor' detail.id %}">
                        {% 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 member.is_group is False %}
                                                <option value="{{ member.id }}">{{ member.biodata.name }}
                                                    - {{ member.biodata.contact }}</option>
                                                    {% else %}
                                                     <option value="{{ member.id }}">{{ member.name }}
                                                    - {{ member.contact }}</option>
                                            {% endif %}
                                        {% endfor %}
                                    </select>
                                </div>
                            </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>

        <!-- ======= Edit security modal ======================== -->
        <div class="modal edit_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">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" id="edit_security_form" enctype="multipart/form-data">
                            {% csrf_token %}
                            <div class="row">
                                <div class="mb-2 col-md-12">
                                    <label class="form-label"
                                           for="edit_name">Name</label>
                                    <input type="text"
                                           class="form-control"
                                           id="edit_name"
                                           name="name"
                                           placeholder="Enter Loan Security Name"
                                           value="" required>
                                </div>
                                <div class="mb-2 col-md-12">
                                    <label class="form-label"
                                           for="edit_value">Value</label>
                                    <input type="text"
                                           class="form-control"
                                           id="edit_value"
                                           value=""
                                           name="value" data-type="currency"
                                           placeholder="Enter Security Value"
                                           required>
                                </div>
                                <div class="mb-2 col-md-12">
                                    <label class="form-label" for="edit_des">Description</label>
                                    <textarea
                                            class="form-control"
                                            id="edit_des" name="description"
                                            placeholder="Enter 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" 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" id="delete_security_form">
                            {% csrf_token %}
                            <div class="row">
                                <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 id="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>


        {# =================DELETE DOCUMENT ==============#}
        <div class="modal delete_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">Delete
                            Document
                        </h5>
                        <button type="button" class="btn-close"
                                data-bs-dismiss="modal"
                                aria-label="Close">
                        </button>
                    </div>
                    <div class="modal-body">
                        <form method="post" id="delete_document_form">
                            {% csrf_token %}
                            <div class="row">
                                <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 Document
                                            <strong id="the_doc"></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>


        <!-- ========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" action="{% url 'add_document' detail.id %}" 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" 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"> </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>

        <div class="modal pay" 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">Repayment modal</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 'repay_loan' detail.id %}">
                            {% 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"
                                           name="amount" placeholder="amount"
                                           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"
                                           name="principalamount"
                                           placeholder="principalamount"
                                           value=""
                                           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"
                                           name="interestamount"
                                           data-type="currency"
                                           placeholder="interestamount"
                                           value="" required>

                                </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>

                                <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="narration">Narration</label>
                                    <textarea
                                            class="form-control"
                                            id="narration" name="narration"
                                            placeholder="Narration"></textarea>
                                </div>

                                <input type="hidden" class="form-control"
                                       value="{{ principalbal }}"
                                       name="principalbalance">
                            </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">Continue
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>


    </div>
{% endblock %}