@extends('layouts.admin', ['title' => 'نمودار فروش هر کالا'])

@section('css')
	<style href="/chart.js/Chart.min.css" rel="stylesheet" type="text/css"></style>
@endsection

@section('content')
<div class="row">
	<div class="col-md-6">   
		<h3>نمودار فروش هر کالا {{ $title != '' ? ' - ' . $title : '' }}</h3> 
	</div>
	<div class="col-md-6" style="text-align:left;">  
  </div>
</div>

<div class="row" style="margin-bottom: 20px;">
	<div class="col-md-12">
		 
		@if(count($productsIdsHash) == 0)
		<a href="/admin/charts/orders/byproducts" class="btn btn-link">بازگشت</a>
		@else
		<form class="form-inline" action="{{ url('/admin/charts/orders/byproducts')}}" method="get">
		 
			<div class="form-group">
				<label for="option_hash">نوع :</label>
				<select class="form-control" id="option_hash" name="hash">
					<option value="null" selected="selected" >انتخاب کنید...</option> 
					@foreach($productsIdsHash as $item) 
						<option value="{{ $item->option_hash }}" >{{ $item->title }}</option>
					@endforeach 
				</select> 
			</div>
			 
			<button type="submit" class="btn btn-primary" >نمایش</button>
			  
		</form>
		@endif
	</div>
</div>
  

@if(count($arrCurrentYearOrders)==0 )
	<div class="alert alert-info" role="alert">
	  اطلاعاتی برای نمایش دادن وجود ندارد.
	</div>
@else
	  
<div class="row">
	<div class="col-md-12">

		<div style="width:100%;">
			<canvas id="canvas"></canvas>
		</div>
		 
	</div> 
</div>
    
@endif

@stop

@section('javascript')

	<script src="/chart.js/Chart.min.js"></script>
	<script src="/chart.js/Chart.bundle.min.js"></script>

	<script>
 
		window.chartColors = {
			red: 'rgb(255, 99, 132)',
			orange: 'rgb(255, 159, 64)',
			yellow: 'rgb(255, 205, 86)',
			green: 'rgb(75, 192, 192)',
			blue: 'rgb(54, 162, 235)',
			purple: 'rgb(153, 102, 255)',
			grey: 'rgb(201, 203, 207)'
		};
		

		var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
		var config = {
			type: 'line',
			data: {
				labels: ['فروردین', 'اردیبهشت', 'خرداد', 'تیر', 'مرداد', 'شهریور', 'مهر', 'آبان', 'آذر', 'دی', 'بهمن', 'اسفند'],
				datasets: [{
					label: 'سال {{ $currentYear }}',
					backgroundColor: window.chartColors.red,
					borderColor: window.chartColors.red,
					data: [
						@foreach($arrCurrentYearOrders as $item)
						{{ $item["count"] }},
						@endforeach 
					],
					fill: false,
				}, {
					label: 'سال {{ $lastYear }}',
					fill: false,
					backgroundColor: window.chartColors.blue,
					borderColor: window.chartColors.blue,
					data: [
						@foreach($arrLastYearOrders as $item)
						{{ $item["count"] }},
						@endforeach 
					],
				}]
			},
			options: {
				responsive: true,
				title: {
					display: true,
					text: 'نمودار فروش {{ $title }}'
				},
				tooltips: {
					mode: 'index',
					intersect: false,
				},
				hover: {
					mode: 'nearest',
					intersect: true
				},
				scales: {
					xAxes: [{
						display: true,
						scaleLabel: {
							display: true,
							labelString: 'ماه'
						}
					}],
					yAxes: [{
						display: true,
						scaleLabel: {
							display: true,
							labelString: 'تعداد فروش'
						}
					}]
				}
			}
		};

		window.onload = function() {
			var ctx = document.getElementById('canvas').getContext('2d');
			window.myLine = new Chart(ctx, config);
		};
 
	</script>
@endsection