@extends('Layout.Employeesmaster')

@section('title', 'Employees')

@section('content')
<style>
.info p {
  text-align:center;
  color: #999;
  text-transform:none;
  font-weight:600;
  font-size:15px;
  margin-top:2px
}

.info i {
  color:#F6AA93;
}


form {
  border-radius: 5px; 
  width:100%;   
  background-color: #FFFFFF;
  overflow: hidden;
}

p span {
  color: #F00;
}

p {
  margin: 0px;
  font-weight: 500;
  line-height: 2;
  color:#333;
}

a {
  text-decoration:inherit
}


.form-group {
  overflow: hidden;
  clear: both;
}
 .form-control {
    
    position:relative;
    clear: both;    
    margin-top: 2px;
    display:inline-block;    
    margin-right: 10px;
}

</style>
<section id="content">    
  <section class="scrollable padder">
    <ul class="breadcrumb no-border no-radius b-b b-light pull-in">
      <li><a href="."><i class="fa fa-home"></i> Home</a></li>
      <li><a href="/employees">Employees</a></li>
      <li class="active">Add</li>
    </ul> 
    @include('Layout.errors')
    @if ( session('success') )
      <div class="alert alert-success alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">×</span>
        <span class="sr-only">Close</span>
        </button>
          <strong>{{ session('success') }}</strong>
      </div>
    @endif
   
    <div class="container-fluid"  style="margin-bottom:0px;">  
    <div class=col-md-3 id=tabLinks style="width:13.5%">
            <ul class="list-group">
              <li class="list-group-item active" ><a href="#employeeinfo" class="tab" onclick="tabswitch(this)">Employee Info</a></li> 
              <li class="list-group-item "><a href="#personal" class="tab" onclick="tabswitch(this)">Personal</a></li>               
              <li class="list-group-item ">Salary</li>    
              <li class="list-group-item "><a href="#training" class="tab" onclick="tabswitch(this)">Training and Certification</a></li>                                       
           </ul>
          </div> 
          <div class=col-md-6  style="width:86.5%"> 
          <form method="post" action="{{ route('/employees/add') }}" enctype="multipart/form-data" class="form-inline" style="padding-top:10px;">
            {{ csrf_field() }}                
            <div class="tabcontainer employeeinfo" id=employeeinfo>
            <fieldset>
            <legend>Employee Info</legend>
            <div class=row style="padding:0px 5px 5px 10px">
              <div class=col-md-4 style="width:20%">
                <p>Employee Code</p>			
                <div class="wrapper" style="width:10%;padding:0px 0px 5px 0px;">
                <select name="employeecode" id="employeecode" class="form-control"style="width:15em;"  onfocus='this.size=5;' onblur='this.size=1;' onchange='this.size=1; this.blur();'>
                    <option value="0">Select Employee Code</option>
                    <option value="1">Branch Code</option>  
                    <option value="2">Department Code</option>
                    <option value="3">None</option>                                      
                    </select> 
                    </div>                
                 <div style="float:left; margin-top: 2px;text-align: left;font-family: 'Roboto Regular',sans-serif;color: #208BBD;font-size: 12px;cursor: pointer;"> 
                 <span>Add Employee Code</span>
                 </div>   
                </div>               
                <div class=col-md-4 style="width:20%">
                <p>Employee No <span>*</span></p>			
                <input name="InputEmployeeno" type="text" class="form-control" id="employee_no" style="border-radius: 0px 5px 5px 0px;border: 1px solid #eee;margin-bottom: 15px;width: 15em;height: 40px;float: left;padding: 0px 15px;"
                          required>
                </div>
                <div class=col-md-4 style="width:20%">
                <p>Prefix<span>*</span></p>	
                <div class="wrapper" style="width:10%;padding:0px 0px 5px 0px;">
                <select name="prefix" id="prefix" class="form-control" style="width:15em;" onfocus='this.size=5;' onblur='this.size=1;' onchange='this.size=1; this.blur();'>                    <option value="0">Select Prefix</option>
                    <option value="1">Mr.</option>
                    <option value="2">Ms.</option>
                    <option value="3">Eng.</option>
                    <option value="4">Dr.</option>
                    <option value="5">Prof.</option>
                    </select> 
                </div>        
                </div>
                <div class=col-md-4 style="width:20%">
                <p>First Name <span>*</span></p>	
                <input name="InputFirstname" type="text" class="form-control" id="first_name" style="border-radius: 0px 5px 5px 0px;border: 1px solid #eee;margin-bottom: 15px;width: 15em;height: 40px;float: left;padding: 0px 15px;"
                          required>
                </div>   
                <div class=col-md-4 style="width:20%">
                <p>Last Name <span>*</span></p>	
                <input name="InputLastname" type="text" class="form-control" id="last_name" style="border-radius: 0px 5px 5px 0px;border: 1px solid #eee;margin-bottom: 15px;width: 15em;height: 40px;float: left;padding: 0px 15px;"
                          required>
                </div>                 

              </div><!-- End of first row --> 
              <div class=row style="padding:0px 5px 5px 10px">
              <div class=col-md-4 style="width:20%">
                <p>Middle Name </p>	
                <input name="InputMiddlename" type="text" class="form-control" id="middle_name" style="border-radius: 0px 5px 5px 0px;border: 1px solid #eee;margin-bottom: 15px;width: 15em;height: 40px;float: left;padding: 0px 15px;"
                          >
              </div> 
              <div class=col-md-4 style="width:20%">
                <p>Gender <span>*</span></p>
                  <label class="radio-inline">
                    <input type="radio" id="smt-fld-1-2" value="male"  name="gender" required >Male</label>
                  <label class="radio-inline">
                    <input type="radio" id="smt-fld-1-3" value="female" name="gender" required >Female</label> 
                  <label class="radio-inline">
                    <input type="radio" id="smt-fld-1-3" value="other" name="gender" required >Other</label> 
                </div>               
                <div class=col-md-4 style="width:20%">
                <p>E-mail <span>*</span></p>	
                <input name="InputEmail" type="email" class="form-control" id="email" style="border-radius: 0px 5px 5px 0px;border: 1px solid #eee;margin-bottom: 15px;width: 15em;height: 40px;float: left;padding: 0px 15px;"
                          required>
                </div>                  
                <div class=col-md-4 style="width:20%">
                <p>Personal PhoneNo. <span>*</span></p>			
                <input name="InputPhoneno" type="text" class="form-control" id="personal_phoneno" style="border-radius: 0px 5px 5px 0px;border: 1px solid #eee;margin-bottom: 15px;width: 15em;height: 40px;float: left;padding: 0px 15px;"
                    required>
                </div>    
                <div class=col-md-4 style="width:20%">
                <p>Work PhoneNo. </p>
                  <input name="InputWorkphone" type="text" class="form-control" id="work_phoneno" style="border-radius: 0px 5px 5px 0px;border: 1px solid #eee;margin-bottom: 15px;width: 15em;height: 40px;float: left;padding: 0px 15px;">   
                </div>  
               
              </div> <!-- End of second row -->

              <div class=row style="padding:0px 5px 5px 10px">
              <div class=col-md-4 style="width:20%">
                <p>Extension</p>
                  <input name="Inputextension" type="text" class="form-control" id="extension" style="border-radius: 0px 5px 5px 0px;border: 1px solid #eee;margin-bottom: 15px;width: 15em;height: 40px;float: left;padding: 0px 15px;">   
                </div> 

              <div class=col-md-4 style="width:20%">
                <p>Fax </p>
                  <input name="InputFax" type="text" class="form-control" id="fax" style="border-radius: 0px 5px 5px 0px;border: 1px solid #eee;margin-bottom: 15px;width: 15em;height: 40px;float: left;padding: 0px 15px;">   
                </div> 
                 
                <div class=col-md-4 style="width:20%">
                <p>KRA PIN <span>*</span></p>
                <input name="InputKrapin" type="text" class="form-control" id="krapin" style="border-radius: 0px 5px 5px 0px;border: 1px solid #eee;margin-bottom: 15px;width: 15em;height: 40px;float: left;padding: 0px 15px;"
                      required>
                </div>   
                <div class=col-md-4 style="width:20%">
                <p>NHIF No. <span>*</span></p>
                <input name="InputNhifNo" type="text" class="form-control" id="nhif_no" style="border-radius: 0px 5px 5px 0px;border: 1px solid #eee;margin-bottom: 15px;width: 15em;height: 40px;float: left;padding: 0px 15px;"
                    required>
                </div>   
                <div class=col-md-4 style="width:20%">
                <p>NSSF No. <span>*</span></p>
                <input name="InputNssfNo" type="text" class="form-control" id="nssf_no" style="border-radius: 0px 5px 5px 0px;border: 1px solid #eee;margin-bottom: 15px;width: 15em;height: 40px;float: left;padding: 0px 15px;"
                          required>
                </div>                       
              </div><!-- End of third row -->

              <div class=row style="padding:0px 5px 5px 10px">
              <div class=col-md-4 style="width:20%">
                <p>IFMIS No<span>*</span></p>
                <input name="InputIfmisno" type="text" class="form-control" id="ifmis_no" style="border-radius: 0px 5px 5px 0px;border: 1px solid #eee;margin-bottom: 15px;width: 15em;height: 40px;float: left;padding: 0px 15px;"
                  required>               
                </div>
                <div class=col-md-4 style="width:20%">
                <p>Branch<span>*</span></p>
                <div class="wrapper" style="width:10%;padding:0px 0px 5px 0px;">
                <select name="branch" id="branch" class="form-control" style="width:15em;" onfocus='this.size=5;' onblur='this.size=1;' onchange='this.size=1; this.blur();'>
                    <option value="0">All Business Units</option>
                    @foreach($businessunits as $businessunit)
                      <option value="{{ $department->id }}">{{ $businessunit->business_unit }}</option>
                    @endforeach
                  </select>  
                  </div> 
                </div>   
                <div class=col-md-4 style="width:20%">
                <p>Department <span>*</span></p>          
                <div class="wrapper" style="width:10%;padding:0px 0px 5px 0px;">
                <select name="department" id="department" class="form-control" style="width:15em;" onfocus='this.size=5;' onblur='this.size=1;' onchange='this.size=1; this.blur();'>
                    <option value="0">All departments</option>
                      @foreach($departments as $department)
                        <option value="{{ $department->id }}">{{ $department->department_name }}</option>
                      @endforeach
                  </select> 
                  </div>      
                </div>  
                <div class=col-md-4 style="width:20%">
                <p>Mode of Employment <span>*</span></p>
                <div class="wrapper" style="width:10%;padding:0px 0px 5px 0px;">
                <select name="modeofemployment" id="modeofemployment" class="form-control" style="width:15em;" onfocus='this.size=5;' onblur='this.size=1;' onchange='this.size=1; this.blur();'>                
                    <option value="0">Select Mode of Employment</option>
                    <option value="1">Direct</option>
                    <option value="2">Reference</option>
                    <option value="3">Interview</option>
                    <option value="4">Other</option>
                    </select> 
                    </div>                
                 <div style="float:left; margin-top: 2px;text-align: left;font-family: 'Roboto Regular',sans-serif;color: #208BBD;font-size: 12px;cursor: pointer;"> 
                 <span>Add Mode of Employment</span>
                 </div>          
                </div>   
                <div class=col-md-4 style="width:20%">
                <p>Reporting Manager <span>*</span></p>
                <div class="wrapper" style="width:10%;padding:0px 0px 5px 0px;">
                <select name="reportingManager" id="reportingManager" class="form-control" style="width:15em;" onfocus='this.size=5;' onblur='this.size=1;' onchange='this.size=1; this.blur();'>                
                    <option value="0">Select Reporting Manager</option>
                    </select> 
                    </div>               
                 <div style="float:left; margin-top: 2px;text-align: left;font-family: 'Roboto Regular',sans-serif;color: #208BBD;font-size: 12px;cursor: pointer;"> 
                 <span>Add Reporting Manager</span>
                 </div>          
                </div>   
                
              </div><!-- End of fourth row --> 

              <div class=row style="padding:0px 5px 5px 10px">
              <div class=col-md-4 style="width:20%">
                <p>Role <span>*</span></p>        
                <div class="wrapper" style="width:10%;padding:0px 5px 5px 5px;">
                <select name="role" id="role" class="form-control selectItems" style="width:15em;"onfocus='this.size=5;' onblur='this.size=1;' onchange='this.size=1; this.blur();'>
                <option value="0">Select Role</option>
                    <option value="1">Employee</option>
                    <option value="2">Team Lead</option>
                    <option value="3">System Admin</option>
                    <option value="4">HR Manager</option>
                    <option value="5">Manager</option>
                    <option value="6">Management</option>               
                </select>
                </div>                        
                </div>              
                <div class=col-md-4 style="width:20%">
                <p>Job Title <span>*</span></p>              
                <div class="wrapper" style="width:10%;padding:0px 0px 5px 0px;">
                <select name="jobtitle" id="jobtitle" class="form-control" style="width:15em;" onfocus='this.size=5;' onblur='this.size=1;' onchange='this.size=1; this.blur();'>
                  <option value="0">Select Job Title</option>
                  <option value="1">Bids and Partnership Officer</option>
                    <option value="2">Business Operations Executive</option>
                    <option value="3">Enterprise Applications Engineer</option>
                    <option value="4">Sales and Markerting Executive</option>
                    <option value="5">System Delivery Engineer</option>                
                </select>
                </div>               
                <div style="float:left; margin-top: 2px;text-align: left;font-family: 'Roboto Regular',sans-serif;color: #208BBD;font-size: 12px;cursor: pointer;"> 
                 <span>Add Job Title</span>
                 </div>          
                </div>     
                <div class=col-md-4 style="width:20%">
                <p>Employment Status <span>*</span></p>                
                <div class="wrapper" style="width:10%;padding:0px 5px 5px 0px;">
                <select name="employmentstatus" id="employmentstatus" class="form-control" style="width:15em;" onfocus='this.size=5;' onblur='this.size=1;' onchange='this.size=1; this.blur();'>
                  <option value="0">Select Employment Status</option>
                  <option value="1">Full Time</option>
                  <option value="2">Part Time</option>
                  <option value="3">Contract</option>
                  <option value="4">Temporary</option>
                  <option value="5">Permanent</option>                  
                </select>
                </div>               
                 <div style="float:left; margin-top: 2px;text-align: left;font-family: 'Roboto Regular',sans-serif;color: #208BBD;font-size: 12px;cursor: pointer;"> 
                 <span>Add Employment Status</span>
                 </div>          
                </div>     
                <div class=col-md-4 style="width:20%">
                <p>Years of Experience <span>*</span></p>
                <input name="Inputyearsofexperience" type="text" class="form-control" id="yearsofexperience" style="border-radius: 0px 5px 5px 0px;border: 1px solid #eee;margin-bottom: 15px;width: 15em;height: 40px;float: left;padding: 0px 15px;"
                  required>             
                </div>
                <div class=col-md-4 style="width:20%">
                <p>Date of Joining <span>*</span></p>
                <input name="InputDateofjoining" type="date" class="form-control" id="dateofjoining" style="border-radius: 0px 5px 5px 0px;border: 1px solid #eee;margin-bottom: 15px;width: 15em;height: 40px;float: left;padding: 0px 15px;"
                  required>          
                </div>                
                </div><!-- End of fifth row --> 
                <div class=row style="padding:0px 5px 5px 10px">
                <div class=col-md-4 style="width:20%">
                <p>Date of Leaving </p>
                <input name="InputDateofleaving" type="date" class="form-control" id="dateofleaving" style="border-radius: 0px 5px 5px 0px;border: 1px solid #eee;margin-bottom: 15px;width: 15em;height: 40px;float: left;padding: 0px 15px;" >
                </div>                
              </div><!-- End of sixth row --> 
              
              <div class=row style="padding:0px 5px 5px 10px">
                <div class=col-md-4 style="width:20%;padding-top:25px;">
                Is Employee Disabled? <input type="checkbox" id="disabilitycheckbox" style="font-size:45px;"/>
                </div>   
                </div>           
                </fieldset>
            <!-- Disability Info row -->
            <fieldset>            
            <div class=row id=disabilityformrow style="padding:0px 5px 5px 10px;display:none">
            <legend style="padding:30px 0px 0px 10px;">Disability</legend>
                <div class=col-md-4 style="width:20%">
                <p>Disability Type <span>*</span></p>
                <div class="wrapper" style="width:10%;padding:0px 0px 5px 0px;float:left;">
                <select name="disabilityType" id="disabilityType" class="form-control" style="width:15em;" onfocus='this.size=5;' onblur='this.size=1;' onchange='this.size=1; this.blur();'>
                    <option value="0">Select Disability Type</option>
                    <option value="1">Health Impairments</option>
                    <option value="2">Blindness and Visual Impairment</option>
                    <option value="3">Hearing Impairments</option>
                    <option value="4">Mental illness or Emotional disturbances</option>
                    <option value="5">Learning disabilities</option>
                    <option value="6">Mobility or Orthopedic disability</option>
                    <option value="7">Speech or language impairments</option>
                    <option value="8">Other</option>
                    </select>   
                </div>               
                </div>               
                <div class=col-md-4 style="width:20%">
                <p>Description <span>*</span></p>
                <input name="disabilitydescription" type="text" class="form-control" id="disabilitydescription" style="border-radius: 0px 5px 5px 0px;border: 1px solid #eee;margin-bottom: 15px;width: 15em;height: 40px;float: left;padding: 0px 15px;"
                  required>                  
                </div>
                <div class=col-md-4 style="width:20%">
                <p>Exemption Certificate <span>*</span></p>
                <input type="file" name="exemptionCert" class="form-control" style="width:15em;" >
                </div>                  

              </div><!-- End of Disability row -->   
              
              <div class=row style="padding:0px 5px 5px 10px">
              <div class=col-md-4 style="width:20%;  padding-top:15px">
                <button class="btn btn-info" style="padding: 5px 25px 5px 25px">Save</button>
              </div>
              <div class=col-md-4 style="width:20%; padding-top:15px">
                <button class=btn style="padding: 5px 25px 5px 25px">Cancel</button>
              </div>
              </div> <!-- End of button row -->    
            </fieldset>

            </div> <!-- End of employeeinfo tabcontainer  -->  

          </form> <!-- End of form -->

          </div> <!--End of column -->           

          <!-- PersonalInfo Div -->
          <div class="col-md-6 tabcontainer personal" id=personal style="display:none;width:86.5%">
          <form method="post" action="{{ route('/employees/add') }}" enctype="multipart/form-data" class="form-inline" style="padding-top:10px;">
            {{ csrf_field() }}                         
            <fieldset>
            <legend>Personal Info</legend>   
              <div class=row style="padding:0px 5px 5px 10px">
                <div class=col-md-4 style="width:20%">
                <p>Marital Status<span>*</span></p>			    
                <div class="wrapper" style="width:10%;padding:0px 0px 5px 0px;float:left;">
                <select name="maritalStatus"  id="maritalStatus" class="form-control" style="width:15em;" onfocus='this.size=5;' onblur='this.size=1;' onchange='this.size=1; this.blur();'>
                    <option value="0">Select Marital Status</option>                   
                    <option value="">Single</option>
                    <option value="">Married</option> 
                    <option value="">Separated</option> 
                    <option value="">Divorced</option> 
                    <option value="">Widow/Widower</option>                   
                    </select>   
                </div>              
                </div>
                <div class=col-md-4 style="width:20%">
                <p>Nationality <span>*</span></p>			
                <div class="wrapper" style="width:10%;padding:0px 0px 5px 0px;float:left;">
                <select name="nationality" onchange="inputfieldVisibility(this);" id="nationality" class="form-control" style="width:15em;" onfocus='this.size=5;' onblur='this.size=1;' onchange='this.size=1; this.blur();'>
                    <option value="">Select Nationality</option>  
                    <option value="kenyan">Kenyan</option>                   
                    <option value="">Ugandan</option>
                    <option value="">Tanzanian</option>                   
                    </select>   
                </div>     
                </div>
                <div class=col-md-4 id="ethnicfield" style="width:20%; display: none;">
                <p>Ethnic Code <span>*</span></p>	
                <div class="wrapper" style="width:10%;padding:0px 0px 5px 0px;float:left;">
                <select name="ethnicity" id="ethnicity" class="form-control" style="width:15em;" onfocus='this.size=5;' onblur='this.size=1;' onchange='this.size=1; this.blur();'>
                    <option value="">Select Ethnicity</option> 
                    <option value="0">Dholuo</option>                   
                    <option value="1">Agikuyu</option>
                    <option value="2">Abaluhya</option>                   
                    </select>   
                </div>     
                </div>   
                <div class=col-md-4 style="width:20%">
                <p>Date of Birth <span>*</span></p>	
                <input name="Inputdob" type="date" class="form-control" id="dob" style="border-radius: 0px 5px 5px 0px;border: 1px solid #eee;margin-bottom: 15px;width: 15em;height: 40px;float: left;padding: 0px 15px;"
                          required>
                </div> 
                <div class=col-md-4 style="width:20%">
                <p>Place of Birth <span>*</span></p>	
                <input name="Inputplaceofbirth" type="text" class="form-control" id="placeofbirth" style="border-radius: 0px 5px 5px 0px;border: 1px solid #eee;margin-bottom: 15px;width: 15em;height: 40px;float: left;padding: 0px 15px;"
                          required>
                </div> 

              </div><!-- End of first row -->   

              <div class=row style="padding:0px 5px 5px 10px">
              <div class=col-md-4 style="width:20%">
                <p>Identity Documents<span>*</span> </p>
                <div class="wrapper" style="width:10%;padding:0px 0px 5px 0px;float:left;">
                <select name="identitydocument" onchange="inputfieldVisibility(this);" id="identitydocument" class="form-control" style="width:15em;" onfocus='this.size=5;' onblur='this.size=1;' onchange='this.size=1; this.blur();'>
                    <option value="">Select Identification</option>   
                    <option value="national">National ID</option>                   
                    <option value="passport">Passport No</option>
                    <option value="military">Military ID</option>                   
                    </select>   
                </div>            
                </div> 
               
                <div class=col-md-4 id="nationaldocument" style="width:20%; display: none;">
                <p>National ID No.</p>
                  <input name="nationalid" type="text" class="form-control" id="extension" style="border-radius: 0px 5px 5px 0px;border: 1px solid #eee;margin-bottom: 15px;width: 15em;height: 40px;float: left;padding: 0px 15px;">   
                </div>
                <div class=col-md-4 id="passportdocument" style="width:20%; display: none;">
                <p>Passport No.</p>
                  <input name="passportno" type="text" class="form-control" id="extension" style="border-radius: 0px 5px 5px 0px;border: 1px solid #eee;margin-bottom: 15px;width: 15em;height: 40px;float: left;padding: 0px 15px;">   
                </div>
                <div class=col-md-4 id="militarydocument" style="width:20%; display: none;">
                <p>Military ID No.</p>
                  <input name="militaryid" type="text" class="form-control" id="extension" style="border-radius: 0px 5px 5px 0px;border: 1px solid #eee;margin-bottom: 15px;width: 15em;height: 40px;float: left;padding: 0px 15px;">   
                </div>
                <div class=col-md-4 style="width:20%">
                <p>Language <span>*</span></p>	
                <input name="language" type="text" class="form-control" id="language" style="border-radius: 0px 5px 5px 0px;border: 1px solid #eee;margin-bottom: 15px;width: 15em;height: 40px;float: left;padding: 0px 15px;"
                          required>
                </div>                  
                <div class=col-md-4 style="width:20%">
                <p>Blood Group <span>*</span></p>			
                <div class="wrapper" style="width:10%;padding:0px 0px 5px 0px;float:left;">
                <select name="bloodgroup" id="bloodgroup" class="form-control" style="width:15em;" onfocus='this.size=5;' onblur='this.size=1;' onchange='this.size=1; this.blur();'>
                    <option value="0">AB Positive</option> 
                    <option value="0">AB Negative</option>                    
                    <option value="1">A Positive</option>
                    <option value="1">A Negative</option>
                    <option value="2">B Positive</option>  
                    <option value="2">B Negative</option>  
                    <option value="3">O Positive</option>  
                    <option value="2">O Negative</option>  
                    </select>   
                </div>    
                </div>                
            
                

              </div> <!-- End of second row -->
              </fieldset>
              <fieldset>
              <div class=row style="padding:5px 5px 5px 10px">
              <h3 style="padding:5px 5px 5px 10px">Contact info</h3>
              <legend style="padding:5px 5px 5px 10px">Postal Address</legend>
                <div class=col-md-4 style="width:20%">
                <p>Country <span>*</span></p>
                <input name="country" type="text" class="form-control" id="country" style="border-radius: 0px 5px 5px 0px;border: 1px solid #eee;margin-bottom: 15px;width: 15em;height: 40px;float: left;padding: 0px 15px;"
                    required>
                </div>   
                <div class=col-md-4 style="width:20%">
                <p>State/County <span>*</span></p>
                <input name="state" type="text" class="form-control" id="state" style="border-radius: 0px 5px 5px 0px;border: 1px solid #eee;margin-bottom: 15px;width: 15em;height: 40px;float: left;padding: 0px 15px;"
                      required>
                </div>   
                <div class=col-md-4 style="width:20%">
                <p>City <span>*</span></p>
                <input name="city" type="text" class="form-control" id="city" style="border-radius: 0px 5px 5px 0px;border: 1px solid #eee;margin-bottom: 15px;width: 15em;height: 40px;float: left;padding: 0px 15px;"
                    required>
                </div>
                <div class=col-md-4 style="width:20%">
                <p>Street Address <span>*</span></p>
                <input name="streetaddress" type="text" class="form-control" id="streetaddress" style="border-radius: 0px 5px 5px 0px;border: 1px solid #eee;margin-bottom: 15px;width: 15em;height: 40px;float: left;padding: 0px 15px;"
                          required>
                </div>            
                <div class=col-md-4 style="width:20%">
                <p>Postal Code</p>
                <input name="postalcode" type="text" class="form-control" id="postalcode" style="border-radius: 0px 5px 5px 0px;border: 1px solid #eee;margin-bottom: 15px;width: 15em;height: 40px;float: left;padding: 0px 15px;">
                </div>                  
              </div><!-- End of third row -->
                 
              <div class=row style="padding:0px 5px 5px 10px">
              <legend style="padding:25px 5px 5px 10px">Current Address</legend>
                <div class=col-md-4 style="width:20%">
                <p>Country <span>*</span></p>
                <input name="postalCountry" type="text" class="form-control" id="postalCountry" style="border-radius: 0px 5px 5px 0px;border: 1px solid #eee;margin-bottom: 15px;width: 15em;height: 40px;float: left;padding: 0px 15px;"
                    required>
                </div>   
                <div class=col-md-4 style="width:20%">
                <p>State/County <span>*</span></p>
                <input name="postalState" type="text" class="form-control" id="postalState" style="border-radius: 0px 5px 5px 0px;border: 1px solid #eee;margin-bottom: 15px;width: 15em;height: 40px;float: left;padding: 0px 15px;"
                      required>
                </div>   
                <div class=col-md-4 style="width:20%">
                <p>City <span>*</span></p>
                <input name="postalCity" type="text" class="form-control" id="postalCity" style="border-radius: 0px 5px 5px 0px;border: 1px solid #eee;margin-bottom: 15px;width: 15em;height: 40px;float: left;padding: 0px 15px;"
                    required>
                </div>
                <div class=col-md-4 style="width:20%">
                <p>Street Address <span>*</span></p>
                <input name="postalStreetAddress" type="text" class="form-control" id="postalStreetAddress" style="border-radius: 0px 5px 5px 0px;border: 1px solid #eee;margin-bottom: 15px;width: 15em;height: 40px;float: left;padding: 0px 15px;"
                          required>
                </div>            
                <div class=col-md-4 style="width:20%">
                <p>Postal Code</p>
                <input name="postalNo" type="text" class="form-control" id="postalNo" style="border-radius: 0px 5px 5px 0px;border: 1px solid #eee;margin-bottom: 15px;width: 15em;height: 40px;float: left;padding: 0px 15px;">
                </div> 

              </div><!-- End of fourth row --> 
              <div class=row style="padding:0px 5px 5px 10px">
              <legend style="padding:25px 5px 5px 10px">Emergency Contacts</legend>
              <div class="pull-right" style="margin:5px 20px 5px 10px;">
                <a href="" class="btn btn-info btn-sm"><i class="fa fa-plus"></i>Add Emergency Contact</a>
              </div>
              </div>
              <div class=row style="padding:0px 5px 5px 10px">
              <div class="table-responsive" style="padding:0px 5px 5px 10px">
                <table class="table table-striped m-b-sm datagrid">
                <thead>
                   <tr>
                      <th>Name</th>
                      <th>Phone No.</th>
                      <th>Email</th>
                      <th>Relation</th>
                      <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                  <tr id="">
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                    <td>
                      <a href=""><span class="btn btn-default btn-sm"><i class="fa fa-edit no-margin"></i></span></a>
                      <a href=""><span class="btn btn-danger btn-sm" ><i class="fa fa-trash no-margin"></i></span></a>
                    </td>
                  </tr>                               
                  <tr>
                    <td colspan="2" class="text-center">Nothing to display</td>
                  </tr>
                </tbody>
                </table>
              </div>              
              </div><!-- End of fifth row -->               
              <div class=row style="padding:0px 5px 15px 10px">
              <div class=col-md-4 style="width:20%;  padding-top:15px">
                <button class="btn btn-info" style="padding: 5px 25px 5px 25px">Save</button>
              </div>
              <div class=col-md-4 style="width:20%; padding-top:15px">
                <button class=btn style="padding: 5px 25px 5px 25px">Cancel</button>
              </div>
              </div> <!-- End of button row -->             
                      
          </form> <!-- End of form -->

          </div> <!--End of column --> 
    
          <div class="col-md-6 tabcontainer training" id=training style="display:none;width:86.5%">
          <div class=row style="padding:0px 5px 5px 10px">
              <legend style="padding:25px 5px 5px 10px">Training and Certification</legend>
              <div class="pull-right" style="margin:5px 20px 5px 10px;">
                <a href="" class="btn btn-info btn-sm"><i class="fa fa-plus"></i>Add Certification</a>
              </div>
              </div>
              <div class=row style="padding:0px 5px 5px 10px">
              <div class="table-responsive" style="padding:0px 5px 5px 10px">
                <table class="table table-striped m-b-sm datagrid">
                <thead>
                   <tr>
                      <th>Course Name</th>
                      <th>Course Level</th>
                      <th>Name of Institution</th>
                      <th>Cerification Name</th>
                      <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                  <tr id="">
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                    <td>
                      <a href=""><span class="btn btn-default btn-sm"><i class="fa fa-edit no-margin"></i></span></a>
                      <a href=""><span class="btn btn-danger btn-sm" ><i class="fa fa-trash no-margin"></i></span></a>
                    </td>
                  </tr>                               
                  <tr>
                    <td colspan="2" class="text-center">Nothing to display</td>
                  </tr>
                </tbody>
                </table>
                
              </div>              
              </div><!-- End of fifth row --> 
              </div><!--- End of training and Certification -->
    </div> <!-- End of container -->  
 
  </section>
