@extends('layouts.default')
@php $pageTitle = 'Edit Employee '; @endphp
@section('title',$pageTitle)
@section('PageHead')

<!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-5">
            <h3 class="card-title">{{$pageTitle}}</h3>
          </div><!-- /.col -->
          <div class="col-sm-7">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="/">Dashboard</a></li>
              <li class="breadcrumb-item "><a href="emplist"> Employee List </a></li>
              <li class="breadcrumb-item active"><a href="empadd"> {{$pageTitle}}</a></li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

 @stop

@section('content')
    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <div class="row">
          <!-- /.col -->
          <div class="col-md-12">
            <div class="card-body">
                <form role="form" id="quickForm">
                  


                <div class="row">
                  <div class="col-12 col-md-12">
                    <div class="card card-primary card-tabs">
                      <div class="card-header p-0 pt-1">
                        <ul class="nav nav-tabs" id="custom-tabs-one-tab" role="tablist">
                          <li class="nav-item">
                            <a class="nav-link active" id="custom-tabs-one-home-tab" data-toggle="pill" href="#custom-tabs-one-home" role="tab" aria-controls="custom-tabs-one-home" aria-selected="true">Personal Details</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" id="custom-tabs-one-competency-tab" data-toggle="pill" href="#custom-tabs-one-competency" role="tab" aria-controls="custom-tabs-one-competency" aria-selected="false">Competency</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" id="custom-tabs-one-training-tab" data-toggle="pill" href="#custom-tabs-one-training" role="tab" aria-controls="custom-tabs-one-training" aria-selected="false">Training</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" id="custom-tabs-one-history-tab" data-toggle="pill" href="#custom-tabs-one-history" role="tab" aria-controls="custom-tabs-one-history" aria-selected="false">History</a>
                          </li> 
                        </ul>
                      </div>
                      <div class="card-body">
                        <div class="tab-content" id="custom-tabs-one-tabContent">
                          
                          <div class="tab-pane fade show active" id="custom-tabs-one-home" role="tabpanel" aria-labelledby="custom-tabs-one-home-tab">

                            <div>
                              <div class="row">
                                <div class="col-sm-4">
                                  <div class="form-group">
                                    <label>Full Name </label>
                                    <input type="text" class="form-control" placeholder="Enter ...">
                                  </div>
                                </div>
                                <div class="col-sm-3">
                                  <div class="form-group">
                                    <label>Nick Name</label>
                                    <input type="text" class="form-control" placeholder="Enter ..." >
                                  </div>
                                </div>
                                <div class="col-sm-3">
                                  <div class="form-group">
                                    <label>Employment Type</label>
                                    <select class="form-control" name="name" >
                                      <option value="">-</option>
                                      <option value="">Option </option>
                                    </select>
                                  </div>
                                </div>

                                <div class="col-sm-2">
                                  <div class="form-group">
                                    <img src="/img/user8-128x128.jpg" alt="User Image" width="80">
                                  </div>
                                </div>

                              </div>

              

                              <div class="row">
                                
                                <div class="col-sm-2">
                                  <div class="form-group">
                                    <label>Employee ID</label>
                                    <input type="text" name="name" value="{{old('name')}}" class="form-control" placeholder="ID" >
                                  </div>
                                </div>
                                 
                                <div class="col-sm-2">
                                  <div class="form-group">
                                    <label> Other ID</label>
                                    <input type="text" name="name" value="{{old('name')}}" class="form-control" placeholder="" >
                                  </div>
                                </div>
                                <div class="col-sm-2">
                                    <label>Gender </label><br>
                                    <div class="rows col-md-6" style="float: left;">
                                      <label class="form-check-label"><input class="form-check-input" type="radio" name="radio1">
                                      Male</label>
                                    </div>
                                    <div class="rows col-md-6" style="float: left;">
                                      <label class="form-check-label"><input class="form-check-input" type="radio" name="radio1">
                                      Female</label>
                                    </div>
                                </div>
                                <div class="col-sm-2">
                                    <label>Marital Status</label><br>
                                    <div class="rows col-md-6" style="float: left;">
                                      <label class="form-check-label"><input class="form-check-input" type="radio" name="radio1">
                                      Married</label>
                                    </div>
                                    <div class="rows col-md-6" style="float: left;">
                                      <label class="form-check-label"><input class="form-check-input" type="radio" name="radio1">
                                      Single</label>
                                    </div>
                                </div>
                                <div class="col-sm-2">
                                  <div class="form-group">
                                    <label>Date of Birth</label>
                                    <input type="date" name="name" value="{{old('name')}}" class="form-control datetimepicker-input" placeholder="" >
                                  </div>
                                </div>
                                <div class="col-sm-2">
                                  <div class="form-group">
                                    <label> Blood Group</label>
                                    <select class="form-control" name="name" >
                                      <option value="">-</option>
                                      <option value="A+"> A+ </option>
                                      <option value="A-"> A- </option>
                                      <option value="B+"> B+ </option>
                                      <option value="B-"> B- </option>
                                      <option value="AB+"> AB+ </option>
                                      <option value="AB-"> AB- </option>
                                      <option value="O+"> O+ </option>
                                      <option value="O-"> O- </option>
                                    </select>
                                  </div>
                                </div>


                              </div>
                              <!-- /end row -->

                              <div class="row">
                                <div class="col-sm-4">
                                  <div class="form-group">
                                    <label> Designation</label>
                                    <select class="form-control" name="name" >
                                      <option value="">-</option>
                                      <option value="">Option </option>
                                    </select>
                                  </div>
                                </div>
                                <div class="col-sm-4">
                                  <div class="form-group">
                                    <label> Department</label>
                                    <select class="form-control" name="name" >
                                      <option value="">-</option>
                                      <option value="">Option </option>
                                    </select>
                                  </div>
                                </div>
                                <div class="col-sm-2">
                                  <div class="form-group">
                                    <label> Nationality</label>
                                    <select class="form-control" name="name" >
                                      <option value="">-</option>
                                      <option value="">Option </option>
                                    </select>
                                  </div>
                                </div>

                                <div class="col-sm-2">
                                  <div class="form-group">
                                    <label> NID</label>
                                    <input type="text" name="name" value="{{old('name')}}" class="form-control" placeholder="" >
                                  </div>
                                </div>

                              </div>
                              <!-- /end row -->


                              <div class="row">
                                <div class="col-sm-2">
                                  <div class="form-group">
                                    <label> Company Name</label>
                                    <select class="form-control" name="name" >
                                      <option value="">-</option>
                                      <option value="">Option </option>
                                    </select>
                                  </div>
                                </div>
                                <div class="col-sm-2">
                                  <div class="form-group">
                                    <label> Employment Type</label>
                                    <select class="form-control" name="name" >
                                      <option value="">-</option>
                                      <option value="">Option </option>
                                    </select>
                                  </div>
                                </div>

                                <div class="col-sm-2">
                                  <div class="form-group">
                                    <label> Joining Date</label>
                                    <input type="date" name="name" value="{{old('name')}}" class="form-control" placeholder="" >
                                  </div>
                                </div>
                                <div class="col-sm-2">
                                  <div class="form-group">
                                    <label> Probation</label>
                                    <input type="" name="name" value="{{old('name')}}" class="form-control" placeholder="" >
                                  </div>
                                </div>
                                <div class="col-sm-2">
                                  <div class="form-group">
                                    <label> Contact Start Date</label>
                                    <input type="date" name="name" value="{{old('name')}}" class="form-control" placeholder="" >
                                  </div>
                                </div>
                                <div class="col-sm-2">
                                  <div class="form-group">
                                    <label> Contact End Date</label>
                                    <input type="date" name="name" value="{{old('name')}}" class="form-control" placeholder="" >
                                  </div>
                                </div>

                              </div>
                              <!-- /end row -->

                            <div class="row">
                            <!-- left column -->
                            <div class="col-md-6">
                              <!-- jquery validation -->
                              <div class="card card-primary">
                                <div class="card-header">
                                  <h3 class="card-title">Permanent Address <small>(As per Legal Status)</small></h3>
                                </div>
                                <!-- /.card-header -->
                                <!-- form start -->
                          
                                  <div class="card-body">
                                    <div class="form-group">
                                      <textarea class="form-control" name="name" placeholder="Street"></textarea>
                                    </div>
                                      
                                    <div class="row">
                                      <div class="col-md-6">
                                        <div class="form-group">
                                          <input type="" name="name" class="form-control" value="{{old('name')}}" placeholder="City/Distric">
                                        </div>
                                      </div>
                                      <div class="col-md-6">
                                        <div class="form-group">
                                          <input type="" name="name" class="form-control" value="{{old('name')}}" placeholder="State/Division">
                                        </div>
                                      </div>
                                    </div>
                                      
                                    <div class="row">
                                      <div class="col-md-6">
                                        <div class="form-group">
                                          <input type="" name="name" class="form-control" value="{{old('name')}}" placeholder="Post Code">
                                        </div>
                                      </div>
                                      <div class="col-md-6">
                                        <div class="form-group">
                                          <select class="form-control" name="name" >
                                            <option value="">Country</option>
                                            <option value="">Option </option>
                                          </select>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <!-- /.card-body -->
                                </div>
                              <!-- /.card -->
                              </div>
                            <!--/.col (left) -->


                            <div class="col-md-6">
                              <!-- jquery validation -->
                              <div class="card card-primary">
                                <div class="card-header">
                                  <h3 class="card-title">Present Address <small><label>
                                    <input class="custom-control-input0" type="checkbox" name="name" id="customCheckbox1" value="1" >
                                   (Same as Permanent Address)</label></small>
                                 </h3>
                                </div>
                                <!-- /.card-header -->
                                <!-- form start -->
                          
                                  <div class="card-body">
                                    <div class="form-group">
                                      <textarea class="form-control" name="name" placeholder="Street"></textarea>
                                    </div>
                                      
                                    <div class="row">
                                      <div class="col-md-6">
                                        <div class="form-group">
                                          <input type="" name="name" class="form-control" value="{{old('name')}}" placeholder="City/Distric">
                                        </div>
                                      </div>
                                      <div class="col-md-6">
                                        <div class="form-group">
                                          <input type="" name="name" class="form-control" value="{{old('name')}}" placeholder="State/Division">
                                        </div>
                                      </div>
                                    </div>
                                      
                                    <div class="row">
                                      <div class="col-md-6">
                                        <div class="form-group">
                                          <input type="" name="name" class="form-control" value="{{old('name')}}" placeholder="Post Code">
                                        </div>
                                      </div>
                                      <div class="col-md-6">
                                        <div class="form-group">
                                          <select class="form-control" name="name" >
                                            <option value="">Country</option>
                                            <option value="">Option </option>
                                          </select>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <!-- /.card-body -->
                                </div>
                              <!-- /.card -->
                              </div>

                           </div>
                           <!-- /end row -->
                            </div>
                             
                          </div>
                          


                          <div class="tab-pane fade" id="custom-tabs-one-competency" role="tabpanel" aria-labelledby="custom-tabs-one-competency-tab">
                             
                            <div class="row">
                                <div class="col-sm-6">
                                  <div class="form-group">
                                    <label>Full Name </label>
                                    <input type="text" class="form-control" placeholder="Enter ...">
                                  </div>
                                </div>
                                <div class="col-sm-3">
                                  <div class="form-group">
                                    <label>Designation</label>
                                    <input type="text" class="form-control" placeholder="Enter ..." >
                                  </div>
                                </div>
                                <div class="col-sm-3">
                                  <div class="form-group">
                                    <label>Competence Gap</label>
                                    <br>
                                    <span>Yes</span>
                                  </div>
                                </div>

                              </div>




                            <div class="row">
                            <!-- left column -->
                            <div class="col-md-6">
                              <!-- jquery validation -->
                              <div class="card card-primary">
                                <div class="card-header">
                                  <h3 class="card-title"> Available Competence  <i class="fa fa-plus"></i> </h3>
                                </div>
                              
                              <div class="card-body table-responsive p-0">
                              <table class="table table-hover text-nowrap table-striped">
                                <thead>
                                  <tr>
                                    <th> Competence</th>
                                    <th>Weight</th>
                                  </tr>   
               
                                </thead>
                                <tbody>
                                  @for($i=1;$i<5;$i++)
                                  <tr>
                                    <td>
                                      <div class="form-group">
                                        <select class="form-control" name="name" >
                                          <option value="">select</option>
                                          <option value="">Option </option>
                                        </select>
                                      </div>
                                    </td>
                                    <td>
                                      <div class="form-group">
                                        <select class="form-control" name="name" >
                                          <option value="">select</option>
                                          <option value="">Option </option>
                                        </select>
                                      </div>
                                    </td>
                                    
                                  </tr>



                                  @endfor
                                  
                                </tbody>
                              </table>
                              </div>
                            </div>
                          </div>

                          <div class="col-md-6">
                              <!-- jquery validation -->
                              <div class="card card-primary">
                                <div class="card-header">
                                  <h3 class="card-title">Minimum Competency <small> (as per designation)</small></h3>
                                </div>
                              
                              <div class="card-body table-responsive p-0">
                              <table class="table table-hover text-nowrap table-striped">
                                <thead>
                                  <tr>
                                    <th> Competency</th>
                                    <th>Weight </th>
                                  </tr>   
               
                                </thead>
                                <tbody>
                                  @for($i=1;$i<5;$i++)
                                  <tr>
                                    <td>
                                      <div class="form-group">
                                        <select class="form-control" name="name" disabled >
                                          <option value="">select</option>
                                          <option value="">Option </option>
                                        </select>
                                      </div>
                                    </td>
                                    <td>
                                      <div class="form-group">
                                        <select class="form-control" name="name" disabled >
                                          <option value="">select</option>
                                          <option value="">Option </option>
                                        </select>
                                      </div>
                                    </td>
                                  </tr>



                                  @endfor
                                  
                                </tbody>
                              </table>
                              </div>
                            </div>
                          </div>
                        </div>
                              

                          </div>
                          <!-- end tab section -->
                          

                          <div class="tab-pane fade" id="custom-tabs-one-training" role="tabpanel" aria-labelledby="custom-tabs-one-training-tab">

                             <div class="card-body table-responsive p-0">
                              <table class="table table-hover text-nowrap table-striped">
                                <thead>
                                  <tr>
                                    <th>Training Name</th>
                                    <th>Session Code</th>
                                    <th>Start Date </th>
                                    <th>Duration </th>
                                    <th>Effectiveness </th>
                                    <th>Action</th>
                                  </tr>   
               
                                </thead>
                                <tbody>
                                  @for($i=1;$i<5;$i++)
                                  <tr>
                                    <td>FST01 - Fire Safety Training </td>
                                    <td>TIL202010140001 </td>
                                    <td>14-Oct-2020 </td>
                                    <td>4 Hr </td>
                                    <td>Satisfactory </td>
                                    <td><a href="#"><i class="fa fa-eye"></i> </a> </td>
                                  </tr>
                                  @endfor
                                  
                                </tbody>
                              </table>
                            </div>
                          </div>
                          <!-- end section -->
                          

                          <div class="tab-pane fade" id="custom-tabs-one-history" role="tabpanel" aria-labelledby="custom-tabs-one-history-tab">
                            <div class="card-body table-responsive p-0">
                              <table class="table table-hover text-nowrap table-striped">
                                <thead>
                                  <tr>
                                    <th> Name</th>
                                    <th> Code</th>
                                    <th>Start Date </th>
                                    <th>Duration </th>
                                    <th>Effectiveness </th>
                                    <th>Action</th>
                                  </tr>   
               
                                </thead>
                                <tbody>
                                  @for($i=1;$i<5;$i++)
                                  <tr>
                                    <td>FST01 - Fire Safety Training </td>
                                    <td>TIL202010140001 </td>
                                    <td>14-Oct-2020 </td>
                                    <td>4 Hr </td>
                                    <td>Satisfactory </td>
                                    <td><a href="#"><i class="fa fa-eye"></i> </a> </td>
                                  </tr>
                                  @endfor
                                  
                                </tbody>
                              </table>
                            </div>
                          </div>


                        </div>
                      </div>
                      <!-- /.card -->
                    </div>
                  </div>
                </div>
                <!-- end row -->













                <div class="" align="right">
                  <button type="submit" class="btn btn-primary"> Save </button>
                </div>

                </form>
              </div>
              <!-- /.card-body -->
          </div>
          <!-- /.col -->
        </div>
       
        
      </div><!-- /.container-fluid -->
    </section>
    <!-- /.content -->

<style>
  .list-img{width: 20%; height: auto;  float: left;  }
  .list-img img { border-radius: 50%; border:1px solid #fff; padding: 2px; height: auto; max-width: 100%; }
  img { vertical-align: middle; border-style: none;}
  .list-name{width: 79%; float: left; background: transparent; }
</style>  


@stop