@extends('Layout.Employeesmaster')

@section('title', 'Employees')
@section('header-include')
    <link rel="stylesheet" href="/newswag/bootstrap.min.css" type="text/css"/>
    <link rel="stylesheet" href="/newswag/bootstrapselect.min.css" type="text/css"/>
@endsection


@section('content')
<style>
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-inline;    
    margin-right: 10px;
}
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}
.panel-row {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
</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 "><a href="#salary" class="tab" onclick="tabswitch(this)">Salary</a></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>Prefix<span>*</span></p>	
                <select name="prefix" id="prefix" class="form-control selectpicker" data-live-search="true" data-size="2"  title="Select prefix" style="width:15em;" onfocus='this.size=5;' onblur='this.size=1;' onchange='this.size=1; this.blur();'>
                    <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 class=col-md-4 id="Firstname" style="width:20%; display: inline;">
                <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 id="Lastname" style="width:20%; display: inline;">
                <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 class=col-md-4 id="Middlename" style="width:20%; display: inline;">
                <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><!-- End of first row -->

            <div class=row style="padding:0px 5px 5px 10px">          
              <div class=col-md-4 style="width:20%">
                <p>Branch<span>*</span></p>
                <select name="branch" id="branch" class="form-control selectpicker" data-live-search="true"  title="Select Branch" style="width:15em;" data-size="5" 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 class=col-md-4 style="width:20%">
                <p>Department <span>*</span></p>          
                <select name="department" id="department" class="form-control selectpicker" data-live-search="true" data-size="5"  title="Select Department" 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 class=col-md-4 style="width:20%">
                <p>Employee Code</p>			
                <select name="employeecode" id="employeecode" class="form-control selectpicker" data-live-search="true"  style="width:15em;" onfocus='this.size=5;' onblur='this.size=1;' onchange='this.size=1; this.blur();'>
                  <option value="1">Branch Code</option>  
                  <option value="2">Department Code</option>
                  <option value="3">None</option>                                      
                </select> 
                <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>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> <!-- End of second row -->

            <div class=row style="padding:0px 5px 5px 10px">                             
              <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 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>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><!-- End of third row -->

            <div class=row style="padding:0px 5px 5px 10px">                  
              <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 class=col-md-4 style="width:20%">
                <p>IFMIS No</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;"
                  >               
              </div>            
              <div class=col-md-4 style="width:20%">
                <p>Reporting Manager <span>*</span></p>
                <select name="reportingManager" id="reportingManager" class="form-control selectpicker" data-live-search="true" 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 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 class=col-md-4 style="width:20%">
                <p>Role <span>*</span></p>        
                <select name="role" id="role" title="Select Role" class="form-control selectpicker" data-live-search="true" data-size="5"  style="width:15em;" onfocus='this.size=5;' onblur='this.size=1;' onchange='this.size=1; this.blur();'>
                  <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 class=col-md-4 style="width:20%">
                <p>Job Title <span>*</span></p>              
                <select name="jobtitle" id="jobtitle" class="form-control selectpicker" data-live-search="true" data-size="5"  title="Select Job Title" style="width:15em;" onfocus='this.size=5;' onblur='this.size=1;' onchange='this.size=1; this.blur();'>
                  <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 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><!-- End of fourth row --> 

            <div class=row style="padding:0px 5px 5px 10px">                  
              <div class=col-md-4 style="width:20%">
              <p>Employment Status <span>*</span></p>                
              <select name="employmentstatus" id="employmentstatus" class="form-control selectpicker" data-live-search="true" data-size="5"  title="Select employment status." style="width:15em;" onfocus='this.size=5;' onblur='this.size=1;' onchange='this.size=1; this.blur();'>
                <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>  
                <option value="6">Casual</option>
                <option value="7">Probation</option>                 
              </select>
              </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 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 fifth 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 -->  
          </form>                                        
            <div class=row style="padding:0px 5px 5px 10px">
              <div class=col-md-4 style="width:20%;padding-top:25px;">
              <b> Is Employee Disabled?</b> <input type="checkbox" id="disabilitycheckbox" />
            </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>
            <form method="post" action="{{ route('/employees/add') }}" enctype="multipart/form-data" class="form-inline" style="padding-top:10px;">
            {{ csrf_field() }}    
                <div class=col-md-4 style="width:20%">
                <p>Disability Type </p>
                <select name="disabilityType" id="disabilityType" class="form-control selectpicker" data-size="2" data-live-search="true"  title="Select disability" style="width:15em;" onfocus='this.size=5;' onblur='this.size=1;' onchange='this.size=1; this.blur();'>
                    <option value="0">Select disability</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 class=col-md-4 style="width:20%">
                <p>Description </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: 60px;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 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 -->  
              </form>                

              </div><!-- End of Disability row -->               
             
            </fieldset>

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

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

          <!-- PersonalInfo Div -->
          <div class="col-md-6 tabcontainer personal" id=personal style="display:none;width:86.5%">          
          <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
            <div class="panel panel-default">
              <div class="panel-heading" role="tab" id="headingOne">
                <h4 class="panel-title">
                  <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                  Personal Info
                  </a>
                </h4>
              </div>
              <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
              <div class="panel-body">
              <form method="post" action="{{ route('/employees/add') }}" enctype="multipart/form-data" class="form-inline" style="padding-top:10px;">
              {{ csrf_field() }}
              <div class=row style="padding:0px 5px 5px 10px">                
                <div class=col-md-4 style="width:20%">
                <p>Marital Status<span>*</span></p>			    
                <select class="selectpicker" id="maritalStatus" name="maritalStatus" data-live-search="true"  title="Select marital status" data-size="3" >
                    <option data-tokens="single" value="single">Single</option>
                    <option data-tokens="married" value="married">Married</option> 
                    <option data-tokens="separated" value="separated">Separated</option> 
                    <option data-tokens="divorced" value="divorced">Divorced</option> 
                    <option data-tokens="widow_widower" value="widow_widower">Widow/Widower</option>                   
                    </select> 
                </div>
                <div class=col-md-4 style="width:20%">
                <p>Nationality <span>*</span></p>		                
                <select name="nationality" class="form-control selectpicker" data-live-search="true" data-size="3"  title="Select nationality" onchange="ethnicVisibility(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="kenyan">Kenyan</option>                   
                    <option value="">Ugandan</option>
                    <option value="">Tanzanian</option>          
                    <option value="">Tanzanian</option>          
                    <option value="">Tanzanian</option>          
                    <option value="">Tanzanian</option>          
                    <option value="">Tanzanian</option>          
                    <option value="">Tanzanian</option>                   
                    </select>   
                </div> 
                <div class=col-md-4 id="ethnicfield" style="width:20%; display: none;">
                <p>Ethnic Code <span>*</span></p>	
                <select name="ethnicity" id="ethnicity" class="form-control selectpicker" data-live-search="true" data-size="3" multiple data-max-options="2"   title="Select ethnicity" style="width:15em;" onfocus='this.size=5;' onblur='this.size=1;' onchange='this.size=1; this.blur();'>
                    <option value="1">Abaluhya</option> 
                    <option value="2">Abagusii</option> 
                    <option value="3">Abakuria</option>                 
                    <option value="4">Aembu</option>
                    <option value="5">Agikuyu</option>
                    <option value="6">Akamba</option>
                    <option value="7">Ambeere</option>
                    <option value="8">Ameru</option>
                    <option value="9">Bajuni</option>
                    <option value="9">Boni</option>
                    <option value="9">Borana Oromo</option>
                    <option value="10">Bukusu</option>
                    <option value="11">Chonyi</option>
                    <option value="12">Digo</option>
                    <option value="13">Dorobo</option>
                    <option value="13">El Molo</option>
                    <option value="14">Gabra</option>
                    <option value="15">Giriama</option>
                    <option value="16">Abaluhya</option>
                    <option value="17">Abaluhya</option>
                    <option value="18">Abaluhya</option>
                    <option value="19">Abaluhya</option>
                    <option value="20">Abaluhya</option> 
                    <option value="21">Abaluhya</option> 
                    <option value="22">Abaluhya</option> 
                    <option value="23">Abaluhya</option> 
                    <option value="24">Abaluhya</option> 
                    <option value="25">Abaluhya</option> 
                    <option value="26">Abaluhya</option> 
                    <option value="27">Abaluhya</option> 
                    <option value="28">Abaluhya</option> 
                    <option value="29">Abaluhya</option> 
                    <option value="30">Abaluhya</option> 
                    <option value="31">Abaluhya</option> 
                    <option value="30">Abaluhya</option> 
                    <option value="31">Abaluhya</option> 
                    <option value="32">Abaluhya</option> 
                    <option value="33">Abaluhya</option> 
                    <option value="34">Abaluhya</option> 
                    <option value="35">Abaluhya</option> 
                    <option value="36">Abaluhya</option> 
                    <option value="37">Abaluhya</option> 
                    <option value="38">Abaluhya</option> 
                    <option value="39">Abaluhya</option> 
                    <option value="40">Abaluhya</option> 
                    <option value="41">Abaluhya</option> 
                    <option value="42">Abaluhya</option>                   
                    </select>  
                </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>Identity Documents<span>*</span> </p>
                <select class="form-control selectpicker"  data-live-search="true"  title="Select Identity Document" onchange="inputfieldVisibility(this);" id="identitydocument" style="background-color:white;">  
                    <option value="national">National ID</option>                   
                    <option value="passport">Passport No</option>
                    <option value="military">Military ID</option>                   
                    </select>  
                </div>  
                
              </div><!-- End of first row -->   

              <div class=row style="padding:0px 5px 5px 10px">           
                <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</p>	
                <select class="dropup selectpicker" name="language" data-dropup--auto="false" multiple data-max-options="5" data-size="3" data-live-search="true" title="Select a language">
                        <option>PHP</option>
                        <option>CSS</option>
                        <option>HTML</option>
                        <option>CSS 3</option>
                        <option>Bootstrap</option>
                        <option>JavaScript</option>
                        <option>Java</option>
                        <option>C#</option>
                        <option>Python</option>
                </select>
                </div>                  
                <div class=col-md-4 style="width:20%">
                <p>Blood Group <span>*</span></p>			
                <select class="dropup form-control selectpicker" name="bloodgroup" data-dropup--auto="false" title="Select blood group"  data-size="3" data-live-search="true">
                      <option>A +</option>
                      <option>A  -</option>
                      <option>AB +</option>
                      <option>AB -</option>
                      <option>B +</option>
                      <option>B -</option>
                      <option>O +</option>
                      <option>O -</option>
                </select>
                </div> 

              </div> <!-- End of second 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> 

              </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading" role="tab" id="headingTwo">
                <h4 class="panel-title">
                  <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                  Contact info
                  </a>
                </h4>
              </div>
              <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                <div class="panel-body">
                  <form method="post" action="{{ route('/employees/add') }}" enctype="multipart/form-data" class="form-inline" style="padding-top:10px;">
                  {{ csrf_field() }}
                  <legend style="padding:5px 5px 5px 10px">Postal Address</legend>
                  <div class=row style="padding:0px 5px 5px 10px">               
                    <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 Postal Address 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>Constituency <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>Location  <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><!-- End of Current Address 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> 
                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading" role="tab" id="headingThree">
              <h4 class="panel-title">
              <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
              Emergency Contacts
              </a>
              </h4>
              </div>
              <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                <div class="panel-body">
                <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 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 Emergency Contact row -->  

                </div>                    

              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading" role="tab" id="headingFour">
                <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                Dependants
                </a>
                </h4>
              </div>
              <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
                <div class="panel-body">
                <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 Dependant</a>
                  </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>Relation</th>
                                <th>Date of Birth</th>
                                <th>Action</th>
                              </tr>
                          </thead>
                          <tbody>                  
                            <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>
              </div>
            </div>
          </div>

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

          <div class="col-md-6 tabcontainer salary" id=salary 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>Salary Info</legend>
            <div class=row style="padding:0px 5px 5px 10px">
                <div class=col-md-4 style="width:20%">
                <p>Pay Frequency<span>*</span></p>	
                <select name="payfrequency" id="payfrequency" class="form-control selectpicker" data-live-search="true" data-size="2"  title="Select Pay Frequency" style="width:15em;" onfocus='this.size=5;' onblur='this.size=1;' onchange='this.size=1; this.blur();'>
                  <option value="1">Monthly</option>
                  <option value="2">Weekly</option>
                  <option value="3">Daily</option>                    
                </select>        
                </div>                   
               
                <div class=col-md-4 style="width:20%">
                  <p>Currency</p>			
                  <select name="currency" id="currency" class="form-control selectpicker" data-live-search="true"  style="width:15em;" onfocus='this.size=5;' onblur='this.size=1;' onchange='this.size=1; this.blur();'>
                    <option value="1">Ksh.</option>  
                    <option value="2">USD</option>
                    <option value="3">Euro</option>                                      
                  </select> 
                  <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 Currency</span>
                  </div>   
                </div> 
                <div class=col-md-4 id="Lastname" style="width:20%;">
                <p>Accounts <span>*</span></p>	
                <select class="selectpicker" name="language" data-dropup--auto="false" multiple data-max-options="2" data-size="3"  title="Select Accounts" onchange="accVisibility(this);">
                        <option value="bank">Bank</option>
                        <option value="sacco">Sacco</option>
                       
                </select>
                </div>      
                <div class=col-md-4 id="Middlename" style="width:20%; display: none;">
                <p>Bank Branch Name </p>	
                <input name="bankBranch" type="text" class="form-control" id="bankBranch" 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="Middlename" style="width:20%; display: none;">
                <p>Acc No. </p>	
                <input name="bankAcc" type="text" class="form-control" id="bankAcc" 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 first row -->

            <div class=row style="padding:0px 5px 5px 10px">          
            <div class=col-md-4 id="Middlename" style="width:20%; display: none;">
                <p>Sacco Branch Name </p>	
                <input name="saccoBranch" type="text" class="form-control" id="saccoBranch" 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="Middlename" style="width:20%; display: none;">
                <p>Acc No. </p>	
                <input name="saccoAcc" type="text" class="form-control" id="saccoAcc" 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 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 --> 
          </div>
        
    
          <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>
<!-- Bootstrap -->
<script src="/newswag/jquery.min.js"></script>
<script src="/newswag/jquery.min.js"></script>
<script src="/newswag/bootstrapselect.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 = "inline";
  }
