<?php require('header.php');?>
<style>
.fat{
  
    box-shadow:grey 2px 3px 2px 3px;
    margin-right:5px;
    margin-left:5px;

}

</style>
        <!-- partial -->
        <div class="main-panel">
          <div class="content-wrapper">
            <div class="page-header">
              <h3 class="page-title">CHANGE PASSWORD</h3>
              <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                  <li class="breadcrumb-item"><a href="#">Home</a></li>
                  <li class="breadcrumb-item active" aria-current="page">Password</li>
                </ol>
              </nav>
            </div>
            <div class="row">
  
            
              <div class="col-12 grid-margin">
                <div class="card">
                    <br>
<?php 

     if ($_SERVER["REQUEST_METHOD"]=="POST") {
   
 $old_password = $_POST["old_password"];
 $new_password = $_POST["new_password"];
 $new_password2= $_POST["new_password2"];

  
  $query =  mysqli_query($conn, "SELECT * FROM users WHERE id = '$user_id'");
  $row = mysqli_fetch_assoc($query);
  $dbpass = $row["password"];
 
 
if($old_password != $dbpass){$error1=1;}
if($new_password != $new_password2){$error2=1;}
if($new_password==''){$error3=1;}
if($new_password2==''){$error3=1;}
if($old_password ==''){$error3=1;}


$error=$error1+$error2+$error3; 
if($error==0){
      
      
 $query  = mysqli_query($conn, "UPDATE users SET password = '$new_password' WHERE id = '$user_id'");
    
    echo '<div class="alert alert-success" role="alert"><b><img style="width=:20px;height:20px;" src="assets/images/icosucces.png"> &nbsp;  Password Changed Successfully...</b>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button></div>';
  }else{
   if($error1==1){
    echo'
     <div class="alert alert-danger">
       <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
       That is not the old password for this account.
     </div>
    ';
  }
  
if($error2==1){
    echo'
    <div class="alert alert-danger">
      <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
      Please confirm that the passwords match...
    </div>';
  }
                                            if($error3==1){
    echo'<div class="alert alert-primary">
      <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
      Fill in the required feilds to change password...
    </div>';
  }
  
}
}

?>
                  <div class="card-body">
                    <h4 class="card-title">Details</h4>
                    
                    <form class="form-sample" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="POST" name="form" onsubmit="return Traficate()">
             
                      <!--<p class="card-description"> Address </p>-->
                      <div class="row">
                      <div class="col-md-6">
                           

                          <div class="form-group row">
                            <label class="col-sm-3 col-form-label">Current Password</label>
                            <div class="col-sm-9">
                              <input name="old_password" class="form-control" placeholder="Enter Old Password">
                          
                            </div>
                          </div>
                        </div>
                        
                   <div class="col-md-6">
                          <div class="form-group row">
                            <label class="col-sm-3 col-form-label">Create Password</label>
                            <div class="col-sm-9">
                              <input class="form-control" name="new_password" placeholder="Create New Password">
                                
                            </div>
                          </div>
                        </div>

                      </div>
                     
                    
                    
  <div class="row">
                        <div class="col-md-6">
                          <div class="form-group row">
                            <label class="col-sm-3 col-form-label">Confirm Password</label>
                            <div class="col-sm-9">
                              <input style="width:100%" type="text" class="form-control" name="new_password2" placeholder="Confirm Password"/>
                            </div>
                          </div>
                        </div>
                      
                      </div>
                      <br>
                       <div class="input-group-append">
<button type="submit" class="button-86" id="login_user" role="button">Submit</button>
                        </div>
                    </form>
                  </div>
                </div>
              </div>
              
            </div>
          </div>
          <style>
            

/* CSS */
.button-86 {
  all: unset;
  width: 100px;
  height: 30px;
  font-size: 16px;
  background: transparent;
  border: none;
  position: relative;
  color: #f0f0f0;
  cursor: pointer;
  z-index: 1;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-86::after,
.button-86::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -99999;
  transition: all .4s;
}

.button-86::before {
  transform: translate(0%, 0%);
  width: 100%;
  height: 100%;
  background: #28282d;
  border-radius: 10px;
}

.button-86::after {
  transform: translate(10px, 10px);
  width: 35px;
  height: 35px;
  background: #ffffff15;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 50px;
}

.button-86:hover::before {
  transform: translate(5%, 20%);
  width: 110%;
  height: 110%;
}

.button-86:hover::after {
  border-radius: 10px;
  transform: translate(0, 0);
  width: 100%;
  height: 100%;
}

.button-86:active::after {
  transition: 0s;
  transform: translate(0, 5%);
}
          </style>
          <!-- content-wrapper ends -->
          <!-- partial:../../partials/_footer.html -->
          
<script>
function Traficate(){


$("#login_user").html("Updating ...");
return true;

}

</script>
<?php require('footer.php');?>
