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

@section('content')
	<div class="row">
		<div class="row">
			<div class="col-9">
				<h2>System Users</h2>
			</div>
		</div>

		<div class="col-9">
			<p>This system is aware of the following users @can('admin',(new \App\Models\User))(you can <a href="{{ url('user/addedit') }}">add</a> more)@endcan:</p>
			<table class="table monotable" id="user">
				<thead>
				<tr>
					<th>ID</th>
					<th>Email</th>
					<th>Name</th>
					<th>Active</th>
					<th>Verified</th>
					<th>Last On</th>
				</tr>
				</thead>

				<tbody>
				@foreach (\App\Models\User::orderBy('email')->cursor() as $oo)
					<tr class="{{ $oo->admin ? 'admin' : '' }}">
						<td><a href="{{ url('user/addedit',[$oo->id]) }}">{{ $oo->id }}</a> @if(Auth::user()->admin && (Auth::id() !== $oo->id))<span class="float-end"><a href="{{ url('admin/switch/start',[$oo->id]) }}"><i class="bi bi-person-bounding-box"></i></a></span>@endif</td>
						<td>{{ $oo->email }}</td>
						<td>{{ $oo->name }}</td>
						<td>{{ $oo->active ? 'YES' : 'NO' }}</td>
						<td>{{ $oo->email_verified_at ? $oo->email_verified_at->format('Y-m-d') : '-' }}</td>
						<td>{{ $oo->last_on ? $oo->last_on->toDateTimeString() : 'Unknown' }}</td>
					</tr>
				@endforeach
				</tbody>
			</table>
		</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="{{ 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;
			});

			$('#user').DataTable({
				paging: true,
				pageLength: 25,
				searching: true,
				autoWidth: false,
				conditionalPaging: {
					style: 'fade',
					speed: 500 // optional
				},
				language: {
					paginate: {
						previous: '&lt;&lt;',
						next: '&gt;&gt;'
					}
				},
			});
		});
	</script>
@append