@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-12">
        <div id="bar-pekerjaanonprogress"></div>
    </div>
</div>

@push('after_scripts')
    {{-- <script src="{{ asset('assets/highcharts/highcharts.js') }}"></script>
    <script src="{{ asset('assets/highcharts/highcharts-3d.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 setBarPekerjaanOnprogress(){
            $.ajax({
                url: "{{ route('monitoring.index.pekerjaanonprogress') }}",
                type: "GET",
                dataType: "json",
                data : {
                    tgl_awal : document.getElementById("tgl_awal_filter").value,
                    tgl_akhir : document.getElementById("tgl_akhir_filter").value,
                },
                success: function(data) {
                    barChartPekerjaan.update({
                        series: [{
                            data: data.data
                        }]
                    }, true, true);
                    barChartPekerjaan.redraw() // update the visual aspect
                },
                cache: false
            });
        }
    </script>
    <script type="text/javascript">
        var base_url = '{!! url('/') !!}';
        $(document).ready(function() {
            barChartPekerjaan = new Highcharts.chart('bar-pekerjaanonprogress', {
                chart: {
                    type: 'column',
                    backgroundColor: 'white',
                    options3d: {
                        enabled: true,
                        alpha: 0,
                        beta: 10,
                        depth: 100
                    }
                },
                title: {
                    text: 'Pekerjaan On Progress'
                },
                plotOptions: {
                    column: {
                        depth: 25
                    }
                },
                xAxis: {
                    categories: ['Belum Dimulai', 'Tepat Waktu', '3 Hari Menjelang Keterlambatan', 'Terlambat'],
                    labels: {
                        skew3d: true,
                        style: {
                            fontSize: '13px'
                        }
                    }
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: null
                    },
                },
                tooltip: {
                    headerFormat: '<b>{point.x}</b><br/>',
                    pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
                },
                plotOptions: {
                    series: {
                        depth: 25,
                        colorByPoint: true,
                        stacking: 'normal',
                        dataLabels: {
                            enabled: true
                        },
                        point: {
                            events: {
                                click: function () {
                                    location.href = base_url + '/tasks?tahun=all&status=' +
                                        this.series.data[this.index].url;

                                }
                            }
                        }
                    }
                },
                series: [{
                    data: [
                        {name:'Belum Dimulai', y:0, color: 'gray'},
                        {name:'Tepat Waktu', y:0,color: '#00bc8c'},
                        {name:'3 Hari Menjeleang Keterlambatan', y:0,color: '#f39c12'},
                        {name:'Terlambat', y:0,color: '#e74c3c'}
                    ],
                    showInLegend: false
                }]
            });

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