@extends('layouts.template')
@section('content')
<div class="row">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-body pt-10">
                <div class="row">
                    <div class="row">
                        <h6 class="text-primary">Filter by</h6>
                        <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="sPosition">
                                <option></option>
                                @foreach($position as $p)
                                <option value="{{$p->jabatan}}">{{$p->jabatan}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-lg-3 fv-row">
                            <select class="form-select form-select-solid" data-control="select2" data-allow-clear="true" id="sRegion">
                                <option value="">ALL</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="Month" data-allow-clear="true" id="sMonth">
                                <option></option>
                                @foreach($month as $m)
                                <option value="{{$m->periode}}">{{$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="sYear">
                                <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-funnel fs-3 me-2"></i>
                            </button>
                        </div>
                    </div>  
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row pt-10">
    <div class="col-xl-6">
        <div class="card">
            <div class="card-header border-0 pt-6">
                <div class="card-title" id="titleGradeKpi">
                    Trend Grade KPI
                </div>
            </div>
            <div class="card-body pt-10">
                <canvas id="chartCategoryKPI" height="150px"></canvas>
            </div>
        </div>
    </div>
    <div class="col-xl-6">
        <div class="card">
            <div class="card-header border-0 pt-6">
                <div class="card-title" id="titleTrendPersentase">
                    Trend Lolos KPI
                </div>
            </div>
            <div class="card-body pt-10">
                <canvas id="chartPersentase" height="150px"></canvas>
            </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" id="titleCountLolosKpi">
                    Trend Lolos KPI
                </div>
            </div>
            <div class="card-body pt-10">
                <canvas id="chartKPICount" height="90px"></canvas>
            </div>
        </div>
    </div>
   <!--  <div class="col-xl-6">
        <div class="card">
            <div class="card-header border-0 pt-6">
                <div class="card-title">
                    Insentive {bulan} {tahun}
                </div>
            </div>
            <div class="card-body pt-10">
                <canvas id="chartInsentive" height="150px"></canvas>
            </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" id="titleMonthlyKpi">
                    Trend KPI Monthly
                </div>
            </div>
            <div class="card-body pt-10">
                <canvas id="chartKPIMonthly" height="100px"></canvas>
            </div>
        </div>
    </div>
</div>
<div class="row pt-10">
    <div class="col-xl-6">
        <div class="card">
            <div class="card-header border-0 py-5">
                <h3 class="card-title align-items-start flex-column">
                    <span class="card-label fw-bolder fs-4 mb-1" id="titleTopKpi">Top 5 KPI</span>
                </h3>
            </div>
            <div class="card-body pt-2">
                <table class="table align-middle table-row-dashed fs-6 gy-5" id="tb-topRank">
                    <thead>
                        <tr class="text-start fw-bolder fs-7 text-uppercase gs-0">
                            <!-- <th data-orderable="false">RANK</th> -->
                            <th class="min-w-150px" data-orderable="false">NAME</th>
                            <th data-orderable="false">KPI TOTAL</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>       
    </div>
    <div class="col-xl-6">
        <div class="card">
            <div class="card-header border-0 py-5">
                <h3 class="card-title align-items-start flex-column">
                    <span class="card-label fw-bolder fs-4 mb-1" id="titleBottomKpi">Bottom 5 KPI</span>
                </h3>
            </div>
            <div class="card-body pt-2">
                <table class="table align-middle table-row-dashed fs-6 gy-5" id="tb-bottomRank">
                    <thead>
                        <tr class="text-start fw-bolder fs-7 text-uppercase gs-0">
                            <!-- <th data-orderable="false">RANK</th> -->
                            <th class="min-w-150px" data-orderable="false">NAME</th>
                            <th data-orderable="false">KPI TOTAL</th>
                        </tr>
                    </thead>
                </table>
            </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>
var chartKPIMontly = new Chart(document.getElementById("chartKPIMonthly"), {
  type: 'bar',
  data: {
    labels: ['sales 1','sales 2'],
    datasets: [
      { 
        data: 0,
        label: 'Periode',
        tension: 0.2,
        borderColor: '0AA1DD',
        backgroundColor :'#0AA1DD'
        // pointBackgroundColor : 'cyan'
        // fill: false
      }
    ]
  },
  options: {
        plugins:{
            datalabels:{
                formatter:(value, context)=>{
                    return Math.round(value) + '%'
                },
                color:'#446A46',
                anchor:'end',
                align:'top'
            }
        },
        scales: {
            y: {
                beginAtZero: true,
            },

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

                ticks :{
                    maxTicksLimit:75
                }
            },

        }
    },
    plugins:[ChartDataLabels]
});


var chartGradeKpi = new Chart(document.getElementById("chartCategoryKPI"), {
  type: 'bar',
  data: {
    labels: ['Poor(<50%)','Fair(50-60%)','Average(50-75%)','Good(75-95%)','Excellent(>=95%)'],
    datasets: [
      { 
        data: [],
        label: 'Total SDM by Grade KPI',
        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]
});


var chartPersentaseKpi = new Chart(document.getElementById("chartPersentase"), {
  type: 'bar',
  data: {
    labels: ['REGION I', 'REGION II','REGION III', 'REGION IV', 'REGION V', 'REGION VI', 'REGION VII', 'TOTAL'],
    datasets: [
      { 
        data: [],
        label: 'Lolos KPI (%)',
        tension: 0.2,
        borderColor: 'purple',
        backgroundColor :'#E59866'
        // pointBackgroundColor : 'cyan'
        // fill: false
      }
    ]
  },
  options: {
        plugins:{
            datalabels:{
                formatter:(value, context)=>{
                    return Math.round(value) + '%'
                },
                color:'#446A46',
                anchor:'end',
                align:'top'
            }
        },
        scales: {
            y: {
                beginAtZero: true,
            },

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

                ticks :{
                    maxTicksLimit:75
                }
            },

        }
    },
    plugins:[ChartDataLabels]
});


var chartKPICount = new Chart(document.getElementById("chartKPICount"), {
  type: 'bar',
  data: {
    labels: ['REGION I', 'REGION II','REGION III', 'REGION IV', 'REGION V', 'REGION VI', 'REGION VII', 'TOTAL'],
    datasets: [
      { 
        data: [],
        label: 'Total SDM',
        tension: 0.2,
        borderColor: 'purple',
        backgroundColor :'#F8CB2E'
        // pointBackgroundColor : 'cyan'
        // fill: false
      },
      { 
        data: [],
        label: 'Lolos',
        tension: 0.2,
        borderColor: 'purple',
        backgroundColor :'#EE5007'
        // pointBackgroundColor : 'cyan'
        // fill: false
      },
      { 
        data: [],
        label: 'Tidak Lolos',
        tension: 0.2,
        borderColor: 'purple',
        backgroundColor :'#B22727'
        // 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]
});


// var chartInsentive = new Chart(document.getElementById("chartInsentive"), {
//   type: 'line',
//   data: {
//     labels: ['JAN','FEB','MAR','APR','MEI','JUN','JUL','AGS','SEP','OKT','NOV','DES'],
//     datasets: [
//       { 
//         data: [145000000, 123000000, 173700000, 143800000, 122000000],
//         label: 'Grade (%)',
//         tension: 0.2,
//         borderColor: 'purple',
//         // backgroundColor :'#7FB3D5'
//         pointBackgroundColor : 'cyan',
//         fill: false
//       }
//     ]
//   },
//   options: {
//         plugins:{
//             datalabels:{
//                 formatter:(value, context)=>{
//                     // return Math.round(value) + '%'
//                 },
//                 // color:'#446A46',
//                 // anchor:'end',
//                 // align:'top'
//             }
//         },
//         scales: {
//             y: {
//                 beginAtZero: true,
//             },

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

//                 ticks :{
//                     maxTicksLimit:75
//                 }
//             },

//         }
//     },
//     // plugins:[ChartDataLabels]
// });


function showResumeKpi()
{
    position = $("#sPosition").val();
    region   = $("#sRegion").val();
    month    = $("#sMonth").val();
    year     = $("#sYear").val();

    $.ajax({
        url:"{{ route('resumekpi.getResumeByCategory') }}",
        method:"get",
        type:"json",
        data: {
            position :position,
            region   :region,
            month    :month,
            year     :year
        },
        success:function (response) {
            
            var data = response.data.map(function (e) {
                return e.jumlah_cat;

            })

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

            })

            // console.log(data, labels);

            chartGradeKpi.data.labels = labels;
            chartGradeKpi.data.datasets[0].data = data;
            chartGradeKpi.update();

        },
        error: function(xhr) {
            console.log(xhr.responseJSON);
        }
    });

    $.ajax({
        url:"{{ route('resumekpi.getResumePersentase') }}",
        method:"get",
        type:"json",
        data: {
            position :position,
            region   :region,
            month    :month,
            year     :year
        },
        success:function (response) {
            
            var data = response.data.map(function (e) {
                var totalResume = Math.ceil(parseInt(e.lolos)/parseInt(e.total)*100);
                return totalResume;

            })

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

            })

            // console.log(data, labels);

            chartPersentaseKpi.data.labels = labels;
            chartPersentaseKpi.data.datasets[0].data = data;
            chartPersentaseKpi.update();

        },
        error: function(xhr) {
            console.log(xhr.responseJSON);
        }
    });

    $.ajax({
        url:"{{ route('resumekpi.getTrendKpi') }}",
        method:"get",
        type:"json",
        data: {
            position :position,
            region   :region,
            month    :month,
            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.nama.split(/(\s).+\s/).join("");

            })

            chartKPIMontly.data.labels = labels;
            chartKPIMontly.data.datasets[0].data = data;
            chartKPIMontly.data.datasets[0].label = 'KPI ' + month + ' (%)';
            chartKPIMontly.update();

        },
        error: function(xhr) {
            console.log(xhr.responseJSON);
        }
    });

    $.ajax({
        url:"{{ route('resumekpi.getCountLolosKpi') }}",
        method:"get",
        type:"json",
        data: {
            position :position,
            region   :region,
            month    :month,
            year     :year
        },
        success:function (response) {
            
            var total = response.data.map(function (e) {
                return e.total;

            })

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

            })

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

            })

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

            })

            chartKPICount.data.labels = labels;
            chartKPICount.data.datasets[0].data = total;
            chartKPICount.data.datasets[1].data = lolos;
            chartKPICount.data.datasets[2].data = tidak_lolos;
            chartKPICount.update();

        },
        error: function(xhr) {
            console.log(xhr.responseJSON);
        }
    });

    



    $("#tb-topRank").dataTable().fnDestroy();
    const tableTopRank = $('#tb-topRank').DataTable({
        processing: true,
        serverSide: true,
        paging: false,
        "bInfo" : false,
        ajax: {
            url: "{{ route('resumekpi.getListTopRank') }}",
            type: "get",
            data: {
                position :position,
                region   :region,
                month    :month,
                year     :year
            }
        },
        columns: [
            // { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
            { data: 'nama', name: 'nama' },
            { data: 'kpi', name: 'kpi' }
        ],

    });

    $("#tb-bottomRank").dataTable().fnDestroy();
    const tableBottomRank = $('#tb-bottomRank').DataTable({
        processing: true,
        serverSide: true,
        paging: false,
        "bInfo" : false,
        ajax: {
            url: "{{ route('resumekpi.getListBottomRank') }}",
            type: "get",
            data: {
                position :position,
                region   :region,
                month    :month,
                year     :year
            }
        },
        columns: [
            // { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
            { data: 'nama', name: 'nama' },
            { data: 'kpi', name: 'kpi' }
        ],

    });

    if(position == 'SRM Retail' || position == 'SRM Industry'){
        document.getElementById('titleTopKpi').innerHTML = 'Top 7 KPI ' + position;
        document.getElementById('titleBottomKpi').innerHTML = 'Bottom 7 KPI ' + position;
    }else{
        document.getElementById('titleTopKpi').innerHTML = 'Top 5 KPI ' + position;
        document.getElementById('titleBottomKpi').innerHTML = 'Bottom 5 KPI ' + position;
    }

    document.getElementById('titleMonthlyKpi').innerHTML = 'Trend KPI Monthly ' + position + ' ' + month + ' '+ year;
    document.getElementById('titleCountLolosKpi').innerHTML = 'Trend Lolos KPI' + ' '+ position + ' ' + month + ' '+ year;
    document.getElementById('titleGradeKpi').innerHTML = 'Trend Grade KPI' + ' ' + position + ' ' + month + ' '+ year;
    document.getElementById('titleTrendPersentase').innerHTML = 'Trend Lolos KPI' + ' ' + position + ' ' + month + ' '+ year;


    
    
    
}
</script>
@endsection