@extends('layouts.app')

@section('content')

<div class="grid gap-3 xlarge-4 large-2">
	<div class="card dashboard-card">
		<div class="card-body">
			<div class="row align-items-center">
				<div class="col">
					<h6>Total Available Points</h6>
					<h3 class="text-secondary">{{ $firgures->total->available_points }}</h3>
				</div>
			</div>
		</div>
	</div>

	<div class="card dashboard-card">
		<div class="card-body">
			<div class="row align-items-center">
				<div class="col">
					<h6>New User This Month</h6>
					<h3 class="text-secondary">{{ $firgures->this_month->new_user }}</h3>
				</div>
			</div>
		</div>
	</div>

	<div class="card dashboard-card">
		<div class="card-body">
			<div class="row align-items-center">
				<div class="col">
					<h6>Total User</h6>
					<h3 class="text-secondary">{{ $firgures->total->user_count }}</h3>
				</div>
			</div>
		</div>
	</div>

	<div class="card dashboard-card">
		<div class="card-body">
			<div class="row align-items-center">
				<div class="col">
					<h6>Total Pending Order</h6>
					<h3 class="text-secondary">{{ $firgures->total->orders_count }}</h3>
				</div>
			</div>
		</div>
	</div>

	<!- - 2nd row - ->
	<div class="card large-2x1">
		<h6 class="card-header text-center">Top 10 Best Selling Products in Last 90 days</h6>

		<div class="card-body">
			<canvas id="popularProducts" width="768" height="350" data-type="bar" data-color="spink" data-statistics="{{ $bestSellingProducts }}"></canvas>
		</div>
	</div>

	<div class="card large-2x1">
		<h6 class="card-header text-center">Top 10 Users Has Most Points</h6>

		<div class="card-body">
			<canvas id="mostPoints" width="768" height="350" data-type="bar" data-color="spink1" data-statistics="{{ $userMostPoints }}"></canvas>
		</div>
	</div>
</div>

@endsection

@section('js')
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.0.1/jquery-migrate.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script>
    const colors = {
        spink: 'rgb(221 141 141)',
        spink1: 'rgb(244 182 183)',
    };

    const options = {
        legend: {
            display: false
        },
        scales: {
            xAxes: [{
                maxBarThickness: 50,
                ticks: {
			        autoSkip: false
			    }
            }],
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        },
        scaleShowValues: true
    };

    function renderBarChart(canvas, color, statistics)
    {   
        const labels = [];
        const data   = [];
        const ctx    = canvas.getContext('2d');

        statistics.forEach(function(item)
        {
            labels.push(item.label);
            data.push(item.data);
        });

        new Chart(ctx, 
        {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                    backgroundColor: colors[color],
                    data: data
                }]
            },
            options: options
        });
    }

    $('.counter').counterUp();

    $('canvas').each(function()
    {
        const type       = $(this).data('type');
        const color      = $(this).data('color');
        const statistics = $(this).data('statistics');
        
        if (type == 'bar')
        {
            renderBarChart(this, color, statistics);
        }
    });
</script>
@endsection