@extends('layouts.authenticated')
@section('home','active')
@section('content')
    <!--div class="container">
	<div class="row">
		<div class="col-md-10 col-md-offset-2">
			<div class="panel panel-default">
				<div class="panel-heading">Home</div>

				<div class="panel-body">
					You are logged in!
				</div>
			</div>
		</div>
	</div>
</div-->
    <div class="panel panel-info">
        <div class="panel-heading">Home</div>

        <div class="panel-body">
            You are logged in!
           {{-- <div class="chart">
                <canvas id="barChart"
                        style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
            </div>--}}
        </div>
    </div>

@endsection
<script src="../../plugins/jquery/jquery.min.js"></script>
<script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../../plugins/chart.js/Chart.min.js"></script>
<script src="../../dist/js/adminlte.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var areaChartData = {
            labels: {!! json_encode($data['label']) !!},
            datasets: [
                {
                    label: 'Refund',
                    backgroundColor: 'red',
                    borderColor: 'red',
                    pointRadius: false,
                    pointColor: 'red',
                    pointStrokeColor: 'red',
                    pointHighlightFill: '#fff',
                    pointHighlightStroke: 'red',
                    data: {!! json_encode($data['refund']) !!}
                },
                {
                    label: 'Sales',
                    backgroundColor: 'rgba(60,141,188,0.9)',
                    borderColor: 'rgba(60,141,188,0.8)',
                    pointRadius: false,
                    pointColor: '#3b8bba',
                    pointStrokeColor: 'rgba(60,141,188,1)',
                    pointHighlightFill: '#fff',
                    pointHighlightStroke: 'rgba(60,141,188,1)',
                    data: {!! json_encode($data['sale']) !!}
                },
            ]
        }

        var barChartCanvas = $('#barChart').get(0).getContext('2d')
        var barChartData = $.extend(true, {}, areaChartData)
        var temp0 = areaChartData.datasets[0]
        var temp1 = areaChartData.datasets[1]
        barChartData.datasets[0] = temp1
        barChartData.datasets[1] = temp0

        var barChartOptions = {
            responsive: true,
            maintainAspectRatio: false,
            datasetFill: false,
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true,
                        userCallback: function (value) {
                            return formatCount(value);
                        }
                    }
                }]
            },
            tooltips: {
                enabled: true,
                mode: 'index',
                intersect: false,
                callbacks: {
                    label: function (tooltipItem, data) {
                        var tooltipValue = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];

                        return  data.datasets[tooltipItem.datasetIndex].label+ ' ' + parseInt(tooltipValue).toLocaleString();
                    }
                }
            }
        }

        new Chart(barChartCanvas, {
            type: 'bar',
            data: barChartData,
            options: barChartOptions
        })
    })

    function formatCount(value) {
        const COUNT_FORMATS =
            [{letter: '', limit: 1e3},
                {letter: 'K', limit: 1e6},
                {letter: 'M', limit: 1e9},
                {letter: 'B', limit: 1e12},
                {letter: 'T', limit: 1e15}];
        negative = '';
        if (value < 0) {
            negative = '-';
            value = value * -1;
        }
        const format = COUNT_FORMATS.find(format => (value < format.limit));
        value = (1000 * value / format.limit);
        return (negative + value + format.letter);
    }

</script>