</script>

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

<script>
  function inputfieldVisibility(that) {
    if(that.value == "national") {            
      document.getElementById("nationaldocument").style.display = "inline";
      document.getElementById("passportdocument").style.display = "none";
      document.getElementById("militarydocument").style.display = "none";
    }else if(that.value == "passport") {            
      document.getElementById("passportdocument").style.display = "inline";
      document.getElementById("militarydocument").style.display = "none";
      document.getElementById("nationaldocument").style.display = "none";
    }else if(that.value == "military") {            
      document.getElementById("militarydocument").style.display = "inline";
      document.getElementById("nationaldocument").style.display = "none";
      document.getElementById("passportdocument").style.display = "none";
    }else {
      document.getElementById("nationaldocument").style.display = "none";
      document.getElementById("passportdocument").style.display = "none";
      document.getElementById("militarydocument").style.display = "none";  
    }      
  } 
  function ethnicVisibility(that) {
    if (that.value == "kenyan") {            
      document.getElementById("ethnicfield").style.display = "inline";
    }else{
      document.getElementById("ethnicfield").style.display = "none";
    }       
  }  
  function accVisibility(that) {
    if (that.value == "bank" && that.value == "sacco") {
      document.getElementById("bankBranch").style.display = "inline";
      document.getElementById("bankAcc").style.display = "inline";   
      document.getElementById("saccoBranch").style.display = "inline";         
      document.getElementById("saccoAcc").style.display = "inline";
    }else if(that.value == "bank"){ 
      document.getElementById("bankBranch").style.display = "inline";
      document.getElementById("bankAcc").style.display = "inline";   
      document.getElementById("saccoBranch").style.display = "none"; 
      document.getElementById("saccoAcc").style.display = "none";
    }else if(that.value == "sacco"){ 
      document.getElementById("saccoBranch").style.display = "inline"; 
      document.getElementById("saccoAcc").style.display = "inline";
      document.getElementById("bankBranch").style.display = "none";
      document.getElementById("bankAcc").style.display = "none";   
    }else{ 
      document.getElementById("saccoBranch").style.display = "none"; 
      document.getElementById("saccoAcc").style.display = "none";
      document.getElementById("bankBranch").style.display = "none";
      document.getElementById("bankAcc").style.display = "none";   
    } 
  }               
</script> 

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}
</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


