@extends('adminlte::page')
@section('title', $pageTitle)
@section('content_header')
	<h1>{{ $pageTitle }}</h1>
@stop
@section('content')
	@include('advancedsearch.analytics.tabs')
	@include('advancedsearch.analytics.selectfilter')
	@if($devices->count())
		<div class="row">
			<div class="col-md-6">
				<table class="table table-striped">
					<tr>
						<th colspan="2">Top Devices ({{$devices->count()}})</th>
					</tr>
					<tr>
						<th>Device</th>
						<th># of Searches</th>
					</tr>
					@foreach($devices as $device)
						<tr>
							<td>{{$device->device_type}}</td>
							<td>{{$device->count}}</td>
						</tr>
					@endforeach
				</table>
			</div>
			<div class="col-md-6">
				<canvas id="deviceChart" width="500" height="500"></canvas>
			</div>
		</div>
	@else
		<div class="text-center"><h3>Sorry, you do not have any matching analytics from that time frame.</h3></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 ctx = document.getElementById("deviceChart");
		var myChart = new Chart(ctx, {
			type: 'pie',
			data: {
				datasets: [{
					data: {!!$devices->pluck('count')->toJson()!!},
					backgroundColor: ['rgb(13,44,84)','rgb(127,184,0)','rgb(0,166,237)','rgb(246,81,29)']
				}],
				labels: {!!$devices->pluck('device_type')->toJson()!!}
			},
			options: {
				title: {
					display: true,
					text: 'Devices',
					position:'top'
				}
			},
			scales: {
				xAxes: [{
					ticks: {
						beginAtZero: true
					}
				}]
			}
		});
	</script>
@append