@extends('layouts.admin')
@section('content-title')
	{{ __('admin.Dashboard') }}
@endsection
@section('content-breadcrumbs')
	{{ Breadcrumbs::render('admin')}}
@endsection
@section('content')
	<div class="row">
		<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">						
			<div class="card mb-3">
				<div class="card-header">
					<h3><i class="fa fa-bar-chart-o"></i> Entreprises Exportatrices par secteur</h3>
				</div>
					
				<div class="card-body">
					<canvas id="pieChart1"></canvas>
				</div>
				<div class="card-footer small text-muted">Dernière mis à jour : {{$rlast_date}}</div>
			</div><!-- end card-->					
		</div>
		<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">						
			<div class="card mb-3">
				<div class="card-header">
					<h3><i class="fa fa-bar-chart-o"></i> Chiffre d'affaire à l'export par secteur</h3>
				</div>
					
				<div class="card-body">
					<canvas id="pieChart2"></canvas>
				</div>
				<div class="card-footer small text-muted">Dernière mis à jour : {{$rlast_date}}</div>
			</div><!-- end card-->					
		</div>
		<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">						
			<div class="card mb-3">
				<div class="card-header">
					<h3><i class="fa fa-bar-chart-o"></i> Entreprises exportatrices par région</h3>
				</div>
					
				<div class="card-body">
					<canvas id="pieChart3"></canvas>
				</div>
				<div class="card-footer small text-muted">Dernière mis à jour : {{$slast_date}}</div>
			</div><!-- end card-->					
		</div>
		<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">						
			<div class="card mb-3">
				<div class="card-header">
					<h3><i class="fa fa-bar-chart-o"></i> Chiffre d'affaire à l'export par région</h3>
				</div>
					
				<div class="card-body">
					<canvas id="pieChart4"></canvas>
				</div>
				<div class="card-footer small text-muted">Dernière mis à jour : {{$slast_date}}</div>
			</div><!-- end card-->					
		</div>
	</div>
@endsection
@section('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script type="text/javascript">
		var ctx1 = document.getElementById("pieChart1").getContext('2d');
	var pieChart = new Chart(ctx1, {
		type: 'pie',
		data: {
				datasets: [{
					data: [
					@foreach ($sectorfacts as $sectorfact)
						{{$sectorfact->nb_companies}}, 
					@endforeach
					],
					backgroundColor: [
					
						'#011638',
						'#95CE82',
						'#2274A5',
						'#EF6F6C',
						'#F6C5AF',
						'#7C6C77',
						'#30292F',
						'#D1D0A3',
						'#413F54',
						'#22AED1',
						'#444A8E',
						'#74A4BC',
						'#FF3A20',
						'#3A6EA5',
						'#004E98',
						'#7FFFFF',
						'#FF669B',
						'#9F2BFF',
						'#015031',
					],
					label: 'Dataset 2'
				}],
				labels: [
					@foreach ($sectorfacts as $sectorfact)
						"{!!$sectorfact->sector!!}", 
					@endforeach
				]
			},
			options: {
				responsive: true,
				legend: {
		            display: true,
		          	position: 'right',
		            labels: {
		                fontColor: '#333',
		                fontFamily: 'sans-serif',
		            }
		        }
			}
	 
	});
	var ctx2 = document.getElementById("pieChart2").getContext('2d');
	var pieChart = new Chart(ctx2, {
		type: 'pie',
		data: {
				datasets: [{
					data: [
					@foreach ($sectorfacts as $sectorfact)
						{{$sectorfact->turnover}}, 
					@endforeach
					],
					backgroundColor: [
					
						'#011638',
						'#95CE82',
						'#2274A5',
						'#EF6F6C',
						'#F6C5AF',
						'#7C6C77',
						'#30292F',
						'#D1D0A3',
						'#413F54',
						'#22AED1',
						'#444A8E',
						'#74A4BC',
						'#FF3A20',
						'#3A6EA5',
						'#004E98',
						'#7FFFFF',
						'#FF669B',
						'#9F2BFF',
						'#015031',
					],
					label: 'Dataset 2'
				}],
				labels: [
					@foreach ($sectorfacts as $sectorfact)
						"{!!$sectorfact->sector!!}", 
					@endforeach
				]
			},
			options: {
				responsive: true,
				legend: {
		            display: true,
		          	position: 'right',
		            labels: {
		                fontColor: '#333',
		                fontFamily: 'sans-serif',
		            }
		        },
		        tooltips: {
	                enabled: true,
	                callbacks: {
	                    label: function (tooltipItems, data) {
	                        return data.labels[tooltipItems.index] + ' : ' + data.datasets[0].data[tooltipItems.index] + 'MDH';
	                    }
	                }
	            }
			}
	 
	});
	var ctx3 = document.getElementById("pieChart3").getContext('2d');
	var pieChart = new Chart(ctx3, {
		type: 'pie',
		data: {
				datasets: [{
					data: [
					@foreach ($regionfacts as $regionfact)
						{{$regionfact->nb_companies}}, 
					@endforeach
					],
					backgroundColor: [
					
						'#011638',
						'#95CE82',
						'#2274A5',
						'#EF6F6C',
						'#F6C5AF',
						'#7C6C77',
						'#30292F',
						'#D1D0A3',
						'#413F54',
						'#22AED1',
						'#444A8E',
						'#74A4BC',
						'#FF3A20',
						'#3A6EA5',
						'#004E98',
						'#7FFFFF',
						'#FF669B',
						'#9F2BFF',
						'#015031',
					],
					label: 'Dataset 1'
				}],
				labels: [
					@foreach ($regionfacts as $regionfact)
						"{!!$regionfact->name!!}", 
					@endforeach
				]
			},
			options: {
				responsive: true,
				legend: {
		            display: true,
		          	position: 'right',
		            labels: {
		                fontColor: '#333',
		                fontFamily: 'sans-serif',
		            }
		        }
			}
	 
	});
	var ctx4 = document.getElementById("pieChart4").getContext('2d');
	var pieChart = new Chart(ctx4, {
		type: 'pie',
		data: {
				datasets: [{
					data: [
					@foreach ($regionfacts as $regionfact)
						{{$regionfact->turnover}}, 
					@endforeach
					],
					backgroundColor: [
					
						'#011638',
						'#95CE82',
						'#2274A5',
						'#EF6F6C',
						'#F6C5AF',
						'#7C6C77',
						'#30292F',
						'#D1D0A3',
						'#413F54',
						'#22AED1',
						'#444A8E',
						'#74A4BC',
						'#FF3A20',
						'#3A6EA5',
						'#004E98',
						'#7FFFFF',
						'#FF669B',
						'#9F2BFF',
						'#015031',
					],
					label: 'Dataset 1'
				}],
				labels: [
					@foreach ($regionfacts as $regionfact)
						"{!!$regionfact->name!!}", 
					@endforeach
				]
			},
			options: {
				responsive: true,
				legend: {
		            display: true,
		          	position: 'right',
		            labels: {
		                fontColor: '#333',
		                fontFamily: 'sans-serif',
		            }
		        },
		        tooltips: {
	                enabled: true,
	                callbacks: {
	                    label: function (tooltipItems, data) {
	                        return data.labels[tooltipItems.index] + ' : ' + data.datasets[0].data[tooltipItems.index] + 'MDH';
	                    }
	                }
	            }
			}
	 
	});

</script>
@endsection