<?php
include('session_validator.php');
include('includes/db.php');

$msg = "";
$error = "";

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $oldPassword = $_POST['oldpassword'];
    $newPassword = $_POST['newpassword'];
    $username = $_SESSION['alogin'];

    // Check the current password using a SELECT statement
    $sql = "SELECT Password FROM admin WHERE UserName=?";
    $stmt = $conn->prepare($sql);
    $stmt->bind_param('s', $username);
    $stmt->execute();
    $result = $stmt->get_result()->fetch_assoc();

    if ($result) {
        if (password_verify($oldPassword, $result['Password'])) {
            // Update the password using password_hash
            $hashedNewPassword = password_hash($newPassword, PASSWORD_DEFAULT);
            $sqlUpdate = "UPDATE admin SET Password=?, updationDate=NOW() WHERE UserName=?";
            $stmtUpdate = $conn->prepare($sqlUpdate);
            $stmtUpdate->bind_param('ss', $hashedNewPassword, $username);
            $stmtUpdate->execute();
            $msg = "Your password has been successfully changed.";
            $stmtUpdate->close();
        } else {
            $error = "Password mismatch: Entered password does not match the current password.";
        }
    } else {
        $error = "User not found: Unable to retrieve user information.";
    }

    $stmt->close();
}

// Close the database connection
$conn->close();
?>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Admin change password</title>
        <link rel="stylesheet" href="css/bootstrap.css" media="screen" >
        <link rel="stylesheet" href="css/font-awesome.min.css" media="screen" >
        <link rel="stylesheet" href="css/animate-css/animate.min.css" media="screen" >
        <link rel="stylesheet" href="css/lobipanel/lobipanel.min.css" media="screen" >
        <link rel="stylesheet" href="css/prism/prism.css" media="screen" > <!-- USED FOR DEMO HELP - YOU CAN REMOVE IT -->
        <link rel="stylesheet" href="css/main.css" media="screen" >
        <script src="js/modernizr/modernizr.min.js"></script>
        <script type="text/javascript">
function valid()
{
if(document.chngpwd.newpassword.value!= document.chngpwd.confirmpassword.value)
{
alert("New Password and Confirm Password Field do not match  !!");
document.chngpwd.confirmpassword.focus();
return false;
}
return true;
}
</script>
         <style>
        .errorWrap {
    padding: 10px;
    margin: 0 0 20px 0;
    background: #fff;
    border-left: 4px solid #dd3d36;
    -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
    box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
}
.succWrap{
    padding: 10px;
    margin: 0 0 20px 0;
    background: #fff;
    border-left: 4px solid #5cb85c;
    -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
    box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
}

        .success-message {
            color: green;
            font-weight: bold;
        }

        .error-message {
            color: red;
            font-weight: bold;
        }

        .password-toggle {
            position: relative;
        }

        .password-toggle i {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
        }
    </style>
    </head>
    <body class="top-navbar-fixed">
        <div class="main-wrapper">
            <?php include('includes/topbar.php');?>   
            <div class="content-wrapper">
                <div class="content-container">
<?php include('includes/leftbar.php');?>                   
 <!-- /.left-sidebar -->

                    <div class="main-page">
                        <div class="container-fluid">
                            <div class="row page-title-div">
                                <div class="col-md-6">
                                    <h2 class="title">Admin Change Password</h2>
                                </div>
                                
                            </div>
                            <!-- /.row -->
                            <div class="row breadcrumb-div">
                                <div class="col-md-6">
                                    <ul class="breadcrumb">
                                        <li><a href="dashboard.php"><i class="fa fa-home"></i> Home</a></li>
                                    
                                        <li class="active">Admin change password</li>
                                    </ul>
                                </div>
                               
                            </div>
                            <!-- /.row -->
                        </div>
                        <!-- /.container-fluid -->

                        <section class="section">
                            <div class="container-fluid">

                             

                              

                                <div class="row">
                                    <div class="col-md-8 col-md-offset-2">
                                        <div class="panel">
                                            <div class="panel-heading">
                                                <div class="panel-title">
                                                    <h5>Admin Change Password</h5>
                                                </div>
                                            </div>
  
                                            <div class="panel-body">


     <div>
        <?php if ($msg) : ?>
            <div class="success-message">
                <strong>Success!</strong> <?php echo htmlentities($msg); ?>
            </div>
        <?php elseif ($error) : ?>
            <div class="error-message">
                <strong>Error:</strong> <?php echo htmlentities($error); ?>
            </div>
        <?php endif; ?>




  <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>">
    <div class="form-group has-success">
        <label for="oldpassword" class="control-label">Current Password</label>
        <div class="password-toggle">
            <input type="password" name="oldpassword" class="form-control" required="required" id="oldpassword">
            <i class="fa fa-eye" aria-hidden="true" onclick="togglePassword('oldpassword')"></i>
        </div>
    </div>

    <div class="form-group has-success">
        <label for="newpassword" class="control-label">New Password</label>
        <div class="password-toggle">
            <input type="password" name="newpassword" required="required" class="form-control" id="newpassword">
            <i class="fa fa-eye" aria-hidden="true" onclick="togglePassword('newpassword')"></i>
        </div>
    </div>

    <div class="form-group has-success">
        <label for="confirmpassword" class="control-label">Confirm Password</label>
        <div class="password-toggle">
            <input type="password" name="confirmpassword" class="form-control" required="required" id="confirmpassword">
            <i class="fa fa-eye" aria-hidden="true" onclick="togglePassword('confirmpassword')"></i>
        </div>
    </div>

    <div class="form-group has-success">
        <div class="">
            <button type="submit" name="submit" class="btn btn-success btn-labeled">Change<span class="btn-label btn-label-right"><i class="fa fa-check"></i></span></button>
        </div>
    </div>

    <!-- Font Awesome link for the eye icon -->
    <script src="https://kit.fontawesome.com/your-font-awesome-kit.js" crossorigin="anonymous"></script>

    <script>
        function togglePassword(inputId) {
            const passwordInput = document.getElementById(inputId);
            passwordInput.type = passwordInput.type === "password" ? "text" : "password";
        }
    </script>
</form>





   </div>
                                        </div>
                                    </div>
                                    <!-- /.col-md-8 col-md-offset-2 -->
                                </div>
                                <!-- /.row -->

                               
                               

                            </div>
                            <!-- /.container-fluid -->
                        </section>
                        <!-- /.section -->

                    </div>
                    <!-- /.main-page -->

                </div>
                <!-- /.content-container -->
            </div>
            <!-- /.content-wrapper -->

        </div>
        <!-- /.main-wrapper -->

        <!-- ========== COMMON JS FILES ========== -->
        <script src="js/jquery/jquery-2.2.4.min.js"></script>
        <script src="js/jquery-ui/jquery-ui.min.js"></script>
        <script src="js/bootstrap/bootstrap.min.js"></script>
        <script src="js/pace/pace.min.js"></script>
        <script src="js/lobipanel/lobipanel.min.js"></script>
        <script src="js/iscroll/iscroll.js"></script>

        <!-- ========== PAGE JS FILES ========== -->
        <script src="js/prism/prism.js"></script>

        <!-- ========== THEME JS ========== -->
        <script src="js/main.js"></script>



        <!-- ========== ADD custom.js FILE BELOW WITH YOUR CHANGES ========== -->
    </body>
</html>

