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

@section('content')
	<div class="row">
		<div class="col-12">
			<h2>Our Systems</h2>

			@if (\App\Models\System::count() == 0)
				<p class="pad">There are no systems configured here.</p>
			@else
				<p>These BBS systems are configured here.</p>

				<table class="table monotable" id="system">
					<thead>
					<tr>
						<th>Domain</th>
						<th>ID</th>
						<th>System</th>
						<th>Sysop</th>
						<th>Location</th>
						<th>Last Seen</th>
						<th>Address</th>
						<th>ZeroTier ID</th>
					</tr>
					</thead>

					<tbody>
					@foreach (\App\Models\SystemZone::select('*')->with(['system','zone.domain'])->get() as $oo)
						<tr>
							<td>{{ $oo->zone->domain->name }}</td>
							<td><a href="{{ url('ftn/system/addedit',[$oo->system_id]) }}">{{ $oo->system_id }}</a></td>
							<td>{{ $oo->system->name }}</td>
							<td>{{ $oo->system->sysop }}</td>
							<td>{{ $oo->system->location }}</td>
							<td>{{ $oo->system->last_session ? $oo->system->last_session->format('Y-m-d H:i') : '-' }}</td>
							<td>{{ $oo->system->addresses->where('zone_id',$oo->zone_id)->pluck('ftn4d')->join(', ') }}</td>
							<td>{{ $oo->system->zt_id }}</td>
						</tr>
					@endforeach
					</tbody>
				</table>
			@endif
		</div>
	</div>
@endsection

@section('page-scripts')
	<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.min.css" media="screen">
	<link type="text/css" rel="stylesheet" href="{{ asset('plugin/dataTables/dataTables.bootstrap5.css') }}" media="screen">

	<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
	<script type="text/javascript" src="https://cdn.datatables.net/rowgroup/1.1.2/js/dataTables.rowGroup.min.js"></script>
	<script type="text/javascript" src="{{ asset('plugin/dataTables/dataTables.conditionalPaging.js') }}"></script>
	<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.min.js"></script>

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

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

			$('#system').DataTable({
				paging: true,
				pageLength: 25,
				searching: true,
				autoWidth: false,
				order: [
					[0,'asc'],
					[2,'asc']
				],
				rowGroup: {
					dataSrc: [0],
				},
				columnDefs: [
					{
						targets: [0],
						visible: false,
					},
				],
				conditionalPaging: {
					style: 'fade',
					speed: 500 // optional
				},
				language: {
					paginate: {
						previous: '&lt;&lt;',
						next: '&gt;&gt;'
					}
				},
			});
		});
	</script>
@append