<script src="{{ASSETS_ADMIN}}/js/plugins/chart3/chart.min.js"></script>
<script src="{{ASSETS_ADMIN}}/js/report/daily.js?v=1.2"></script>

var ctx = null;
var chart = null;

$(document).ready(function() {
    ctx = $('#mychart');
    chart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: [],
            datasets: [
                {
                    label: '營業額',
                    data: [],
                    backgroundColor: 'rgb(255, 99, 132, 0.5)',
                    borderColor: 'rgb(255, 99, 132)',
                    borderWidth: 1, 
                    yAxisID: 'y', 
                },
                {
                    label: '訂單數量',
                    type: 'line', 
                    data: [],
                    backgroundColor: 'rgb(255, 99, 0, 0.5)',
                    borderColor: 'rgb(255, 99, 0)',
                    borderWidth: 1, 
                    yAxisID: 'y1', 
                }
            ]
        },
        options: {
            responsive: true,
            plugins: {
              legend: {
                position: 'top',
              },
              title: {
                display: false,
                text: 'Chart.js Bar Chart'
              }
            },
            animation: {
                type: 'number', 
                x: {
                    duration: 0,
                    from: undefined, 
                    to: undefined,
                },
                y: {
                    duration: 3000,
                    from: undefined,
                    to: undefined,
                }
            },
            scales: {
                y: {
                    type: 'linear',
                    display: true,
                    position: 'left',
                },
                y1: {
                    type: 'linear',
                    display: true,
                    position: 'right',

                    // grid line settings
                    grid: {
                        drawOnChartArea: false, // only want the grid lines for one axis to show up
                    },
                },
            }
        }
    });

    $('#search').on('click', function(e) {
        report_data();
    });

    report_data();
});

function getRandomColor() {
    var r = Math.floor(Math.random() * 255);
    var g = Math.floor(Math.random() * 255);
    var b = Math.floor(Math.random() * 255);
    return "rgb(" + r + "," + g + "," + b + ", 0.5)";
}

function report_data(callback) {
    var params = {
        from: $('#from').val(),
        to: $('#to').val(),
    }
    $.get('/admin/report/daily/data', params, function(res) {
        //console.log(data);
        //return;
        if (typeof res.status == 'undefined') {
            alert(res);
            return;
        } else if (res.status == 'fail') {
            alert(res.message);
            return;
        }

        if (typeof callback == 'function') {
            callback.call(null, res.data);
        }

        var data = res.data;
        chart.data.labels = data.labels;
        chart.data.datasets[0].data = data.data;
        chart.data.datasets[1].data = data.data1;
        chart.update();

        $('.summary-total').html(data.total);
        $('.summary-avg').html(data.avg);
    });
}