@push('after_styles')
    <link rel="stylesheet" href="{{ asset('gantt/skins/dhtmlxgantt_meadow.css') }}" type="text/css" media="screen" title="no title" charset="utf-8">
    <style>
        /* basic positioning */
        .legend { list-style: none; }
        .legend li { float: left; margin-right: 10px; margin-top:10px; }
        .legend span { border: 1px solid #ccc; float: left; width: 15px; height: 15px; margin: 5px; }
        /* your colors */
        .legend .sesuaisla { background-color: #ccffcc; }
        .legend .klienslowrespon { background-color: #fff998; }
        .legend .pengerjaanlamban { background-color: #ff9c9e; }
        .legend .projectbatal { background-color: #80817F; }
        .weekend{ background: #f4f7f4 !important;}
        .baseline {
            background: #ffd180;
            border: 0px solid rgb(255, 153, 0);
        }
    </style>
@endpush
<div class="row">
    <div class="col-md-4">
        <div class="col-md-12 text-center">
            <h4>Valuation</h4>
        </div>
        <div class="col-md-12">
            <div id="pie-chart-valuation"></div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="col-md-12 text-center">
            <h4>Consulting</h4>
        </div>
        <div class="col-md-12">
            <div id="pie-chart-consulting"></div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="col-md-12 text-center">
            <h4>Advisory</h4>
        </div>
        <div class="col-md-12">
            <div id="pie-chart-advisory"></div>
        </div>

    </div>
</div>

@push('after_scripts')
    {{-- <script src="{{ asset('assets/highcharts/highcharts.js') }}"></script>
    <script src="{{ asset('assets/highcharts/modules/exporting.js') }}"></script>
    <script src="{{ asset('assets/highcharts/modules/export-data.js') }}"></script>
    <script src="{{ asset('assets/highcharts/modules/accessibility.js') }}"></script>
    <script src="{{ asset('assets/highcharts/highcharts-more.js') }}"></script>
    <script src="{{ asset('assets/highcharts/modules/data.js') }}"></script>
    <script src="{{ asset('assets/highcharts/modules/variable-pie.js') }}"></script>
    <script type="text/javascript"> --}}
        function setPieChartValuation(){
            $.ajax({
                url: "{{ route('monitoring.index.piechartvaluation') }}",
                type: "GET",
                dataType: "json",
                data : {

                },
                success: function(data) {
                    while(pieChartValuation.series.length>0){
                        pieChartValuation.series[0].remove(false) //false = don't redraw
                    }
                    var checkPieTotal = 0
                    for (var i = 0; i < data.length; i++) {
                        (data[i].y == 0) ? checkPieTotal++ : '' ;
                    }
                    if (checkPieTotal == data.length) {
                        $('#pie-chart-valuation').html('<div class="align-middle text-center" style="height: 400px;margin-top:10px;"><br><br><br><br><br><br><h5><span class="badge badge-secondary">No KPI Underperformed</span></h5></div>')
                    }else{
                        pieChartValuation.redraw() // update the visual aspect
                        pieChartValuation.addSeries({
                            minPointSize: 40,
                            innerSize: '50%',
                            zMin: 0,
                            name: 'countries',
                            data: data
                        });
                    }
                },
                cache: false
            });
        }


        function setPieChartConsulting(){
            $.ajax({
                url: "{{ route('monitoring.index.piechartconsulting') }}",
                type: "GET",
                dataType: "json",
                data : {

                },
                success: function(data) {
                    while(pieChartConsulting.series.length>0){
                        pieChartConsulting.series[0].remove(false) //false = don't redraw
                    }
                    var checkPieTotal = 0
                    for (var i = 0; i < data.length; i++) {
                        (data[i].y == 0) ? checkPieTotal++ : '' ;
                    }
                    if (checkPieTotal == data.length) {
                        $('#pie-chart-consulting').html('<div class="align-middle text-center" style="height: 400px;margin-top:10px;"><br><br><br><br><br><br><h5><span class="badge badge-secondary">No KPI Underperformed</span></h5></div>')
                    }else{
                        pieChartConsulting.redraw() // update the visual aspect
                        pieChartConsulting.addSeries({
                            minPointSize: 40,
                            innerSize: '50%',
                            zMin: 0,
                            name: 'countries',
                            data: data
                        });
                    }
                },
                cache: false
            });
        }

        function setPieChartAdvisory(){
            $.ajax({
                url: "{{ route('monitoring.index.piechartadvisory') }}",
                type: "GET",
                dataType: "json",
                data : {

                },
                success: function(data) {
                    while(pieChartAdvisory.series.length>0){
                        pieChartAdvisory.series[0].remove(false) //false = don't redraw
                    }
                    var checkPieTotal = 0
                    for (var i = 0; i < data.length; i++) {
                        (data[i].y == 0) ? checkPieTotal++ : '' ;
                    }
                    if (checkPieTotal == data.length) {
                        $('#pie-chart-advisory').html('<div class="align-middle text-center" style="height: 400px;margin-top:10px;"><br><br><br><br><br><br><h5><span class="badge badge-secondary">No KPI Underperformed</span></h5></div>')
                    }else{
                        pieChartAdvisory.redraw() // update the visual aspect
                        pieChartAdvisory.addSeries({
                            minPointSize: 40,
                            innerSize: '50%',
                            zMin: 0,
                            name: 'countries',
                            data: data
                        });
                    }
                },
                cache: false
            });
        }

    </script>
    <script type="text/javascript">
        $(document).ready(function() {
            pieChartValuation = new Highcharts.chart('pie-chart-valuation', {
                chart: {
                    type: 'variablepie'
                },
                title: {
                    text: ''
                },
                tooltip: {
                    headerFormat: '',
                    pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {point.name}</b><br/>' +
                        'Total : <b>{point.y}</b> Tasks <br/>'
                },
                series: [{
                    minPointSize: 40,
                    innerSize: '50%',
                    zMin: 0,
                    name: 'countries',
                    data: [{
                        name: 'Completed',
                        y: 10,
                        color: '#00aeee'
                    }, {
                        name: 'In Progress',
                        y: 5,
                        color: '#00a1ba'
                    }, {
                        name: 'Delayed',
                        y: 20,
                        color: '#cae1c7'
                    },]
                }],
                exporting: {
                    enabled: false
                }
            });

            setPieChartValuation()

            pieChartConsulting = new Highcharts.chart('pie-chart-consulting', {
                chart: {
                    type: 'variablepie'
                },
                title: {
                    text: ''
                },
                tooltip: {
                    headerFormat: '',
                    pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {point.name}</b><br/>' +
                        'Total : <b>{point.y}</b> Tasks <br/>'
                },
                series: [{
                    minPointSize: 40,
                    innerSize: '50%',
                    zMin: 0,
                    name: 'countries',
                    data: [{
                        name: 'Completed',
                        y: 10,
                        color: '#00aeee'
                    }, {
                        name: 'In Progress',
                        y: 5,
                        color: '#00a1ba'
                    }, {
                        name: 'Delayed',
                        y: 20,
                        color: '#cae1c7'
                    },]
                }],
                exporting: {
                    enabled: false
                }
            });

            setPieChartConsulting()

            pieChartAdvisory = new Highcharts.chart('pie-chart-advisory', {
                chart: {
                    type: 'variablepie'
                },
                title: {
                    text: ''
                },
                tooltip: {
                    headerFormat: '',
                    pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {point.name}</b><br/>' +
                        'Total : <b>{point.y}</b> Tasks <br/>'
                },

                series: [{
                    minPointSize: 40,
                    innerSize: '50%',
                    zMin: 0,
                    name: 'countries',
                    data: [{
                        name: 'Completed',
                        y: 10,
                        color: '#00aeee'
                    }, {
                        name: 'In Progress',
                        y: 5,
                        color: '#00a1ba'
                    }, {
                        name: 'Delayed',
                        y: 20,
                        color: '#cae1c7'
                    },]
                }],
                exporting: {
                    enabled: false
                }
            });

            setPieChartAdvisory()
        });
    </script>
@endpush