@push('scripts')
    <script src="{{ asset('assets/datatables/datatables.min.js') }}"></script>
    <!-- ChartJS -->
    <script src="{{ asset('assets/plugins/chart.js/Chart.min.js') }}"></script>

    <script type="text/javascript">
        $(function() {
            'use strict'

            var ticksStyle = {
                fontColor: '#495057',
                fontStyle: 'bold'
            }

            var mode = 'index'
            var intersect = true

            $.ajax({
                url: "{{ route('dashboard.getChartWeek') }}",
                type: "GET",
                cache: false,
                async: false,
                success: function(response) {
                    var data = response.data;
                    $('#penjualanWeek').append(converRp(data.grandTotalThisWeek));
                    changeDataFromCalculateChart('persentaseWeek', data
                        .percentageOfSalesGrowth,
                        data.statusCalculation)
                    var $salesChart = $('#sales-chart-week')
                    var salesChart = new Chart($salesChart, {
                        type: 'bar',
                        data: {
                            labels: Object.keys(data.thisWeek),
                            datasets: [{
                                backgroundColor: '#007bff',
                                borderColor: '#007bff',
                                data: Object.values(data.thisWeek)
                            }]
                        },
                        options: {
                            maintainAspectRatio: false,
                            tooltips: {
                                mode: mode,
                                intersect: intersect
                            },
                            hover: {
                                mode: mode,
                                intersect: intersect
                            },
                            legend: {
                                display: false
                            },
                            scales: {
                                yAxes: [{
                                    // display: false,
                                    gridLines: {
                                        display: true,
                                        lineWidth: '4px',
                                        color: 'rgba(0, 0, 0, .2)',
                                        zeroLineColor: 'transparent'
                                    },
                                    ticks: $.extend({
                                        beginAtZero: true,
                                        // Include a dollar sign in the ticks
                                        callback: function(value, index,
                                            values) {
                                            return converRp(value)
                                        }
                                    }, ticksStyle)
                                }],
                                xAxes: [{
                                    display: true,
                                    gridLines: {
                                        display: false
                                    },
                                    ticks: ticksStyle
                                }]
                            }
                        }
                    })
                },
                error: function(response) {
                    console.log(response);
                }
            })
        })

        $(function() {
            'use strict'

            var ticksStyle = {
                fontColor: '#495057',
                fontStyle: 'bold'
            }

            var mode = 'index'
            var intersect = true

            $.ajax({
                url: "{{ route('dashboard.getChartMonth') }}",
                type: "GET",
                cache: false,
                async: false,
                success: function(response) {
                    var data = response.data;
                    $('#penjualanMonth').append(converRp(data.grandTotalThisMonth));
                    changeDataFromCalculateChart('persentaseMonth', data
                        .percentageOfSalesGrowth,
                        data.statusCalculation)
                    var $salesChart = $('#sales-chart-month')
                    var salesChart = new Chart($salesChart, {
                        type: 'bar',
                        data: {
                            labels: Object.keys(data.weekThisMonth),
                            datasets: [{
                                backgroundColor: '#007bff',
                                borderColor: '#007bff',
                                data: Object.values(data.weekThisMonth)
                            }]
                        },
                        options: {
                            maintainAspectRatio: false,
                            tooltips: {
                                mode: mode,
                                intersect: intersect
                            },
                            hover: {
                                mode: mode,
                                intersect: intersect
                            },
                            legend: {
                                display: false
                            },
                            scales: {
                                yAxes: [{
                                    // display: false,
                                    gridLines: {
                                        display: true,
                                        lineWidth: '4px',
                                        color: 'rgba(0, 0, 0, .2)',
                                        zeroLineColor: 'transparent'
                                    },
                                    ticks: $.extend({
                                        beginAtZero: true,
                                        // Include a dollar sign in the ticks
                                        callback: function(value, index,
                                            values) {
                                            return converRp(value)
                                        }
                                    }, ticksStyle)
                                }],
                                xAxes: [{
                                    display: true,
                                    gridLines: {
                                        display: false
                                    },
                                    ticks: ticksStyle
                                }]
                            }
                        }
                    })
                },
                error: function(response) {
                    console.log(response);
                }
            })
        })

        $(function() {
            'use strict'

            var ticksStyle = {
                fontColor: '#495057',
                fontStyle: 'bold'
            }

            var mode = 'index'
            var intersect = true

            $.ajax({
                url: "{{ route('dashboard.getChartYear') }}",
                type: "GET",
                cache: false,
                async: false,
                success: function(response) {
                    var data = response.data;
                    // console.log(data);
                    $('#penjualanYear').append(converRp(data.grandTotalThisYear));
                    changeDataFromCalculateChart('persentaseYear', data
                        .percentageOfSalesGrowth,
                        data.statusCalculation)
                    var $salesChart = $('#sales-chart-year')
                    var salesChart = new Chart($salesChart, {
                        type: 'bar',
                        data: {
                            labels: Object.keys(data.monthThisYear),
                            datasets: [{
                                backgroundColor: '#007bff',
                                borderColor: '#007bff',
                                data: Object.values(data.monthThisYear)
                            }]
                        },
                        options: {
                            maintainAspectRatio: false,
                            tooltips: {
                                mode: mode,
                                intersect: intersect
                            },
                            hover: {
                                mode: mode,
                                intersect: intersect
                            },
                            legend: {
                                display: false
                            },
                            scales: {
                                yAxes: [{
                                    // display: false,
                                    gridLines: {
                                        display: true,
                                        lineWidth: '4px',
                                        color: 'rgba(0, 0, 0, .2)',
                                        zeroLineColor: 'transparent'
                                    },
                                    ticks: $.extend({
                                        beginAtZero: true,
                                        // Include a dollar sign in the ticks
                                        callback: function(value, index,
                                            values) {
                                            return converRp(value)
                                        }
                                    }, ticksStyle)
                                }],
                                xAxes: [{
                                    display: true,
                                    gridLines: {
                                        display: false
                                    },
                                    ticks: ticksStyle
                                }]
                            }
                        }
                    })
                },
                error: function(response) {
                    console.log(response);
                }
            })
        })

        $(document).ready(function() {
            $('#table-terlaris').DataTable({
                processing: true,
                serverSide: true,
                searching: false,
                "bLengthChange": false,
                "bFilter": true,
                "bInfo": false,
                ajax: "{{ route('dashboard.menuTerlaris') }}",
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        className: 'text-center'
                    },
                    {
                        data: 'nama_produk',
                        name: 'nama_produk'
                    },
                    {
                        data: 'harga_produk',
                        name: 'harga_produk',
                        'render': function(data, type, full, meta) {
                            // change to IDR
                            return 'Rp. ' + data.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
                        },
                        className: 'text-right'
                    },
                    {
                        data: 'jumlah_produk_terjual',
                        name: 'jumlah_produk_terjual'
                    }
                ]
            })
        })

        $(document).ready(function() {
            $('#table-minuman-terlaris').DataTable({
                processing: true,
                serverSide: true,
                searching: false,
                "bLengthChange": false,
                "bFilter": true,
                "bInfo": false,
                ajax: "{{ route('dashboard.minumanTerlaris') }}",
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        className: 'text-center'
                    },
                    {
                        data: 'nama_produk',
                        name: 'nama_produk'
                    },
                    {
                        data: 'harga_produk',
                        name: 'harga_produk',
                        'render': function(data, type, full, meta) {
                            // change to IDR
                            return 'Rp. ' + data.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
                        },
                        className: 'text-right'
                    },
                    {
                        data: 'jumlah_produk_terjual',
                        name: 'jumlah_produk_terjual'
                    }
                ]
            })
        })

        $(document).ready(function() {
            getCalculationPendapatan();
        })

        function getCalculationPendapatan() {
            $.ajax({
                url: "{{ route('dashboard.getCalculationPendapatan') }}",
                type: "GET",
                cache: false,
                async: false,
                success: function(response) {
                    var data = response.data;
                    // console.log(data);
                    changeDataFromCalculate('penjualanBulan', data.pendapatanBulan
                        .penjualanSatuBulan, data.pendapatanBulan.percentageOfSalesGrowth,
                        data.pendapatanBulan.statusCalculation)
                    changeDataFromCalculate('penjualanMinggu', data.pendapatanMinggu
                        .penjualanSatuMinggu, data.pendapatanMinggu.percentageOfSalesGrowth,
                        data.pendapatanMinggu.statusCalculation)
                    changeDataFromCalculate('penjualanHari', data.pendapatanHari
                        .penjualanHariIni, data.pendapatanHari.percentageOfSalesGrowth,
                        data.pendapatanHari.statusCalculation)
                },
                error: function(response) {
                    console.log(response);
                }
            })
        }

        function changeDataFromCalculate(id, penjualanSatuBulan, percentageOfSalesGrowth, statusCalculation) {
            // change to IDR
            if (penjualanSatuBulan == null) {
                penjualanSatuBulan = 0;
            } else {
                penjualanSatuBulan;
            }

            $('#' + id).append(converRp(penjualanSatuBulan));

            // pembulatan 2 angka di belakang koma
            percentageOfSalesGrowth = percentageOfSalesGrowth.toFixed(2);
            switch (statusCalculation) {
                case 1:
                    $('#' + id + 'percentageOfSalesGrowth').append('<i class="fas fa-caret-left"></i> ' +
                        percentageOfSalesGrowth + '%')
                    $('#' + id + 'percentageOfSalesGrowth').addClass('text-warning')
                    break;
                case 2:
                    $('#' + id + 'percentageOfSalesGrowth').append('<i class="fas fa-caret-up"></i> ' +
                        percentageOfSalesGrowth + '%')
                    $('#' + id + 'percentageOfSalesGrowth').addClass('text-success')
                    break;
                case 3:
                    $('#' + id + 'percentageOfSalesGrowth').append('<i class="fas fa-caret-down"></i> ' +
                        percentageOfSalesGrowth + '%')
                    $('#' + id + 'percentageOfSalesGrowth').addClass('text-danger')
                    break;
                default:
                    $('#' + id + 'percentageOfSalesGrowth').append('<i class="fas fa-caret-left"></i> ' +
                        percentageOfSalesGrowth + '%')
                    $('#' + id + 'percentageOfSalesGrowth').addClass('text-warning')
                    break;
            }
        }

        function changeDataFromCalculateChart(id, percentageOfSalesGrowth, statusCalculation) {
            // pembulatan 2 angka di belakang koma
            percentageOfSalesGrowth = percentageOfSalesGrowth.toFixed(2);
            switch (statusCalculation) {
                case 1:
                    $('#' + id).append('<i class="fas fa-arrow-left"></i> ' +
                        percentageOfSalesGrowth + '%')
                    $('#' + id).addClass('text-warning')
                    break;
                case 2:
                    $('#' + id).append('<i class="fas fa-arrow-up"></i> ' +
                        percentageOfSalesGrowth + '%')
                    $('#' + id).addClass('text-success')
                    break;
                case 3:
                    $('#' + id).append('<i class="fas fa-arrow-down"></i> ' +
                        percentageOfSalesGrowth + '%')
                    $('#' + id).addClass('text-danger')
                    break;
                default:
                    $('#' + id).append('<i class="fas fa-arrow-left"></i> ' +
                        percentageOfSalesGrowth + '%')
                    $('#' + id).addClass('text-warning')
                    break;
            }
        }


        function converRp(params) {
            return ('Rp. ' + params.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.') ?? 0);
        }
    </script>
@endpush