<?php
include_once('header.php');
?>
<div class="container">
  <div class="card-deck mb-3 text-center">
    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom" style="width: 100%;">
      <h1 class="h2">Update Password</h1>

    </div>

    <div id="error" style="width:100%"></div>

    <!-- new vacancy section -->
    <div id="" style="width: 100%">
      <div class="d-flex justify-content-between flex-wrap flex-md-nowrap  pb-2 mb-3 border-bottom" style="width: 100%; text-align: left;">
        <div class="col-md-12 order-md-1">


          <form class="needs-validation" name="update-password" id="update-password" method="post" action="sql_statements.php">

            <div class="row">

              <div class="col-md-4 mb-3">
                <label for="Username">Current Password</label>
                <input type="password" class="form-control" id="oldpass" name="oldpass">
              </div>
              <div class="col-md-4 mb-3">
                <label for="Password">New Password</label>
                <input type="password" class="form-control" id="newpass" name="newpass">
              </div>

              <div class="col-md-4 mb-3">
                <label for="lastName">Re-Enter New Password</label>
                <input type="password" class="form-control" id="repass" name="repass">

              </div>


            </div>

            <input type="hidden" name="update_password">
            <button class="btn btn-primary btn-md" type="submit" name="update_password" id="update_password" style="float: right; margin-right: 5px;">
              Update Password
            </button>
          </form>
        </div>
      </div>

    </div>

  </div>


  <!-- Bootstrap core JavaScript
    ================================================== -->
  <!-- Placed at the end of the document so the pages load faster -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script>
    window.jQuery || document.write('<script src="../../js/vendor/jquery-slim.min.js"><\/script>')
  </script>
  <script src="../../js/vendor/popper.min.js"></script>
  <script src="../../js/bootstrap.min.js"></script>
  <script src="../../js/vendor/holder.min.js"></script>
  <script type="text/javascript" src="../../js/jquery-3.2.1.min.js"></script>
  <script type="text/javascript" src="../../js/validation.min.js"></script>
  <script src="../../js/tables/jquery.dataTables.js"></script>
  <script src="../../js/tables/dataTables.bootstrap4.js"></script>

  <!--  summernote JS
        ============================================ -->
  <script src="../../js/summernote/summernote-updated.min.js"></script>
  <script src="../../js/summernote/summernote-active.js"></script>

  <script>
    $(document).ready(function() {


      /* validation */
      $("#update-password").validate({
        rules: {
          oldpass: {
            required: true
          },
          newpass: {
            required: true,
            minlength: 6
          },
          repass: {
            required: true,
            equalTo: "#newpass"
          }
        },
        messages: {
          oldpass: "Please enter your current password.",
          newpass: {
            required: "Please enter your new password."
          },
          repass: {
            required: "Please re enter the new password",
            equalTo: "Please confirm the password entered"
          }
        },
        submitHandler: submitForm
      });
      /* validation */

      /* login submit */
      function submitForm() {
        var data = $("#update-password").serialize();

        $.ajax({

          type: 'POST',
          url: 'sql_statements.php',
          data: data,
          beforeSend: function() {
            $("#error").fadeOut();
            $("#update_password").html('<i class="fa fa-spin fa-spinner"></i> Updating Password ...');
          },
          success: function(response) { //alert(response);        
            if (response == 1) {
              $("#error").fadeIn(1000, function() {
                $("#error").html('<div class="alert alert-success"> <button type="button" class="close" data-dismiss="alert">×</button><span class="icon icon-ok-circle"></span> Password has been updated successfuly!</div>');
                $("#update_password").html(' &nbsp; Update Password');
              }); //Your username/password entered doesn't match
              $("#update-password")[0].reset();
              $("#error").delay(6000).fadeOut(function() {});
            } else if (response == 2) {
              $("#error").fadeIn(1000, function() {
                $("#error").html('<div class="alert alert-error" style="background-color:#fcf8e3 !important; color:#8a6d3b;"> <button type="button" class="close" data-dismiss="alert">×</button></span> The current password entered is not valid!</div>');
                $("#update_password").html('Update Password');
              }); //Your username/password entered doesn't match
              $("#error").delay(6000).fadeOut(function() {});
            } else if (response == 3) {
              $("#error").fadeIn(2000, function() {
                $("#error").html('<div class="alert alert-error" style="background-color:#fcf8e3 !important; color:#8a6d3b;"> <button type="button" class="close" data-dismiss="alert">×</button>The new password entered and re entered password does not match!</div>');
                $("#update_password").html(' Update Password');
              }); //Your username/password entered doesn't match
              $("#error").fadeOut(5000, function() {});
            } else if (response == 4) {
              $("#error").fadeIn(2000, function() {
                $("#error").html('<div class="alert alert-error" style="background-color:#fcf8e3 !important; color:#8a6d3b;"> <button type="button" class="close" data-dismiss="alert">×</button> There was a technical error, Please try again!</div>');
                $("#update_password").html(' Update Password');
              }); //Your username/password entered doesn't match
              $("#error").fadeOut(5000, function() {});
            }

          }
        });
        return false;
      }
      /*end add vacancy script */


    });

    Holder.addTheme('thumb', {
      bg: '#55595c',
      fg: '#eceeef',
      text: 'Thumbnail'
    });
  </script>
  </body>

  </html>