@extends('layouts.dashboard.main')

{{-- content --}}
@section('content')

{{-- nav --}}
@include('layouts.dashboard.components.application.nav')

{{-- localnav --}}
@include('layouts.dashboard.components.application.localnav')

<div class="row mb-5">

	{{-- 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.application.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">

		{{-- nav --}}
		<nav class="mb-4">
			<div
				class="nav nav-pills nav-fill"
				role="tablist"
			>
				@foreach($wifi_device_list as $i => $content)
					<button
						class="nav-link py-1 {!! ($i == 0) ? 'active' : '' !!}"
						data-bs-toggle="tab"
						data-bs-target="#tab{!! $i !!}"
						type="button"
						role="tab"
						aria-selected="{!! ($i == 0) ? 'true' : 'false' !!}"
					>
						<span class="fw-bold">
							{!! $content['label'] !!}
						</span>
					</button>
				@endforeach
			</div>
		</nav>
		{{-- /.nav --}}

		{{-- tab-content --}}
		<div class="tab-content">
			@foreach($wifi_device_list as $i => $content)
				<div
					class="tab-pane fade {!! ($i == 0) ? 'show active' : '' !!}"
					id="tab{!! $i !!}"
					role="tabpanel"
				>

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

					{{-- table --}}
					<div class="table-responsive">
						<table class="table table-hover">
							<colgroup>
								<col>
								<col>
								<col>
								<col width="20%">
								<col width="20%">
								<col width="20%">
								<col width="20%">
								<col>
								<col width="20%">
								<col>
								<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.application.wifi_device.is_done") !!}
									</th>
									<th scope="col" nowrap>
										{!! __("lang.application.wifi.date_created") !!}
									</th>
									<th scope="col" nowrap>
										{!! __("lang.application.wifi.staff_name") !!}
									</th>
									<th scope="col" nowrap>
										{!! __("lang.application.wifi_device.staff_name") !!}
									</th>
									<th scope="col" nowrap>
										{!! __("lang.master.device.title") !!}
									</th>
									<th scope="col" nowrap>
										法人端末
									</th>
									<th scope="col" nowrap>
										{!! __("lang.master.usage.title") !!}
									</th>
									<th scope="col" nowrap>
										{!! __("lang.application.wifi_device.timestamp") !!}
									</th>
									<th scope="col" nowrap>
										{!! __("lang.application.wifi_device.authorizer") !!}
									</th>
								</tr>
							</thead>
							<tbody class="table-group-divider">
								@if(count($content['list']) > 0)
									@foreach($content['list'] as $key => $value)
										<tr
											{{-- 未更新 --}}
											@if(is_null($value['date_updated']))
												class="clickable {!! (!$value['is_auth']) ? 'table-secondary' : '' !!}"
												data-href="{!! route('manage.application.wifidevice.update', [
													$value['appliction_wifi_device_code'],
												]) !!}"

											{{-- 更新済 --}}
											@else
												@if(($value['authorizer'] == \Session::get('staff.dtb_staff_id')))
													class="clickable {!! (!$value['is_auth']) ? 'table-secondary' : '' !!}"
													data-href="{!! route('manage.application.wifidevice.update', [
														$value['appliction_wifi_device_code'],
													]) !!}"
												@else
													class="clickable {!! (!$value['is_auth']) ? 'table-secondary' : '' !!}"
													data-href="{!! route('manage.application.wifidevice.show', [
														$value['appliction_wifi_device_code'],
													]) !!}"
												@endif
											@endif
											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>
											<th nowrap scope="row">
												@if($value['is_done'])
													<div class="text-center">
														<i class="fa-solid fa-check fa-fw fa-lg text-success"></i>
													</div>
												@endif
											</th>
											<td nowrap>
												{!! \Carbon\Carbon::parse($value['date_created'])->format('Y/m/d') !!}
											</td>
											<td nowrap>
												{!! implode(' ', [
													$value['applier_sname'],
													$value['applier_gname'],
												]) !!}
											</td>
											<td nowrap>
												@if($value['dtb_staff_id'] == 0)
													共有
												@else
													{!! implode(' ', [
														$value['staff_sname'],
														$value['staff_gname'],
													]) !!}
												@endif
											</td>
											<td nowrap>
												{!! $value['device_label'] !!}
											</td>
											<td nowrap>
												<div class="text-center">
													@if($value['is_provided'])
														はい
													@else
														いいえ
													@endif
												</div>
											</td>
											<td nowrap>
												{!! $value['usage_label'] !!}
											</td>
											<td nowrap>
												@if($value['is_auth'])
													{!! \Carbon\Carbon::parse($value['timestamp'])->format('Y/m/d') !!}
												@endif
											</td>
											<td nowrap>
												@if($value['is_auth'])
													{!! implode(' ', [
														$value['authorizer_sname'],
														$value['authorizer_gname'],
													]) !!}
												@endif
											</td>
										</tr>
									@endforeach
								@else
									<tr>
										<th nowrap scope="row">
											<div class="text-center">
												&nbsp;
											</div>
										</th>
										<td nowrap colspan="8">
											{!! __("lang.error.empty") !!}
										</td>
									</tr>
								@endif
							</tbody>
						</table>
					</div>
					{{-- /.table --}}

				</div>
			@endforeach
		</div>
		{{-- /.tab-content --}}
		
	</main>
	{{-- /.main --}}

</div>

{{-- btn-fixed --}}
<div
	class="btn-fixed"
	style="z-index:999"
>
	<a
		class="btn btn-secondary"
		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"),
	});

	$(".unclickable").click(function () {
		alert("編集できません。\n編集権限は承認者のみとなります。");
	});
});
</script>
@stop