
 
      <section class="content-header">
      <h1>
        Data Tables
        <small>advanced tables</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li><a href="#">Tables</a></li>
        <li class="active">Data tables</li>
      </ol>
    </section>
    <!-- Main content -->
    <section class="content">
      <div class="row">
        
		
		<div class="col-md-7" style='padding:3px'>
          <div class="box">
            <div class="box-header bg-blue">
              <h3 class="box-title">Staff Members</h3>
            </div>
            <!-- /.box-header -->
            
            <div class="box-body">
              <table id="example1" class="table table-bordered table-striped">
                
				<thead>
                <tr>
                  <th>Rendering engine</th>
                  <th>Browser</th>
                  <th>Platform(s)</th>
                  <th>Engine version</th>
                  <th>CSS grade</th>
                </tr>
                </thead>
                <tbody>
                
                
                <tr>
                  <td>Gecko</td>
                  <td>Mozilla 1.6</td>
                  <td>Win 95+ / OSX.1+</td>
                  <td>1.6</td>
                  <td>A</td>
                </tr>
                <tr>
                  <td>Gecko</td>
                  <td>Mozilla 1.7</td>
                  <td>Win 98+ / OSX.1+</td>
                  <td>1.7</td>
                  <td>A</td>
                </tr>
                
                <tr>
                  <td>KHTML</td>
                  <td>Konqureror 3.1</td>
                  <td>KDE 3.1</td>
                  <td>3.1</td>
                  <td>C</td>
                </tr>
                <tr>
                  <td>KHTML</td>
                  <td>Konqureror 3.3</td>
                  <td>KDE 3.3</td>
                  <td>3.3</td>
                  <td>A</td>
                </tr>
                <tr>
                  <td>KHTML</td>
                  <td>Konqureror 3.5</td>
                  <td>KDE 3.5</td>
                  <td>3.5</td>
                  <td>A</td>
                </tr>
                <tr>
                  <td>Tasman</td>
                  <td>Internet Explorer 4.5</td>
                  <td>Mac OS 8-9</td>
                  <td>-</td>
                  <td>X</td>
                </tr>
                <tr>
                  <td>Tasman</td>
                  <td>Internet Explorer 5.1</td>
                  <td>Mac OS 7.6-9</td>
                  <td>1</td>
                  <td>C</td>
                </tr>
                <tr>
                  <td>Tasman</td>
                  <td>Internet Explorer 5.2</td>
                  <td>Mac OS 8-X</td>
                  <td>1</td>
                  <td>C</td>
                </tr>
                <tr>
                  <td>Misc</td>
                  <td>NetFront 3.1</td>
                  <td>Embedded devices</td>
                  <td>-</td>
                  <td>C</td>
                </tr>
                <tr>
                  <td>Misc</td>
                  <td>NetFront 3.4</td>
                  <td>Embedded devices</td>
                  <td>-</td>
                  <td>A</td>
                </tr>
                <tr>
                  <td>Misc</td>
                  <td>Dillo 0.8</td>
                  <td>Embedded devices</td>
                  <td>-</td>
                  <td>X</td>
                </tr>
                <tr>
                  <td>Misc</td>
                  <td>Links</td>
                  <td>Text only</td>
                  <td>-</td>
                  <td>X</td>
                </tr>
                <tr>
                  <td>Misc</td>
                  <td>Lynx</td>
                  <td>Text only</td>
                  <td>-</td>
                  <td>X</td>
                </tr>
                <tr>
                  <td>Misc</td>
                  <td>IE Mobile</td>
                  <td>Windows Mobile 6</td>
                  <td>-</td>
                  <td>C</td>
                </tr>
                <tr>
                  <td>Misc</td>
                  <td>PSP browser</td>
                  <td>PSP</td>
                  <td>-</td>
                  <td>C</td>
                </tr>
                <tr>
                  <td>Other browsers</td>
                  <td>All others</td>
                  <td>-</td>
                  <td>-</td>
                  <td>U</td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                  <th>Rendering engine</th>
                  <th>Browser</th>
                  <th>Platform(s)</th>
                  <th>Engine version</th>
                  <th>CSS grade</th>
                </tr>
                </tfoot>
              </table>
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.col -->
		</div>
        <!-- /.col -->
		
		
		<div class="col-md-5"  style='padding:5px;padding-top:0px'>
          <div class="box box-primary">
            <div class="box-header with-border ">
              <h3 class="box-title">New Staff</h3>
            </div>
	
            <!-- /.box-header -->
            <div class="box-body">
			<form class="w3-container w3-white w3-card-2 w3-padding-bottom"  METHOD='POST' id='staff_reg'>

			<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' 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' required>
                </div>
                <!-- /.input group -->
              </div>
              <!-- /.form group -->
			
					
						          <!-- other Name -->
              <div class="form-group col-md-6">
              		<label>National ID</label>
                <div class="input-group">
                  <div class="input-group-addon">
                    <i class="fa fa-credit-card"></i>
                  </div>
                  <input  class="form-control" type="number" name='idno' 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="date" name='dob' required>
                </div>
                <!-- /.input group -->
              </div>
              <!-- /.form group -->
			
			
						
						          <!-- Gender -->
					
              <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 -->
			
			
			
			<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' 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' required>
                </div>
                <!-- /.input group -->
              </div>
              <!-- /.form group -->
			<br>
			
			<h4 class='col-md-12'>Education Details</h4>			
              <div class="form-group col-md-6">
                <label>Education level</label>
                <select class="form-control select2" name='edulevel' required style="width: 100%;">
				  <option value=""  selected disabled="disabled" >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>
			</div>

			 <div class="form-group col-md-6">
			  <label>Course</label>
                <input class="form-control" placeholder="Course" type="text" name='course'>
              </div>
			
			<h4 class='col-md-12'>Employment Details </h4>
			
			
			 <div class="form-group col-md-6">
			 <label>Job Position</label>
                <input class="form-control" placeholder="Job Description" type="text" name='jobpos' required>
              </div>
			  
			<hr class='' style='display:table;width:100%'>
			
            <!-- /.box-body -->
            <div class="box-footer">
              <div class="pull-right">
				<input type="hidden" name="btn_action" value='Add' id="btn_action" />
                <button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Send</button>
              </div>
              <button type="reset" class="btn btn-default"><i class="fa fa-times"></i> Discard</button>
            </div>

		
		</form>

              </div>
              <!-- /.form-group -->
              
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /. box -->
		  
		  

		
        </div>
        <!-- /.col -->
    </section>
    <!-- /.content -->


<!-- jQuery 2.2.3 -->
<script src="././plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="././bootstrap/js/bootstrap.min.js"></script>

	
<!-- DataTables -->
<script src="././plugins/datatables/jquery.dataTables.min.js"></script>
<script src="././plugins/datatables/dataTables.bootstrap.min.js"></script>
<!-- SlimScroll -->
<!-- Bootstrap WYSIHTML5 -->
<script src="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>

<script src="plugins/select2/select2.full.min.js"></script>
<!-- InputMask -->
<!-- Page Script -->
<script>
  $(function () {
    //Add text editor
    $("#compose-textarea").wysihtml5();
	//Initialize Select2 Elements
    $(".select2").select2();
	
	    $("#example1").DataTable();
    $('#example2').DataTable({
      "paging": true,
      "lengthChange": false,
      "searching": false,
      "ordering": true,
      "info": true,
      "autoWidth": false
    });
	
  });
</script>
