<?php
 session_start();
 require_once('../connect.php');
 require_once('sql_required.php');

 $datetoday = date('Y-m-d'); 

if (!isset($_SESSION['unique_id'])) { ?>
    <script language="javascript">
      window.location.href = '../index.php';
    </script>
<?php } 

$message = '';
if (isset($_POST['save_changes'])) {
  $new_password = mysqli_real_escape_string($conn, $_POST['new_password']);

  $sql_update = "UPDATE tbl_user_account SET password = '$new_password' WHERE unique_id = '$unique_id'";
  if (mysqli_query($conn, $sql_update)) {
    $message = '<div class="pb-1">
                  <div class="alert alert-success"><center>Your password successfully change</center></div>
                </div>';
  }
}

?>  
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Change Password</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="icon" href="images/logo.png" type="image/png" sizes="16x16">
  <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <link rel="stylesheet" href="dist/css/adminlte.min.css">
  <link rel="stylesheet" href="plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="css/style1.css">
  <link rel="stylesheet" type="text/css" href="css/skeleton_loading.css">
<style type="text/css">
  .content-wrapper {
    background: #151e27!important;
  }
  @media(max-width:800px) {
    .modal-content {
      position: fixed; bottom: 40%; width: 96%; left: 7;
    }
    .modal-dialog {
      margin: 0!important; padding: 0!important;
    }
  }
  .btn {
    border-radius: 10px;
  }
  .form-control {
    border-radius: 10px;
  }
  .form-control:focus {
    border: 1px solid #ffd700!important;
  }
  .label {
    display: inline-block;
    margin-bottom: 0px !important;
    color: #fff!important;
    font-size: 80%!important;
    font-weight: 400!important;
  }
  .alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
  }
</style>
</head>
<body class="hold-transition sidebar-mini layout-footer-fixed layout-fixed" style="background: #151e27;">
<div id="preloader" class="loading" style="display: none"></div>
<div class="wrapper">
  <nav class="main-header navbar navbar-expand navbar-white" style="background: #151e27; border-bottom: 0; box-shadow: none!important;">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a href="edit_profile.php?<?php echo generate_string($permitted_chars, 100); ?>" class="withanimation"><i class="fas fa-angle-left pr-2" style="font-size: 20px; color: #ffd700;"></i></a><span class="brand-text" style="font-size: 20px;"><span style="font-size: 20px; font-weight: bolder; line-height: 20px; color: #fff;">Change Password</span></a>
      </li>
    </ul>
    <ul class="navbar-nav ml-auto">
      <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
    </ul>
  </nav>

<?php include ("navbar.php")?>
<div class="content-wrapper">
  <section class="content">
    <div class="container-fluid pt-4 pb-0 pl-3 pr-3">

      <span id="message">
        <?php echo $message; ?>
      </span>

      <form method="POST" id="userDetails">
        <input type="hidden" name="unique_id" value="<?php echo $unique_id; ?>">
        <div class="form-group">
          <label class="label">Current Password</label>
          <input type="text" id="current_password" class="form-control" placeholder="Enter Current Password" required/>
          <input type="hidden" id="old_password" value="<?php echo $password; ?>">
          <small class="text-danger"><span id="current_message"></span></small>
        </div>

        <div class="form-group">
          <label class="label">New Password</label>
          <input type="text" id="new_password" class="form-control" placeholder="Enter New Password" required/>
        </div>

        <div class="form-group">
          <label class="label">Retype New Password</label>
          <input type="text" name="new_password" id="retype_new_password" class="form-control" placeholder="Enter Retype New Password" required/>
          <small class="text-danger"><span id="new_message"></span></small>
        </div>

        <button type="button" data-toggle="modal" data-target="#update_password" id="action" class="btn btn-warning btn-block btn-lg" style="background: #FFD700; border-color: #ffd700;">Save Changes</button>

        <div class="modal" id="update_password">
          <div class="modal-dialog">
            <div class="modal-content" style="background-color: #151e27!important;">
              <div class="modal-header pb-0" style="border: 0px;">
                <h5 class="modal-title text-white" style="font-weight: bold;">Update Password</h5>
              </div>
              <div class="modal-body pt-0 pb-0">
                <p class="text-muted">Are you sure you want to update your password?</p>
              </div>
              <div class="modal-footer pr-0 pl-0 pb-2 pt-0" style="display: block; border: 0px">
                <div class="row">
                  <div class="col-6">
                    <button type="button" class="btn btn-default btn-lg btn-block" style="background: transparent; color: #fff;" data-dismiss="modal">Cancel</button>
                  </div>
                  <div class="col-6">
                    <button type="submit" name="save_changes" class="btn btn-warning btn-lg btn-block withanimation_submit" style="background: #FFD700; border-color: #ffd700;">Yes, Submit</button>
                  </div>
                </div>
                
              </div>
            </div>
          </div>
        </div> <!-- logout -->

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


</div>
</div>

<script src="dist/js/adminlte.min.js"></script>
<script src="plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="plugins/jquery-validation/jquery.validate.min.js"></script>
<script src="plugins/jquery-validation/additional-methods.min.js"></script>
<script src="dist/js/pages/dashboard.js"></script>
<script src="plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  var form = $('#userDetails');
    form.validate({
    rules: {
      firstname: {
        required: true,
      },
      lastname:{
        required: true,
      },
      mobilenumber: {
        required: true,
      }
    },
    errorElement: 'span',
    errorPlacement: function (error, element) {
      error.addClass('invalid-feedback');
      element.closest('.form-group').append(error);
    },
    highlight: function (element, errorClass, validClass) {
      $(element).addClass('is-invalid');
    },
    unhighlight: function (element, errorClass, validClass) {
      $(element).removeClass('is-invalid');
    }
  });


  setInterval(function() {
    $('#message').hide();
  }, 3000);

  $("#current_password").keyup(function() {
    var current_password = $(this).val();
    var old_password = $("#old_password").val();

    if(current_password == old_password) {
      $('#action').attr("disabled", false);
      $('#new_password').attr("disabled", false);
      $('#retype_new_password').attr("disabled", false);
      $('#current_message').html('');
    }else{
      $('#action').attr("disabled", true);
      $('#new_password').attr("disabled", true);
      $('#retype_new_password').attr("disabled", true);
      $('#current_message').html('Incorrect Password');
    }

  $("#retype_new_password").keyup(function() {
    var retype = $(this).val();
    var new_pass = $('#new_password').val();

    if(new_pass == retype) {
      $('#action').attr("disabled", false);
      $('#new_message').html('');
    }else{
      $('#action').attr("disabled", true);
      $('#new_message').html("Your password don't match!");
    }
  });

  });
});

$(function () {
  $(".withanimation_submit").click(function() {
    $(".loading").show();
  });
  $(".withanimation").click(function(e) {
      e.preventDefault();
      $(".loading").show();
      var url=$(this).attr("href");
      setTimeout(function() {
          window.location=url;
      }, 500);
  });
});

if ( window.history.replaceState ) {
  window.history.replaceState( null, null, window.location.href );
}
</script>
</body>
</html>
