<?php
	session_start();
	include("library/conn.php");
?>
<!DOCTYPE html>
<html lang="en">
	<head>
        <?php include("library/head.php");?>
        <title>Change Passcode | <?php echo $_SESSION['systemName']; ?></title>
	</head>
	<body class="app sidebar-mini pace-done sidenav-toggled">

		<!-- Navbar-->
		<?php include("library/waiter-header.php");?>
		<!-- Sidebar menu-->
		<?php
			date_default_timezone_set('Africa/Mogadishu');
			if ((isset($_SESSION['userName']) == true) && ($_SESSION['userName']) != "") {
				if ((time() - $_SESSION['lastLoginTimeStamp']) < 900) $_SESSION["lastLoginTimeStamp"] = time();
				else echo "<script>location ='logout'</script>";
			} else echo "<script>location ='logout'</script>";
		?>

		<main class="app-content" style="margin-left: 0px;">
			<div class="row">
                <div class="col-md-7">
					<div class="tile">
						<div class="tile-body">
							<div class="row">
								<div class="form-group col-md-12">
									<h4 class="pb-1">
										<span><i class="fa fa-vcard"></i> My Profile</span>
									</h4>
									<hr />
								</div>
							</div>
                            <div class="row pb-5">
                                <div class="col-md-4 text-center">
                                    <img class="img-fluid rounded-circle" src="<?php echo $_SESSION['waiterPhoto']; ?>" width="200px" height="200px" />
                                    <h5 class="mt-3"><?php echo $_SESSION['userName']; ?></h5>
                                    <h5 class="font-weight-normal"><?php echo $_SESSION['userType']; ?></h5>
                                    <h5 class="font-weight-normal">
                                        <a href="#" class="btn btn-sm btn-outline-primary rounded-pill" target="_blank"><i class="fa fa-facebook pl-1"></i></a>
                                        <a href="#" class="btn btn-sm btn-outline-success rounded-pill" target="_blank"><i class="fa fa-twitter pl-1"></i></a>
                                        <a href="#" class="btn btn-sm btn-outline-dark rounded-pill" target="_blank"><i class="fa fa-instagram pl-1"></i></a>
                                        <a href="#" class="btn btn-sm btn-outline-danger rounded-pill" target="_blank"><i class="fa fa-snapchat pl-1"></i></a>
                                    </h5>
                                </div>
                                <div class="col-md-8">
                                    <div class="row border-bottom border-light pt-3 pb-2 mr-0">
                                        <div class="col-md-4"><h5>Fullname</h5></div>
                                        <div class="col-md-8"><h5 class="font-weight-normal"><?php echo $_SESSION['waiterFullName']; ?></h5></div>
                                    </div>
                                    <div class="row border-bottom border-light pt-3 pb-2 mr-0">
                                        <div class="col-md-4"><h5>Place of Birth</h5></div>
                                        <div class="col-md-8"><h5 class="font-weight-normal"><?php echo $_SESSION['waiterPlaceOfBirth']; ?></h5></div>
                                    </div>
                                    <div class="row border-bottom border-light pt-3 pb-2 mr-0">
                                        <div class="col-md-4"><h5>Date of Birth</h5></div>
                                        <div class="col-md-8"><h5 class="font-weight-normal"><?php echo $_SESSION['waiterDateOfBirth']; ?></h5></div>
                                    </div>
                                    <div class="row border-bottom border-light pt-3 pb-2 mr-0">
                                        <div class="col-md-4"><h5>Working Area</h5></div>
                                        <div class="col-md-8"><h5 class="font-weight-normal"><?php echo $_SESSION['workingAreaName']; ?></h5></div>
                                    </div>
                                    <div class="row border-bottom border-light pt-3 pb-2 mr-0">
                                        <div class="col-md-4"><h5>Home Address</h5></div>
                                        <div class="col-md-8"><h5 class="font-weight-normal"><?php echo $_SESSION['waiterAddress']; ?></h5></div>
                                    </div>
                                    <div class="row border-bottom border-light pt-3 pb-2 mr-0">
                                        <div class="col-md-4"><h5>Phone Number</h5></div>
                                        <div class="col-md-8"><h5 class="font-weight-normal"><?php echo "+252 ". $_SESSION['waiterPhone']; ?></h5></div>
                                    </div>
                                    <div class="row border-bottom border-light pt-3 pb-1 mr-0">
                                        <div class="col-md-4"><h5>Email Address</h5></div>
                                        <div class="col-md-8"><h5 class="font-weight-normal"><?php echo $_SESSION['waiterEmail']; ?></h5></div>
                                    </div>
                                </div>
                            </div>
						</div>
					</div>
				</div>
                

                <div class="col-md-5">
					<div class="tile">
						<div class="tile-body">
							<div class="row">
								<div class="form-group col-md-12">
									<h4>
										<span><i class="fa fa-lock"></i> Change Passcode</span>
									</h4>
									<hr />
								</div>
                            </div>
                            <form action="#" method="POST" id="waiterChangePasswordForm">
                                <div class="row">
                                    <div class="form-group col-md-4">
                                        <label class="control-label font-weight-bold">Current Passcode</label>
                                    </div>
                                    <div class="form-group col-md-8">
                                        <input class="form-control" type="password" placeholder="Enter current passcode..." name="txtCurrentPasswordWaiterChangePassword" id="txtCurrentPasswordWaiterChangePassword" autocomplete="off" required />
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group col-md-4">
                                        <label class="control-label font-weight-bold">New Passcode</label>
                                    </div>
                                    <div class="form-group col-md-8">
                                        <input type="password" class="form-control" type="text" name="txtNewPasswordWaiterChangePassword" id="txtNewPasswordWaiterChangePassword" placeholder="Enter new passcode" autocomplete="off" required />
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group col-md-4">
                                        <label class="control-label font-weight-bold">Confirm Passcode</label>
                                    </div>
                                    <div class="form-group col-md-8">
                                        <input type="password" class="form-control" type="text" name="txtConfirmPasswordWaiterChangePassword" id="txtConfirmPasswordWaiterChangePassword" placeholder="Confirm passcode" autocomplete="off" required />
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-12">
                                        <button type="submit" class="btn btn-primary font-weight-bold pt-2 pb-2 pl-3 pr-3 pull-right" name="btnChangeWaiterPassword" id="btnChangeWaiterPassword"><i class="fa fa-fw fa-lg fa-refresh"></i>Change Passcode</button>
                                    </div>
                                </div>
                            </form>

						</div>
					</div>
				</div>
			</div>
			
		</main>

		<!-- Essential javascripts for application to work-->
		<?php include("library/scripts.php");?>
		
		<script type="text/javascript">
			$(document).ready(function () {
				// Active the POS Button
				$(".btnWaiterChangePasswordWaiterDashboard").removeClass("btn-outline-success")
				$(".btnWaiterChangePasswordWaiterDashboard").addClass("btn-success")
			})
		</script>

	</body>
</html>