@extends('layouts.template')
@section('content')
<div class="card mb-5 mb-xl-10">
    <div class="card-header border-0 cursor-pointer" role="button" data-bs-toggle="collapse" data-bs-target="#kt_account_profile_details" aria-expanded="true" aria-controls="kt_account_profile_details">
        <div class="card-title m-0">
            <h6 class="fw-bolder m-0">Detail SDM</h6>
        </div>
    </div>
    <div class="card-body border-top pt-5">
        <div id="kt_account_profile_details">
            <div class="row">
                <div class="col-xl-12">
                    <div class="d-flex justify-content-end">
                        <a href="{{route('sdm.edit', encrypt($data->id))}}" class="btn btn-icon btn-primary"><i class="bi bi-pencil fs-3"></i></a>
                        @if(Auth::user()->role == 1)
                        <a href="{{route('sdm.delete', $data->id)}}" class="btn btn-icon btn-danger" id="btnDeleteDist"><i class="bi bi-trash"></i></a>
                        @endif
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-2">
                    <a href="{{url('/document/sdm/'.$data->foto_diri)}}" target="_blank">
                        <div class="symbol symbol-125px">
                            <img src="{{url('/document/sdm/'.$data->foto_diri)}}" alt=""/>
                        </div>
                    </a>
                </div>
                <div class="col-lg-4" style="margin-left:-30px">
                    <h4>{{$data->nama_sdm}}</h4>
                    <label class="text-info"><i>{{$data->jabatan}}</i></label>
                </div>
            </div>
            <br>
            <div class="row">
                <div class="col-xl-12">
                    <div class="flex-equal me-5 tableShow">
                        <table class="table table-flush fw-bold gy-1">
                            <tr>
                                <td><h6 class="text-primary">Data Diri</h6></td>
                                <td></td>
                                <td></td>
                            </tr>
                        	<tr>
                                <td class="text-muted min-w-200px w-200px">Nopeg</td>
                                <td class="min-w-2px">:</td>
                                <td class="text-gray-800 ">{{$data->nopeg}}</td>
                            </tr>
                            <tr>
                                <td class="text-muted min-w-200px w-200px">Nopeg (Data Lama)</td>
                                <td class="min-w-2px">:</td>
                                <td class="text-gray-800 ">{{$data->nopeg_lama}}</td>
                            </tr>
                            <tr>
                                <td class="text-muted min-w-200px w-200px">Nama Lengkap</td>
                                <td>:</td>
                                <td class="text-gray-800">{{$data->nama_sdm}}</td>
                            </tr>
                             <tr>
                                <td class="text-muted min-w-200px w-200px">Status Pekerja</td>
                                <td>:</td>
                                <td class="text-gray-800">@if($data->status == 'AKTIF') Aktif @else Resign @endif</td>
                            </tr>
                            <tr>
                                <td class="text-muted min-w-200px w-200px">Jabatan</td>
                                <td>:</td>
                                <td class="text-gray-800">{{$data->jabatan}}</td>
                            </tr>
                            <tr>
                                <td class="text-muted min-w-200px w-200px">Jenis Kelamin</td>
                                <td>:</td>
                                <td class="text-gray-800">@if($data->jenis_kelamin == 'P') Perempuan @else Laki-Laki @endif</td>
                            </tr>
                            <tr>
                                <td class="text-muted min-w-200px w-200px">Pendidikan</td>
                                <td>:</td>
                                <td class="text-gray-800">{{$data->pendidikan}}</td>
                            </tr>
                            <tr>
                                <td class="text-muted min-w-200px w-200px">Tanggal Lahir</td>
                                <td>:</td>
                                <td class="text-gray-800">{{$data->tanggal_lahir}}</td>
                            </tr>
                            <tr>
                                <td class="text-muted min-w-200px w-200px">Tanggal Join</td>
                                <td>:</td>
                                <td class="text-gray-800">{{$data->tanggal_join}}</td>
                            </tr>
                            <tr>
                                <td class="text-muted min-w-200px w-200px">Bulan Kerja</td>
                                <td>:</td>
                                <td class="text-gray-800">{{$data->bulan_kerja}}</td>
                            </tr>
                            <tr>
                                <td class="text-muted min-w-200px w-200px">Tanggal Resign</td>
                                <td>:</td>
                                <td class="text-gray-800">@if($data->tanggal_resign !=null){{$data->tanggal_resign}}@else - @endif</td>
                            </tr>
                            <tr>
                                <td class="text-muted min-w-200px w-200px">Region</td>
                                <td>:</td>
                                <td class="text-gray-800">@if($data->region !=null){{$data->region}}@else - @endif</td>
                            </tr>
                            <tr>
                                <td class="text-muted min-w-200px w-200px">Territory</td>
                                <td>:</td>
                                <td class="text-gray-800">@if($data->branch_name !=null){{$data->branch_name}}@else - @endif</td>
                            </tr>
                            <tr>
                                <td class="text-muted min-w-200px w-200px">Distributor</td>
                                <td>:</td>
                                <td class="text-gray-800">@if($data->subbranch_name !=null){{$data->subbranch_name}}@else - @endif</td>
                            </tr>
                            <tr>
                                <td class="text-muted min-w-200px w-200px">Alamat</td>
                                <td>:</td>
                                <td class="text-gray-800">@if($data->alamat !=null){{$data->alamat}}@else - @endif</td>
                            </tr>
                            <tr>
                                <td><h6 class="text-primary" style="margin-top:20px;">Contact</h6></td>
                                <td></td> 
                                <td></td>
                            </tr>
                            <tr>
                                <td class="text-muted min-w-200px w-200px">No. Telepon</td>
                                <td>:</td>
                                <td class="text-gray-800">@if($data->no_hp !=null){{$data->no_hp}}@else - @endif</td>
                            </tr>
                            <tr>
                                <td class="text-muted min-w-200px w-200px">No. WhatsApp</td>
                                <td>:</td>
                                <td class="text-gray-800">@if($data->no_wa !=null){{$data->no_wa}}@else - @endif</td>
                            </tr>
                            <tr>
                                <td class="text-muted min-w-200px w-200px">E-mail</td>
                                <td>:</td>
                                <td class="text-gray-800">@if($data->email !=null){{$data->email}}@else - @endif</td>
                            </tr>
                            <tr>
                                <td><h6 class="text-primary" style="margin-top:20px;">File Pendukung</h6></td>
                                <td></td> 
                                <td></td>
                            </tr>
                            <tr>
                                <td class="text-muted min-w-200px w-200px">No KTP</td>
                                <td>:</td>
                                <td class="text-gray-800">@if($data->no_ktp !=null){{$data->no_ktp}}@else - @endif</td>
                            </tr>
                            <tr>
                                <td class="text-muted min-w-200px w-200px">File KTP</td>
                                <td>:</td>
                                <td class="text-gray-800">
                                    @if($data->foto_ktp != null)
                                        <span class="badge badge-light-primary"><a href="{{url('/document/sdm/'.$data->foto_ktp)}}" target="_blank"><i class="fas fa-file fs-8 text-primary"></i> View File KTP</a></span>
                                    @else - @endif
                                </td>
                            </tr>
                            <tr>
                                <td class="text-muted min-w-200px w-200px">No NPWP</td>
                                <td>:</td>
                                <td class="text-gray-800">@if($data->no_npwp !=null){{$data->no_npwp}}@else - @endif</td>
                            </tr>
                            <tr>
                                <td class="text-muted min-w-200px w-200px">File NPWP</td>
                                <td>:</td>
                                <td class="text-gray-800">
                                    @if($data->foto_npwp !=null)
                                        <span class="badge badge-light-primary"><a href="{{url('/document/sdm/'.$data->foto_npwp)}}" target="_blank"><i class="fas fa-file fs-8 text-primary"></i> View File NPWP</a></span>
                                    @else - @endif
                                </td>
                            </tr>
                            <tr>
                                <td class="text-muted min-w-200px w-200px">File Kartu Keluarga</td>
                                <td>:</td>
                                <td class="text-gray-800">
                                    @if($data->foto_kk !=null)
                                        <span class="badge badge-light-primary"><a href="{{url('/document/sdm/'.$data->foto_kk)}}" target="_blank"><i class="fas fa-file fs-8 text-primary"></i> View File Kartu Keluarga</a></span>
                                    @else - @endif
                                </td>
                            </tr>
                            <tr>
                                <td class="text-muted min-w-200px w-200px">Foto Diri</td>
                                <td>:</td>
                                <td class="text-gray-800">
                                    @if($data->foto_diri !=null)
                                        <span class="badge badge-light-primary"><a href="{{url('/document/sdm/'.$data->foto_diri)}}" target="_blank"><i class="fas fa-file fs-8 text-primary"></i> View File Foto Diri</a></span>
                                    @else - @endif
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card mb-5 mb-xl-6">
    <div class="card-header border-0 cursor-pointer" role="button" data-bs-toggle="collapse" data-bs-target="#kt_account_profile_details" aria-expanded="true" aria-controls="kt_account_profile_details">
        <div class="card-title m-0">
            <h6 class="fw-bolder m-0">Log Position</h6>
        </div>
    </div>
    <div class="card-body border-top pt-5">
        <div class="timeline-label">
            <div class="timeline-item">
                <div class="timeline-label fw-bolder text-gray-800 fs-6"></div>
                <div class="timeline-badge">
                    <i class="fa fa-genderless text-success fs-1"></i>
                </div>
                @if($activePosition != null)
                <div class="fw-mormal timeline-content text-muted ps-3 text-dark">
                    <div class="timeline-content fw-bold text-gray-800 ps-3"><b>Now</b> {{$activePosition->jabatan}}</div>
                </div>
                @endif
            </div>
            @foreach($position as $p)
               @if($p->tmt != '0000-00-00')
               <div class="timeline-item">
                    <div class="timeline-label fw-bolder text-gray-800 fs-6"></div>
                    <div class="timeline-badge">
                        <i class="fa fa-genderless text-warning fs-1"></i>
                    </div>
                    <div class="fw-mormal timeline-content text-muted ps-3 text-dark">
                        <b>
                            @if($p->tmt == '0000-00-00')
                                Now
                            @else
                                {{$p->tmt}}
                            @endif
                        </b> {{$p->jabatan}}
                    </div>
                </div>
               @endif
            @endforeach
        </div>
    </div>
