{% extends 'extends/layout.html' %}
{% load static %}
{% block content %}
{% block styles %}
{% 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="card m-b-30">

                           <div class="card-header">
                                <div class="row">


                                    <div class="col-md-10">
                                 <form method="get" enctype="multipart/form-data" style="padding-bottom: 3px">
                                    {% csrf_token %}
  <div class="row">
                                     <div class="form-inline col-md-4">
                                       <label>Application Status : </label>
                                         <select class="form-control  border border-primary"  name="filter" id="filter" style="padding: 0px" required>
                                             <option value="" selected disabled >Select Option</option>
                                             <option value="0">Pending applications</option>
                                             <option value="1">Submitted to commit</option>
                                             <option value="2">Approved Applications</option>
                                         </select>
                                    </div>
      <div class="form-inline col-md-2">
                                        <button class="btn btn-success btn-xs"><i class="fa fa-search"></i> Search </button>
      </div>

  </div>

                                   </form>
                                    </div>

<div class="form-inline col-md-2">
{#                               <a href="{% url 'apply_loan'%}" class="btn btn-primary pull-right mr-3"><i class="feather icon-plus mr-2"></i>New Application</a></div>#}
                                </div>
                                 </div>
                            <div class="card-body">





                            <div class="row">
                             <a href="{% url 'applications_pdf' %}" class="btn btn-success pull-right mr-1"><i class='fa fa-file-pdf-o'></i> PDF</a>
                              <a href="{% url 'applications_excel' %}"  class="btn btn-success pull-right mr-1"><i class='fa fa-file-excel-o'></i> EXCEL</a>
{#                              <a href="" class="btn btn-success pull-right mr-1"><i class='fa fa-print'></i> PRINT</a>#}
                             </div>
                                <div class="table-responsive">
                                    <table id="default-datatable" class="display table table-striped table-bordered">
                                        <thead>
                                            <tr>
                                                <th>SN</th>
                                                <th>Member</th>
                                                <th>Acc. number</th>
                                                <th>amount applied</th>
                                                <th>Duration</th>
                                                <th>Status</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>

                                        {% for loanapp in loanApplications %}
                                            <tr>
                                                <td>{{ forloop.counter }}</td>
                                                <td>{{ loanapp.member_name }}</td>
                                                <td>{{ loanapp.account.acc_number }}</td>
                                                <td>{{ loanapp.amount_requested|intcomma }}</td>
                                                <td>{{ loanapp.requested_duration }} {{ loanapp.loan_type.get_interval_display }}</td>
                                                <td>{{ loanapp.get_loan_status_display }}</td>
                                               <td>

                                               <a href="{% url 'loan_details' loanapp.id %}" class="btn btn-success btn-xs"> <i class="fa fa-eye"></i>Details</a>
{#                                               <a href="{% url 'loan_details' loanapp.id %} "class="btn btn-outline-danger btn-xs"> <i class="fa fa-trash"></i>Delete</a>#}

                                           </td>

                                            </tr>
                                        {% endfor %}

                                        </tbody>
                                        <tfoot>
                                            <tr>
                                                 <th>SN</th>
                                                <th>Member</th>
                                                <th>Acc. number</th>
                                                <th>amount applied</th>
                                                <th>Duration</th>
                                                <th>Status</th>
                                                <th>Details</th>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End col -->
                </div>
{% endblock %}