@extends('layouts.app')
@section('htmlheader_title')
{{ $o->name }}
@endsection

@section('content')
	<h1>{{ $o->name }} <small class="float-end pt-4">Last Update: {{ $o->updated_at->format('Y-m-d H:i') }}</small></h1>

	<p class="float-end"><small>Expand each heading for information about this FTN network</small></p>

	<div class="accordion" id="accordion_homepage">
		<!-- About -->
		<div class="accordion-item">
			<h3 class="accordion-header" id="about" data-bs-toggle="collapse" data-bs-target="#collapse_about" aria-expanded="true" aria-controls="collapse_about">About</h3>

			<div id="collapse_about" class="accordion-collapse collapse show" aria-labelledby="about" data-bs-parent="#accordion_homepage">
				<div class="accordion-body">
					<div class="float-end" style="max-height: 25em;" id="network_traffic"></div>
					{!! \Illuminate\Mail\Markdown::parse($o->homepage) !!}
				</div>
			</div>
		</div>

		<!-- Echomail -->
		<div class="accordion-item open">
			<h3 class="accordion-header" id="echoareas"  data-bs-toggle="collapse" data-bs-target="#collapse_echoareas" aria-expanded="false" aria-controls="collapse_echoareas">Echo Areas</h3>

			<div id="collapse_echoareas" class="accordion-collapse collapse" aria-labelledby="echoareas" data-bs-parent="#accordion_homepage">
				<div class="accordion-body">
					@if($o->echoareas->count())
						<p>This network provides the following Echomail areas:</p>
						<table class="table monotable w-100" id="echoarea">
							<thead>
							<tr>
								<th class="w-75" colspan="4"></th>
								<th colspan="3" class="text-center">Messages</th>
							</tr>
							<tr>
								<th>Echoarea</th>
								<th>Description</th>
								<th>Last Message</th>
								<th>Area Active</th>
								<th class="text-end">Day</th>
								<th class="text-end">Week</th>
								<th class="text-end">Month</th>
							</tr>
							</thead>

							<tbody>
							@foreach ($o->latest_echomail_message() as $oo)
								<tr>
									<td style="width: 15%;"><a href="{{ url('ftn/echoarea/addedit',[$oo->id]) }}">{{ $oo->name }}</a></td>
									<td>{{ $oo->description }}</td>
									<td style="width: 15%;">{{ $oo->last_message ? $oo->last_message->format('Y-m-d H:i') : '-' }}</td>
									<td>{{ $oo->active ? 'Active' : 'Archive' }}</td>
									<td class="text-end">{{ number_format($oo->messages_count(1)) }}</td>
									<td class="text-end">{{ number_format($oo->messages_count(7)) }}</td>
									<td class="text-end">{{ number_format($oo->messages_count(30)) }}</td>
								</tr>
							@endforeach
							</tbody>
						</table>
					@else
						This network doesnt have any Echomail areas (yet). Perhaps you would like to create one?
					@endif
				</div>
			</div>
		</div>

		<!-- File areas -->
		<div class="accordion-item">
			<h3 class="accordion-header" id="fileareas" data-bs-toggle="collapse" data-bs-target="#collapse_fileareas" aria-expanded="false" aria-controls="collapse_fileareas">File Areas</h3>

			<div id="collapse_fileareas" class="accordion-collapse collapse" aria-labelledby="fileareas" data-bs-parent="#accordion_homepage">
				<div class="accordion-body">
					@if($o->fileareas->count())
						<p>This network provides the following File areas:</p>
						<table class="table monotable" id="filearea">
							<thead>
							<tr>
								<th>Filearea</th>
								<th>Description</th>
								<th>Last File Sent</th>
							</tr>
							</thead>

							<tbody>
							@foreach ($o->fileareas->sortBy('name') as $oo)
								<tr>
									<td style="width: 15%;"><a href="{{ url('ftn/filearea/addedit',[$oo->id]) }}">{{ $oo->name }}</a></td>
									<td>{{ $oo->description }}</td>
									<td style="width: 15%;">-</td>
								</tr>
							@endforeach
							</tbody>
						</table>
					@else
						This network doesnt have any File areas (yet). Perhaps you would like to create one?
					@endif
				</div>
			</div>
		</div>

		<!-- Systems -->
		<div class="accordion-item">
			<h3 class="accordion-header" id="systems" data-bs-toggle="collapse" data-bs-target="#collapse_systems" aria-expanded="false" aria-controls="collapse_systems">Systems</h3>

			<div id="collapse_systems" class="accordion-collapse collapse" aria-labelledby="systems" data-bs-parent="#accordion_homepage">
				<div class="accordion-body">
					<p>The following systems are members of this network.</p>
					<table class="table monotable" id="system">
						<thead>
						<tr>
							<th>System</th>
							<th>Sysop</th>
							<th>Location</th>
							<th>Address</th>
							<th>Last Seen</th>
						</tr>
						</thead>

						<tbody>
						@foreach ($o->zones->sortBy('zone_id') as $oz)
							@foreach ($oz->addresses as $ao)
								<tr>
									<td><a href="{{ url('ftn/system/addedit',[$ao->system_id]) }}">{{ $ao->system->full_name($ao) }}</a> @auth<span class="float-end"><small>@if($ao->session('sespass'))<sup>{{ $ao->session('default') ? '**' : '*' }}</sup>@elseif($ao->system->setup)<sup class="success">+</sup>@endif[{{ $ao->system_id }}]</small></span>@endauth</td>
									<td>{{ $ao->system->sysop }}</td>
									<td>{{ $ao->system->location }}</td>
									<td>{{ $ao->ftn4d }}</td>
									<td>{{ $ao->system->last_session ? $ao->system->last_session->format('Y-m-d H:i') : '-' }}</td>
								</tr>
							@endforeach
						@endforeach
						</tbody>
						@auth
							<tfoot>
							<tr>
								<td colspan="5"><sup>**</sup>Default route <sup>*</sup>System defined here <sup class="success">+</sup>This system</td>
							</tr>
							</tfoot>
						@endauth
					</table>
				</div>
			</div>
		</div>

		<!-- Sign up -->
		<div class="accordion-item">
			<h3 class="accordion-header" id="signup" data-bs-toggle="collapse" data-bs-target="#collapse_signup" aria-expanded="false" aria-controls="collapse_signup">Join Network</h3>

			<div id="collapse_signup" class="accordion-collapse collapse" aria-labelledby="signup" data-bs-parent="#accordion_homepage">
				<div class="accordion-body">
					@guest
						To start an application to join this network please <a href="{{ url('login') }}">login</a>.
					@else
						@if($user->isMember($o))
						@else
							This website is not ready to take applications yet, check back soon!
						@endif
					@endguest
				</div>
			</div>
		</div>
	</div>
