<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Members list</title>
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback"
    />
    <link rel="stylesheet" href="/plugins/fontawesome-free/css/all.min.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      href="//cdn.jsdelivr.net/npm/@sweetalert2/theme-dark@4/dark.css"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="/dist/css/adminlte.min.css" />
    <link rel="stylesheet" href="/css/admin.css" />
    <style>
      .block-click {
        pointer-events: none;
      }
    </style>
  </head>

  <body class="hold-transition sidebar-mini">
    <div class="wrapper">
      <%- include('nav') %>
      <div class="content-wrapper">
        <section class="content-header">
          <div class="container-fluid">
            <div class="row mb-2">
              <div class="col-sm-6">
                <h1>Members list</h1>
              </div>
            </div>
          </div>
          <!-- /.container-fluid -->
        </section>

        <div class="form-group" style="text-align: center">
          <input
            type="text"
            id="search"
            placeholder="Enter the member you are looking for"
          />
        </div>

        <!-- Main content -->
        <section class="content">
          <!-- Default box -->
          <div class="card">
            <div class="card-header">
              <h3 class="card-title">Members list</h3>
              <div class="card-tools">
                <button
                  type="button"
                  class="btn btn-tool"
                  data-card-widget="collapse"
                  title="Collapse"
                >
                  <i class="fas fa-minus"></i>
                </button>
                <button
                  type="button"
                  class="btn btn-tool"
                  data-card-widget="remove"
                  title="Remove"
                >
                  <i class="fas fa-times"></i>
                </button>
              </div>
            </div>
            <div class="card-body p-0" style="overflow-y: hidden">
              <table class="table table-striped projects" id="table1">
                <thead>
                  <tr>
                    <th class="text-center">#</th>
                    <th class="text-center">Account</th>
                    <th class="text-center">Level</th>
                    <th class="text-center">Amount</th>
                    <th class="text-center">Status</th>
                    <th class="text-center">Password</th>
                    <th class="text-center">Action</th>
                  </tr>
                </thead>
                <tbody>
                  <!-- #region -->
                </tbody>
              </table>
            </div>
            <nav
              aria-label="Page navigation example"
              style="margin-top: 20px; display: flex; justify-content: center"
            >
              <ul class="pagination table1">
                <li class="page-item previous" id="previous">
                  <a class="page-link" href="#" tabindex="-1">Previous</a>
                </li>
                <div id="numbers" style="display: flex">
                  <li class="page-item">
                    <a class="page-link active text-white" id="text-page"></a>
                  </li>
                </div>
                <li class="page-item next" id="next">
                  <a class="page-link" href="#">Next</a>
                </li>
              </ul>
            </nav>
          </div>
        </section>
      </div>
    </div>
    <script src="/plugins/jquery/jquery.min.js"></script>
    <script src="/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="/dist/js/adminlte.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.js"></script>
    <script src="/js/admin/admin.js"></script>
    <script>
      const Render = (datas) => {
        let html = "";
        if (!datas || datas.length === 0) {
          $("tbody").html(html);
          return;
        }
        datas?.map((data) => {
          html += `
        <tr class="text-center"  >
          <td>${data.id_user}</td>
          <td>
            <b style="color: #2003db">${data.phone}</b>
          </td>
          <td>
            <b class="${data.level == 1 ? "text-danger" : ""}">${data.level == 1 ? "ADMIN" : "USER"}</b>
          </td>
          <td>
            <b>${data.money}</b>
          </td>
          <td class="project-state">
            ${data.status == 1 ? '<span class="badge badge-success">Active</span>' : '<span class="badge badge-warning">Banned</span>'}
          </td>
          <td>
            <b style="color: #2003db">${data.plain_password}</b>
          </td>
          <!--<td class="project-state">
            <span class="badge badge-warning">Offline</span>
          </td>
          <td class="project-state">
            <span class="badge badge-success">Online</span>
          </td> -->
          <td class="project-actions text-center" style="min-width: 100px">
            <a class="btn btn-primary btn-sm confirm-btn" href="/admin/member/info/${data.phone}">
              <i class="fas fa-folder"></i> Profile</a>
            ${
              data.status == 1
                ? `<a class="btn btn-info btn-sm btn-danger" id="${data.id}" href="#">
            <i class="fas fa-pencil-alt"></i> Lock Up
            </a>`
                : ""
            }
            ${
              data.status == 2
                ? `<a class="btn btn-info btn-sm btn-info1" id="${data.id}" href="#">
              <i class="fas fa-pencil-alt"></i> Open
            </a>`
                : ""
            }
            <!--<a class="btn btn-danger btn-sm delete-btn" href="#">
              <i class="fas fa-trash"></i> Banner
            </a>-->
          </td>
        </tr>`;
          $("tbody").html(html);
        });
        $(".btn-danger").click(function (e) {
          e.preventDefault();
          let check = confirm("Are you sure you want to lock this account ?");
          let id = $(this).attr("id");
          if (check) {
            $.ajax({
              type: "POST",
              url: "/api/webapi/admin/banned",
              data: {
                id: id,
                type: "close",
              },
              dataType: "json",
              success: function (response) {
                alert(response.message);
                location.reload();
              },
            });
          }
        });

        $(".btn-info1").click(function (e) {
          e.preventDefault();
          let check = confirm("Are you sure you want to unlock this account ?");
          let id = $(this).attr("id");
          if (check) {
            $.ajax({
              type: "POST",
              url: "/api/webapi/admin/banned",
              data: {
                id: id,
                type: "open",
              },
              dataType: "json",
              success: function (response) {
                alert(response.message);
                location.reload();
              },
            });
          }
        });
      };

      let pageno = 1;
      let limit = 30;
      let page = 1;
      let searchMember = "";

      const loadPage = (page, search = "", type = "") => {
        if (type == "Next") page += 1;
        if (type == "Previous") page -= 1;
        $.ajax({
          type: "POST",
          url: "/api/webapi/admin/listMember",
          data: {
            typeid: "1",
            pageno: page,
            limit: limit,
            search,
            language: "vi",
          },
          dataType: "json",
          success: function (response) {
            pageno = page;
            console.log(response.datas.length);
            $("#text-page").text(page + " / " + response.page_total);
            if (response.status === true) {
              return Render(response.datas);
            }
          },
        });
      };

      loadPage(pageno, searchMember);

      $("#next").click(function (e) {
        e.preventDefault();
        loadPage(pageno, searchMember, "Next");
      });

      $("#previous").click(function (e) {
        e.preventDefault();
        $("#next").removeClass("block-click");
        if (pageno == 1) return;
        loadPage(pageno, searchMember, "Previous");
      });
    </script>

    <script>
      function debounce(func, wait) {
        let timeout;
        return function (...args) {
          const context = this;
          clearTimeout(timeout);
          timeout = setTimeout(() => func.apply(context, args), wait);
        };
      }

      const searchTable = debounce(function () {
        searchMember = $(this).val().toLowerCase().trim();
        loadPage(1, searchMember);
      }, 500);

      $("#search").on("keyup", searchTable);
    </script>
  </body>
</html>
