<?php
	session_start();
	if($_SESSION['rid'])
	{
		$userid=$_SESSION['rid'];
		include'connection.php';
		include'time.php';
	}
	else
	{
		header('location:../login.php');
	}
	
	$quUsr="select * from retailer where Userid='$userid'";
	$reUsr=mysqli_query($con,$quUsr);
	$dataUsr=mysqli_fetch_array($reUsr);
	$UsrName=$dataUsr['Name'];
?><!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">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Change Password</title>

    <!-- Bootstrap Core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="vendor/metisMenu/metisMenu.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="dist/css/sb-admin-2.css" rel="stylesheet">
    <link href="dist/css/my-css-code.css" rel="stylesheet">

    <!-- Morris Charts CSS -->
    <link href="vendor/morrisjs/morris.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
<style>
	.content{background:#f1f2f6; text-align:center; width:49%; padding:15px; border-radius:3px;}
	.content2{float:right; text-align:center; width:45%; padding:15px; border-radius:3px;}
	#lockIcon{font-size:300px; color:dodgerblue;}
	
	.msg-div{background:#f4f4fd; color:; width:400px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:10px; text-align:center; 
    border:solid black 5px; z-index:9999; padding:10px;}
    #okIcon{color:green; font-size:100px;}
    #NotokIcon{color:red; font-size:100px;}
    #usrid{display:none;}
    .btnPopup{background:dodgerblue; color:white; font-size:20px; padding:5px 20px;}

	@media (max-width: 768px)
	{
		.content{width:100%;}
		.content2{width:100%;}
	}
	
	.input-container {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  width: 100%;
  margin-bottom: 15px;
  line-height:100%;
}

.icon {
  padding: 10px;
  background: dodgerblue;
  color: white;
  min-width: 50px;
  text-align: center;
  font-size:25px;
}

.input-field {
  width: 100%;
  padding: 10px;
  outline: none;
}

.input-field:focus {
  border: 2px solid dodgerblue;
}

/* Set a style for the submit button */
.btnForm {
  background-color: dodgerblue;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
  font-size:25px;
}

.btnForm:hover {
  opacity: 1;
}

</style>
</head>

<body onload="GetBal()">

    <div id="wrapper">
        <!-- Navigation -->
		<?php
			include'navigation.php';
		?>
        <!-- Navigation -->
        <div id="page-wrapper">
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Change Password</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
				<div class="content2">
				    <input type="hide" id="usrid" value="<?php echo $userid; ?>">
					<i class="fa fa-lock" id="lockIcon" aria-hidden="true"></i>
				</div>
				<div class="content"><script>
                            function changePwd()
                            {
                                var usrid = document.getElementById("usrid").value;
        		                    
        		                var OldPwd = document.getElementById("OldPwd").value;
        		                var NewPwd = document.getElementById("NewPwd").value;
        		                var ReNewPwd = document.getElementById("ReNewPwd").value;
        		                
                            	if (OldPwd == "" || NewPwd == "" || ReNewPwd == "")
                                {
        		                        alert("Fill All Fields Please !");
        		                }
        		                else
        		                {   
        		                    if(confirm('Do you want to save changes?') == true)
        		                    {
                                        var xmlhttp2 = new XMLHttpRequest();
                                        xmlhttp2.open("GET", "ajax_change_pwd.php?usrid="+usrid+"&OldPwd="+OldPwd+"&NewPwd="+NewPwd+"&ReNewPwd="+ReNewPwd, false);
                                        xmlhttp2.send(null);
                                        var result = xmlhttp2.responseText;
                                        document.getElementById("msgDiv").innerHTML = result;
        		                    }
            
                           		}
                            }
                        </script>
                        <div id="msgDiv"></div>
					<h2 style="color:dodgerblue;">Change Password</h2>
					<div class="input-container">
						<i class="fa fa-key icon"></i>
						<input class="input-field" type="password" placeholder="Enter Old Password" id="OldPwd" required>
					</div>
					<div class="input-container">
						<i class="fa fa-key icon"></i>
						<input class="input-field" type="password" placeholder="Enter New Password" id="NewPwd" required>
					</div>
					<div class="input-container">
						<i class="fa fa-key icon"></i>
						<input class="input-field" type="password" placeholder="Confirm New Password" id="ReNewPwd" required>
					</div>

					<button type="submit" class="btnForm" onclick="changePwd()">Change Password</button>
				</div>
            <!-- /.row -->
            
        <!-- /#page-wrapper -->

    </div>
    <!-- /#wrapper -->

    <!-- jQuery -->
    <script src="vendor/jquery/jquery.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>

    <!-- Metis Menu Plugin JavaScript -->
    <script src="vendor/metisMenu/metisMenu.min.js"></script>

    <!-- Morris Charts JavaScript -->
    <script src="vendor/raphael/raphael.min.js"></script>
    <script src="vendor/morrisjs/morris.min.js"></script>
    <script src="data/morris-data.js"></script>

    <!-- Custom Theme JavaScript -->
    <script src="dist/js/sb-admin-2.js"></script>

</body>

</html>
