@extends('layouts.handa')
	@section('content')
		<link rel="stylesheet" type="text/css" href="{{ asset('extensions/morris/morris.css') }}">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<div class="float-left">
						<h3><strong>Dashboard</strong></h3>
					</div>
					<div class="float-right">
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-4">
					<div class="card">
						<div class="card-header bg-success">
							<div class="row">
								<div class="col-md-3">
									<div class="float-left fa fa-envelope fa-5x"></div>
								</div>
								<div class="col-md-9 text-right">
									<h2>{{ number_format($bulletins_sent) }}</h2>
									<div>Bulletins Sent</div>
								</div>
							</div>
						</div>
						<a href="{{ url('backdoor/bulletins') }}">
							<div class="card-footer clearfix py-2 px-3">
								<div class="float-left text-success">View Details</div>
								<div class="float-right text-success"><i class="fa fa-arrow-circle-right"></i></div>
							</div>
						</a>
					</div>
				</div>
				<div class="col-md-4">
					<div class="card">
						<div class="card-header bg-primary">
							<div class="row">
								<div class="col-md-3">
									<div class="float-left fa fa-phone fa-5x"></div>
								</div>
								<div class="col-md-9 text-right">
									<h2>{{ number_format($contacts) }}</h2>
									<div>Contacts</div>
								</div>
							</div>
						</div>
						<a href="{{ url('backdoor/contacts') }}">
							<div class="card-footer clearfix py-2 px-3">
								<div class="float-left text-primary">View Details</div>
								<div class="float-right text-primary"><i class="fa fa-arrow-circle-right"></i></div>
							</div>
						</a>
					</div>
				</div>
				<div class="col-md-4">
					<div class="card">
						<div class="card-header bg-info">
							<div class="row">
								<div class="col-md-3">
									<div class="float-left fa fa-users fa-5x"></div>
								</div>
								<div class="col-md-9 text-right">
									<h2>{{ number_format($admins) }}</h2>
									<div>Administrators</div>
								</div>
							</div>
						</div>
						<a href="{{ url('backdoor/users') }}">
							<div class="card-footer clearfix py-2 px-3">
								<div class="float-left text-info">View Details</div>
								<div class="float-right text-info"><i class="fa fa-arrow-circle-right"></i></div>
							</div>
						</a>
					</div>
				</div>
			</div>
			<br>
			<div class="row">
				<div class="col-md-12">
					<div class="card">
						<div class="card-header">
							<div class="float-left"><span class="fa fa-bar-chart-o"></span> SMS Activity</div>
						</div>
						<div class="card-body">
							<div id="sms-logs"></div>
						</div>
					</div>
				</div>
			</div>
			<br>
			<div class="row">
				<div class="col-md-12">
					<div class="card card">
						<div class="card-header">
							<div class="float-left"><span class="fa fa-bar-chart-o fa-fw"></span> Bulletin Activity</div>
						</div>
						<div class="card-body">
							<div id="bulletin-logs"></div>
						</div>
					</div>
				</div>
			</div>
			<br>
		</div>

		<script type="text/javascript" src="{{ asset('extensions/morris/raphael.min.js') }}"></script>
		<script type="text/javascript" src="{{ asset('extensions/morris/morris.min.js')}}"></script>

		<script type="text/javascript">
			var labels = {!! $bt_type !!};
			var year = new Date().getFullYear();
			line_chart(year);
			bar_chart(year);

			$('#sms-year').change(function() {
				year = $(this).val();
				line_chart(year);
			});
			
			$('#bulletin-year').change(function() {
				year = $(this).val();
				bar_chart(year);
			});

			var sms_chart = Morris.Line({
					  element: 'sms-logs',
					  data: '',
					  xkey: 'Year',
					  ykeys: ['Sent', 'Failed', 'Received'],
					  labels: ['Sent', 'Failed', 'Received'],
					  hideHover: 'auto',
					  parseTime: false,
					  xLabelAngle: 40
					});

			var bulletin_chart = Morris.Bar({
					  element: 'bulletin-logs',
					  data: '',
					  xkey: 'Year',
					  ykeys: labels,
					  labels: labels,
					  hideHover: 'auto',
					  stacked:  'true',
					  parseTime: false,
					  xLabelAngle: 40
			});

			function line_chart(year)
			{
				$.ajax({
					url: '{{ url("backdoor/dashboard/line_chart_data") }}',
					type: 'get',
					data: { year: year },
					dataType: "json",
					success: function(data) {
						sms_chart.setData(data);
					}
				});
			}

			function bar_chart(year)
			{
				$.ajax({
					url: '{{ url("backdoor/dashboard/bar_chart_data") }}',
					type: 'get',
					data: { year: year },
					dataType: "json",
					success: function(data) {
						bulletin_chart.setData(data);
					}
				});
			}

		</script>
	@stop