<!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>
    Defaulters 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>Defaulters' 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 defaulters..." 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> -->
              </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>#</th>
                      <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Name</th>
                      <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Phone</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 Pay<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">Days<br> Defaulted
                      </th>
                      <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Amount<br> Defaulted <br>(Kshs)
                      </th>
                      <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Last Pay
                      </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> -->

                    </tr>
                  </thead>
                  <tbody>
                    {% for customer in customers %}
                      <tr>
                        <td class="align-middle">
                          <div class="btn-group my-auto">
                            <button id="menu-{{loop.index}}" type="button"
                              class="p-1 btn btn-sm btn-danger 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="#">View Customer</a>
                              <a class="dropdown-item" href="#">Edit</a>
                              <a class="dropdown-item text-danger"
                                href="#">Delete</a>
                            </div>
                          </div>
                        </td>
                        <td>
                          <div class="d-flex px-2">
                            <div class="my-auto">
                              <h6 class="mb-0 text-sm">{{customer.name}}</h6>
                            </div>
                          </div>
                        </td>
                        <td>
                          <div class="d-flex px-2">
                            <div class="my-auto">
                              <h6 class="mb-0 text-sm">{{customer.phone}}</h6>
                            </div>
                          </div>
                        </td>
                        <td>
                          <p class="text-sm font-weight-bold mb-0">{{"{:,.2f}".format(customer.amount or 0 )}}</p>
                        </td>
                        <td>
                          <p class="text-sm font-weight-bold mb-0">{{"{:,.2f}".format(customer.amount /30 )}}</p>
                        </td>
                        <td>
                          <p class="text-sm font-weight-bold mb-0">{{"{:,.2f}".format(customer.paid_amount or 0)}}</p>
                        </td>
                        <td>
                          <p class="text-sm font-weight-bold mb-0">{{customer.default_days}}</p>
                        </td>
                        <td>
                          <p class="text-sm font-weight-bold mb-0">{{(customer.fine_amount * customer.default_days) - (customer.paid_amount or 0)}}</p>
                        </td>
                        <td>
                          {% if customer.last_paid %}
                          <p class="text-sm font-weight-bold mb-0">{{customer.last_paid.strftime("%d/%m/%Y %H:%M:%S")}}</p>
                          {%else%}
                          <p class="text-sm font-weight-bold mb-0">Not Paid</p>
                          {%endif%}
                        </td>
                        <!-- <td class="align-middle text-center">
                          <a href="#"
                            class="py-1 btn btn-sm btn-info">
                            View
                          </a>
                        </td> -->
                      </tr>
                      {% 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('defaulters', page=prev)}}"
            class="{{pvis}} py-2 btn btn-sm btn-secondary">Previous</a>
          <a href="{{url_for('defaulters', 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>