<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>STEAM SA |New Admission</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  	  <!-- Select2 -->
  <link rel="stylesheet" href="../admin/plugins/select2/select2.min.css">
  <link rel="stylesheet" href="../admin/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
  <!-- Bootstrap 3.3.7 -->
  <link rel="stylesheet" href="../admin/bootstrap/css/bootstrap.min.css">
  <!-- Font Awesome -->
 <link rel="stylesheet" href="../admin/font-awesome-4.7.0/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
  <!-- jvectormap -->
  <link rel="stylesheet" href="../admin/plugins/jvectormap/jquery-jvectormap-1.2.2.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="../admin/dist/css/AdminLTE.min.css">
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" href="../admin/dist/css/skins/_all-skins.min.css">
  <!-- bootstrap wysihtml5 - text editor -->


  <!-- daterange picker -->
  <link rel="stylesheet" href="../admin/plugins/daterangepicker/daterangepicker.css">
  <!-- bootstrap datepicker -->
  <link rel="stylesheet" href="../admin/plugins/datepicker/datepicker3.css">
  <!-- iCheck for checkboxes and radio inputs -->
  <link rel="stylesheet" href="../admin/plugins/iCheck/all.css">
  <!-- Bootstrap Color Picker -->
  <link rel="stylesheet" href="../admin/plugins/colorpicker/bootstrap-colorpicker.min.css">
  <!-- Bootstrap time Picker -->
  <link rel="stylesheet" href="../admin/plugins/timepicker/bootstrap-timepicker.min.css">
	
	  <!-- DataTables -->
	  <link rel="stylesheet" href="../admin/bootstrap/css/datepicker.css">
	<script src="../admin/bootstrap/js/bootstrap-datepicker1.js"></script>
  <style>
	.hide-lg{display:none}
	.hide-sm{display:block}
	@media only screen and (max-width:602px){.hide-lg{display:block;}.hide-sm{display:none;}}
  </style>
</head>

<body class="hold-transition  layout-boxed"  style=' height:100%;overflow:auto;'>


