@extends('layouts.app')
@section('content')

    <div class="row pt-2 pb-2">
        <div class="col-sm-9">
          <h4 class="page-title">{{$breadcrumb}}</h4>
        </div>
    </div>
    <div class="row">
      <div class="col-lg-12">
        <div class="card">
          <div class="card-header">
            <button onclick="add_all('modal-all-lg')" class="btn btn btn-primary btn-rounded float-left waves-effect waves-light"><i class="fa fa-plus"></i> Tambah </button>
          </div>
          <div class="card-body">
            <div class="table-responsive">
            <table id="tabel-karyawan" class="table table-bordered" width="100%">
              <thead>
                  <tr>
                    <th></th>
                    <th style="display: none;">Karyawan ID</th>
                    <th>Nama Karyawan </th>
                    <th>NIK</th>
                    <th>Jobdesk</th>
                    <th>Unit</th>
                    <th>NUPTK</th>
                    <th>Action</th>
                  </tr>
              </thead>
              <tbody>
                @foreach($karyawan as $employee)
                <tr>
                  <td class="tableClick"></td>
                  <td style="display: none;">{{$employee->employee_id}}</td>
                    <td>{{$employee->employee_name}}</td>
                    <td>{{$employee->employee_nik}}</td>
                    <td>{{$employee->jobdesk_name}}</td>
                    <td>{{$employee->unit_name}}</td>
                    <td>{{$employee->employee_no_nuptk}}</td>
                    <td>
                      <button onclick="edit_all('modal-all-lg',{{$employee->employee_id}})" type="button" class="btn btn-outline-success btn-sm"> Edit </button>&nbsp;&nbsp;
                      <button onclick="delete_all('karyawan/{{$employee->employee_id}}','{{$employee->employee_id}}')" class="btn btn-outline-danger btn-sm"><i class="fa fa-trash-o"></i>&nbsp;Delete</button>
                    </td>
                </tr>
                @endforeach
              </tbody>
          </table>
          </div>
          </div>
        </div>
      </div>
    </div><!-- End Row-->
      

@endsection
@section('js')
<script type="text/javascript">
    form = $("#form-all-lg");
    var url_add = "/create-karyawan" ;
    //var url_save = "/api/simpan-karyawan" ;
    var url_save = "/save-karyawan" ;
    var url_edit = "/edit-karyawan" ;
    var url_update = "/update-karyawan" ;

    $(function(){
    var table = $('#tabel-karyawan').DataTable( {
    //"ajax": "../ajax/data/objects.txt",
    "columns": [
        {
            "className":      'education-employee',
            "orderable":      false,
            "data":           null,
            "defaultContent": ''
        },
        { "data": "employee_id", visible:true},
        { "data": "employee_name" },
        { "data": "employee_nik"},
        { "data": "jobdesk_name"},
        { "data": "unit_name"},
        { "data": "employee_no_nuptk"},
        { "data": "action" },
    ],
  });

  $('#tabel-karyawan tbody').on('click', 'td.education-employee', function () {
    var tr = $(this).closest('tr');
    var row = table.row( tr );
    var tb;

    // console.log(row.data());

    if ( row.child.isShown() ) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
    }
    else {
        data_r = row.data();
        $.ajax({
            type  : 'GET',
            dataType: 'JSON',
            url   : 'get-education-employee/',
            headers : {
                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              },
            data  : { 
                employee_id : data_r.employee_id,
             },
            success  : function(values){
              
                 tb = '<table class="table table-bordered table-hover" border="2">'+
                '<thead>'+
                    '<tr>'+
                        '<td style="font-weight:bold">Pendidikan</td>'+
                        '<td style="font-weight:bold">Instansi</td>'+
                        '<td style="font-weight:bold">Tahun</td>'+
                        '<td style="font-weight:bold">IPK</td>'+
                    '</tr>'+
                '</thead>'+
                '<tbody>';
                $.each(values.data.data.education_employee,function(i,v){
                  tb +=
                  '<tr>'+
                    '<td>'+v.education_name+'</td>'+
                    '<td>'+v.education_place_name+'</td>'+
                    '<td>'+v.education_date_graduated+'</td>'+
                    '<td>'+v.education_ipk+'</td>'+
                  '</tr>';           
                })
                tb+=
                '</tbody>'+
                '</table>';
                row.child(tb).show();
                tr.addClass('shown');
            }
        });
       // Open this row
      }
  });
});

validasi_angka();
</script>
@endsection