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

<?php include('server-a.php') ?>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {  box-sizing: border-box;}
body {  margin: 0;}

body {font-family: Arial;}
#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-top {float: left; font-size: x-small;color:#848482;}

label{color:#3D2B1F; margin-left:1%;  }

label a{ color: red; }

input[type=text],select, input[type=password]{  width: 100%;  padding: 10px;  border: 1px solid #ccc;  border-radius: 4px; color:#848482; font-weight: bold; box-sizing: border-box;  margin-top: 10px;  margin-bottom: 5px;  resize: vertical; background: white;}

input[type=submit] {  background:#007AA5;  color: white; font-weight: bold;  padding: 12px 15px; float: right; border: none;  border-radius: 4px;  cursor: pointer;  margin-top: 4%;}


input[type=submit]:hover {  background-color: #ED872D ; padding: 13px 20px;}

.error { float: left;  width:98%;   margin: 6px auto;   padding: 10px;   border: 1px solid #a94442; font-size: small; 
  color: #a94442;   background: #f2dede;   border-radius: 5px;   text-align: left;  margin-bottom: 3%;}

.success { padding: 15px; color: white;background:#1cc88a;  width: 100%; text-align: left; font-size: small; border-radius: 5px;}


.c1{width:33.33%; padding: 10px; float:left;}
.c2{width:33.33%; padding: 10px; float:left;}
.c3{width:33.33%; padding: 10px; float:left;}

.container { width:95%; margin: auto; padding: 15px; background-color:white; float: left;  margin-left: 2%;  margin-top: 4%;
border-bottom: 2px solid #007AA5;}

@media screen and (max-width:800px) {
.container { width:97.8%; height: auto; margin-top: 6%;}
.c1,.c2,.c3{width:100%; padding: 5px;}
}
</style>
</head>
<body onload="myFunction()" style="margin:0;">

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

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


<div class="top-top">
<a href="index.php" style="color: black; text-decoration: none; font-weight: bold;"> Home </a>
<a href="index.php?link=003managestaffs" style="color: black; text-decoration: none; ">// Manage Staff Accounts </a>
<a>// New Account</a>
</div>



<form  method="post" >
<nav  class="container">


<?php include('errors.php') ?>

<div class="c2">
<label>Station Name: <a> * </a> </label>
      <select name="branch" value="<?php echo $branch; ?>" >
        <option>OL-JORO-OROK</option>
        <option>KANGUI</option>
        <option>NAKURU</option>
      
      </select>
</div>

<div class="c3">
<label>Staff Role <a> * </a></label> 
      <select name="role" value="<?php echo $role; ?>" >
        <option>Admin</option>
        <option>Staff</option>
      </select>
</div>

<div class="c3">
<label>First Name <a> * </a></label>
<input type="text"  name="fname" value="<?php echo $fname; ?>"  placeholder="joseph" >
</div>

<div class="c3">
<label>Last name <a> * </a></label>
<input type="text"  name="lname" value="<?php echo $lname; ?>"  placeholder="kim" >
</div>


<div class="c3">
<label>Username <a> * </a></label>
<input type="text"  name="username" value="<?php echo $username; ?>"  placeholder="joskim" >
</div>


<div class="c3">
<label>Phone - 1 <a> * </a></label>
<input type="text"  name="phone1" value="<?php echo $phone1; ?>" onFocus="this.value = '';" onBlur="if (this.value == '') 
{this.value = '07*******';}" required pattern="[0-9]{9,10}" placeholder="0708448164" >
</div>

<div class="c3">
<label>Phone - 2 <a> * </a></label>
<input type="text"  name="phone2" value="<?php echo $phone2; ?>" onFocus="this.value = '';" onBlur="if (this.value == '') 
{this.value = '07*******';}" required pattern="[0-9]{9,10}"  placeholder="0708448164" >
</div>

 <div class="c3">
<label>Email <a> * </a> </label>
<input type="text" name="email" value="<?php echo $email; ?>" placeholder="joskin@gmail.com" >
</div>


<div class="c3">
<label>ID No <a> * </a></label>
<input type="text"  name="idno" value="<?php echo $idno; ?>"  placeholder="36576512" >
</div>

<div class="c1">
<label>Password <a> * </a></label>
<input type="password"   name="password_1" placeholder="xxxxxxxx" >
</div>

<div class="c1">
<label>Repeat Password <a> * </a></label>
<input type="password"  name="password_2"  placeholder="xxxxxxxx" >
</div>

<input type="submit" name="submit" value="Submit"><br><br><br>
</nav>


  </form>

</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>
     