@extends('layouts.app')

@section('content')
<div class="row g-3">
	<div class="col-lg-3">
		<div class="card">
			<div class="card-body">
				<div class="row align-items-center">
					<div class="col">
						<h6>Today Orders</h6>
						<h3 class="text-blue counter">{{ $firgures->today->orders_count }}</h3>
					</div>

					<div class="col-auto">
						<div class="dashboard-icon bg-blue">
							<i class="fas fa-truck"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="col-lg-3">
		<div class="card">
			<div class="card-body">
				<div class="row align-items-center">
					<div class="col">
						<h6>This Month Orders</h6>
						<h3 class="text-blue counter">{{ $firgures->this_month->orders_count }}</h3>
					</div>

					<div class="col-auto">
						<div class="dashboard-icon bg-teal">
							<i class="fas fa-truck"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="col-lg-3">
		<div class="card">
			<div class="card-body">
				<div class="row align-items-center">
					<div class="col">
						<h6>This Year Orders</h6>
						<h3 class="text-yellow counter">{{ $firgures->this_year->orders_count }}</h3>
					</div>

					<div class="col-auto">
						<div class="dashboard-icon bg-yellow">
							<i class="fas fa-truck"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>	

	<div class="col-lg-3">
		<div class="card">
			<div class="card-body">
				<div class="row align-items-center">
					<div class="col">
						<h6>Total Orders</h6>
						<h3 class="text-red counter">{{ $firgures->total->orders_count }}</h3>
					</div>

					<div class="col-auto">
						<div class="dashboard-icon bg-red">
							<i class="fas fa-truck"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- 2nd row -->
	<div class="col-lg-3">
		<div class="card">
			<div class="card-body">
				<div class="row align-items-center">
					<div class="col">
						<h6>Today Sales Amount</h6>
						<h3 class="text-blue counter">{{ $firgures->today->sales_amount }}</h3>
					</div>

					<div class="col-auto">
						<div class="dashboard-icon bg-blue">
							<i class="fas fa-money-check-alt"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="col-lg-3">
		<div class="card">
			<div class="card-body">
				<div class="row align-items-center">
					<div class="col">
						<h6>This Month Sales Amount</h6>
						<h3 class="text-blue counter">{{ $firgures->this_month->sales_amount }}</h3>
					</div>

					<div class="col-auto">
						<div class="dashboard-icon bg-teal">
							<i class="fas fa-money-check-alt"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="col-lg-3">
		<div class="card">
			<div class="card-body">
				<div class="row align-items-center">
					<div class="col">
						<h6>This Year Sales Amount</h6>
						<h3 class="text-yellow counter">{{ $firgures->this_year->sales_amount }}</h3>
					</div>

					<div class="col-auto">
						<div class="dashboard-icon bg-yellow">
							<i class="fas fa-money-check-alt"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="col-lg-3">
		<div class="card">
			<div class="card-body">
				<div class="row align-items-center">
					<div class="col">
						<h6>Total Sales Amount</h6>
						<h3 class="text-red counter">{{ $firgures->total->sales_amount }}</h3>
					</div>

					<div class="col-auto">
						<div class="dashboard-icon bg-red">
							<i class="fas fa-money-check-alt"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- 3RD row -->
	<div class="col-lg-6">
		<div class="card">
			<h6 class="card-header py-3">Top 10 Best Selling Products in Last 90 days</h6>

			<div class="card-body">
				<canvas id="popularProducts" width="768" height="350" data-chart="{{ $best_selling_products }}"></canvas>
			</div>
		</div>
	</div>

	<div class="col-lg-6">
		<div class="card">
			<h6 class="card-header py-3">Top 10 Best Selling Product Categories in Last 90 days</h6>

			<div class="card-body">
				<canvas id="popularCategories" width="768" height="350" data-chart="{{ $best_selling_product_categories }}"></canvas>
			</div>
		</div>
	</div>

	<!-- 4th row -->
	<div class="col-lg-6">
		<div class="card">
			<h6 class="card-header py-3">Top 10 Highest Rated Products in Last 90 days</h6>

			<div class="card-body">
				<canvas id="highestRatedProducts" width="768" height="350" data-chart="{{ $highest_rated_products }}"></canvas>
			</div>
		</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 = {
		blue: '#4099ff',
		teal: '#00bcd4',
		red: '#ff5370',
		yellow: '#ffb64d',
		success: '#2ad0af'
	};

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

	function renderPopularProductsChart()
	{
		let chart  = $('#popularProducts');
		let ctx    = chart[0].getContext('2d');
		let labels = [];
		let data   = [];

		$.each(chart.data('chart'), function(i, item)
		{
			labels.push(item.name);
			data.push(item.total);
		});

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

	function renderPopularCategoriesChart()
	{
		let chart  = $('#popularCategories');
		let ctx    = chart[0].getContext('2d');
		let labels = [];
		let data   = [];

		$.each(chart.data('chart'), function(i, item)
		{
			labels.push(item.name);
			data.push(item.total);
		});

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

	function renderHighestRatedProductsChart()
	{
		let chart  = $('#highestRatedProducts');
		let ctx    = chart[0].getContext('2d');
		let labels = [];
		let data   = [];

		$.each(chart.data('chart'), function(i, item)
		{
			labels.push(item.name);
			data.push(item.average_ratings);
		});

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

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

		renderPopularProductsChart();
		renderPopularCategoriesChart();
		renderHighestRatedProductsChart();
	});
</script>
@endsection