@extends('adminlte::layouts.app')

@section('htmlheader_title')
	Account List
@endsection
@section('page_title')
	Account List
@endsection

@section('contentheader_title')
	Account List
@endsection
@section('contentheader_description')
@endsection

@section('main-content')
	<div class="col-md-8">
		<div class="card">
			<div class="card-body">
				<table class="table table-sm table-striped" id="table">
					<thead>
					<tr>
						<th>ID</th>
						<th>Account</th>
						<th>Active</th>
						<th>Group</th>
						<th class="text-right">Services</th>
						<th>User</th>
					</tr>
					</thead>

					<tbody>
					@foreach (\App\Models\Account::with(['services','group','user'])->get() as $o)
						<tr>
							<td><a href="{{ url('u/home',[$o->user_id]) }}">{{ $o->id }}</a></td>
							<td>{{ $o->name }}</td>
							<td>{{ $o->active ? 'YES' : 'NO' }}</td>
							<td>{{ $o->group?->name }}</td>
							<td class="text-right">{{ $o->services->count() }}</td>
							<td>{{ $o->user->name }}</td>
						</tr>
					@endforeach
					</tbody>
				</table>
			</div>
		</div>
	</div>
@endsection

@section('page-scripts')
	@css(datatables,bootstrap4|fixedheader|responsive|rowgroup|select|searchpanes|searchpanes-left)
	@js(datatables,bootstrap4|fixedheader|responsive|rowgroup|select|searchpanes)

	<script type="text/javascript">
		$(document).ready(function() {
			$('#table').DataTable({
				paging: true,
				pageLength: 25,
				lengthChange: true,
				searching: true,
				ordering: true,
				info: true,
				autoWidth: false,
				fixedHeader: true,
				order: [
					[2,'desc'],
					[1,'asc'],
				],
				rowGroup: {
					dataSrc: [2],
				},
				columnDefs: [
					{
						targets: [2],
						visible: false,
					},
					{
						targets: [4],
						searchPanes: {
							show: false
						}
					},
				],
				language: {
					searchPanes: {
						clearMessage: 'Clear',
						title: 'Filters: %d',
						collapse: 'Filter',
					}
				},
				searchPanes: {
					cascadePanes: true,
					viewTotal: true,
					layout: 'columns-1',
					dataLength: 20,
					controls: false,
				},
				dom: '<"dtsp-verticalContainer"<"dtsp-verticalPanes"P><"dtsp-dataTable"Bfrtip>>',
			});
		});
	</script>
@append