{% extends 'extends/layout.html' %}
{% load static %}
{% block content %}
{% block styles %}
      {% load mathfilters %}
    {% load humanize %}
        <!-- DataTables css -->
        <link href="{% static 'sacco/assets/plugins/datatables/dataTables.bootstrap4.min.css' %}" rel="stylesheet"
              type="text/css"/>
        <link href="{% static 'sacco/assets/plugins/datatables/buttons.bootstrap4.min.css' %}" rel="stylesheet"
              type="text/css"/>
    {% endblock %}
    {% block scripts %}
        <!-- Datatable js -->
        <script src="{% static 'sacco/assets/plugins/datatables/jquery.dataTables.min.js' %}"></script>
        <script src="{% static 'sacco/assets/plugins/datatables/dataTables.bootstrap4.min.js' %}"></script>
        <script src="{% static 'sacco/assets/plugins/datatables/dataTables.buttons.min.js' %}"></script>
        <script src="{% static 'sacco/assets/plugins/datatables/buttons.bootstrap4.min.js' %}"></script>
        <script src="{% static 'sacco/assets/plugins/datatables/jszip.min.js' %}"></script>
        <script src="{% static 'sacco/assets/plugins/datatables/pdfmake.min.js' %}"></script>
        <script src="{% static 'sacco/assets/plugins/datatables/vfs_fonts.js' %}"></script>
        <script src="{% static 'sacco/assets/plugins/datatables/buttons.html5.min.js' %}"></script>
        <script src="{% static 'sacco/assets/plugins/datatables/buttons.print.min.js' %}"></script>
        <script src="{% static 'sacco/assets/plugins/datatables/buttons.colVis.min.js' %}"></script>
        <script src="{% static 'sacco/assets/plugins/datatables/dataTables.responsive.min.js' %}"></script>
        <script src="{% static 'sacco/assets/plugins/datatables/responsive.bootstrap4.min.js' %}"></script>
        <script src="{% static 'sacco/assets/js/custom/custom-table-datatable.js' %}"></script>
    {% endblock %}
    <div class="row">
        <!-- Start col -->
        <div class="col-lg-12">
            <div class="modal fade" id="loans" tabindex="-1" role="dialog"
                 aria-labelledby="exampleStandardModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleStandardModalLabel">Loan request Form</h5>
                            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <form method="post"
                              enctype="multipart/form-data">
                            {% csrf_token %}
                            <div class="modal-body">
                                <div class="form-group col-md-12">
                                    <input type="date" class="form-control" id="date"
                                           name="date_created" placeholder="Request date" required/>
                                </div>

                                <div class="form-group col-md-12">
                                    <select class="form-control" name="account_id">
                                        <option value="">Select Account</option>
                                        {% for account in member_accounts %}
                                            <option value="{{ account.the_account.id }}">
                                                {{ account.the_account.acc_number }}
                                                ({{ account.the_account.account_type.name }})
                                            </option>
                                        {% endfor %}
                                    </select>
                                </div>

                                <div class="form-group col-md-12">
                                    <input type="number" class="form-control" id="amount" min="0"
                                           name="amount"
                                           placeholder="Amount" required/>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close
                                </button>
                                <button type="submit" name="upload" class="btn btn-primary">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="card m-b-30">
                <div class="card-header">
                    <div class="row">
                        <div class="col-md-7">
                            <form class="form-inline" method="get">
                                <div class="form-group mb-2">
                                    <label class="sr-only" for="from_date">From</label>
                                    <input type="date" class="form-control form-control-sm" id="from_date"
                                           name="from_date" onfocus="(this.type='date')"
                                           value="{{ formatted_from|date:'Y-m-d' }}" required>
                                </div>
                                <div class="form-group mx-sm-3 mb-2">
                                    <label class="sr-only" for="to_date">To</label>
                                    <input type="date" class="form-control form-control-sm" id="to_date"
                                           name="to_date" value="{{ formatted_to|date:'Y-m-d' }}" required>
                                </div>
                                <button type="submit" name="filter_trans" class="btn btn-outline-dark mb-2 btn-sm">Filter
                                </button>
                            </form>
                        </div>
                        <div class="col-md-5">
                            <div class="button-list">
                                <a href="{% url 'member_loans' member.id %}" class="pull-right btn btn-secondary btn-sm"><i class="fa fa-eye mr-2"></i>View all</a>
                            <button type="button" class="btn btn-dark pull-right btn-sm"><i class="fa fa-file-excel-o mr-2" title="Upload Members"></i>Export
                            </button>
                            <a data-bs-toggle="modal" data-bs-target="#loans" href="javaScript:void(0);"
                               class="btn btn-primary pull-right btn-sm"><i
                                    class="feather icon-plus-circle mr-2"></i>Loan Request</a>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="default-datatable" class="display table table-striped table-bordered">
                            <thead>
                            <tr>
                                <th>SN</th>
                                <th>Loan Amount</th>
                                <th>Loan Date</th>
                                <th>Laon Status</th>
                                <th>Details</th>
                            </tr>
                            </thead>
                            <tbody id="search-results">
                            {% for lon in memberloans %}
                                <tr>
                                    <td>{{ forloop.counter }}</td>
                                    <td class="text-black">{{ lon.amount_requested|intcomma }}</td>
                                    <td class="text-black">
                                        {% if lon.loan_status < 3 %}
                                        {{ lon.requested_on }}
                                        {% else %}
                                        {{ lon.approved_on }}
                                        {% endif %}
                                    </td>
                                    <td class="text-black">{{ lon.get_loan_status_display }}</td>
                                   <td><a href="{% url 'loan_details' lon.id %}" class="btn btn-success btn-xs"> <i class="fa fa-eye"></i>Details</a></td>
                                </tr>
                            {% empty %}
                                <p>No transactions yet</p>

                            {% endfor %}
                            </tbody>
                            <tfoot>
                             <tr>
                                <th>SN</th>
                                <th>Loan Amount</th>
                                <th>Loan Date</th>
                                <th>Laon Status</th>
                                <th>Details</th>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                    <nav aria-label="Page navigation">
                        <ul class="pagination">
                            {% if members_list.has_previous %}
                                <li class="page-item">
                                    <a class="page-link" href="?page=1" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                        <span class="sr-only">begin</span>
                                    </a>
                                </li>
                            {% endif %}
                            {% for n in members_list.paginator.page_range %}
                                {% if members_list.number == n %}
                                    <li class="page-item active">
                                        <span class="page-link">{{ n }}<span class="sr-only">(current)</span></span>
                                    </li>
                                {% elif n > members_list.number|add:'-3' and n < members_list.number|add:'3' %}
                                    <li class="page-item"><a class="page-link" href="?page={{ n }}">{{ n }}</a></li>
                                {% endif %}
                            {% endfor %}

                            {% if members_list.has_next %}
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ members_list.paginator.num_pages }}"
                                       aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                        <span class="sr-only">end</span>
                                    </a>
                                </li>
                            {% endif %}
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
        <!-- End col -->
    </div>

{% endblock %}