@extends('Layout.Employeesmaster')

@section('title', 'Employees')
@section('header-include')
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
  <link rel="stylesheet" href="css/animate.css" type="text/css" />
  <link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" />
  <link rel="stylesheet" href="css/font.css" type="text/css" />
    <link rel="stylesheet" href="/js/select3/bootstrap.min.css" type="text/css"/>
    <link rel="stylesheet" href="/js/select3/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.create') }}" enctype="multipart/form-data" class="form-inline" style="padding-top:10px;">
          {{ csrf_field() }}                
            <div class="tabcontainer employeeinfo" id=employeeinfo style= >
            <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="{{ $businessunit->id }}">{{ $businessunit->business_unit }}</option>
                    @endforeach
                </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 data-toggle="modal" data-target="#createCertificate">Add Branch</span>
                </div>   
              </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 style="float:left; margin-top: 2px;text-align: left;font-family: 'Roboto Regular',sans-serif;color: #208BBD;font-size: 12px;cursor: pointer;"> 
                <span>Add Department</span>
                </div>   
              </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>               
              <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 style="float:left; margin-top: 2px;text-align: left;font-family: 'Roboto Regular',sans-serif;color: #208BBD;font-size: 12px;cursor: pointer;"> 
                <span>Add Role</span>
                </div> 
              </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" onchange="durationfieldVisibility(this);" title="Select employment status." style="width:15em;">
            <option value="full_time">Full Time</option>
                <option value="part_time">Part Time</option>
                <option value="contract">Contract</option>
                <option value="temporary">Temporary</option>
                <option value="permanent">Permanent</option>  
                <option value="casual">Casual</option>
                <option value="probation">Probation</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 Employment Status</span>
                </div> 
              </div> 
            <div class=col-md-4  id="duration" style="display: none;width:20%">
              <p>Duration <span>*</span></p>
              <select name="duration" id="duration" class="form-control selectpicker" data-live-search="true" data-size="5"  title="Select Duration" style="width:15em;" >
                <option value="1">1 Month</option>
                <option value="2">3 Months</option>
                <option value="3">6 Months</option>
                <option value="4">1 Year</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 Duration</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 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>  
          </fieldset>                                      
          <div class= container-row style="padding:0px 5px 5px 10px;">             
            <div class="row">
              <div class=col-md-4 style="width:20%;padding-top:25px;">
              <b> Is Employee Disabled?</b> <input type="checkbox" id="disabilitycheckbox" />
              </div> 
            </div>               
            <div class="disability 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.create') }}" enctype="multipart/form-data" class="form-inline" style="padding-top:10px;">
            {{ csrf_field() }}    
            <div class="disabilityinfo row" style="padding:0px 5px 5px 10px;height:125px">
              <div class=col-md-4 style="width:20%;">
              <p>Disability Type </p>
              <select name="disabilityType" id="disabilityType" class="dropdown selectpicker"  data-dropup--auto="false" title="Select Disability" data-size="2" data-live-search="true" >                
                <option value="1">Blindness and Visual Impairment</option>
                <option value="2">Hearing Impairments</option>
                <option value="3">Mental illness or Emotional disturbances</option>
                <option value="4">Learning disabilities</option>
                <option value="5">Mobility or Orthopedic disability</option>
                <option value="6">Speech or language impairments</option>
                <option value="7">Health Impairments</option>
                <option value="8">Other</option>
              </select>   
              </div>               
              <div class=col-md-4 style="width:20%">
              <p>Description </p>
              <textarea id=disabilityDescription class="form-control inputstl" rows="3"></textarea>                 
              </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 DisabilityInfo row --> 
  
            <div class="button 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 --> 

          </div><!-- End of container-row               -->
          
                   
            
          </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.create') }}" 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">Ugandan</option>
                    <option value="">Tanzanian</option>          
                    <option value="">American</option>          
                    <option value="">German</option>          
                    <option value="">Dutch</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>English</option>
                        <option>Swahili</option>
                        <option>Deutch</option>
                        <option>French</option>
                        <option>Spanish</option>
                        <option>Chinese</option>
                        <option>Japanese</option>
                        <option>Russian</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.create') }}" 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>
                    <select name="CurrentaddressCountry" id="CurrentaddressCountry" class="dropup selectpicker" data-dropup--auto="false" data-live-search="true"  style="width:15em;" onfocus='this.size=5;' onblur='this.size=1;' onchange='this.size=1; this.blur();'>
                    <option value="1">Kenya</option>  
                    <option value="2">Tanzania</option>
                    <option value="3">Uganda</option>                                      
                    </select> 
                    </div>   
                    <div class=col-md-4 style="width:20%">
                    <p>State/County <span>*</span></p>
                    <select name="CurrentaddressCounty" id="CurrentaddressCounty" class="dropup selectpicker" data-dropup--auto="false" data-live-search="true"  style="width:15em;" onfocus='this.size=5;' onblur='this.size=1;' onchange='this.size=1; this.blur();'>
                    <option value="1">Nairobi</option>  
                    <option value="2">Nakuru</option>
                    <option value="3">Mandera</option>                                      
                    </select> 
                    </div>   
                    <div class=col-md-4 style="width:20%">
                    <p>Constituency <span>*</span></p>
                    <select name="CurrentaddressConstituency" id="CurrentaddressConstituency" class="dropup selectpicker" data-dropup--auto="false" data-live-search="true"  style="width:15em;" onfocus='this.size=5;' onblur='this.size=1;' onchange='this.size=1; this.blur();'>
                    <option value="1">Langata</option>  
                    <option value="2">Kikuyu</option>
                    <option value="3">Kisii</option>                                      
                    </select> 
                    </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" data-toggle="modal" data-target="#createEmergencyContact"><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">
                  @if(count($emergency) > 0) 
                  <thead>
                    <tr>
                      <th>Name</th>
                      <th>Phone No.</th>
                      <th>Email</th>
                      <th>Relation</th>
                      <th>Action</th>
                    </tr>
                  </thead>
                  <tbody>
                  @foreach($emergency as $row) 
                  <tr id="emergency-row-{{ $row->id }}">
                    <td>{{$row->name }}</td>
                    <td>{{$row->phone_no}}</td>
                    <td>{{$row->email}}</td>
                    <td>{{$row->relation}}</td>
                    <td>
                    <form action="{{ route('emergency.destroy', $row->id)}}" method="post" style=position:relative;float:right>
                     @csrf
                     @method('DELETE')
                     <a href="{{ route('emergency.edit',$row->id)}}" ><span class="btn btn-default"><i class="fa fa-edit no-margin"></i></span></a>  
                     <button data-toggle="tooltip" data-placement="top" title="Delete" type="submit" class="btn btn-danger" onclick="return confirm('Are you sure you want to delete this item?');"><i class="fa fa-trash no-margin"></i></button>
                    </form>
                    </td>
                  </tr>
                    @endforeach
                    @else                              
                    <tr>
                      <td colspan="2" class="text-center">Nothing to display</td>
                    </tr>
                    @endif
                  </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" id="dependant" data-toggle="modal" data-target="#createDependant"><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">
                          @if(count($dependants)>0)
                          <thead>
                            <tr>
                                <th>Name</th>
                                <th>Relation</th>
                                <th>Date of Birth</th>
                                <th>Action</th>
                              </tr>
                          </thead>
                          <tbody id="dependants-crud" class="Dependant"> 
                          @foreach($dependants as $dependant)
                          <tr id="dependant-row-{{ $dependant->id }}">
                            <td>{{$dependant->name}}</td>
                            <td>{{$dependant->relation}}</td>
                            <td>{{$dependant->dateofBirth}}</td>
                            <td >
                            <form action="{{ route('dependants.destroy', $dependant->id)}}" method="post" style=position:relative;float:right>
                              @csrf
                              @method('DELETE')
                              <a href="{{ route('dependants.edit',$row->id)}}" ><span class="btn btn-default"><i class="fa fa-edit no-margin"></i></span></a>  
                              <button data-toggle="tooltip" data-placement="top" title="Delete" type="submit" class="btn btn-danger" onclick="return confirm('Are you sure you want to delete this item?');"><i class="fa fa-trash no-margin"></i></button>
                            </form>
                            </td>
                            </tr> 
                            @endforeach
                            @else                              
                            <tr>
                              <td colspan="2" class="text-center">Nothing to display</td>
                            </tr>
                            @endif
                          </tbody>
                          </table>
                        </div>              
                        </div><!-- End of fifth row -->    
                      </div>
              </div>
            </div>
          </div>
          </div>            
          <!-- End of Accordion -->
      

          <div class="col-md-6 tabcontainer salary" id=salary style="display:none;width:86.5%">              
            <div class="panel panel-default">
              <div class="panel-heading" role="tab" id="headingOne">
                <h4 class="panel-title">
                  Salary Info
                </h4>
              </div>
              <div class="panel-body">
              <form method="post" action="{{ route('employees.create') }}" 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>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 style="float:left; margin-top: 2px;text-align: left;font-family: 'Roboto Regular',sans-serif;color: #208BBD;font-size: 12px;cursor: pointer;"> 
                <a href=""  data-toggle="modal" data-target="#createPayfrequency"><span>Add Pay Frequency</span></a>
                  </div>        
                </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="Middlename" style="width:20%;">
                <p>Salary Amount </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%;">
                <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%;">
                <p>Account 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="saccoName" style="width:20%;">
                <p>Sacco Name </p>	
                <input name="saccoName" type="text" class="form-control" id="saccoName" 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="saccoAccountno" style="width:20%;">
                <p>Sacco Account No. </p>	
                <input name="saccoAccountno" type="text" class="form-control" id="saccoAccountno" 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 -->
              </form> 

            </div>
            </div>
          </div> <!---End of salary tabcontainer -->             
    
          <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" data-toggle="modal" data-target="#createCertificate"><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>
                    <form action="" method="post" style=position:relative;float:right>
                     @csrf
                     @method('DELETE')
                     <a href=""><span class="btn btn-default btn-sm"><i class="fa fa-eye no-margin"></i></span></a>
                     <a href="" ><span class="btn btn-default"><i class="fa fa-edit no-margin"></i></span></a>  
                      <button data-toggle="tooltip" data-placement="top" title="Delete" type="submit" class="btn btn-danger" onclick="return confirm('Are you sure you want to delete this item?');"><i class="fa fa-trash no-margin"></i></button>
                    </form>
                    </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>
