@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="row">
                    <div class="card-title">Quarterly Performance KPI</div>
                </div>
            </div>
            <div class="card-body pt-5">
                <div class="col-lg-12">
                    <div class="row">
                        <h6 class="text-primary">Search SDM</h6>
                        <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="allKpiRegionSelectId">
                                <option></option>
                                @foreach($region as $r)
                                <option value="{{$r->region_name}}">{{$r->region_name}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-lg-2 fv-row">
                            <select class="form-select form-select-solid" data-control="select2" data-placeholder="Position" id="allKpiPositionSelectId" data-allow-clear="true">
                            </select>
                        </div>
                        <div class="col-lg-2 fv-row">
                            <select class="form-select form-select-solid" data-control="select2" data-placeholder="SDM" id="allKpiSdmSelectId" data-allow-clear="true">
                            </select>
                        </div>
                        <div class="col-lg-2 fv-row">
                            <select class="form-select form-select-solid" data-control="select2" data-placeholder="Current Month" data-allow-clear="true" id="allKpiMonthSelectId">
                                <option value=""></option>
                                @foreach($month as $m)
                                <option value="{{$m->bulan}}">{{$m->periode}}</option>
                                @endforeach
                            </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="allKpiYearSelectId">
                                <option value=""></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="filterKpiBySDM()">
                                <i class="bi bi-search fs-4 me-2"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <!--end::Card body-->
        </div>
    </div>
</div>
<br>
<div class="row">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-body pt-5">
                <div class="row pt-2">
                    <div class="flex-equal me-5 tableShow" style="display:none;">
                        <table class="table table-flush fw-bold gy-1">
                            <tr>
                                <td class="text-muted min-w-125px w-125px">ID</td>
                                <td class="text-gray-800" id="tdId">-</td>
                            </tr>
                            <tr>
                                <td class="text-muted min-w-125px w-125px">Nama</td>
                                <td class="text-gray-800" id="tdNama">-</td>
                            </tr>
                            <tr>
                                <td class="text-muted min-w-125px w-125px">Position</td>
                                <td class="text-gray-800" id="tdPosition">-</td>
                            </tr>
                            <tr>
                                <td class="text-muted min-w-125px w-125px">Region</td>
                                <td class="text-gray-800" id="tdRegion">-</td>
                            </tr>
                            <tr>
                                <td class="text-muted min-w-125px w-125px">Distributor</td>
                                <td class="text-gray-800" id="tdDistributor">-</td>
                            </tr>
                            <tr>
                                <td class="text-muted min-w-125px w-125px">Territory</td>
                                <td class="text-gray-800" id="tdTerritory">-</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<br>
<div class="row">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-body pt-7">
                <div class="row pt-2">
                    <div class="flex-equal me-5">
                        <div class="fs-7 fw-bolder text-gray-700" id="cutOff">
                        </div>
                    </div>
                </div>
                <table id="tbAllKpiParam" class="table table-row-bordered tableShow" style="display:none;">
                   <thead>
                        <tr class="fw-bolder">
                            <th rowspan="2" class="bg-info text-light border-end w-200px" style="display: none;">Param Type</th>
                            <th rowspan="2" class="bg-info text-light">No</th>
                            <th rowspan="2" class="bg-info text-light border-end w-200px" style="padding-right:200px;">Indikator</th>
                            <th rowspan="2" class="bg-info text-light border-end w-200px">Freq</th>
                            <th rowspan="2" class="bg-info text-light">Trend</th>
                            <th rowspan="2" class="bg-info text-light border-end text-center">% Bobot</th>
                            <th rowspan="2" class="bg-info text-light border-end text-center">Nilai Maksimum</th>
                            <th rowspan="2" class="bg-info text-light border-end text-center">Satuan</th>
                            <th colspan="4" id="thMonth1Id" class="bg-primary text-light border-end text-center">Month 1</th>
                            <th colspan="4" id="thMonth2Id" class="bg-info text-light border-end text-center">Month 2</th>
                            <th colspan="4" id="thMonth3Id" class="bg-primary text-light border-end text-center">Month 3</th>
                        </tr>
                        <tr>
                            <th class="bg-primary text-light border-end text-center">Target</th>
                            <th class="bg-primary text-light border-end text-center">Realisasi</th>
                            <th class="bg-primary text-light border-end text-center">Performance</th>
                            <th class="bg-primary text-light border-end text-center">Weighted</th>
                            <th class="bg-info text-light border-end text-center">Target</th>
                            <th class="bg-info text-light border-end text-center">Realisasi</th>
                            <th class="bg-info text-light border-end text-center">Performance</th>
                            <th class="bg-info text-light border-end text-center">Weighted</th>
                            <th class="bg-primary text-light border-end text-center">Target</th>
                            <th class="bg-primary text-light border-end text-center">Realisasi</th>
                            <th class="bg-primary text-light border-end text-center">Performance</th>
                            <th class="bg-primary text-light border-end text-center">Weighted</th>
                        </tr>
                    </thead>
                    <tfoot style="font-size: 13px; font-weight: bold;" class="text-dark">
                        <tr>
                            <td></td>
                        </tr>
                        <tr>
                           <td></td>
                           <td>Main KPI</td>
                           <td class="text-center" id="totalBobot"></td>
                           <td></td>
                           <td></td>
                           <td></td>
                           <td></td>
                           <td></td>
                           <td></td>
                           <td></td>
                           <td class="text-end" id="totalWeightBulan1"></td>
                           <td></td>
                           <td></td>
                           <td></td>
                           <td class="text-end" id="totalWeightBulan2"></td>
                           <td></td>
                           <td></td>
                           <td></td>
                           <td class="text-end" id="totalWeightBulan3"></td>
                        </tr>
                        <tr class="text-primary">
                           <td></td>
                           <td>Compliance</td>
                           <td></td>
                           <td></td>
                           <td></td>
                           <td></td>
                           <td></td>
                           <td></td>
                           <td></td>
                           <td></td>
                           <td class="text-end" id="totalBoundaryBulan1"></td>
                           <td></td>
                           <td></td>
                           <td></td>
                           <td class="text-end" id="totalBoundaryBulan2"></td>
                           <td></td>
                           <td></td>
                           <td></td>
                           <td class="text-end" id="totalBoundaryBulan3"></td>
                        </tr>
                        <tr class="text-primary">
                           <td></td>
                           <td>Workload & Overall</td>
                           <td class="text-center" id="workload1"></td>
                           <td></td>
                           <td></td>
                           <td></td>
                           <td></td>
                           <td></td>
                           <td></td>
                           <td></td>
                           <td class="text-end" id="overall1"></td>
                           <td></td>
                           <td></td>
                           <td></td>
                           <td class="text-end" id="overall2"></td>
                           <td></td>
                           <td></td>
                           <td></td>
                           <td class="text-end" id="overall3"></td>
                        </tr>
                        <tr class="text-info">
                           <td></td>
                           <td>KPI Total</td>
                           <td></td>
                           <td></td>
                           <td></td>
                           <td></td>
                           <td></td>
                           <td></td>
                           <td></td>
                           <td></td>
                           <td class="text-end" id="totalKpiBulan1"></td>
                           <td></td>
                           <td></td>
                           <td></td>
                           <td class="text-end" id="totalKpiBulan2"></td>
                           <td></td>
                           <td></td>
                           <td></td>
                           <td class="text-end" id="totalKpiBulan3"></td>
                        </tr>
                        <tr class="text-info">
                           <td></td>
                           <td>Grade</td>
                           <td></td>
                           <td></td>
                           <td></td>
                           <td></td>
                           <td></td>
                           <td></td>
                           <td></td>
                           <td></td>
                           <td class="text-end" id="gradeBulan1"></td>
                           <td></td>
                           <td></td>
                           <td></td>
                           <td class="text-end" id="gradeBulan2"></td>
                           <td></td>
                           <td></td>
                           <td></td>
                           <td class="text-end" id="gradeBulan3"></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</div>
<div class="row pt-5">
    <div class="col-xl-8">
        <div class="card">
            <div class="card-header border-0 pt-3">
                <div class="row">
                    <div class="card-title" id="titleNameKPI"></div>
                </div>
            </div>
            <div class="card-body pt-5">
                <div class="col-lg-12">
                   <canvas id="myChart" height="120px"></canvas>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-4">
        <div class="card">
            <div class="card-header border-0 pt-3">
                <div class="row">
                    <div class="card-title" style="font-size:15px" id="titleLogPosition">Log Position</div>
                </div>
            </div>
            <div class="card-body pt-5">
                <div class="timeline-label">
                    <!--begin::Item-->
                    <div class="timeline-item">
                        <!--begin::Label-->
                        <div class="timeline-label fw-bolder text-gray-800 fs-8">JAN</div>
                        <!--end::Label-->
                        <!--begin::Badge-->
                        <div class="timeline-badge">
                            <i class="fa fa-genderless text-warning fs-1"></i>
                        </div>
                        <!--end::Badge-->
                        <!--begin::Text-->
                        <div class="fw-mormal timeline-content text-muted ps-3">Area Sales Spv. Retail Sulawesi Tenggara</div>
                        <!--end::Text-->
                    </div>
                    <!--end::Item-->
                    <!--begin::Item-->
                    <div class="timeline-item">
                        <!--begin::Label-->
                        <div class="timeline-label fw-bolder text-gray-800 fs-8">FEB</div>
                        <!--end::Label-->
                        <!--begin::Badge-->
                        <div class="timeline-badge">
                            <i class="fa fa-genderless text-success fs-1"></i>
                        </div>
                        <!--end::Badge-->
                        <!--begin::Content-->
                        <div class="timeline-content d-flex">
                            <span class="fw-bolder text-gray-800 ps-3">Area Sales Spv. Retail Sulawesi</span>
                        </div>
                        <!--end::Content-->
                    </div>
                    <!--end::Item-->
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="modalUploadFile" 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 text-primary" id="titleIndikatorModal">Volume Sell Out - Maintain Backbone Product</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="col-xl-12">
                    <canvas id="chartTrendIndikator" height="150px"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>
<style type="text/css">
    .ds{
        display: none;
    }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<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 chartTrendIndikator = new Chart(document.getElementById("chartTrendIndikator"), {
  type: 'line',
  data: {
    labels: ['JAN'],
    datasets: [
      { 
        data: ['56'],
        label: 'Target',
        tension: 0.2,
        borderColor: '#FF0075',
        backgroundColor: '#FF0075',
        pointBackgroundColor : '#FF0075',
        fill: false
      },

      { 
        data: ['56'],
        label: 'Realisasi',
        tension: 0.2,
        borderColor: '#172774',
        backgroundColor: '#172774',
        pointBackgroundColor : '#172774',
        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]
});


function filterKpiBySDM(){
    kode_sdm = $("#allKpiSdmSelectId").val();
    nama_sdm = $("#allKpiSdmSelectId").select2().find(":selected").data("id");
    month = $("#allKpiMonthSelectId").val();
    year = $("#allKpiYearSelectId").val();

    $('.tableShow').show();
    $("#tbAllKpiParam").dataTable().fnDestroy();
    $("#tbAllKpiParam1").dataTable().fnDestroy();
    var table = $('#tbAllKpiParam').DataTable({
        processing: true,
        serverSide: true,
        pageLength: 12,
        paging: false,
        "bInfo" : false,
        "columnDefs": [ {
          "targets"  : 'no-sort',
          "orderable": false,
        }],
        ajax: {
            url: "{{ route('allkpi.getDataKpiAll') }}",
            type: "get",
            data: function (d) {
               d.kode_sdm = kode_sdm;
               d.month    = month;
               d.year     = year;
               d.nama_sdm = nama_sdm;
            }
        },
        
        columns: [
            { data: 'parameter_type', name: 'tes', className: 'border-end ds'},
            { data: 'DT_RowIndex', name: 'DT_RowIndex', className: "text-center border-end"},
            { data: 'parameter', name: 'parameter', className: 'border-end'},
            { data: 'freq', name: 'freq', className: 'border-end'},
            { data: 'trend', name: 'trend', className: 'border-end'},
            { data: 'bobot', name: 'bobot', className: "text-center border-end"},
            { data: 'nilai_maks', name: 'nilai_maks', className: "text-center border-end"},
            { data: 'satuan', name: 'satuan', className: "text-start border-end"},

            { data: 't1', name: 't1', className: "text-end border-end"},
            { data: 'r1', name: 'r1', className: "text-end border-end"},
            { data: 'p1', name: 'p1', className: "text-end border-end"},
            { data: 'w1', name: 'w1', className: "text-end border-end"},

            { data: 't2', name: 't2', className: "text-end border-end"},
            { data: 'r2', name: 'r2', className: "text-end border-end"},
            { data: 'p2', name: 'p2', className: "text-end border-end"},
            { data: 'w2', name: 'w2', className: "text-end border-end"},

            { data: 't3', name: 't3', className: "text-end border-end"},
            { data: 'r3', name: 'r3', className: "text-end border-end"},
            { data: 'p3', name: 'p3', className: "text-end border-end"},
            { data: 'w3', name: 'w3', className: "text-center"},

        ],

        createdRow: function ( row, data, index ) {
            if ( data['parameter_type'] == 2 ) {
                $('td', row).eq(1).addClass('text-primary');
                $('td', row).eq(2).addClass('text-primary');
                $('td', row).eq(3).addClass('text-primary');
                $('td', row).eq(4).addClass('text-primary');
                $('td', row).eq(5).addClass('text-primary');
                $('td', row).eq(6).addClass('text-primary');
                $('td', row).eq(7).addClass('text-primary');
                $('td', row).eq(8).addClass('text-primary');
                $('td', row).eq(9).addClass('text-primary');
                $('td', row).eq(10).addClass('text-primary');
                $('td', row).eq(11).addClass('text-primary');
                $('td', row).eq(12).addClass('text-primary');
                $('td', row).eq(13).addClass('text-primary');
                $('td', row).eq(14).addClass('text-primary');
                $('td', row).eq(15).addClass('text-primary');
                $('td', row).eq(16).addClass('text-primary');
                $('td', row).eq(17).addClass('text-primary');
            } 
        },

        drawCallback:function(value)
        {
            $('#totalBobot').html(value.json.totalBobot + '%');
            $('#totalBoundaryBulan1').html(parseFloat(value.json.boundary1).toFixed( 2 ) + '%');
            $('#totalBoundaryBulan2').html(parseFloat(value.json.boundary2).toFixed( 2 ) + '%');
            $('#totalBoundaryBulan3').html(parseFloat(value.json.boundary3).toFixed( 2 ) + '%');


            $('#totalWeightBulan1').html(parseFloat(value.json.kpi1).toFixed( 2 ) + '%');
            $('#totalWeightBulan2').html(parseFloat(value.json.kpi2).toFixed( 2 ) + '%');
            $('#totalWeightBulan3').html(parseFloat(value.json.kpi3).toFixed( 2 ) + '%');

            if(value.json.totalKpi3 == "KPI NULL" || value.json.overall3 == "KPI NULL"){
                $('#totalKpiBulan3').html(value.json.totalKpi3);
                $('#overall3').html(value.json.totalKpi3);

            }else{
                $('#totalKpiBulan3').html(parseFloat(value.json.totalKpi3).toFixed( 2 ) + '%');
                $('#overall3').html(parseFloat(value.json.overall3).toFixed( 2 ) + '%');

            }

            if(value.json.totalKpi2 == "KPI NULL" || value.json.overall2 == "KPI NULL"){
                $('#totalKpiBulan2').html(value.json.totalKpi2);
                $('#overall2').html(value.json.totalKpi2);


            }else{
                $('#totalKpiBulan2').html(parseFloat(value.json.totalKpi2).toFixed( 2 ) + '%');
                $('#overall2').html(parseFloat(value.json.overall2).toFixed( 2 ) + '%');

            }

            if(value.json.totalKpi1 == "KPI NULL" || value.json.overall1 == "KPI NULL"){
                $('#totalKpiBulan1').html(value.json.totalKpi1);
                $('#overall1').html(value.json.totalKpi1);

            }else{
                $('#totalKpiBulan1').html(parseFloat(value.json.totalKpi1).toFixed( 2 ) + '%');
                $('#overall1').html(parseFloat(value.json.overall1).toFixed( 2 ) + '%');

            }

            $('#gradeBulan1').html(value.json.grade1);
            $('#gradeBulan2').html(value.json.grade2);
            $('#gradeBulan3').html(value.json.grade3);
            $('#workload1').html(value.json.workload);
            
        }

        });

    setDataSdm();
    setTitle();
    showResumeKpi();
}

function setTitle()
{
     bulan = $("#allKpiMonthSelectId").val();
    $.ajax({
        url:"{{ route('allkpi.getTitle') }}",
        method:"get",
        type:"json",
        data: {
          bulan: bulan
        },
        success:function (data) {
            document.getElementById('thMonth1Id').innerHTML = data.b1;
            document.getElementById('thMonth2Id').innerHTML = data.b2;
            document.getElementById('thMonth3Id').innerHTML = data.b3;
        }
    });
}

function setDataSdm()
{
    kode_sdm = $("#allKpiSdmSelectId").val();
    nama_sdm = $("#allKpiSdmSelectId").select2().find(":selected").data("id");
    position = $("#allKpiPositionSelectId").val();
    month    = $("#allKpiMonthSelectId").val();
    year     = $("#allKpiYearSelectId").val();
    
    $.ajax({
        url:"{{ route('allkpi.getDataSdm') }}",
        method:"get",
        type:"json",
        data: {
          kode_sdm : kode_sdm,
          nama_sdm : nama_sdm,
          position : position,
          month    : month,
          year     : year

        },
        success:function (data) {
            // console.log(data);
            document.getElementById('tdNama').innerHTML = data.datasdm.nama;
            document.getElementById('tdId').innerHTML = data.datasdm.id_sales;
            document.getElementById('tdRegion').innerHTML = data.datasdm.region;
            document.getElementById('tdDistributor').innerHTML = data.datasdm.distributor;
            document.getElementById('tdTerritory').innerHTML = data.datasdm.territory;
            document.getElementById('tdPosition').innerHTML = data.datasdm.jabatan;
            document.getElementById('cutOff').innerHTML = "Data Cut Off :" + data.co.co +  ", " +"DO Cut Off : " +data.co.co_do;
            document.getElementById('titleNameKPI').innerHTML = "Trend KPI" + " " + $("#allKpiYearSelectId").val() + " " +data.datasdm.nama;   
        }
    });
}

var chart = new Chart(document.getElementById("myChart"), {
  type: 'bar',
  data: {
    labels: ["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","Oktober","November","Desember"],
    datasets: [
        {
          label: "Total KPI (%)",
          backgroundColor: '#3EDBF0',
          data: []
        }
    ]
  },
  options: {
        indexAxis: 'x',
        scales: {
            y: {
                beginAtZero: true,
            },

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

                ticks :{
                    maxTicksLimit:75
                }
            },

        },
        plugins:{
            datalabels:{
                formatter:(value, context)=>{
                    return Math.round(value) + '%'
                },
                color:'#446A46',
                anchor:'end',
                align:'top'
            }
        },
    },
    plugins:[ChartDataLabels]
});

function showResumeKpi()
{
    sdm      = $("#allKpiSdmSelectId").val();
    year     = $("#allKpiYearSelectId").val();

    $.ajax({
        url:"{{ route('allkpi.getKPIResume') }}",
        method:"get",
        type:"json",
        data: {
            sdm:sdm,
            year:year
        },
        success:function (response) {

            var data = response.data.map(function (e) {

                return parseFloat(e.kpi).toFixed( 1 );

            });

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

            });

            chart.data.datasets[0].data = data;
            chart.data.labels = labels;
            chart.update();
        },
        error: function(xhr) {
            console.log(xhr.responseJSON);
        }
    });
}

function getResumeIndikator(id)
{
    id_param = id;
    kode_sdm = $("#allKpiSdmSelectId").val();
    console.log(id_param);
    $.ajax({
        url:"{{ route('ajax.getResumeIndikator') }}",
        method:"get",
        type:"json",
        data: {
          id_param : id_param,
          kode_sdm : kode_sdm
        },
        success:function (response) {

            var target = response.trend.map(function (e) {
                return parseFloat(e.target).toFixed( 1 );
            });

            var realisasi = response.trend.map(function (e) {
                return parseFloat(e.realisasi).toFixed( 1 );
            });

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

            chartTrendIndikator.data.datasets[0].data = target;
            chartTrendIndikator.data.datasets[1].data = realisasi;
            chartTrendIndikator.data.labels = labels;
            chartTrendIndikator.update();

            document.getElementById('titleIndikatorModal').innerHTML = response.title;
        }
    });
}

</script>
@endsection