
<?php 
  if (!isset($_SESSION['username'])) {
    $_SESSION['msg'] = "To access this page, Login is required";
    header('location: login.php');
  }  ?>
<!DOCTYPE>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.column-head {float: left; width: 100%; background: white; padding: 0px; color:#848482;}
.col-head-a {  float: left;  width: 80%;  padding: 5px;  font-size: large; font-weight: bolder; text-align: left; }

.col-head-b {  float: left;  width: 40%;  padding: 5px;  }

.col-head-c {  float: left;  width: 20%;  padding: 15px;  font-size: small; font-weight: bold; text-align: center; }

.profile-pic {float: right; height: 2em; width: 15%; border-radius: 50%; margin-top: -2%;}

.profile-name {font-size:x-small;  font-weight: bolder;  color: ; margin-right: 1%; }


input[type=search]{  width: 90%; margin: auto; padding: 8px; border: 1px solid #ccc; border-radius: 5px;   background: white; margin-top:10px; color:#007AA5; }

input[type=text-a]:focus {  border:none; padding: 7px; }
input [placeholder] {font-size: xx-small;}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width:600px) {
.col-head {  width: 100%;   } 
.col-head-a  { width: 100%; float: left; padding: 5px; font-size: medium; text-align: center; }
.col-head-c { width: 100%;  float: left; opacity: .8; text-align: right; background: #FEFEFA ;  padding: 5px;}
.col-head-b { display: none; }

.profile-pic {float: right; height: 1em; width: 7%; border-radius: 50%; margin-right: 5%; margin-top: 1%;}

.profile-name {font-size:x-small; text-align: left;  font-weight: bolder;  color: ; margin-right: 6%; }


}

</style>
</head>
<body>


<div class="row">


  <div class="column-head">
  <div class="col-head-a">  <p> JOSTECHIE GROCERY  MANAGEMENT SYSTEM</p>  </div>


<div class="col-head-c">
 <p> 
 <a class="a" href="javascript:void(0);" onclick="openForm()" >   
<?php  
  include "inc/conn.php";
  $username =  $_SESSION['username'];

  $result = mysqli_query($db, "SELECT * FROM users WHERE Username = '$username' " );            
  while ($row = mysqli_fetch_array($result))  {
    echo "<a class= 'profile-name'>".$row['Fname']." ".$row['Lname']."</a>" ;


        }
  ?>
<img src="images/profile.png"  class="profile-pic"  onclick="openForm()">
</a>
</p>
<div class="con-popup" id="open">

<nav  class="prof"><i class="fa fa-user l"></i> <a href="index.php?link=001profile">Profile</a> </nav>

<nav class="logout" > <i class="fa fa-lock l"></i>  <a href="logout.php">Logout</a></nav>


<nav class="close"><a  href="javascript:void(0);" onclick="closeForm()"> <i class="fa fa-close c"></i> Close</a> </nav>

</div>

<script>
function openForm() {
  document.getElementById("open").style.display = "block";
}

function closeForm() {
  document.getElementById("open").style.display = "none";
}
</script>

</div>
</div>

  
</div>

</body>
</html>
<style type="text/css">
  
/* The popup form - hidden by default */
.con-popup {  display: none;  position: absolute;  background: white; width:15%; text-align: left;   z-index: 9; right: 2%;  box-shadow: 2px 3px 3px 2px whitesmoke; padding: 15px;
}
 .con-popup a {color: #36454F; text-decoration: none;}

.prof{padding: 10px;  width: 100%; border-top: 1px solid #B9D9EB;}

.logout{padding: 10px;  width: 100%; border-top: 1px solid #B9D9EB;}

.close{padding: 10px;  width: 100%; border-top: 1px solid #B9D9EB;}


.prof:hover, .logout:hover{background:whitesmoke ;}


.close:hover, .close a:hover{background:#C41E3A; color: white;}


.l {font-size: large; color:#7B3F00 ; margin-right:10%;}

.c {font-size: large; color:red ; margin-right:10%;}

@media screen and (max-width:600px) {
.con-popup {width: 40%; margin-right: 5%;}
}

}
</style>