</section>
<script src="/js/jquery.min.js"></script>

<script>
$("input").click(function(){
        $(this).next().show();
        $(this).next().hide();
    });
</script>

<!-- Javascript for rendering disability form if checkbox is checked -->

<script type="text/javascript">
    $('#disabilitycheckbox').change(function(){
    if($(this).is(":checked"))
    $('#disabilityformrow').fadeIn('slow');
    else
    $('#disabilityformrow').fadeOut('slow');

    });
    
</script>

<!--Javascript for rendering tablinks-->

<script>
    $('#tabLinks').on('click', '.list-group a', function (e) {
    clickEvent = true;
    $('.list-group li').removeClass('active');
    $(this).parent().addClass('active');
    localStorage.setItem('tab', $(e.currentTarget).attr('href'));
  });
  $(function() {
  var slide = localStorage.getItem('tab');
  console.log(slide);
  if (slide) {
    $("a[href='" + slide + "']").click().tab('show');
  }
  });
  function tabswitch(item) {
    var divs = document.getElementsByClassName("tabcontainer");
    for (var i = 0; i < divs.length; i++) {
      divs[i].style.display = 'none';
    }
    var myDiv = item.href;
    var target = myDiv.split("#");
    document.getElementById(target[1]).style.display = "block";
  }
</script>

<!-- Javascript for rendering input fields on set conditions -->

<script>
    function inputfieldVisibility(that) {
        if (that.value == "national") {            
            document.getElementById("nationaldocument").style.display = "block";
        } else {
            document.getElementById("nationaldocument").style.display = "none";
        }
        if (that.value == "passport") {            
            document.getElementById("passportdocument").style.display = "block";
        } else {
            document.getElementById("passportdocument").style.display = "none";
        }
        if (that.value == "military") {            
            document.getElementById("militarydocument").style.display = "block";
        } else {
            document.getElementById("militarydocument").style.display = "none";
        }
        if (that.value == "kenyan") {            
            document.getElementById("ethnicfield").style.display = "block";
        } else {
            document.getElementById("ethnicfield").style.display = "none";
        }
    }   
</script> 



@endsection
@section('footer-include')
    <!-- fuelux -->
    <script src="/js/libs/underscore-min.js"></script>
    <script src="/js/fuelux/fuelux.js"></script>
    {{--<script src="js/fuelux/demo.datagrid.js"></script>--}}
    <!-- select2 -->
@endsection

@section('j-script')
    <!-- Jquery -->
    <script>
        $(document).on('ready', function(){

        });
       
    </script>

@endsection