@endsection

@section('page-css')
	@css('datatables')
	<style>
		div#collapse_about {
			min-height: 25em;
		}
		div#collapse_about .collapse{
			min-height: 0;
		}
	</style>
@append
@section('page-scripts')
	@js('datatables')
	@js('highcharts')

	<script type="text/javascript">
		$(document).ready(function() {
			$('table tr').click(function() {
				var href = $(this).find('a').attr('href');

				if (href)
					window.location = href;
			});

			$('#echoarea').DataTable({
				paging: true,
				pageLength: 25,
				searching: true,
				ordering: true,
				order: [[3,'asc'],[1,'asc']],
				conditionalPaging: {
					style: 'fade',
					speed: 500 // optional
				},
				rowGroup: {
					dataSrc: [3],
				},
				columnDefs: [
					{
						targets: [3],
						visible: false,
					},
				],
			});

			$('#filearea').DataTable({
				paging: true,
				pageLength: 25,
				searching: true,
				ordering: true,
				order: [1,'asc'],
				conditionalPaging: {
					style: 'fade',
					speed: 500 // optional
				}
			});

			$('#system').DataTable({
				paging: true,
				pageLength: 25,
				searching: true,
				ordering: true,
				order: [],
				conditionalPaging: {
					style: 'fade',
					speed: 500 // optional
				},
				language: {
					paginate: {
						previous: '&lt;&lt;',
						next: '&gt;&gt;'
					}
				}
			});
		});

		Highcharts.chart('network_traffic', {
			chart: {
				type: 'spline',
				zoomType: 'x',
				backgroundColor: '#0a0a0a',
				resetZoomButton: {
					position: {
						align: 'left',
						x: -40,
						y: -40,
					}
				}
			},
			credits: {
				enabled: false
			},
			exporting: {
				buttons: false
			},
			title: {
				text: 'FTN Network Traffic for {{ $o->name }}'
			},
			xAxis: {
				type: 'datetime',
				title: {
					text: 'Time'
				},
			},
			yAxis: {
				title: {
					text: 'Echomail'
				},
			},
			legend: {
				align: 'right',
				layout: 'vertical',
				symbolWidth: 20,
				floating: false,
				navigation: {
					arrowSize: 10
				},
			},
			plotOptions: {
				series: {
					point: {
						events: {
							click: function () {
								//window.location.href = this.series.options.website;
							}
						}
					},
					cursor: 'pointer'
				}
			},
			series: {!! $o->daily_area_stats('true') !!}
		});
	</script>
@append