@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="card">
    <div class="card-header"><h4>Tim Kerja</h4></div>
    <div class="card-body p-0">
        <table class="table table-responsive-sm table-striped mb-0">
            <thead class="thead-light">
            <tr>
                <th>Pemberi Tugas / Pemilik Aset</th>
                <th>PP</th>
                <th>Reviewer</th>
                <th>Register</th>
                <th>Penilai</th>
                <th>Marketing</th>
            </tr>
            </thead>
            <tbody>
            @foreach($monitoringTimKerja as $key => $item)
                <tr>
                    <td>
                        <div>{{ $item->nama_client }}</div>
                    </td>
                    <td>{{ $item->pp }}</td>
                    <td>{{ $item->reviewer }}</td>
                    <td>{{ $item->register }}</td>
                    <td>{{ $item->penilai }}</td>
                    <td>{{ $item->marketing }}</td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </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