<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
  <title>
    Moby | Reset Password
  </title>

  <!-- Favicon-->
  <link rel="icon" href="https://apps.clickandon.com/dev/getattoo/public/app-assets/images/logo.png"
    type="image/x-icon">

  <!-- General CSS Files -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
    integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

  <!-- CSS Libraries -->
  <link rel="stylesheet" href="/node_modules_url/bootstrap-social/bootstrap-social.css">
  <link rel="stylesheet" href="/node_modules_url/izitoast/dist/css/iziToast.min.css">

  <!-- Template CSS -->
  <link rel="stylesheet" href="/assets/css/style.css">
  <link rel="stylesheet" href="/assets/css/components.css">
  <link rel="stylesheet" href="/assets/css/custom.css">
</head>
<style>
  .error {
    color: red;
  }


  .section>*:first-child {
    margin-top: 0px !important;
  }

  .log_bg {
    background: url(https://img.freepik.com/free-photo/process-creating-new-tattoo-young-woman-by-expirienced-tattoo-artist-studio_613910-17260.jpg?size=626&ext=jpg&ga=GA1.1.600252327.1696422553&semt=sph) no-repeat center/cover;
  }

  @media (max-width: 767px) {
    .log_bg {
      background: url(https://img.freepik.com/free-photo/process-creating-new-tattoo-young-woman-by-expirienced-tattoo-artist-studio_613910-17260.jpg?size=626&ext=jpg&ga=GA1.1.600252327.1696422553&semt=sph) no-repeat center/180% 100%;
    }
  }
</style>

<body>
  <div id="overlay">
    <div class="spinner"></div>
  </div>
  <% if(error !='' ) { %>
    <div class="alert alert-success msg"
      style="position: absolute; z-index: 9999; color:white; background-color: red; right: 10px; top: 10px;">
      <span style="font-size: 16px;">
        <%= error %>
      </span>
    </div>
    <% } %>
      <div id="app" class="log_bg">
        <section class="section">
          <div class="col-lg-12 col-12 min-vh-100 background-walk-y"
            data-background="../assets/img/unsplash/andre-benz-1214056-unsplash.jpg"
            style="background-image: url(&quot;../assets/img/unsplash/andre-benz-1214056-unsplash.jpg&quot;);">

            <br />
            <br />
            <br />
            <div class="container" style="z-index: 1 !important;">
              <div class="row">
                <div
                  class="col-12 col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-lg-6 offset-lg-3 col-xl-4 offset-xl-4 mt-5">
                  <div class="login-brand">
                    <img id="brand_logo_login" width="160px"
                      src="https://ridedrop.org/app-assets/images/logo.jpg" alt="logo"
                      width="250" class="shadow-light" style="background-color: rgba(255,255,255,0.4);">
                  </div>

                  <div class="card card-primary">
                    <div class="card-header">
                      <h4>
                        Reset Password
                      </h4>
                    </div>

                    <div class="card-body">
                      <form method="POST" action="/api/updateResetPassword" class="needs-validation ResetForm"
                        novalidate="">
                        <div class="form-group">
                          <label for="newPassword">New Password</label>
                          <input id="newPassword" type="password" class="form-control" name="newPassword" tabindex="1"
                            required autofocus>
                          <div class="invalid-feedback">
                            Please enter new password
                          </div>
                        </div>

                        <div class="form-group">
                          <div class="d-block">
                            <label for="confirmPassword" class="control-label">Re-enter Password</label>
                            <!-- <div class="float-right">
                          <a href="auth-forgot-password.html" class="text-small">
                            Forgot Password?
                          </a>
                        </div> -->
                          </div>
                          <input id="confirmPassword" type="password" class="form-control" name="confirmPassword"
                            tabindex="2" required>
                          <div class="invalid-feedback">
                            Please re-renter new password
                          </div>
                        </div>

                        <input type="hidden" name="hash" value="<%= hash %>">

                        <div class="form-group">
                          <button type="submit" class="btn btn-primary btn-lg btn-block" tabindex="4">
                            Submit
                          </button>
                        </div>
                        <div class="simple-footer">
                          Copyright &copy; 2024
                          <div class="bullet"></div>
                        </div>
                      </form>

                    </div>
                  </div>


                </div>
              </div>
            </div>
          </div>
        </section>
      </div>

      <!-- General JS Scripts -->
      <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
      <script src="/assets/js/stisla.js"></script>


      <!-- JS Libraies -->
      <script src="/node_modules_url/simpleweather/jquery.simpleWeather.min.js"></script>
      <script src="/node_modules_url/chart.js/dist/Chart.min.js"></script>
      <script src="/node_modules_url/jqvmap/dist/jquery.vmap.min.js"></script>
      <script src="/node_modules_url/jqvmap/dist/maps/jquery.vmap.world.js"></script>
      <script src="/node_modules_url/summernote/dist/summernote-bs4.js"></script>
      <script src="/node_modules_url/chocolat/dist/js/jquery.chocolat.min.js"></script>
      <script src="/node_modules_url/izitoast/dist/js/iziToast.min.js"></script>
      <script src="/node_modules_url/datatables/media/js/jquery.dataTables.min.js"></script>
      <script src="/node_modules_url/datatables.net-bs4/js/dataTables.bootstrap4.min.js"></script>
      <script src="/node_modules_url/datatables.net-select-bs4/js/select.bootstrap4.min.js"></script>
      <script src="/node_modules_url/jquery.pwstrength/jquery.pwstrength.min.js"></script>
      <script src="/node_modules_url/select2/dist/js/select2.full.min.js"></script>
      <script src="/node_modules_url/sweetalert/dist/sweetalert.min.js"></script>
      <script src="/node_modules_url/selectric/public/jquery.selectric.min.js"></script>
      <script src="/node_modules_url/jquery_upload_preview/assets/js/jquery.uploadPreview.min.js"></script>

      <!-- Template JS File -->
      <script src="/assets/js/scripts.js"></script>
      <script src="/assets/js/custom.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"
        integrity="sha512-37T7leoNS06R80c8Ulq7cdCDU5MNQBwlYoy1TX/WUsLFC2eYNqtKlV0QjH7r8JpG/S0GUMZwebnVFLPd6SU5yg=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
      <!-- Page Specific JS File -->

      <script>
        jQuery.validator.addMethod("accept", function (value, element, param) {
          return value.match(new RegExp("." + param + "$"));
        });
        jQuery('.ResetForm').validate({
          rules: {
            newPassword: {
              minlength: 6,
            },
            confirmPassword: {
              minlength: 6,
              equalTo: "#newPassword"
            }
          },
          messages: {
            newPassword: {
              required: "Please provide a password",
              minlength: "Your password must be at least 6 characters long"
            },
            confirmPassword: {
              required: "Please provide a password",
              minlength: "Your password must be at least 6 characters long",
              equalTo: "Please enter the same password as above"
            }
          }
        });

      </script>
</body>

</html>