</div>

<div class="card mb-5 mb-xl-6">
    <div class="card-header border-0 cursor-pointer" role="button" data-bs-toggle="collapse" data-bs-target="#kt_account_profile_details" aria-expanded="true" aria-controls="kt_account_profile_details">
        <div class="card-title m-0">
            <h6 class="fw-bolder m-0">Hasil Assesment</h6>
        </div>
    </div>
    <div class="card-body border-top pt-5">
        <div class="table-responsive">
            <table class="table table-flush align-middle table-row-bordered table-row-solid gy-4 gs-9">
                <thead class="border-gray-200 fs-5 fw-bold bg-lighten">
                    <tr>
                        <th class="min-w-250px">Jenis Test</th>
                        <th class="min-w-100px">Nilai</th>
                        <th class="min-w-150px">Ket.</th>
                    </tr>
                </thead>
                <tbody class="fw-6 fw-bold text-gray-600">
                    @foreach($assesment as $a)
                        <tr>
                            <td>{{$a->jenis_test}}</td>
                            <td>{{$a->nilai}}</td>
                            <td>{{$a->keterangan}}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="row">
            <div class="col-md-12">
                <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#kt_modal_scrollable_1"><i class="bi bi-columns-gap fs-6 me-2"></i> BIPI Details</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade bd-example-modal-lg" tabindex="-1" id="kt_modal_scrollable_1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Details Assesment BIPI</h5>

                <!--begin::Close-->
                <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal">
                    <span class="svg-icon svg-icon-2x"></span>
                </div>
                <!--end::Close-->
            </div>

            <div class="modal-body">
                <div class="table-responsive">
                <table class="table table-flush align-middle table-row-bordered table-row-solid gy-4 gs-9">
                    <thead class="border-gray-200 fs-6 fw-bold bg-lighten">
                        <tr>
                            <td style="padding-right:10px;">No</td>
                            <td width="50%">Item</td>
                            <td>Hasil Test</td>
                        </tr>
                    </thead>
                    <tbody class="fw-6 fw-bold text-gray-600">
                        @foreach($bipi as $d)
                        <tr>
                            <td>{{$loop->iteration}}</td>
                            <td>{{$d->item}}</td>
                            <td class="text-primary"><b>{{$d->value}}</b></td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<div class="card mb-5 mb-xl-6">
    <div class="card-header border-0 cursor-pointer" role="button" data-bs-toggle="collapse" data-bs-target="#kt_account_profile_details" aria-expanded="true" aria-controls="kt_account_profile_details">
        <div class="card-title m-0">
            <h6 class="fw-bolder m-0">Performance</h6> &nbsp;
            <!-- <a href="#" class="btn btn-icon btn-primary"><i class="bi bi-bar-chart-line fs-3"></i></a> -->
            <button class="btn btn-icon btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_scrollable_2"><i class="bi bi-bar-chart-line fs-3"></i></button>
        </div>
    </div>
    
    <div class="card-body border-top pt-5">
        <div class="table-responsive">
            <table class="table table-flush align-middle table-row-bordered table-row-solid gy-4 gs-9">
                <thead class="border-gray-200 fs-5 fw-bold bg-lighten">
                    <tr>
                        <td>No</td>
                        <td>Periode</td>
                        <td>Total KPI</td>
                        <td>Kategori</td>
                    </tr>
                </thead>
                <tbody class="fw-6 fw-bold text-gray-600">
                    @foreach($kpi as $k)
                    <tr>
                        <td>{{$loop->iteration}}</td>
                        <td>{{$k->periode}}</td>
                        <td>{{round($k->kpi* 100, 2)}} %</td>
                        <td>{{$k->category}}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>


