<!DOCTYPE html>
<html lang="en" class="h-100">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title><%=process.env.APP_NAME%></title>

    <link
      href="/vendors/bootstrap/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link href="/vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="/build/css/main.css" rel="stylesheet" />
    <link href="/build/css/custom.min.css" rel="stylesheet" />
  </head>
  <body class="h-100">
    <div class="login">
      <div class="login-blocks">
        <a href="javascript:void(0);" class="logo-top"><img class="mr-2" src="/images/logo.svg"> <span><%=process.env.APP_NAME%></span></a>
        <div class="auth-left">
          <img src="/images/auth-left.png" alt="img" />
        </div>
        <div class="login-form">
          <form method="post" action="./verify-password" id="resetPassword">
            <h1>Reset Password</h1>
            <p>Enter your new password to reset your account password.</p>
            <div class="form-group">
              <span class="icon-left"><img src="/images/lock2.svg" /></span>
              <input type="hidden" name="token" value="<%=token%>" />
              <input
                type="password"
                class="form-control form-control-sm"
                name="password"
                placeholder="New password"
                id="password"
              />
              <span
                toggle="#password"
                class="fa fa-fw fa-eye field-icon form-control-feedback right toggle-password"
              ></span>
            </div>
            <div class="form-group">
              <span class="icon-left"><img src="/images/lock2.svg" /></span>
              <input
                type="password"
                name="confirm_password"
                class="form-control form-control-sm"
                placeholder="Confirm Password"
                id="confirm_password"
              />
              <span
                toggle="#confirm_password"
                class="fa fa-fw fa-eye field-icon form-control-feedback right toggle-password"
              ></span>
            </div>
            <button
              type="submit"
              class="btn theme-btn mt-0 btn-block submit-btn"
            >
              Login
            </button>
          </form>
        </div>
        <div class="auth-left auth-right">
          <img src="/images/auth-right.png" alt="img" />
        </div>
      </div>
    </div>

    <script
      type="text/javascript"
      src="https://code.jquery.com/jquery-1.11.0.min.js"
    ></script>
    <script type="text/javascript">
      $(".toggle-password").click(function () {
        $(this).toggleClass("fa-eye fa-eye-slash");
        var input = $($(this).attr("toggle"));
        if (input.attr("type") == "password") {
          input.attr("type", "text");
        } else {
          input.attr("type", "password");
        }
      });

      $("#resetPassword").submit(function (e) {
        e.preventDefault();
        $(document).find("span.text-danger").remove();

        var formData = $("#resetPassword").serialize();
        var url = $("#resetPassword").attr("action");
        $.ajax({
          type: "POST",
          url: url,
          dataType: "json",
          data: formData,
          success: function (response) {
            if (response.success == true) {
              window.location.href = "/";
            }
          },
          error: function (response) {
            let errorMessages = "";
            $.each(response.responseJSON.errors, function (field_name, error) {
              $(document)
                .find("[id=" + error.param + "]")
                .after(
                  '<span class="help-block text-danger">' +
                    error.msg +
                    "</span>"
                );
            });
          },
          complete: function () {},
        });
      });
    </script>
  </body>
</html>
