@extends('Layout.employees_master')

@section('title', 'Employees')

@section('header-include')
<link rel="stylesheet" href="/js/select3/bootstrapselect.min.css" type="text/css"/>
<link rel="stylesheet" href="/js/select3/bootstrap.min.css" type="text/css"/>
<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;
  }
  ul {
    list-style-type: none;
  }
</style>
@endsection
@section('content')
<section id="content">    
      <section class="scrollable padder">
        <ul class="breadcrumb no-border no-radius b-b b-light pull-in">
        <li><a href="/kinetic"><i class="fa fa-home"></i> Home</a></li>
          <li><a href="{{route('employees.index')}}">Employees</a></li>
          <li><a href="{{route('employees.edit',$employee->employee_id)}}">Edit Employees</a></li>
          <li><a href="{{route('personal',$employee->employee_id)}}">Personal Info</a></li>          
          <li class="active">Edit Personal Info</li>
        </ul>   
        @include('Layout.errors')
        @include('Layout.messages')  
            <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 " ><a href="{{ route('employees.edit',$employee->employee_id) }}">Employee Info</a></li> 
                    <li class="list-group-item active"><a href="{{route('personal',$employee->employee_id)}}">Personal</a></li>               
                    <li class="list-group-item "><a href="{{route('salary',$employee->employee_id)}}">Salary</a></li>  
                    <li class="list-group-item "><a href="{{route('contact',$employee->employee_id)}}">Contact</a></li>                                                                                                                                               
                  </ul>
                </div> 
                <div class=col-md-6  style="width:86.5%;"> 
                <form method="post" action="{{ route('update_personal',$employee->employee_id) }}" 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="marital_status" name="marital_status" data-live-search="true"  title="Select marital status" data-size="3" >
                            <option  value="single" @if($selected_marital_status = $employee->marital_status) {{'selected'}} @endif>Single</option>
                            <option value="married" @if($selected_marital_status = $employee->marital_status) {{'selected'}} @endif>Married</option> 
                            <option value="separated" @if($selected_marital_status = $employee->marital_status) {{'selected'}} @endif>Separated</option> 
                            <option value="divorced" @if($selected_marital_status = $employee->marital_status) {{'selected'}} @endif>Divorced</option> 
                            <option  value="widow_widower" @if($selected_marital_status = $employee->marital_status) {{'selected'}} @endif>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" @if($selected_nationality = $employee->nationality) {{'selected'}} @endif>Kenyan</option>                   
                        <option value="ugandan" @if($selected_nationality = $employee->nationality) {{'selected'}} @endif>Ugandan</option>
                        <option value="tanzanian" @if($selected_nationality = $employee->nationality) {{'selected'}} @endif>Tanzanian</option>          
                        <option value="american" @if($selected_nationality = $employee->nationality) {{'selected'}} @endif>American</option>          
                        <option value="german" @if($selected_nationality = $employee->nationality) {{'selected'}} @endif>German</option>          
                        <option value="dutch" @if($selected_nationality = $employee->nationality) {{'selected'}} @endif>Dutch</option>          
                        <option value="russian" @if($selected_nationality = $employee->nationality) {{'selected'}} @endif>Russian</option>          
                        <option value="spanish" @if($selected_nationality = $employee->nationality) {{'selected'}} @endif>Spanish</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="Abaluhya" @if($selected_ethnicity = $employee->ethnicity) {{'selected'}} @endif>Abaluhya</option> 
                        <option value="Abagusii"@if($selected_ethnicity = $employee->ethnicity) {{'selected'}} @endif>Abagusii</option> 
                        <option value="Abakuria"@if($selected_ethnicity = $employee->ethnicity) {{'selected'}} @endif>Abakuria</option>                 
                        <option value="Aembu"@if($selected_ethnicity = $employee->ethnicity) {{'selected'}} @endif>Aembu</option>
                        <option value="Agikuyu"@if($selected_ethnicity = $employee->ethnicity) {{'selected'}} @endif>Agikuyu</option>
                        <option value="Akamba"@if($selected_ethnicity = $employee->ethnicity) {{'selected'}} @endif>Akamba</option>
                        <option value="Ambeere"@if($selected_ethnicity = $employee->ethnicity) {{'selected'}} @endif>Ambeere</option>
                        <option value="Ameru"@if($selected_ethnicity = $employee->ethnicity) {{'selected'}} @endif>Ameru</option>
                        <option value="Bajuni"@if($selected_ethnicity = $employee->ethnicity) {{'selected'}} @endif>Bajuni</option>
                        <option value="Boni"@if($selected_ethnicity = $employee->ethnicity) {{'selected'}} @endif>Boni</option>
                        <option value="Borana Oromo"@if($selected_ethnicity = $employee->ethnicity) {{'selected'}} @endif>Borana Oromo</option>
                        <option value="Bukusu" @if($selected_ethnicity = $employee->ethnicity) {{'selected'}} @endif>Bukusu</option>
                        <option value="Chonyi"@if($selected_ethnicity = $employee->ethnicity) {{'selected'}} @endif>Chonyi</option>
                        <option value="Digo"@if($selected_ethnicity = $employee->ethnicity) {{'selected'}} @endif>Digo</option>
                        <option value="Dorobo" @if($selected_ethnicity = $employee->ethnicity) {{'selected'}} @endif>Dorobo</option>
                        <option value="El Molo"@if($selected_ethnicity = $employee->ethnicity) {{'selected'}} @endif>El Molo</option>
                        <option value="Gabra"@if($selected_ethnicity = $employee->ethnicity) {{'selected'}} @endif>Gabra</option>
                        <option value="Giriama"@if($selected_ethnicity = $employee->ethnicity) {{'selected'}} @endif>Giriama</option>
                        <option value="Idakho"@if($selected_ethnicity = $employee->ethnicity) {{'selected'}} @endif>Idakho</option>
                        <option value="Ilchamus"@if($selected_ethnicity = $employee->ethnicity) {{'selected'}} @endif>Ilchamus</option>
                        <option value="Indian"@if($selected_ethnicity = $employee->ethnicity) {{'selected'}} @endif>Indian</option>
                        <option value="Isukha"@if($selected_ethnicity = $employee->ethnicity) {{'selected'}} @endif>Isukha</option>
                        <option value="Jibana"@if($selected_ethnicity = $employee->ethnicity) {{'selected'}} @endif>Jibana</option> 
                        <option value="Kalenjin"@if($selected_ethnicity = $employee->ethnicity) {{'selected'}} @endif>Kalenjin</option> 
                        <option value="kipsigis"@if($selected_ethnicity = $employee->ethnicity) {{'selected'}} @endif>kipsigis</option> 
                        <option value="Kuria"@if($selected_ethnicity = $employee->ethnicity) {{'selected'}} @endif>Kuria</option> 
                        <option value="Luo"@if($selected_ethnicity = $employee->ethnicity) {{'selected'}} @endif>Luo</option> 
                        <option value="Maasai"@if($selected_ethnicity = $employee->ethnicity) {{'selected'}} @endif>Maasai</option> 
                        <option value="Maragoli"@if($selected_ethnicity = $employee->ethnicity) {{'selected'}} @endif>Maragoli</option> 
                        <option value="Mijikenda"@if($selected_ethnicity = $employee->ethnicity) {{'selected'}} @endif>Mijikenda</option> 
                        <option value="Okiek"@if($selected_ethnicity = $employee->ethnicity) {{'selected'}} @endif>Okiek</option> 
                        <option value="Orma"@if($selected_ethnicity = $employee->ethnicity) {{'selected'}} @endif>Orma</option> 
                        <option value="Pokot"@if($selected_ethnicity = $employee->ethnicity) {{'selected'}} @endif>Pokot</option> 
                        <option value="Rendille"@if($selected_ethnicity = $employee->ethnicity) {{'selected'}} @endif>Rendille</option> 
                        <option value="Sakuye"@if($selected_ethnicity = $employee->ethnicity) {{'selected'}} @endif>Sakuye</option> 
                        <option value="Samburu"@if($selected_ethnicity = $employee->ethnicity) {{'selected'}} @endif>Samburu</option> 
                        <option value="Suba"@if($selected_ethnicity = $employee->ethnicity) {{'selected'}} @endif>Suba</option> 
                        <option value="Swahili"@if($selected_ethnicity = $employee->ethnicity) {{'selected'}} @endif>Swahili</option> 
                        <option value="Teso"@if($selected_ethnicity = $employee->ethnicity) {{'selected'}} @endif>Teso</option> 
                        <option value="Turkana"@if($selected_ethnicity = $employee->ethnicity) {{'selected'}} @endif>Turkana</option> 
                        <option value="Yaaku"@if($selected_ethnicity = $employee->ethnicity) {{'selected'}} @endif>Yaaku</option>                  
                      </select>  
                    </div>   
                    <div class=col-md-4 style="width:20%">
                        <p>Date of Birth <span>*</span></p>	
                        <input name="date_of_birth" 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;"
                        value="{{$employee->date_of_birth}}">
                    </div>                 
                    <div class=col-md-4 style="width:20%">
                        <p>Identity Documents<span>*</span> </p>
                        <select class="form-control selectpicker" name="identity_document" data-live-search="true"  title="Select Identity Document" onchange="inputfieldVisibility(this);" id="identitydocument" style="background-color:white;">  
                          <option value="national"@if($selected_identity_document = $employee->identity_document) {{'selected'}} @endif>National ID</option>                   
                          <option value="passport"@if($selected_identity_document = $employee->identity_document) {{'selected'}} @endif>Passport No</option>
                          <option value="military" @if($selected_identity_document = $employee->identity_document) {{'selected'}} @endif>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%;">
                        <p>Identity No.</p>
                        <input name="national_id" type="text"value="{{$employee->identity_no}}" 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 value="english" @if($selected_language = $employee->language) {{'selected'}} @endif>English</option>
                            <option value="swahili" @if($selected_language = $employee->language) {{'selected'}} @endif>Swahili</option>
                            <option value="deutsch" @if($selected_language = $employee->language) {{'selected'}} @endif>Deutch</option>
                            <option value="french" @if($selected_language = $employee->language) {{'selected'}} @endif>French</option>
                            <option value="spanish" @if($selected_language = $employee->language) {{'selected'}} @endif>Spanish</option>
                            <option value="chinese" @if($selected_language = $employee->language) {{'selected'}} @endif>Chinese</option>
                            <option value="japanese" @if($selected_language = $employee->language) {{'selected'}} @endif>Japanese</option>
                            <option value="russian" @if($selected_language = $employee->language) {{'selected'}} @endif>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="blood_group" data-dropup--auto="false" title="Select blood group"  data-size="3" data-live-search="true">
                            <option value="A+" @if($selected_blood_group = $employee->blood_group) {{'selected'}} @endif>A +</option>
                            <option value="A-" @if($selected_blood_group = $employee->blood_group) {{'selected'}} @endif>A  -</option>
                            <option value="AB+" @if($selected_blood_group = $employee->blood_group) {{'selected'}} @endif>AB +</option>
                            <option value="AB-" @if($selected_blood_group = $employee->blood_group) {{'selected'}} @endif>AB -</option>
                            <option value="B+" @if($selected_blood_group = $employee->blood_group) {{'selected'}} @endif>B +</option>
                            <option value="B-" @if($selected_blood_group = $employee->blood_group) {{'selected'}} @endif>B -</option>
                            <option value="O+" @if($selected_blood_group = $employee->blood_group) {{'selected'}} @endif>O +</option>
                            <option value="O-" @if($selected_blood_group = $employee->blood_group) {{'selected'}} @endif>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"name="personalinfo_form" style="padding: 5px 25px 5px 25px">Save</button>
                    </div>
                    <div class=col-md-4 style="width:20%; padding-top:15px">
                    <a href="{{route('personal',$employee->employee_id)}}"><button class=btn style="padding: 5px 25px 5px 25px">Cancel</button></a>
                    </div>

              </div> <!-- End of button row -->
              
              </form> 
              </div>
            </div>
    </section>
</section>           
@endsection
@section('footer-include')
<script src="/js/select3/bootstrapselect.min.js"></script>
<script src="/js/select3/bootstrap.min.js"></script>
@endsection

@section('j-script')
<!-- Jquery -->
<script>
$("input").click(function(){
        $(this).next().show();
        $(this).next().hide();
    });




// Javascript for rendering tablinks

  $('#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";
  }

// Javascript for rendering input fields on set conditions

  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";
        }
    }

    $(document).on('ready', function(){
  });
       
</script>
@endsection



