{% load humanize %}

{% if loan.loan_status > 2 %}
    <table class="table dt-responsive nowrap w-100">
        <thead>
        <tr>
            <th>SN{{ system_perms }}</th>
            <th>PAYMENT DATE</th>
            <th>AMOUNT</th>
            <th>BALANCE</th>
            <th>RECEIPT</th>
            {% if 'delete_loan' in user_perms %}
                <th>Action</th>
            {% endif %}
        </tr>
        </thead>
        <tbody>
        {% for repayment in repayments %}
            <tr>
                <td>{{ forloop.counter }}</td>
                <td>{{ repayment.txt_date }}</td>
                <td>{{ repayment.paidamount|intcomma }}</td>
                <td>{{ dat.9|intcomma }}</td>
                <td>
                    <button class="btn btn-link"
                            title="Click to reprint Receipt No. {{ repayment.receipt }}"
                            onclick="location.href='{% url 'loan_receipt' repayment.pk %}'">
                        <i class="fa fa-print"></i> {{ repayment.receipt }}</button>
                </td>
                {% if 'delete_loan' in user_perms %}
                    <td>

                        <button onclick="deleteRepayment('{{ repayment.receipt }}', '{{ repayment.paidamount }}', '{{ repayment.txt_date|date:'Y-m-d' }}')" data-bs-toggle="modal"
                                data-bs-target=".delete_payment"
                                class="btn btn-outline-danger btn-sm"><i
                                class="fa fa-trash"></i>
                            Delete
                        </button>


                    </td>
                {% endif %}

            </tr>
        {% endfor %}
        </tbody>
    </table>
    <div class="modal delete_payment" tabindex="-1"
         role="dialog"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleLargeModalLabel">Delete
                        Loan Payment
                    </h5>
                    <button type="button" class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="Close">
                    </button>
                </div>
                <div class="modal-body">
                    <form method="post" id="delete_payment_form">
                        <input type="hidden" name="csrfmiddlewaretoken" id="csrf-token" value="{{ csrf }}">
                        <div class="row">

                            <input type="text" name="amount"
                                   id="repaidamount"
                                   required style="display: none">

                            <input type="date" name="tdate"
                                   id="repaidDate"
                                   required style="display: none">
                            <div class="mb-2 col-md-12">

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


                                    <label>Reason: (Provide a reason why you are
                                        deleting this payment)</label>
                                    <input type="text" minlength="5"
                                           class="form-control" name="reason"
                                           placeholder="Enter Reason...."
                                           required>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary"
                                    data-bs-dismiss="modal">No
                            </button>
                            <button type="submit" class="btn btn-primary" id="repayBtn">Yes
                                Delete
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% else %}
    <h4 style="color: #131b6e">NO PAYMENTS FOUND</h4>

{% endif %}