@extends('layouts.admin')
@section('title')
  Indikator Kinerja |
@endsection
@section('css')
  <style>
  .sidebar-menu{
    width:100%;
    padding:0px 5px;
    height: 100%;
  }
  .sidebar-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
  }

  .sidebar-menu ul li a i{
    color:#676767;
    font-size:20px;
    margin-right:10px;
    font-weight: 400;
    align-items:center
  }
  .sidebar-menu ul li a {
    display: flex;
    color:rgba(27, 46, 75, 0.9);
    padding: 3px 10px 3px 0px;
    text-decoration: none;
    align-items:center;
    font-size:15px;
    line-height: 1rem
  }
  .sidebar-menu ul li a:hover,
  .sidebar-menu ul li a.active{
    color:#47008d
  }
  .sidebar-menu ul li a.active{
    font-weight: 600
  }
  .sidebar-menu ul li:last-child a{
    border-bottom:none;
  }
  .content-box{
    border-left:3px solid #eaedf3;
  }
  .post ol, .post ul{
    padding-left: 20px;
  }
  .form-control:disabled, .form-control[readonly] {
    background-color: #ffffff;
  }

  .list-information{
    padding: 8px 0px;
    border-bottom: 1px solid #eaedf4;
  }
  .list-information label{
    margin-bottom:5px;
    color:#969696;
    font-weight: 400;
  }
  .list-information h6{
    margin-bottom: 0px;
  }
  .label {
    display: inline-block;
    font-weight: 400;
    padding:5px;
    line-height: 1.5384616;
    border: 1px solid transparent;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 1px;
    border-radius: 0px
  }
  .date-text{
    margin-bottom:5px;
    color:#d3552f
  }
  .table thead tr th {
    border-top: 3px solid #d9dce5;
    border-bottom: 3px solid #d9dce5;
    padding: 10px 10px;
  }
 
  </style>
@endsection
@section('content')
  <h1 class="df-title mg-b-10">Penilaian Indikator</h1>
  <ol class="breadcrumb df-breadcrumbs">
    <li class="breadcrumb-item"><a href="">Admin</a></li>
    <li class="breadcrumb-item active" aria-current="page">Penilaian Indikator</li>
  </ol>
  <div class="card card-table rounded-10 mg-t-50">
    <div class="card-body pd-0">
       <div class="row">
        <div class="col-md-4">
          <div class="pd-t-20 pd-b-20 pd-l-20 pd-r-5">
            <div class="sidebar-menu d-none d-xl-block d-xxl-block">
              <div class="list-information">
                <label>ID DDP</label>
                <h6>{{ $data['detail']->id_ddp }}</h6>
              </div>
              <div class="list-information">
                <label>Nama Indikator</label>
                <h6>{{ $data['detail']->nama_indikator }}</h6>
              </div>
              <div class="list-information">
                <label>Nama Saktker</label>
                <h6>{{ $data['detail']->nama_satker }}</h6>
              </div>
              <div class="list-information">
                <label>Satuan</label>
                <h6>{{ $data['detail']->satuan }}</h6>
              </div>
              <div class="list-information">
                <label>Jenis Data</label>
                <h6>{{ $data['detail']->jenis_data }}</h6>
              </div>
              <div class="list-information">
                <label>Status Prioritas</label>
                <h6>{{ $data['detail']->status_prioritas }}</h6>
              </div>
              <div class="list-information">
                <label>Klasifikasi Risiko</label>
                <h6>{{ $data['detail']->klasifikasi_risiko }}</h6>
              </div>
              <div class="list-information">
                <label>Definisi</label>
                <h6>{{ !empty($data['detail']->definisi ) ? $data['detail']->definisi : '-' }}</h6>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-8 content-box" style="padding-left: 0px">
          <div class="pd-20">
            <div class="center"></div>
            <div id="grafik-trend" class="mg-b-20"></div>
            <div class="table-responsive">
              <table class="table table-bordered table-vertical-middle">
                <thead class="thead-light">
                  <tr>
                    <th class="center" width="80px" style="padding:10px" >Tahun</th>
                    <th class="center" width="90px">Target</th>
                    <th class="center" width="90px">Realisasi</th>
                    <th class="center" width="90px">Satuan</th>
                    <th style="padding:10px" >Sumber Data</th>
                    {{-- <th style="padding:10px"></th> --}}
                  </tr>
                </thead>
                <tbody>
                  @foreach ($data['penilaian'] as $key => $value)
                    <tr>
                      <td class="center" style="padding:10px">{{$value->periode}}</td>
                      <td class="center">{{$value->target}}</td>
                      <td class="center">{{$value->realisasi}}</td>
                      <td class="center">{{$data['detail']->satuan}}</td>
                      <td>{{$value->sumber_data}}</td>
                      {{-- <td style="width:1px;white-space:nowrap;padding:10px">
                        <a href="{{  route('admin.detail_penilaian_indikator',['title'=>GlobalHelper::postTitle($value->nama_indikator).'-'.$value->id]) }}" class="button dark ripple-effect ico">
                          <i data-feather="search" class="tx-white-8 wd-20 ht-20 "></i>
                        </a>
                      </td> --}}
                    </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection
@section('js')
  <script>
  grafik_trend();
  function grafik_trend(){
      const data = @json($data['grafik-data']);
      const categories = data.map((item) => item.periode);
      const targetData = data.map((item) => item.target);
      const realisasiData = data.map((item) => item.realisasi);

      var options = {
        series: [
          {
            name: 'Target',
            data: targetData
          },
          {
            name: 'Realisasi',
            data: realisasiData
          }
        ],
        colors: ["#c0392b","#16a085"],
        chart: {
          height: 300,
          type: 'line',
          toolbar: {
            show: false // Menyembunyikan tombol opsi
          }
        },
        dataLabels: {
          enabled: false
        },
        stroke: {
          curve: 'smooth',
          width: 2
        },
        xaxis: {
          categories: categories,
          labels: {
            show: true,
          },
        },
        grid: {
            padding: {
              bottom: 30
            }
        },
        legend: {
          show: true,
          position: 'bottom'
        }
      };
      var chart = new ApexCharts(document.querySelector("#grafik-trend"), options);
      chart.render();
    }
  </script>
@endsection