<script>
	 $(function (){
		$('#dob').datepicker({
			format: "yyyy-mm-dd",
			autoclose: true
		});
	});
	</script>
    	<div class="modal-dialog " style='background:#f5f5f5f5 url("../images/boxed-bg.png")' >
    		<form method='POST' id='form-new_student'  >
    			<div class="modal-content " style='padding:0px;background:url("../images/boxed-bg.png")'>
    				<div class="modal-header ">
    					<button type="button" onclick='window.history.back();'class="close fa fa-arrow-left" ></button>
						<h4 class="modal-title"><i class="fa fa-plus"></i> New Admission</h4>
    				</div>
    				<div class="modal-body"  style='padding:0px'>

								<!-- /.box-header -->
								<div class="box-body" style='padding:0px'>

								<h4 class='col-md-12'>Personal Details</h4>
										  <!-- First Name -->
								  <div class="form-group col-md-6">
										<label>First Name</label>
									<div class="input-group">
									  <div class="input-group-addon">
										<i class="fa fa-user-o"></i>
									  </div>
									  <input  class="form-control" type="text" name='fname' placeholder='First Name' required>
									</div>
									<!-- /.input group -->
								  </div>
								  <!-- /.form group -->
								
								
													  <!-- other Name -->
								  <div class="form-group col-md-6">
										<label>Other Name</label>
									<div class="input-group">
									  <div class="input-group-addon">
										<i class="fa fa-user-o"></i>
									  </div>
									  <input  class="form-control" type="text" name='lname' placeholder='Other Name' required>
									</div>
									<!-- /.input group -->
								  </div>
								  <!-- /.form group -->
								
										
													  <!-- other Name -->
								  <div class="form-group col-md-6">
										<label>Parent/Guardian</label>
									<div class="input-group">
									  <div class="input-group-addon">
										<i class="fa fa-user-o"></i>
									  </div>
									  <input  class="form-control" type="text" name='pg' placeholder='Parent/Guardian' required>
									</div>
									<!-- /.input group -->
								  </div>
								  <!-- /.form group -->										

								<!-- other Name -->
								  <div class="form-group col-md-6">
										<label>Date of Birth</label>
									<div class="input-group">
									  <div class="input-group-addon" >
										<i class="fa fa-calendar"></i>
									  </div>
									  <input  class="form-control"  type="textarea" name='dob' id='dob' placeholder='dd/mm/yyyy' autocomplete=off required>
									</div>
									<!-- /.input group -->
								  </div>
								  <!-- /.form group -->
								
																
								<!-- other Name -->
								  <div class="form-group col-md-6">
										<label>Country</label>
									<div class="input-group">
									  <div class="input-group-addon">
									  
										<i class="fa fa-credit-card"></i>
									  </div>
									  <input  class="form-control" type="text" name='country' value='Kenya' placeholder='Country' required>
									</div>
									<!-- /.input group -->
								  </div>
								
									<!-- county -->
								<div class="form-group col-md-6">
									<label>County</label>
									<select class="form-control select2" name='county' required style="width: 100%;">
									  <option value=""  selected  >Select County</option>
									  <option value="Kwale">Kwale</option>
									  <option value="Kilifi">Kilifi</option>
									  <option value="Machakos">Machakos</option>
									  <option value="Mombasa">Mombasa</option>
									  <option value="Nairobi">Nairobi</option>
									  <option value="Trans-Nzoia">Trans-Nzoia</option>
									</select>
								</div>
								
								<!-- Gender -->
								  <div class=" col-md-12 no-padding">
								  <div class="form-group col-md-4">
										<label>Gender</label><br>
									<div class="input-group">
									  <div class="input-group-addon">
										<input class="w3-radio" type="radio" name="gender" value="male" checked>
									  </div> <div class=" form-control">Male</div>
									</div>               
								   </div> 
									
									<div class="form-group col-md-4">
									<label></label>
									<div class="input-group">
									  <div class="input-group-addon">
										<input class="w3-radio" type="radio" name="gender" value="Female" >
									  </div> <div class=" form-control">Female</div>
									</div>
									<!-- /.input group -->
								  </div>
								  <!-- /.form group -->
								 </div>
								
								
								<br>
								<h4 class='col-md-12'>Contact Details</h4>
								
										  <!-- phone number -->
								  <div class="form-group col-md-6">
									<label>Phone Number</label>
									<div class="input-group">
									  <div class="input-group-addon">
										<i class="fa fa-phone"></i>
									  </div>
									  <input  class="form-control" type="number" name='pno' placeholder='Phone Number' required>
									</div>
									<!-- /.input group -->
								  </div>
								  <!-- /.form group -->
									
									<!-- email -->
								  <div class="form-group col-md-6">
									<label>Email:</label>

									<div class="input-group">
									  <div class="input-group-addon">
										<i class="fa fa-envelope-o"></i>
									  </div>
									  <input  class="form-control" type="email" name='user_email' placeholder='Email' required>
									</div>
									<!-- /.input group -->
								  </div>
								  <!-- /.form group -->

												<br>
								<h4 class='col-md-12'>Academic Details</h4>
								
										  <!-- phone number -->
								  <div class="form-group col-md-6">
									<label>Password</label>
									<div class="input-group">
									  <div class="input-group-addon">
										<i class="fa fa-lock"></i>
									  </div>
									  <input  class="form-control" type="password" name='pass' id='pass' placeholder='Password' required>
									</div>
									<!-- /.input group -->
								  </div>
								  <!-- /.form group -->
									
									<!-- email -->
								  <div class="form-group col-md-6">
									<label>Confirmm Password</label>

									<div class="input-group">
									  <div class="input-group-addon">
										<i class="fa fa-key"></i>
									  </div>
									  <input  class="form-control" type="password" name='cpass' id='cpass' placeholder='Password' required>
									</div>
									<!-- /.input group -->
								  </div>
								  <!-- /.form group -->

								  </div>
								  <!-- /.form-group -->
								  
						
						
    				</div>
    				<div class="modal-footer"> 
					<button type="reset" class="btn btn-default pull-left " ><i class="fa fa-times"></i> Discard</button>
							<div class="pull-right">
									<input type="hidden" name="btn_action" value='Add-Student' id="btn_action" />
									<input type="hidden" name="user_action" value='student' id="btn_action" />
									<button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Submit</button>
								 </div>
							
    				</div>
    			</div>
    		</form>
    

    </div>
   
</body>

	

<!-- jQuery 2.2.3 -->
<script src="../admin/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="../admin/bootstrap/js/bootstrap.min.js"></script>
	<!-- DataTables -->
<script src="../admin/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="../admin/plugins/datatables/dataTables.bootstrap.min.js"></script>
<!-- SlimScroll -->
<script src="../admin/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="../admin/plugins/fastclick/fastclick.js"></script>

<!-- Bootstrap WYSIHTML5 -->
<script src="../admin/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>

<script src="../admin/plugins/select2/select2.full.min.js"></script>


<!-- Page Script -->
<script>
  $(function () {
    //Add text editor
    $("#compose-textarea").wysihtml5();
	//Initialize Select2 Elements
    $(".select2").select2();
	    $("#students").DataTable();
    $('#id').DataTable({
		"processing":true,
      "paging": true,
      "lengthChange": false,
	  "ordering": true,
      "searching": false,
      "info": true,
      "autoWidth": false
	  
		
    });

	
  })

  $(document).ready(function(){
	  
		
		$(document).on('submit', '#form-new_student', function(event){
			event.preventDefault();
			// $('#action').attr('disabled', 'disabled');
			
			if($("#pass").val()==$("#cpass").val()){
			var form_data = $(this).serialize();
			$.ajax({
				url:"../admin/pages/users/user_action.php",
				method:"POST",
				data:form_data,
				success:function(data){
					if(data=="New Student Added"){
						$('#form-new_student')[0].reset();
					}
					alert(data);
				}
			});
			
			}else{
				alert("Password does not match");
				$("#pass").val("");
				$("#cpass").val("");
			}
		});
		
  })
  
</script>
</html>