<?php 
  if (!isset($_SESSION['username'])) {
    $_SESSION['msg'] = "To access this page, Login is required";
    header('location: login.php');
  }  ?>
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
    <link rel="stylesheet" href="cs/bootrap.css">
    <style type="text/css">
* {  box-sizing: border-box;}
body {  margin: 0;}

    
#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 }}

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

td {  padding:8px;border-bottom: 1px solid #ddd !important; font-size: x-small; }

th {  padding:10px;border: 1px solid #ddd !important; background:#7CB9E8; color: white; opacity: .8;text-align: left;  font-size: small; border-spacing: 1;  font-size: x-small;}

table {background: white;  margin: auto; border-spacing: 0; border-collapse: collapse; width:100%;  overflow-x: auto; }

.no-results{width:100%;  padding: 10px;   border: 1px solid #a94442; font-size: small; 
  color: #a94442;   background: #f2dede;   border-radius: 5px;   text-align: left;}


.btn-delete {background: white; border:  1px solid red; color: red; padding: 4px;}
.btn-delete a { color: red; text-decoration: none;}

.btn-edit {background: white; border:  1px solid forestgreen;  padding: 4px;}
.btn-edit a { color:black; text-decoration: none;}

.btn-reset {background: white; border:  1px solid #7CB9E8; color: red; padding: 4px;}
.btn-reset a { color: #7CB9E8; text-decoration: none;}

.btn-edit:hover{background:#dde; border:  1px solid none;  padding: 5px; ;opacity: .6}
.btn-delete:hover{background:#dde; border:  1px solid red;  padding: 5px; opacity: .6;}
.btn-reset:hover{background:#dde; border:  1px solid red;  padding: 5px; opacity: .6;}
@media screen and (max-width:1000px) {
  table { width: 100%; float: left; margin-bottom: 70%;   }
  td th {font-size: small;}
  .btn-reset{width: 100%; padding: 1px 20px;}
 }


</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>// Manage Staff Accounts</a>
</div>

<div style="overflow-x: auto; scrollbar-width: thin; padding: 10px;">
<?php
// Include config file
require_once "inc/config.php";
// Attempt select query execution
$sql = "SELECT * FROM users  order by Id; ";
if($result = $mysqli->query($sql)){
if($result->num_rows > 0){
echo "<table class='table table-bordered table-striped'>";
echo "<thead>";
echo "<tr>";
echo "<th>#</th>";
echo "<th>Full Name</th>";
echo "<th>Username</th>";
echo "<th>Phone 1</th>";
echo "<th>Phone 2</th>";
echo "<th>Email </th>";
echo "<th>Phone No</th>";
echo "<th>Branch</th>";
echo "<th>Role</th>";
echo "<th>When Created</th>";
echo "<th>A1</th>";
echo "<th>A2</th>";
echo "<th>A3</th>";
echo "</tr>";
echo "</thead>";
echo "<tbody>";
while($row = $result->fetch_array()){
echo "<tr>";
echo "<td>" . $row['Id'] . "</td>";
echo "<td>" . $row['Fname'] . "</td>";
echo "<td>" . $row['Username'] . "</td>";
echo "<td>" . $row['Phone1'] . "</td>";
echo "<td>" . $row['Phone2'] . "</td>";
echo "<td>" . $row['Email'] . "</td>";
echo "<td>" . $row['Idno'] . "</td>";
echo "<td>" . $row['Branch'] . "</td>";
echo "<td>" . $row['Role'] . "</td>";
echo "<td>" . date_format( new DateTime ($row['Time'] ),"d M, Y"). "</td>";

echo "<td><button class='btn-edit'><a href='edit-staff-records.php?edit=". $row['Id'] ."' title='Edit' data-toggle='tooltip'>Edit Record</a></button>"."</td>";

echo "<td><button class='btn-reset'><a href='staffsupdate-pswd.php?edit=". $row['Id'] ."' title='Change Password' data-toggle='tooltip'>Reset Pswd</a></button>"."</td>";

echo "<td><button class='btn-delete'><a href='del-users-accounts.php?id=". $row['Id'] ."' title='delete Record' data-toggle='tooltip'>Remove</a></button>" ."</td>";


echo "</tr>";
}

echo "</tbody>";                            
echo "</table>";
 // Free result set
$result->free();

} else{  echo "<p class='no-results'><em>Sorry ! We found 0 records.</em></p>";}
 
} else{ echo "ERROR: Could not able to execute $sql. " . $mysqli->error; }

 // Close connection
$mysqli->close();
?>

</div>
</div>

</body>
<script>
var myVar;

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

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

</html>