@extends('layouts.dashboard.main')

{{-- content --}}
@section('content')
<div class="row">

	<!-- aside -->
	<aside class="col col-lg-3">
		{!! Form::open($form) !!}
		
		<div class="card">
			<div class="card-body">

				<div class="mb-3">
					<label
						class="form-label mb-1"
						for=""
					>
						{!! __("lang.staff.staff_name") !!}
					</label>
					{!! Form::select('staff', ['' => '　'] + $staff_list, (isset($query['staff'])) ? $query['staff'] : null, [
						'class' => 'form-select form-select-sm select2',
					]) !!}
				</div>
				<div class="mb-3">
					<label
						class="form-label mb-1"
						for=""
					>
						{!! __("lang.master.device.title") !!}
					</label>
					{!! Form::select('device', ['' => ''] + $device_list, (isset($query['device'])) ? $query['device'] : null, [
						'class' => 'form-select form-select-sm',
					]) !!}
				</div>
				<div class="mb-3">
					<label
						class="form-label mb-1"
						for=""
					>
						{!! __("lang.master.usage.title") !!}
					</label>
					{!! Form::select('usage', ['' => ''] + $usage_list, (isset($query['usage'])) ? $query['usage'] : null, [
						'class' => 'form-select form-select-sm',
					]) !!}
				</div>
				<div class="d-grid gap-2">
					<button
						class="btn btn-primary btn-sm"
						type="submit"
					>
						<span class="fw-bold">
							{!! __("lang.button.search") !!}
						</span>
					</button>
					<a
						class="btn btn-outline-secondary btn-sm"
						href="{!! route('manage.wifi.index') !!}"
					>
						<span class="fw-bold">
							{!! __("lang.button.reset") !!}
						</span>
					</a>
				</div>

			</div>
		</div>

		{!! Form::close() !!}
	</aside>
	<!-- /.aside -->

	<!-- main -->
	<main class="col col-lg-9">
		
		<h5 class="fw-bold mb-3">
			{!! __("lang.master.device.title") !!}
		</h5>

		<!-- toolbar -->
		<div class="d-flex justify-content-between align-items-center mb-2">
			<div>
				{!! __("lang.common.count") !!} :
				<span class="fw-bold">
					{!! $wifi_device_list_count !!}
				</span>
			</div>
			<div>
				
			</div>
		</div>
		<!-- /.toolbar -->

		<!-- table -->
		<div class="table-responsive">
			<table class="table table-hover">
				<colgroup>
					<col>
					<col>
					<col width="20%">
					<col width="20%">
					<col width="20%">
					<col width="20%">
					<col width="20%">
					<col>
				</colgroup>
				<thead class="table-group-divider">
					<tr class="">
						<th scope="col" nowrap>
							<div class="text-center">
								#
							</div>
						</th>
						<th scope="col" nowrap>
							{!! __("lang.application.wifi_device.is_auth") !!}
						</th>
						<th scope="col" nowrap>
							{!! __("lang.staff.staff_name") !!}
						</th>
						<th scope="col" nowrap>
							{!! __("lang.master.device.title") !!}
						</th>
						<th scope="col" nowrap>
							{!! __("lang.master.usage.title") !!}
						</th>
						<th scope="col" nowrap>
							{!! __("lang.application.wifi_device.appliction_wifi_device_label") !!}
						</th>
						<th scope="col" nowrap>
							{!! __("lang.application.wifi_device.mac_address") !!}
						</th>
						<th scope="col" nowrap>
							{!! __("lang.application.wifi_device.date_created") !!}
						</th>
					</tr>
				</thead>
				<tbody class="table-group-divider">
					@if($wifi_device_list_count > 0)
						@foreach($wifi_device_list as $key => $value)
							<tr
								class="clickable"
								data-href="{!! route('manage.wifidevice.update', [
									$value['appliction_wifi_device_code'],
								]) !!}"
								role="button"
							>
								<th nowrap scope="row">
									<div class="text-center">
										{!! $key + 1 !!}
									</div>
								</th>
								<th nowrap scope="row">
									@if($value['is_auth'])
										<div class="text-center">
											<i class="fa-solid fa-check fa-fw fa-lg text-success"></i>
										</div>
									@endif
								</th>
								<td nowrap>
									{!! implode(' ', [
										$value['staff_sname'],
										$value['staff_gname'],
									]) !!}
								</td>
								<td nowrap>
									{!! $value['device_label'] !!}
								</td>
								<td nowrap>
									{!! $value['usage_label'] !!}
								</td>
								<td nowrap>
									{!! $value['appliction_wifi_device_label'] !!}
								</td>
								<td nowrap>
									{!! $value['mac_address'] !!}
								</td>
								<td nowrap>
									{!! \Carbon\Carbon::parse($value['date_created'])->isoFormat('YYYY年MM月DD日') !!}
								</td>
							</tr>
						@endforeach
					@else
						<tr>
							<th nowrap scope="row">
								<div class="text-center">
									&nbsp;
								</div>
							</th>
							<td nowrap colspan="7">
								{!! __("lang.error.empty") !!}
							</td>
						</tr>
					@endif
				</tbody>
			</table>
		</div>

	</main>
	<!-- /.main -->

</div>

<!-- btn-fixed -->
<div
	class="btn-fixed"
	style="z-index:999"
>
	<a
		class="btn btn-primary"
		href="#page-top"
	>
		<span class="fw-bold">
			<i class="fas fa-angle-up"></i>
		</span>
	</a>
</div>
<!-- /.btn-fixed -->
@endsection

{{-- css --}}
@section('css')
<style>

</style>
@stop

{{-- js --}}
@section('js')
<script>
$(function() {
	
	$(".select2").select2({
		theme: "bootstrap-5",
		selectionCssClass: "select2--small",
		dropdownCssClass: "select2--small",
		width: $(this).data("width")
			? $(this).data("width")
			: $(this).hasClass("w-100")
			? "100%"
			: "style",
		placeholder: $(this).data("placeholder"),
	});
});
</script>
@stop