<!DOCTYPE html>
<html lang="en">
  <head>
    <%- include('partials/head') -%>
  </head>

  <body>
    <div id="wrapper">
      <%- include('partials/sidebar') -%>

      <div id="content-wrapper" class="d-flex flex-column">
        <div class="content-wrapper">
          <div class="row">
            <div class="col-md-12 grid-margin stretch-card">
              <div class="card">
                <div class="card-body">
                  <div class="block mt-4">
                    <% if(typeof message !=='undefined' ){ %>
                    <div class="alert-error-on-create-user" role="alert">
                      <%= message %>
                    </div>
                    <% } %>
                  </div>
                  <div class="d-flex justify-content-between">
                    <h3 class="card-title">Usuarios del sistema</h3>
                    <button
                      class="btn btn-primary"
                      data-toggle="modal"
                      data-target="#newUser"
                    >
                      Nuevo
                    </button>
                  </div>
                  <div class="row mt-5">
                    <div class="col-12">
                      <div class="table-responsive">
                        <table
                          id="table_data"
                          class="display expandable-table"
                          style="width: 100%"
                        >
                          <thead>
                            <tr class="text-center">
                              <th style="cursor: pointer">Email</th>
                              <th style="cursor: pointer">Nombre</th>
                            </tr>
                          </thead>
                          <tbody>
                            <% users.forEach(function(user) { %>
                            <tr style="text-align: center">
                              <td style="padding: 0.5rem"><%= user.email %></td>
                              <td style="padding: 0.5rem"><%= user.name %></td>
                              <td>
                                <button
                                  class="btn btn-danger"
                                  onclick="askDeleteUser('<%= user._id %>')"
                                >
                                  Eliminar
                                </button>
                              </td>
                            </tr>
                            <% }); %>
                          </tbody>
                        </table>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="p-3 d-flex justify-content-center">
                  <!-- Paginacion -->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Logout Modal-->
    <div
      class="modal fade"
      id="logoutModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="exampleModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">
              ¿Listo para salir?
            </h5>
            <button
              class="close"
              type="button"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            Seleccione Logout para salir, o cancel para continuar en el sistema.
          </div>
          <form class="modal-footer" action="" method="post">
            @csrf
            <button
              class="btn btn-secondary"
              type="button"
              data-dismiss="modal"
            >
              Cancel
            </button>
            <button class="btn btn-primary" type="submit">Logout</button>
          </form>
        </div>
      </div>
    </div>
    <%- include('partials/newUserModal') -%> <%-
    include('partials/create-modal') -%> <%- include('partials/footer') -%>

    <script>
      function askDeleteUser(id) {
        Swal.fire({
          title: "Eliminar contacto",
          text: "desea eliminar este contacto?",
          icon: "warning",
          confirmButtonText: `si`,
          showCancelButton: !0,
          cancelButtonText: "Cancelar",
        });

        $(".swal2-confirm").attr("id", "btnConfirm");
        var el = document.getElementById("btnConfirm");
        el.addEventListener("click", function () {
          deleteUser(id);
        });
      }

      function deleteUser(id) {
        $.ajax({
          url: "/user/" + id,
          type: "delete",
          success: function (data) {
            window.location.reload();
          },
          error: function (error) {
            console.log(error);
          },
        });
      }
    </script>
  </body>
</html>