<!---Modals used on the page-->

<!-- Training and Certification Modal -->
@include('Modals/trainingCertification')
<!-- Emergency Contacts Modal -->
@include('Modals/emergencyContacts')
<!-- Dependants Modal -->
@include('Modals/dependants')


<script>
function dependantUpdate() {
  document.getElementById("dependantUpdated").submit();
 }
 
</script>
<script>
    /* populate the modal popup when it's launched, with the data provided by the launching button ....  */
    $('#updateDependant').on('show.bs.modal', function (event) {
      alert("working");
        var button = $(event.relatedTarget); // Button that triggered the modal
        var name       = button.data('name');    // Extract info from data-* attributes
        var dateofBirth      = button.data('dateofBirth');
        var relation     = button.data('relation');
        // Update the modal's content
        var modal = $(this);
        modal.find('#name').text(name);
        modal.find('#dateofBirth').date(dateofBirth);
        modal.find('#relation').text(relation);
    });
</script>





<!--PayFrequency Modal -->
@include('Modals/payFrequency')

<script src="/js/select2/select2.min.js"></script>
<!-- Bootstrap -->
<script src="/js/select3/jquery.min.js"></script>
<script src="/js/select3/jquery.min.js"></script>
<script src="/js/select3/bootstrapselect.min.js"></script>
<script src="js/file-input/bootstrap-filestyle.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 durationfieldVisibility(that) {
        if (that.value == "casual"|| that.value == "probation" || that.value =="contract"|| that.value == "temporary") {
            document.getElementById("duration").style.display = "block";
        } else {
            document.getElementById("duration").style.display = "none";
        }
    }
    function relationfieldVisibility(that) {
        if (that.value == "other") {
            document.getElementById("other_relation").style.display = "block";
        } else {
            document.getElementById("other_relation").style.display = "none";
        }
    }
