@extends('layouts.app')
@section('htmlheader_title')
	Dashboard
@endsection

@section('content')
	<h1>{{ $user->name }}</h1>

	<div class="row">
		@if($user->systems->count())
			<div class="col-8">
				<div id="network_messages"></div>
			</div>

			<!-- System Addresses -->
			<div class="col-4">
				<div class="row">
					<div class="col-12">
						<table class="table monotable">
							<thead>
							<tr><th colspan="2">System Addresses</th></tr>
							</thead>
							<tbody>
							@foreach ($user->systems as $o)
								<tr>
									<th><a href="{{ url('ftn/system/addedit',[$o->id]) }}">{{ $o->name }}</a></th>
									<th class="text-end">{!! $o->addresses->pluck('ftn')->join('<br>') !!}</th>
								</tr>
							@endforeach
							</tbody>
						</table>
					</div>
				</div>

				<div class="row">
					<div class="col-12">
						<table class="table monotable">
							<thead>
							<tr><th colspan="2">Available Echos</th></tr>
							</thead>
							<tbody>
							@foreach ($user->systems as $o)
								<tr>
									<th><a href="{{ url('ftn/system/addedit',[$o->id]) }}">{{ $o->name }}</a></th>
									<th class="text-end">{!! $o->addresses->pluck('zone.domain.echoareas')->flatten()->pluck('name')->unique()->sort()->join(', ') !!}</th>
								</tr>
							@endforeach
							</tbody>
						</table>
					</div>
				</div>
			</div>
		@else
			<p>You are not linked to any BBS systems. Start <a href="{{ url('user/system/register') }}">here</a> to link to your first.</p>
		@endif
	</div>
@endsection

@section('page-css')
	<style>
		.highcharts-data-table table {
			min-width: 310px;
			max-width: 800px;
			margin: 1em auto;
		}
		.highcharts-data-table table {
			border-collapse: collapse;
			border: 1px solid #EBEBEB;
			margin: 10px auto;
			text-align: center;
			width: 100%;
			max-width: 500px;
		}
		.highcharts-data-table caption {
			padding: 1em 0;
			font-size: 1.2em;
			color: #555;
		}
		.highcharts-data-table th {
			font-weight: 600;
			padding: 0.5em;
		}
		.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
			padding: 0.5em;
		}
		{{--
		.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
			background: #f8f8f8;
		}
		.highcharts-data-table tr:hover {
			background: #f1f7ff;
		}
		--}}
	</style>
@append
@section('page-scripts')
	@js('highcharts')

	<script>
		@if($user->systems->count())
			// Create the chart
			Highcharts.chart('network_messages',{
				chart: {
					type: 'column',
					backgroundColor: '#0a0a0a',
				},
				credits: {
					enabled: false
				},
				exporting: {
					buttons: false
				},
				title: {
					text: 'Echomail Statistics'
				},
				subtitle: {
					text: '{{ sprintf('%s - %s',\Carbon\Carbon::now()->subMonths(6)->startOfMonth()->format('Y-m-d'),\Carbon\Carbon::now()->format('Y-m-d')) }}'
				},
				xAxis: {
					type: 'category'
				},
				yAxis: {
					title: {
						text: '# Msgs'
					},
					stackLabels: {
						enabled: true,
						style: {
							fontWeight: 'bold',
							color: (Highcharts.defaultOptions.title.style && Highcharts.defaultOptions.title.style.color) || 'gray'
						}
					}
				},
				legend: {
					align: 'right',
					//x: -30,
					verticalAlign: 'top',
					y: 40,
					floating: true,
					backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || 'white',
					borderColor: '#e0e0e0',
					borderWidth: 1,
					shadow: false
				},
				plotOptions: {
					column: {
						dataLabels: {
							enabled: true
						}
					},
					series: {
						borderWidth: 0,
						grouping: false,
					}
				},
				tooltip: {
					headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
					pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.0f}</b>'
				},
				series: [
					{
						name: 'Networks',
						colorByPoint: true,
						data: [
							@foreach(($xx=$user->systems->pluck('addresses')->flatten()->pluck('zone.domain')->unique(function($item) { return $item->name; })->sortBy('name')) as $do)
								{
									name: '{{ $do->name }}',
									y: {{ $do->daily_area_stats()->sum('y') }},
									drilldown: 'n-{{ $do->name }}',
								},
							@endforeach
						]
					},
					{
						name: 'Yours',
						colorByPoint: true,
						pointPlacement: 0.1,
						data: [
							@foreach($xx as $do)
								{
									name: '{{ $do->name }}',
									y: {{ $do->daily_area_stats(FALSE,$user->systems)->sum('y') }},
									drilldown: 'ny-{{ $do->name }}',
									color: Highcharts.color(Highcharts.getOptions().colors[{{$loop->index}}]).brighten(-0.2).get()
							},
							@endforeach
						]
					},
				],
				drilldown: {
					drillUpButton: {
						position: {
							x: 0,
							y: -50,
						}
					},
					series: [
						@foreach($xx as $do)
							{
								name: '{{ $do->name }}',
								id:  'n-{{ $do->name }}',
								data: {!! $do->daily_area_stats(TRUE)->sortBy('name')->map(function($item) { return ['name'=>$item['name'],'y'=>$item['data']->sum('y'),'drilldown'=>'e-'.$item['name']]; })->values() !!}
							},
						@endforeach

						@foreach($xx as $do)
							{
								name: '{{ $do->name }}',
								id:  'ny-{{ $do->name }}',
								data: {!! $do->daily_area_stats(TRUE,$user->systems)->sortBy('name')->map(function($item) { return ['name'=>$item['name'],'y'=>$item['data']->sum('y'),'drilldown'=>'ey-'.$item['name']]; })->values() !!}
							},
						@endforeach
					]
				},
			});
		@endif
	</script>
@append