<html>
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
    integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
    crossorigin="anonymous"
  />
  <link
    rel="stylesheet"
    href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css"
  />
  <link
    rel="stylesheet"
    href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.dataTables.min.css"
  />
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
    crossorigin="anonymous"
    referrerpolicy="no-referrer"
  />
  <style>
    a {
      text-decoration: none !important;
    }
    table {
      width: 100%;
    }
  </style>
  <div class="container-fluid">
    <div class="row mt-3 component-users-header">
      <div class="col">
        <h1 class="ms-5">Manage Users</h1>
      </div>
      <div class="col">
        <a class="link text-danger float-end mx-1"
          ><i class="fa fa-right-from-bracket"></i> Logout</a
        >
        <a
          class="link text-danger float-end mx-1"
          target="_blank"
          href="https://github.com/berrytechnics/repair_leads/issues/new"
          ><i class="fa fa-bug"></i> Report Bug</a
        >
        <a class="link text-danger float-end mx-1" href="/admin/dashboard"
          ><i class="fa fa-chart-line"></i> Leads Dashboard</a
        >
      </div>
    </div>
    <div class="row mt-3 component-users-table">
      <hr />
      <a href="#" class="link link-success newUser text-end px-3 pb-3"
        ><i class="fa fa-user-plus"></i
      ></a>
      <table id="table" class="stripe hover">
        <thead>
          <th>Actions</th>
          <th>Active</th>
          <th>Username/Email</th>
          <th>Name</th>
        </thead>
        <tbody>
          <% models.forEach(model => { %>
          <tr>
            <td>
              <a
                data-bs-toggle="modal"
                data-bs-target=".editModal"
                href="#"
                id="<%= model.id %>"
                class="link link-primary mx-1 editBtn"
                ><i class="fa fa-user-pen"></i
              ></a>
              <a
                data-bs-toggle="modal"
                data-bs-target=".resetModal"
                href="#"
                class="link link-warning"
                ><i class="fa fa-key"></i
              ></a>
              <a
                data-bs-toggle="modal"
                data-bs-target=".deleteModal"
                href="#"
                id="<%= model.id %>"
                class="link link-danger mx-1"
                ><i class="fa fa-trash"></i
              ></a>
            </td>
            <td><%= model.active %></td>
            <td><%= model.username %></td>
            <td><%= model.name %></td>
          </tr>
          <% }) %>
        </tbody>
      </table>
    </div>
  </div>
  <!-- Delete Modal -->
  <div class="modal deleteModal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Heads up!</h5>
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="modal"
            aria-label="Close"
          ></button>
        </div>
        <div class="modal-body">
          <p>Are you sure you want to delete this user?</p>
        </div>
        <div class="modal-footer">
          <button
            type="button"
            class="btn btn-secondary"
            data-bs-dismiss="modal"
          >
            Cancel
          </button>
          <button type="button" class="btn btn-danger deleteConfirm">
            Delete User
          </button>
        </div>
      </div>
    </div>
  </div>
  <!-- Password Reset Modal -->
  <div class="modal resetModal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Heads up!</h5>
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="modal"
            aria-label="Close"
          ></button>
        </div>
        <div class="modal-body">
          <p>Are you sure you want to send this user a password reset token?</p>
        </div>
        <div class="modal-footer">
          <button
            type="button"
            class="btn btn-secondary"
            data-bs-dismiss="modal"
          >
            Cancel
          </button>
          <button type="button" class="btn btn-danger resetConfirm">
            Reset User
          </button>
        </div>
      </div>
    </div>
  </div>
  <!-- New/Edit User Modal  -->
  <div class="modal editModal" tabindex="-1">
    <div class="modal-dialog">
      <form id="userForm" action="/admin/user" method="POST" name="form">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">User</h5>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body">
            <input type="hidden" name="id" />
            <label for="name">Name</label>
            <input name="name" type="text" class="form-control" />
            <label for="username">Email</label>
            <input name="username" type="text" class="form-control" />
            <select
              name="active"
              class="form-select mt-5"
              aria-label="Active user select"
            >
              <option selected disabled>Select One</option>
              <option value="1">Active</option>
              <option value="2">Inactive</option>
            </select>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
            >
              Cancel
            </button>
            <input type="submit" class="btn btn-danger" value="Save User" />
          </div>
        </div>
      </form>
    </div>
  </div>
</html>
<script
  src="https://code.jquery.com/jquery-3.6.4.min.js"
  integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8="
  crossorigin="anonymous"
></script>
<script
  src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"
  integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V"
  crossorigin="anonymous"
></script>
<script
  src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"
  integrity="sha512-BkpSL20WETFylMrcirBahHfSnY++H2O1W+UnEEO4yNIl+jI2+zowyoGJpbtk6bx97fBXf++WJHSSK2MV4ghPcg=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js"></script>
<script>
  var models = JSON.parse(`<%- JSON.stringify(models) %>`);

  $(document).ready(function () {
    // Init datatable
    $("table").DataTable({
      columnDefs: [{ orderable: false, targets: 0 }],
      order: [[3, "asc"]],
    });
    // New User modal
    $(".newUser").click((e) => {
      resetModal();
      $(".editModal").modal("show");
    });
    // Reset User modal
    $(".resetConfirm").click((e) => {
      alert("Password Reset");
      $(".resetModal").modal("hide");
    });
    // Edit User modal
    $(".editBtn").click((e) => {
      const model = models.find((model) => model._id == e.currentTarget.id);
      $(".form-control[name=id]").val(model._id);
      $(".form-control[name=name]").val(model.name);
      $(".form-control[name=username]").val(model.username);
      $(".form-select[name=active]").val(model.active ? "1" : "2");
    });
    // User Form Submit
    $("#userForm").submit((e) => {
      e.stopPropagation();
      e.preventDefault();
      alert("save");
      $(".editModal").modal("hide");
    });
    // Delete User Confirmed
    $(".deleteConfirm").click((e) => {
      alert("delete");
      $(".deleteModal").modal("hide");
    });
    // Reset User Form values
    function resetModal() {
      $(".form-control").val("");
    }
  });
</script>
