@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">Employee info</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  style="width:13.5%">
            <ul class="list-group">
              <li class="list-group-item active" ><a href="#employeeinfo" class="tabLink employeeinfo" onclick="tabswitch(this)">Employee Info</a></li> 
              <li class="list-group-item "><a href="#personal" class="tabLink documents" onclick="tabswitch(this)">Personal</a></li>               
              <li class="list-group-item ">Salary</li>    
              <li class="list-group-item "><a href="#personal" class="tabLink training" onclick="tabswitch(this)">Training and Certification</a></li>                                       
           </ul>
          </div> 
          <div class=col-md-6  style="width:86.5%"> 
          <form method="post" action="{{ route('registration') }}" 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">NA</option>  
                    <option value="2">ATL</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('registration') }}" 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 </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">Physical 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 20px">
              <input type="checkbox" class="addressCheckbox"  style="font-size:45px;"/>
                Check this box if Physical Address and Postal Address are the same. 
                   
                </div>     
              <div class=row style="padding:0px 5px 5px 10px">
              <legend style="padding:25px 5px 5px 10px">Postal 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=col-md-4 style="width:20%">
                <p>Name <span>*</span></p>
                <input name="emergencyName" type="text" class="form-control" id="emergencyName" 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>Email<span>*</span></p>
                <input name="emergencyEmail" type="text" class="form-control" id="emergencyEmail" 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>PhoneNo. <span>*</span></p>
                <input name="emergencyPhoneno" type="text" class="form-control" id="emergencyPhoneno" 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>Relation <span>*</span></p>
                <input name="emergencyRelation" type="text" class="form-control" id="emergencyRelation" 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 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> <!-- End of container -->  
 
  </section>
</section>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script>
$(document).ready(function(){
$("input").click(function(){
        $(this).next().show();
        $(this).next().hide();
    });

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

    });
    });
</script>
<!--Javascript for rendering tablinks-->
<script>
    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>
<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>
<script>
$('.addressCheckbox').change(function () {
    var country = document.getElementById("country").value;
    var state = document.getElementById("state").value;
    var city = document.getElementById("city").value;
    var address = document.getElementById("streetaddress").value;
    var code = document.getElementById("postalcode").value;
    if ($(this).is(':checked')) {
      $('input[name="postalCountry"]').prop('disabled', true).val(country); 
        $('input[name="postalState"]').prop('disabled', true).val(country); 
        $('input[name="postalCity"]').prop('disabled', true).val(country); 
        $('input[name="postalStreetAddress"]').prop('disabled', true).val(country); 
        $('input[name="postalNo"]').prop('disabled', true).val(country); 
    } else {
      $('input[name="postalCountry"]').prop('disabled', false).val('');
        $('input[name="postalState"]').prop('disabled', false).val('');
        $('input[name="postalCity"]').prop('disabled', false).val('');
        $('input[name="postalStreetAddress"]').prop('disabled', false).val('');
        $('input[name="postalNo"]').prop('disabled', false).val('');
    }
});    
    }
}
  
    
</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


