@section('panelTitle')
    {{ trans('Orders::admin/dashboard.chart.panel_title') }}
@overwrite
@section('panelContent')
    <canvas id="ordersChart" class="full-width"></canvas>
@overwrite
@include('admin.layouts.includes.panel', ['id' => 'admin-orders-chart'])

@push('footScripts')
<script>
    var ordersChartHandler = function() {
        var options = {
            responsive: true,
            scaleShowGridLines: true,
            scaleGridLineColor: 'rgba(0,0,0,.05)',
            scaleGridLineWidth: 1,
            bezierCurve: true,
            bezierCurveTension: 0.4,
            pointDot: true,
            pointDotRadius: 4,
            pointDotStrokeWidth: 1,
            pointHitDetectionRadius: 20,
            datasetStroke: true,
            datasetStrokeWidth: 2,
            datasetFill: true,
            tooltips: {
                callbacks: {
                    label: function(tooltipItems, data) {
                        var label = data['datasets'][tooltipItems.datasetIndex]['label'] + ': ' + tooltipItems.yLabel;
                        if (tooltipItems.datasetIndex === 1){
                            label += ' zł';
                        }

                        return label;
                    }
                }
            }
        };
        var data = {
            labels: [],
            datasets: [{
                label: '{{ c_trans('Wartość zamówień') }}',
                backgroundColor: 'rgba(95, 130, 149, 0.2)',
                borderColor: 'rgba(95, 130, 149, 1)',
                pointHoverBackgroundColor: 'rgba(95, 130, 149, 1)',
                borderWidth: 1,
                data: []
            }]
        };

        @if(!empty($chartData))
            @foreach($chartData as $date => $ordersData)
                data.labels.push('{{ $date }}');
                data.datasets[0].data.push('{{ $ordersData['orders_value'] }}');
            @endforeach
        @endif

        var ctx = $("#ordersChart").get(0).getContext("2d");
        $("#ordersChart").get(0).height = 100;

        new Chart(ctx, {
            type: "line",
            data: data,
            options: options
        });
    };

    $(document).ready(function () {
        ordersChartHandler();
    });
</script>
@endpush