@extends('layouts.template')
@section('content')
<div class="row">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-header border-0 pt-6">
                <div class="card-title">
                    Search SDM
                </div>
            </div>
            <div class="card-body pt-2">
                <div class="row">
                    <!-- <h6 class="text-primary">Search SDM</h6> -->
                    <div class="row">
                        <div class="col-lg-2 fv-row">
                            <select class="form-select form-select-solid" data-control="select2" data-placeholder="Region" data-allow-clear="true" id="selectRegionResume">
                                <option></option>
                                @foreach($region as $r)
                                <option value="{{$r->region_name}}">{{$r->region_name}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-lg-3 fv-row">
                            <select class="form-select form-select-solid" data-control="select2" data-placeholder="Position" data-allow-clear="true" id="selectPositionResume">
                            </select>
                        </div>
                        <div class="col-lg-4 fv-row">
                            <select class="form-select form-select-solid" data-control="select2" data-placeholder="SDM Name" data-allow-clear="true" id="selectKodeSdmResume">
                            </select>
                        </div>
                        <div class="col-lg-2 fv-row">
                            <select class="form-select form-select-solid" data-control="select2" data-placeholder="Year" data-allow-clear="true" id="selectYearResume">
                                <option></option>
                                @foreach($year as $y)
                                <option value="{{$y->tahun}}">{{$y->tahun}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-lg-1 fv-row">
                            <button class="btn btn-icon btn-primary" onclick="showResumeKpi()">
                                <i class="bi bi-search fs-4 me-2"></i>
                            </button>
                        </div>
                    </div>  
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row pt-10">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-header border-0 pt-6">
                <div class="card-title">
                    Trend KPI
                </div>
                <div class="card-toolbar">
                    
                </div>
            </div>
            <div class="card-body pt-10">
                <canvas id="myChart" height="80px"></canvas>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>


<script>
var chart = new Chart(document.getElementById("myChart"), {
  type: 'line',
  data: {
    labels: ['januari','februari'],
    datasets: [
      { 
        data: 0,
        label: 'nama sdm',
        tension: 0.4,
         borderColor: 'rgba(0,255,0,1)',
          backgroundColor: 'rgba(0,255,0,0.3)',
          fill: true
      }
    ]
  },
  options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});
function tes(){
  var chart = new Chart(document.getElementById("myChart"), {
  type: 'line',
  data: {
    labels: ['januari','februari'],
    datasets: [
      { 
        data: 0,
        label: 'nama sdm',
        tension: 0.4,
         borderColor: 'rgba(0,255,0,1)',
          backgroundColor: 'rgba(0,255,0,0.3)',
          fill: true
      }
    ]
  },
  options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});  
}
    function showResumeKpi()
    {
        // chart.destroy();
        kode_sdm = $("#selectKodeSdmResume").val();
        year = $("#selectYearResume").val();

        $.ajax({
            url:"{{ route('resumekpi.getResumeBySdm') }}",
            method:"get",
            type:"json",
            data: {
                kode_sdm: kode_sdm,
                year: year
            },
            success:function (response) {
                
                // tes();
                var data = response.totalkpi.map(function (e) {
                    return parseFloat(e.toFixed(2));;
                })

                var labels = response.data.map(function (e) {
                    return e.periode;

                })
                chart.data.labels = labels;
                chart.data.datasets[0].data = data;
                chart.data.datasets[0].label = kode_sdm;
                // chart.destroy();
                chart.update();

            },
            error: function(xhr) {
                console.log(xhr.responseJSON);
            }
        });
    }
</script>

@endsection