<?php
session_start();
error_reporting(0);
include('includes/config.php');
if(strlen($_SESSION['login'])==0) { 
    header('location:index.php');
} else {
date_default_timezone_set('Asia/Kolkata');
$currentTime = date('d-m-Y h:i:s A', time());

if(isset($_POST['submit'])){
    $sql=mysqli_query($bd, "SELECT password FROM users WHERE password='".md5($_POST['password'])."' AND userEmail='".$_SESSION['login']."'");
    $num=mysqli_fetch_array($sql);
    if($num>0){
        $con=mysqli_query($bd, "UPDATE users SET password='".md5($_POST['newpassword'])."', updationDate='$currentTime' WHERE userEmail='".$_SESSION['login']."'");
        $successmsg="Password Changed Successfully!";
    } else {
        $errormsg="Old Password not match!";
    }
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gips | Change Password</title>

<!-- Bootstrap 5 + FontAwesome -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">

<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">

<style>
body {
    font-family: 'Poppins', sans-serif;
    background-color: #f4f6f9;
    margin:0;
}

/* Header */
header {
    background: linear-gradient(90deg,#ff7d19,#ff4500);
    color: #fff;
    padding: 0.5rem 1rem;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
header .container-header {display:flex; justify-content:space-between; align-items:center;}
header .logo {display:flex; align-items:center; color:#fff; font-weight:600; text-decoration:none;}
header .logo-img {height:40px; margin-right:10px;}
header .sidebar-toggle {cursor:pointer; font-size:1.5rem; margin-right:1rem;}
header .top-menu .nav {display:flex; list-style:none; margin:0; padding:0; align-items:center;}
header .top-menu .nav li {margin-left:1.5rem; display:flex; align-items:center;}
header .clock, header .welcome-msg {font-weight:600; font-size:1rem;}
header .logout-btn {display:flex; align-items:center; padding:0.4rem 0.8rem; background-color:#e65c00; color:#fff; border-radius:4px; text-decoration:none; font-weight:500;}
header .logout-btn:hover {background-color:#cc5200;}

/* Sidebar */
#sidebar {
    position:fixed;
    top:0;
    left:0;
    width:260px;
    height:100%;
    background: linear-gradient(180deg, #ff8000, #ff4500);
    overflow-y:auto;
    transition:width 0.3s;
    padding-top:80px;
    border-radius:0 15px 15px 0;
    box-shadow:2px 0 12px rgba(0,0,0,0.1);
    z-index:999;
}
body.sidebar-collapsed #sidebar {width:80px;}
#sidebar ul {list-style:none; padding:0; margin:0;}
#sidebar ul li a {color:#fff; display:flex; align-items:center; padding:12px 20px; text-decoration:none; transition:0.3s;}
#sidebar ul li a:hover {background:#ff4500;}
#sidebar ul li a i {margin-right:10px;}

/* Main content */
.wrapper {
    margin-left:260px;
    padding:100px 30px 30px 30px;
    transition:margin-left 0.3s;
}
body.sidebar-collapsed .wrapper {margin-left:80px;}

/* Form panel */
.form-panel {
    background:#fff;
    border-radius:12px;
    padding:30px;
    box-shadow:0 10px 25px rgba(0,0,0,0.1);
}
label {font-weight:500;}
input.form-control {
    border-radius:8px;
    border:1px solid #ddd;
    padding:10px;
    transition: all 0.3s;
}
input.form-control:focus {
    border-color:#ff7d19;
    box-shadow:0 0 8px rgba(255,125,25,0.2);
}
.btn-primary {
    background:#ff7d19;
    border:none;
    border-radius:8px;
    padding:10px 25px;
    font-weight:600;
    transition:0.3s;
}
.btn-primary:hover {background:#ff4500;}

/* Alerts */
.alert-success, .alert-danger {border-radius:10px;}

/* Footer */
footer.site-footer {
    position:relative;
    bottom:0;
    width:100%;
    background:#ff7d19;
    color:#fff;
    text-align:center;
    padding:15px 0;
}

/* Responsive */
@media(max-width:768px){
    .wrapper {margin-left:0; padding-top:140px;}
}
</style>

<script>
function valid(){
    if(document.chngpwd.password.value==""){alert("Current Password Field is Empty!"); document.chngpwd.password.focus(); return false;}
    if(document.chngpwd.newpassword.value==""){alert("New Password Field is Empty!"); document.chngpwd.newpassword.focus(); return false;}
    if(document.chngpwd.confirmpassword.value==""){alert("Confirm Password Field is Empty!"); document.chngpwd.confirmpassword.focus(); return false;}
    if(document.chngpwd.newpassword.value != document.chngpwd.confirmpassword.value){alert("Password and Confirm Password do not match!"); document.chngpwd.confirmpassword.focus(); return false;}
    return true;
}
</script>

</head>
<body>
<!-- Sidebar -->
<div id="sidebar">
    <ul>
        <li><a href="dashboard.php"><i class="fa fa-dashboard"></i> Dashboard</a></li>
        <li><a href="profile.php"><i class="fa fa-user"></i> Profile</a></li>
        <li><a href="change-password.php"><i class="fa fa-lock"></i> Change Password</a></li>
        <li><a href="register-complaint.php"><i class="fa fa-book"></i> Lodge Complaint</a></li>
        <li><a href="complaint-history.php"><i class="fa fa-tasks"></i> Complaint History</a></li>
    </ul>
</div>

<!-- Header -->
<header class="header">
    <div class="container-header">
        <div class="sidebar-toggle" onclick="toggleSidebar()"><i class="fa fa-bars"></i></div>
        <a href="dashboard.php" class="logo">
            <img src="https://www.gniotips.in/img/logo-footer.png" class="logo-img">
            <span>Grievance Management System</span>
        </a>
        <div class="top-menu">
            <ul class="nav">
                <li><span id="welcome-msg" class="welcome-msg"></span></li>
                <li><span id="current-time" class="clock"></span></li>
                <li><a class="logout-btn" href="logout.php"><i class="fa fa-sign-out-alt"></i> Logout</a></li>
            </ul>
        </div>
    </div>
</header>

<!-- Main content -->
<section class="wrapper">
<h3><i class="fa fa-lock"></i> Change Password</h3>
<div class="row mt-3">
<div class="col-lg-12">
<div class="form-panel">

<?php if($successmsg){ ?>
<div class="alert alert-success"><?php echo htmlentities($successmsg); ?></div>
<?php } ?>
<?php if($errormsg){ ?>
<div class="alert alert-danger"><?php echo htmlentities($errormsg); ?></div>
<?php } ?>

<form class="form-horizontal" method="post" name="chngpwd" onsubmit="return valid();">
    <div class="mb-3">
        <label>Current Password</label>
        <input type="password" name="password" class="form-control" required>
    </div>
    <div class="mb-3">
        <label>New Password</label>
        <input type="password" name="newpassword" class="form-control" required>
    </div>
    <div class="mb-3">
        <label>Confirm Password</label>
        <input type="password" name="confirmpassword" class="form-control" required>
    </div>
    <div class="text-center">
        <button type="submit" name="submit" class="btn btn-primary">Submit</button>
    </div>
</form>

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

<!-- Footer -->
<footer class="site-footer">
&copy; 2025 Gips All rights reserved.
</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
function toggleSidebar(){document.body.classList.toggle('sidebar-collapsed');}

// Clock & Welcome
function updateHeader(){
    const now=new Date();
    const hours=now.getHours();
    document.getElementById('current-time').textContent=now.toLocaleTimeString('en-IN',{hour12:true});
    let greeting='';
    if(hours>=5 && hours<12) greeting='Good Morning';
    else if(hours>=12 && hours<16) greeting='Good Afternoon';
    else if(hours>=16 && hours<20) greeting='Good Evening';
    else greeting='Good Night';
    document.getElementById('welcome-msg').textContent=`${greeting}, User`;
}
setInterval(updateHeader,1000);
updateHeader();
</script>
</body>
</html>
<?php } ?>