</script>
<script>
$('.updateDependant').on("click", function(event) {
    $("#updateDependant").modal('show');
    var id = $(this).data('id');
    $.ajax({
        url: "/employees/create/dependants" + id,
        type: 'GET',
        dataType: 'json',
    }).done(function(response) {
        $("#name").val(response.name);
        // Assign values to other fields
    });
});
</script>




<!-- <script>
  $(document).ready(function () {
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            
        }
    });
    /*  When user click add user button */
    $('#dependant').click(function () {
        $('#btn-save').val("create-dependant");
        $('#dependants').trigger("reset");
        $('#dependant-heading').html("Add Dependant");
        $('#createDependant').modal('show');
    });
 
   /* When click edit user */
   $('#linkrow').on('click', '#edit-user', function (e) {
      clickEvent = true;
      var id = $(this).data('id');
      $.get('emergency.edit' + id +'/edit', function (data) {
          $('#dependant-heading').html("Edit User");
          $('#btn-save').val("edit-dependant");
          $('#createDependant').modal('show');
          $('#name').val(data.name);
          $('#dateofBirth').val(data.dateofBirth);
          $('#relation').val(data.relation);
      })
   });
   //delete user login
   $('#linkrow').on('click', '#delete-user', function (e) {
      clickEvent = true;

        var id = $(this).data("id");
        confirm("Are You sure want to delete !");
 
        $.ajax({
            type: "DELETE",
            url: "{{ url('/employees/create/dependants')}}"+'/'+id,
            success: function (data) {
                $("#id_" + id).remove();
            },
            error: function (data) {
                console.log('Error:', data);
            }
        });
    });   
  });
 
 if ($("#dependants").length > 0) {
      $("#dependants").validate({
 
     submitHandler: function(form) {
 
      var actionType = $('#btn-save').val();
      $('#btn-save').html('Sending..');
      $.ajax({
          data: $('#dependants').serialize(),
          type: "POST",
          dataType: 'json',
          success: function (data) {
              var user = '<tr id="id_' + data.id + '"><td>' + data.name + '</td><td>' + data.dateofBirth + '</td><td>' + data.relation + '</td>';
              user += '<td><a href="javascript:void(0)" id="edit-user" data-id="' + data.id + '" class="btn btn-info">Edit</a></td>';
              user += '<td><a href="javascript:void(0)" id="delete-user" data-id="' + data.id + '" class="btn btn-danger delete-user">Delete</a></td></tr>';
               
              
              if (actionType == "create-dependant") {
                  $('#dependants-crud').prepend(user);
              } else {
                  $("#id_" + data.id).replaceWith(user);
              }
 
              $('#dependants').trigger("reset");
              $('#createDependant').modal('hide');
              $('#btn-save').html('Save Changes');
              
          },
          error: function (data) {
              console.log('Error:', data);
              $('#btn-save').html('Save Changes');
          }
      });
      return false;
    }
  })
}
   
  
</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



