<?php
include("header.html");
?>
 <div class="w3-container  " style='padding:0px'>
   <div class="w3-row" style='padding:0px'>
<div class='w3-col m6 show-large'  style='padding:5px'>
	   	<div class="w3-container w3-animate-left w3-white w3-round w3-card-2 third"  id='staff_login' style='padding:0px;margin:0 auto;	'>
  					<div class="w3-container w3-padding w3-card-6 w3-red ">
					  <h3 class='w3-left'>Staff Login </h3>
				</div>

				<div class="w3-container " style='padding:'>
				  <div class="w3-section">
					<label><b>Username</b></label>
					<input class="w3-input w3-border w3-margin-bottom" type="text" placeholder="Enter Email">

					<label><b>Password</b></label>
					<input class="w3-input w3-border" type="text" placeholder="Enter Password">
					
					<button class="w3-btn w3-green w3-section w3-left">Login</button>
					<span class='w3-right w3-padding'><input class="w3-check" type="checkbox" checked="checked"> Remember me</span>
				  </div>
				</div>

				<div class="w3-container w3-border-top " style='padding:'>
				    					  <a href='javascript:void(0)' onclick='open_loginfm("new_staff","staff_login")' class='w3-hide-large w3-left w3-text-blue w3-padding-16' > New Staff</a>
					
				  <span class="w3-right w3-padding ">Forgot <a href="avascript:void(0)" class='w3-text-red'>password?</span></a></span>
				</div>

		  </div>
		  
	<div class='w3-container ' style='padding:0px;display:none' id='new_staff'>
		<div class="w3-container w3-blue w3-card-4">
		<h2>Registration Form</h2>
		</div>

		<form class="w3-container w3-white w3-card-2 w3-padding-bottom">

			<p class=' w3-border-bottom w3-container w3-padding'>Personal Details</p>
			<p class='w3-half w3-padding'>
			<label>First Name</label>
			<input class="w3-input " type="text">
			</p>

			<p class='w3-half  w3-padding'>
			<label>Last Name</label>
			<input class="w3-input" type="text">
			</p>		
			
				<p class='w3-half  w3-padding'>
			<span>National ID</span>
			<input class="w3-input" type="text">
			</p>	
			
						<p class='w3-half  w3-padding'>
			<span>Date of Birth</span>
			<input class="w3-input" type="text">
			</p>
			
			<p class=' w3-padding'>
			
				<label>Gender</label><br>
				<input class="w3-radio" type="radio" name="gender" value="male" checked>
				<label class="w3-validate">Male</label>

				<input class="w3-radio" type="radio" name="gender" value="female">
				<label class="w3-validate">Female</label>

			</p>	

			
			
			
			
			<h3 class=' w3-border-bottom w3-container w3-padding w3-full' style='width:100%;display:table'>Contact Details</h3>
			

			<p class='w3-half  w3-padding'>
			<label>Phone Number</label>
			<input class="w3-input" type="text">
			</p>
			
			<p class='w3-half  w3-padding'>
			<label>Email</label>
			<input class="w3-input" type="email" >
			</p>
			
			
			
			<h3 class=' w3-border-bottom w3-container w3-padding' ><br>Education Details</h3>			
			<p class='w3-half  w3-padding'>
			<label>Education level</label>
			<select class="w3-select w3-padding" name="option">
			  <option value=""  selected>Select Level</option>
			  <option value="Doctorate">Doctorate</option>
			  <option value="Masters">Masters</option>
			  <option value="Degree">Degree</option>
			  <option value="Diploma">Diploma</option>
			  <option value="Certificate">Certificate</option>
			</select>
			</p>		
			<p class='w3-half  w3-padding'>
			<label>Course</label>
			<input class="w3-input" type="text">
			</p>
			
			<h3 class=' w3-border-bottom w3-container w3-padding'>Employment Details </h3>
			<p class='w3-half  w3-padding'>
			<label>Job Position</label>
			<input class="w3-input" type="text">
			</p>	
			<hr class='' style='display:table;width:100%'>
				<p class='w3-half  w3-padding' style='width:100%;display:table'>
				<input class="w3-btn w3-theme" type="button" value='Submit' onclick='javascript:void(0)'>
				 <a href='javascript:void(0)' onclick='open_loginfm("staff_login","new_staff")' class='w3-hide-large w3-right w3-text-blue' >Staff login</a>
				</p>

		
		</form>
	 </div>
</div>
 <div class="w3-col m4  w3-right" style='padding:5px'>
			<div class="w3-container w3-white w3-card-4" style='padding:0px'>
					<div class="w3-container w3-padding w3-blue">
					  <h5 class=''>Subscribe For Updates</h5>
					</div>
					<div class="w3-container" style='padding:0px'>
					  <form class="w3-container w3-padding-16" style=''>
						
						<p>
						<label>Email</label>
						<input class="w3-input w3-border" type="text">
						</p>
						 
						<p >
						<a class="w3-btn-block w3-large w3-red w3-round " >Subscribe</a>
						</p>
					  </form>   
					</div>
			 </div>
		  <br>
		  <div class="w3-card-2 w3-round w3-white w3-padding">
			<p>ADS</p>
		  </div>
		  <br>
		  <div class="w3-card-2 w3-round w3-white w3-padding">
			<p>ADS
			</div>
			<br>
		  
		  		

</div>


	 
</div>
</div>
<script>
$(document).ready(function(){
	
	$(document).on("submit","#staff_reg",function(event){
		event.preventDefault();
		
		var form_data=$(this).serialize();
		$.ajax({
				url:"new_staff_action.php",
				method:"POST",
				data:form_data,
				success:function(data)
				{
					// $("#staff_reg")[0].reset();
					if(data=="New Staff User Added"){
						$("#staff_reg")[0].reset();
					}
				alert(data);	
				}
			})
	})	
	$(document).on("submit","#staff_login",function(event){
		event.preventDefault();
		
		var form_data=$(this).serialize();
		$.ajax({
				url:"steam_action.php",
				method:"POST",
				data:form_data,
				success:function(data)
				{
					if(data=="admin"){
						window.location="admin.php";
					}
					if(data=="staff"){
						window.location="staff_members.php";
						
					}else{
							alert(data);	
					}
			
				}
			})
	})
	
	
})
</script>
<?php
include("footer.html");
?>