@extends('adminlte::page')
@section('title', $pageTitle)
@section('content_header')
	<h1>{{ $pageTitle }}</h1>
@stop
@section('content')
	@include('advancedsearch.analytics.tabs')
	@include('advancedsearch.analytics.selectfilter')
	@if($countries->count())
		<div class="row">
			<div class="col-sm-5">
				<table class="table table-striped">
					<tr>
						<th>Country</th>
						<th># of Searches</th>
					</tr>
					@foreach($countries as $row)
						<tr>
							<td>{{$row->country}}</td>
							<td class="center">{{$row->count}}</td>
						</tr>
					@endforeach
				</table>
			</div>
			<div class="col-sm-7">
				<canvas id="myChart" width="400" height="400"></canvas>
			</div>
		</div>
	@else
		<div class="row">
			<div class="col-sm-12 text-center">
				<h3>Sorry, you do not have any matching analytics from that time frame.</h3>
			</div>
		</div>
	@endif
@stop
@section('js')
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js" integrity="sha256-N4u5BjTLNwmGul6RgLoESPNqDFVUibVuOYhP4gJgrew=" crossorigin="anonymous"></script>
	<script>
		var poolColors = function (a) {
			var pool = [];
			for(i=0;i<a;i++){
				pool.push(dynamicColors());
			}
			return pool;
		};
		var dynamicColors = function() {
			var r = Math.floor(Math.random() * 255);
			var g = Math.floor(Math.random() * 255);
			var b = Math.floor(Math.random() * 255);
			return "rgb(" + r + "," + g + "," + b + ")";
		};
		var ctx = document.getElementById("myChart");
		var myChart = new Chart(ctx, {
			type: 'pie',
			data: {
				datasets: [{
					data: {!!$countries->pluck('count')->toJson()!!},
					backgroundColor: poolColors({{$countries->count()}})
				}],
				labels: {!!$countries->pluck('country')->toJson()!!}
			},
			options: {
				title: {
					display: true,
					text: 'Country Breakdown',
					position: 'top'
				}
			},
			scales: {
				xAxes: [{
					ticks: {
						beginAtZero: true
					}
				}]
			}
		});
	</script>
@append