<!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="/build/css/main.css" rel="stylesheet" />
    <link href="/build/css/custom.css" rel="stylesheet" />
  </head>

  <body class="h-100">
    <div class="login">
      <a class="hiddenanchor" id="signup"></a>
      <a class="hiddenanchor" id="signin"></a>
      <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 action="./forget" method="post" id="forget_password">
            <h1>Forgot Password?</h1>
            <p>We’ll send you reset password instruction on your Mail.</p>
            <div class="form-group">
              <span class="icon-left"><img src="/images/email2.svg" /></span>
              <input
                type="email"
                class="form-control"
                placeholder="Email"
                id="email"
                name="email"
              />
            </div>
            <div class="row">
              <div class="col-md-12 text-center">
                <button type="submit" class="btn theme-btn mt-0">
                  Submit
                  <span class="spinner"></span>
                </button>
                <a class="link-text mt-3" href="/"
                  ><img class="mr-2" src="/images/arrow-left-primary.svg" />Back to
                  Login</a
                >
              </div>
            </div>
          </form>
          <p class="auth_copyright">Copyright ©HIPL Tutor 2026 | <a href="#">Privacy Policy</a></p>
        </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">
      $("#forget_password").submit(function (e) {
        e.preventDefault();
        $('.theme-btn').attr('disable',true)
        $('.spinner').html('<img src="/images/spinner.svg" style="width: 30px; margin-top: -3px;"/>');
        $(document).find("span.text-danger").remove();
        var formData = $("#forget_password").serialize();
        var url = $("#forget_password").attr("action");
        $.ajax({
          type: "POST",
          url: url,
          dataType: "json",
          data: formData,
          success: function (response) {
            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 () {
            $('.theme-btn').attr('disable',false)
            $('.spinner').html('');
          },
        });
      });
    </script>
  </body>
</html>
