{% extends 'TgaAudienceBundle::layout.html.twig' %}

{% block title %}Visitors{% endblock %}

{% block visitors %} class="current"{% endblock %}

{% block content %}
	<h3>Visitors</h3>

	<div class="row">
		<div class="span6">
			<h4>Browsers</h4>
			<div id="browsers" style="width: 100%; height: 300px;"></div>
		</div>
		<div class="span6">
			<h4>Platforms</h4>
			<div id="platforms" style="width: 100%; height: 300px;"></div>
		</div>
	</div>

	<div class="row">
		<div class="span6">
			<h4>Browsers versions</h4>

			<table class="table table-hover">
				<thead>
				<tr>
					<th style="width: 25px;">#</th>
					<th>Route</th>
					<th style="width: 100px;">Visitors</th>
					<th style="width: 100px;">Percentage</th>
				</tr>
				</thead>
				<tbody>
				{% for browser in browsersVersions %}
					<tr>
						<td>{{ browser.place }}</td>
						<td>{{ browser.name }}</td>
						<td>{{ browser.nb }}</td>
						<td>{{ browser.percentage }} %</td>
					</tr>
				{% else %}
					<tr>
						<td colspan="4">No browser available.</td>
					</tr>
				{% endfor %}
				</tbody>
			</table>
		</div>

		<div class="span6">
			<h4>Most used routes</h4>

			<table class="table table-hover">
				<thead>
				<tr>
					<th style="width: 25px;">#</th>
					<th>Route</th>
					<th style="width: 100px;">Visitors</th>
					<th style="width: 100px;">Percentage</th>
				</tr>
				</thead>
				<tbody>
				{% for route in mostUsedRoutes %}
					<tr>
						<td>{{ route.place }}</td>
						<td>{{ route.route }}</td>
						<td>{{ route.nb }}</td>
						<td>{{ route.percentage }} %</td>
					</tr>
				{% else %}
					<tr>
						<td colspan="4">No route available.</td>
					</tr>
				{% endfor %}
				</tbody>
			</table>

		</div>
	</div>
{% endblock %}

{% block javascripts %}
	<script type="text/javascript" src="https://www.google.com/jsapi"></script>
	<script type="text/javascript">
		google.load("visualization", "1", { packages:["corechart"] });
		google.setOnLoadCallback(drawChart);

		function drawChart() {
			var browsers = new google.visualization.PieChart(document.getElementById('browsers'));
			browsers.draw(google.visualization.arrayToDataTable({{ browsers|raw }}), {});

			var platforms = new google.visualization.PieChart(document.getElementById('platforms'));
			platforms.draw(google.visualization.arrayToDataTable({{ platforms|raw }}), {});
		}
	</script>
{% endblock %}