<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>
    Customers List
  </title>
  <!--     Fonts and icons     -->
  {% include 'admin/includes/imports.top.html' %}
</head>

<body class="g-sidenav-show  bg-gray-100">
  {% include 'admin/includes/part.menu.html' %}
  <main class="main-content position-relative max-height-vh-100 h-100 border-radius-lg ">
    <!-- Navbar -->
    {% include 'admin/includes/part.header.html' %}
    <!-- End Navbar -->
    <div class="container-fluid py-4" style="overflow: visible !important;">
      <div class="row">
        <div class="col-12">
          <div class="card mb-4" style="overflow: visible !important;">
            <div class="card-header pb-0">
              <div class="d-flex justify-content-between">
                <div class="">
                  <h5>Customers table</h5>
                </div>
                <div class="d-flex">
                  <div class="me-3">
                    <form id="search-form2">
                      <div class="form-group d-flex">
                        <input type="search" style="min-width:400px !important;" class="form-control border border-info w-100"
                          placeholder="Search customers..." name="query" id="search-input"
                          aria-describedby="search-form">
                        <button type="submit" form="search-form2" hidden id="search-form"
                          class="btn btn-sm btn-success"></button>
                      </div>
                    </form>
                  </div>
                  <div>
                    <a href="{{url_for('admin_add_user')}}" class="btn  btn-primary">Add New Customer</a>
                  </div>
                </div>
              </div>
            </div>
            <div class="card-body px-0 pt-0 pb-2" style="overflow: visible !important;">
              <div class="table-responsive p-0" style="overflow: visible !important;">
                <table class="table align-items-center justify-content-center mb-0"
                  style="overflow: visible !important;">
                  <thead>
                    <tr>
                      
                      <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Project</th>
                      <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Requested<br> Amount<br>(Kshs)</th>
                      <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Loan<br> Amount<br>(Kshs)</th>
                      <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Expected<br>Daily Payment<br>(Kshs)</th>
                      <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Amount <br>Paid<br>(Kshs)</th>
                      <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Balance<br>(Kshs)</th>
                      <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Status</th>
                      <!--<th class="text-uppercase text-secondary text-xxs font-weight-bolder text-center opacity-7 ps-2">-->
                      <!--  Completion</th>-->
                      <!-- <th class="text-uppercase text-secondary text-xxs font-weight-bolder text-center opacity-7 ps-2">
                      </th> -->
                      <th>#</th>

                    </tr>
                  </thead>
                  <tbody>
                    {% for customer in customers %}
                    {% for loan in customer.loans %}

                    {% set am = [0] %}
                    {% for payments in loan.payments %}
                    {% if am.append(am.pop()+ payments.payment_amount) -%}{% endif %}
                    {% endfor %}
                    {% set per = (am[0] / loan.amount) * 100 %}

                    {% set amount = loan.amount %}
                    {% set loan_id = loan.id %}


                    {% if per >= 80 %}
                    {% set color = 'success' %}
                    {% elif per < 80 and per> 50 %}
                      {% set color = 'info' %}
                      {% else %}
                      {% set color = 'danger' %}
                      {% endif %}

                      <tr>
                        
                        <td>
                          <div class="d-flex px-2">
                            <div class="my-auto">
                              <h6 class="mb-0 text-sm">{{customer.name}}</h6>
                            </div>
                          </div>
                        </td>
                        <td>
                          <p class="text-sm font-weight-bold mb-0">{{"{:,.2f}".format(loan.loan_amount)}}</p>
                        </td>
                        <td>
                          <p class="text-sm font-weight-bold mb-0">{{"{:,.2f}".format(amount)}}</p>
                        </td>
                        <td>
                          <p class="text-sm font-weight-bold mb-0">{{"{:,.2f}".format(amount/30)}}</p>
                        </td>
                        <td>
                          <p class="text-sm font-weight-bold mb-0">{{"{:,.2f}".format(loan.paid_amount or 0)}}</p>
                        </td>
                        {%set p_m = loan.paid_amount | float%}
                        <td>
                          <p class="text-sm font-weight-bold mb-0">{{"{:,.2f}".format(amount - p_m)}}</p>
                      </td>
                        <td>
                          {% if loan.approved %}
                          <span style="font-size: 8px !important;"
                            class="badge badge-sm bg-gradient-success">Approved</span>
                          {% else %}
                          <span style="font-size: 8px !important;" class="badge badge-sm bg-gradient-danger">Not
                            Approved</span>
                          {% endif %}
                          {% if loan.disbursed %}
                          <span style="font-size: 8px !important;"
                            class="badge badge-sm bg-gradient-info">Disbursed</span>
                          {% endif %}
                          {% if loan.fully_paid%}
                          <span style="font-size: 8px !important;" class="badge badge-sm bg-gradient-warning">Fully
                            Repaid</span>
                          {% endif %}
                        </td>
                        
                        
                        <!--<td class="align-middle text-center">-->
                        <!--  <div class="d-flex align-items-center justify-content-center">-->
                        <!--    <span class="me-2 text-xs font-weight-bold">{{"%.0f"|format(per|float)}}%</span>-->
                        <!--    <div>-->
                        <!--      <div class="progress">-->
                        <!--        <div class="progress-bar bg-gradient-{{color}}" role="progressbar"-->
                        <!--          aria-valuenow="{{per}}" aria-valuemin="0" aria-valuemax="100"-->
                        <!--          style="width: {{per}}%;"></div>-->
                        <!--      </div>-->
                        <!--    </div>-->
                        <!--  </div>-->
                        <!--</td>-->
                        <!-- <td class="align-middle text-center">
                          <a href="{{url_for('view_customer', ID_number=customer.ID_number,loan_id=loan_id)}}"
                            class="py-1 btn btn-sm btn-info">
                            View
                          </a>
                        </td> -->
                        
                        <td class="align-middle">
                          <div class="btn-group my-auto">
                            <button id="menu-{{loop.index}}" type="button"
                              class="p-1 border-info badge badge-sm bg-info dropdown-toggle" data-bs-toggle="dropdown"
                              aria-haspopup="true" aria-expanded="false">
                              Action
                            </button>
                            <div class="dropdown-menu dropdown-menu-dark border shadow-3"
                              style="z-index: 2500 !important;" aria-labelledby="menu-{{loop.index}}">
                              <a class="dropdown-item"
                                href="{{url_for('view_customer', ID_number=customer.ID_number,loan_id=loan_id)}}">View
                                Payment</a>
                              <a class="dropdown-item"
                                href="{{url_for('user_report', ID_number=customer.ID_number,loan_id=loan_id)}}">View
                                Report</a>
                              <a class="dropdown-item" href="{{url_for('edit_customer', id=customer.ID_number,loan_id=loan_id)}}">Edit</a>
                              <a class="dropdown-item"
                                href="{{url_for('approve_request', id=customer.id,loan_id=loan_id)}}">Mark Approved</a>
                              <a class="dropdown-item"
                                href="{{url_for('mark_disbursed', id=customer.id,loan_id=loan_id)}}">Mark Disbursed</a>
                              <a class="dropdown-item text-danger"
                                href="{{url_for('delete_request', id=customer.id,loan_id=loan_id)}}">Delete</a>
                            </div>
                          </div>
                        </td>
                      </tr>
                      {% endfor %}
                      {% endfor %}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div class="d-flex justify-content-between">
          {% set current_page = request.args.get('page', none) | int%}
          {% set pvis = '' %}
          {% set nvis = '' %}
          {% if last_page %}
          {% set nvis = 'disabled' %}
          {% endif %}
          {% if current_page == 0 or current_page == 1 %}
          {% set current_page = 1 %}
          {% set pvis = 'disabled' %}
          {% endif %}
          {% set next = current_page + 1%}
          {% set prev = current_page - 1%}


          <a href="{{url_for('admin_customers', page=prev)}}"
            class="{{pvis}} py-2 btn btn-sm btn-secondary">Previous</a>
          <a href="{{url_for('admin_customers', page=next)}}" class="{{nvis}} py-2 btn btn-sm btn-secondary">Next</a>
        </div>
      </div>
      {% include 'admin/includes/part.footer.html' %}
    </div>
  </main>
  <!--   Core JS Files   -->
  {% include 'admin/includes/imports.bottom.html' %}
  <script>
    var win = navigator.platform.indexOf('Win') > -1;
    if (win && document.querySelector('#sidenav-scrollbar')) {
      var options = {
        damping: '0.5'
      }
      Scrollbar.init(document.querySelector('#sidenav-scrollbar'), options);
    }
  </script>
</body>

</html>