<div class="card mb-5 mb-xl-6">
    <div class="card-header border-0 cursor-pointer" role="button" data-bs-toggle="collapse" data-bs-target="#kt_account_profile_details" aria-expanded="true" aria-controls="kt_account_profile_details">
        <div class="card-title m-0">
            <h6 class="fw-bolder m-0">File SDM</h6>
        </div>
    </div>
    <div class="card-body border-top pt-5">
        <div class="table-responsive">
            <table class="table table-flush align-middle table-row-bordered table-row-solid gy-4 gs-9">
                <thead class="border-gray-200 fs-5 fw-bold bg-lighten">
                    <tr>
                        <th class="min-w-250px">File</th>
                        <th class="min-w-100px">Category</th>
                        <th class="min-w-100px">Action</th>
                        <th class="min-w-150px">Note</th>
                    </tr>
                </thead>
                <tbody class="fw-6 fw-bold text-gray-600">
                    <tr>
                        <td>
                            <a href="#">filenama_file.pdf</a>
                        </td>
                        <td>Category</td>
                        <td><a href="#"><span class="badge badge-light-success fs-7 fw-bolder">Download</span></a></td>
                        <td>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent laoreet ac orci vel fringilla. Morbi pretium ante vestibulum arcu egestas, eget eleifend augue viverra. Ut eu nunc et sem vulputate molestie. Morbi sed ex ut nisi interdum posuere eget in augue. Donec at accumsan dui
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<div class="modal fade" id="kt_modal_scrollable_2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="titleIndikatorModal">Monthly Performance</h6>
                <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
                </div>
            </div>
            <div class="row" style="margin:20px;">
                <div class="card-body pt-10">
                    <canvas id="chartCategoryKPI" height="90px"></canvas>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<script type="text/javascript">
    var chartGradeKpi = new Chart(document.getElementById("chartCategoryKPI"), {
      type: 'bar',
      data: {
        labels: ['KPI'],
        datasets: [
          { 
            data: [],
            label: 'KPI Labels',
            tension: 0.2,
            borderColor: 'purple',
            backgroundColor :'#7FB3D5'
            // pointBackgroundColor : 'cyan'
            // fill: false
          }
        ]
      },
      options: {
            plugins:{
                datalabels:{
                    formatter:(value, context)=>{
                        return value;
                    },
                    color:'#446A46',
                    anchor:'end',
                    align:'top'
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                },

                x: {
                    grid: {
                      display: false,
                    },

                    ticks :{
                        maxTicksLimit:75
                    }
                },

            }
        },
        plugins:[ChartDataLabels]
    });
</script>
@endsection