<?php 
  if (!isset($_SESSION['username'])) {
    $_SESSION['msg'] = "To access this page, Login is required";
    header('location: login.php');
  }  ?>

<!DOCTYPE  html>
<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;}


.btn-profile{padding: 8px  16px; border: 2px solid  #FFBF00; background: white;   float:right; margin-right: 18%; margin-top:0%; margin-bottom: 0%;}

.btn-profile-b{padding: 8px; border: 2px solid  #FFBF00; background: white;   float:right;margin-right: 18%;  }

#loader {  position: absolute;  left:60%;  top: 50%;  z-index: 1;  width:30px;  height: 30px;  margin: -76px 0 0 -76px;  border-radius: 50%;   border-top: 2px solid #007AA5;  border-right: 1px solid #007AA5; border-left: 1px solid white;
border-bottom: 2px solid white;   -webkit-animation: spin 2s linear infinite;  animation: spin 2s linear infinite;}
#myDiv { display: none; }

@-webkit-keyframes spin {  0% { -webkit-transform: rotate(0deg); }  100% { -webkit-transform: rotate(360deg); }}

@keyframes spin {  0% { transform: rotate(0deg); }  100% { transform: rotate(360deg); }}

/* Add animation to "page content" */
.animate-bottom {  position: relative;  -webkit-animation-name: animatebottom;  -webkit-animation-duration: 1s;
  animation-name: animatebottom;  animation-duration: 1s}

@-webkit-keyframes animatebottom {  from { bottom:-100px; opacity:0 }  to { bottom:0px; opacity:1 }}

@keyframes animatebottom {   from{ bottom:-70px; opacity:.3 }  to{ bottom:0; opacity:1 }}

* {  box-sizing: border-box; }
.top-aa{text-align: left; margin-bottom: 1%; width: 100%; font-size: x-small; color: #848482; padding: 20px;}



 body {  background-image: linear-gradient(to right,#F5F5DC, #F5F5DC);  margin: 0; font-family: "Nunito", sans-serif; }
 .profile {background: white; float: left; width: 100%;border-bottom: 2px solid #007AA5;}

.col-profile {  float: left;  width: 33.33%;  padding: 15px;   margin-bottom: 0%;}
.col-profile-a {  float: left;  width: 33.33%;  padding: 15px;  text-align: center;  margin-bottom: 0%;}

.col-profile  p{ color: #1B1811; font-weight: bold; }

.col-profile a{ color: #54626F; font-size: x-small; }

.pic-profile {height: 200px; width: 60%; border-radius: 50%;}

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

@media screen and (max-width:600px) {
  .col-profile , .col-profile-a {  width: 100%;   }
  .profile{border-bottom: 2px solid #318CE7;} }


</style>
</head>
<body onload="myFunction()" style="margin:0;">

<div id="loader"></div>

<div style="display:none;" id="myDiv" class="animate-bottom">

<div class="top-aa">
<a href="index.php" style="color: black; text-decoration: none; font-weight: bold;">Home </a>
<a>// My Profile</a>
</div>


<div class="row">

<nav class="profile">

<div class="col-profile-a">
<img src="images/profile.png" class="pic-profile">
</div>
  
<div class="col-profile">
<p>Assigned Branch</p>

 <a>
 <?php  
   $username =  $_SESSION['username'];

 $sql1 = "SELECT * FROM  users  WHERE Username = '$username' ";  
$result = mysqli_query($conn,$sql1); $row = mysqli_fetch_array($result);
echo "<a>".$row['Branch']."  </a>";
 ?>
</a> 


<p>Assigned Role</p>
<a><?php  echo "<a>".$row['Role']."  </a>"; ?></a>



<p>Full Name:</p>
<a><?php  echo "<a>".$row['Fname']."   " .$row['Lname']." </a>";  ?></a>


<p>Username</p>
<a><?php  echo "<a>".$row['Username']." </a>"; ?></a>



</div>
  
<div class="col-profile">

<p>Phone No - 1:</p>
<a><?php  echo "<a>".$row['Phone1']." </a>"; ?></a>


<p>Phone No - 2:</p>
<a><?php  echo "<a>".$row['Phone2']." </a>"; ?></a>



<p>Email</p>

<a><?php  echo "<a>".$row['Email']." </a>"; ?></a>


<p>ID Number:</p>
<a><?php  echo "<a>".$row['Idno']."  </a>"; ?></a>
</div>
</nav>

</div>

</div>
<script>
var myVar;

function myFunction() {
  myVar = setTimeout(showPage, 500);
}

function showPage() {
  document.getElementById("loader").style.display = "none";
  document.getElementById("myDiv").style.display = "block";
}
</script>
</body>
</html>
