@extends('layouts.dashboard.main')

{{-- content --}}
@section('content')
{!! Form::open($form) !!}

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

<!-- section -->
<section class="mb-5">
	
	<div class="row justify-content-center">
		<div class="col-12 col-lg-8">

			{{-- alert --}}
			<div
				class="alert alert-primary"
				role="alert"
			>
				<p class="fw-bold text-center mb-0">
					申請時に必要な項目を入力してください
				</p>
			</div>
			{{-- /.alert --}}

			@for($i = 0; $i < Session::get('application.wifi.count'); $i++)

				<div class="card mb-4">
					<div class="card-header">
						<h6 class="">
							【{!! $i + 1 !!}台目】 利用端末
						</h6>
					</div>
					<div class="card-body">
						<div class="mb-3">
							<label
								for=""
								class="form-label fw-bold mb-1"
							>
								@include('layouts.dashboard.components.required')
								{!! __("lang.master.device.title") !!}
							</label>
							<div class="row row-cols-1 row-cols-lg-4 g-2">
								@foreach($device_list as $key => $value)
									<div class="col">
										{!! Form::radio("wifi[device][{$i}]", $key, ($key == 1) ? true : false, [
											'class' => 'btn-check',
											'id' => "device{$i}-{$key}",
										]) !!}
										<label
											class="btn btn-outline-primary btn-sm w-100"
											for="device{!! $i !!}-{!! $key !!}"
										>
											<span class="small fw-bold">
												{!! $value !!}
											</span>
										</label>
									</div>
								@endforeach
							</div>
						</div>
						<div class="mb-3">
							<label
								for=""
								class="form-label fw-bold mb-1"
							>
								@include('layouts.dashboard.components.required')
								{!! __("lang.master.usage.title") !!}
							</label>
							<div class="row row-cols-1 row-cols-lg-4 g-2">
								@foreach($usage_list as $key => $value)
									<div class="col">
										{!! Form::radio("wifi[usage][{$i}]", $key, ($key == 1) ? true : false, [
											'class' => 'btn-check',
											'id' => "usage{$i}-{$key}",
										]) !!}
										<label
											class="btn btn-outline-primary btn-sm w-100"
											for="usage{!! $i !!}-{!! $key !!}"
										>
											<span class="small fw-bold">
												{!! $value !!}
											</span>
										</label>
									</div>
								@endforeach
							</div>
						</div>
						<div class="mb-3">
							<label
								for=""
								class="form-label fw-bold mb-1"
							>
								@include('layouts.dashboard.components.required')
								{!! __("lang.application.wifi_device.staff_name") !!}
							</label>
							<div class="row">
								<div class="col col-lg-4">
									<div class="input-group input-group-sm">
										{!! Form::select("wifi[staff][{$i}]", [0=>'共有'] + $staff_list, null, [
											'class' => 'form-select',
										]) !!}
									</div>
								</div>
							</div>
						</div>
						<div class="mb-3">
							<label
								for=""
								class="form-label fw-bold mb-1"
							>
								@include('layouts.dashboard.components.required')
								{!! __("lang.application.wifi_device.is_provided") !!}
							</label>
							<div class="row row-cols-1 row-cols-lg-4 g-2">
								@for($key = 1; $key >= 0; $key--)
									<div class="col">
										{!! Form::radio("wifi[provided][{$i}]", $key, ($key == 1) ? true : false, [
											'class' => 'btn-check',
											'id' => "provided{$i}-{$key}",
										]) !!}
										<label
											class="btn btn-outline-primary btn-sm w-100"
											for="provided{!! $i !!}-{!! $key !!}"
										>
											<span class="small fw-bold">
												{!! __("lang.dictionary.is_yesno.{$key}") !!}
											</span>
										</label>
									</div>
								@endfor
							</div>
						</div>
						<div class="mb-3">
							<label
								for=""
								class="form-label fw-bold mb-1"
							>
								端末番号
								<ul class="list-unstyled mb-0">
									<li>
										<span class="text-danger">
											法人所有端末の場合はテプラに記載されている端末Noを入力してください
										</span>
									</li>
								</ul>
							</label>
							<div class="row g-2">
								<div class="col col-auto">
									<div class="input-group input-group-sm">
										<span class="input-group-text px-3">
											No.
										</span>
										{!! Form::text("wifi[device_number][{$i}]", '', [
											'class' => 'form-control',
											'placeholder' => '1234',
										]) !!}
									</div>
								</div>
							</div>
						</div>
						<div class="mb-0">
							<label
								for=""
								class="form-label fw-bold mb-1"
							>
								個人端末の承認有無
								<ul class="list-unstyled mb-0">
									<li>
										<span class="text-danger">
											個人所有端末の場合は、個人端末使用申請承認済みが条件となります　
											<a
												class=""
												href="http://153.126.212.110/documents/%E5%90%84%E7%A8%AE%E6%8F%90%E5%87%BA%E6%9B%B8%E9%A1%9E/02%E4%BE%9D%E9%A0%BC%E3%83%BB%E6%8F%90%E6%A1%88%E6%9B%B8%E9%96%A2%E9%80%A3/04%E3%83%91%E3%82%BD%E3%82%B3%E3%83%B3%E3%83%BB%E3%83%A1%E3%83%BC%E3%83%AB%E9%96%A2%E9%80%A3%E7%94%B3%E8%AB%8B%E6%9B%B8/%E5%80%8B%E4%BA%BA%E6%89%80%E6%9C%89%E3%81%AE%E3%83%91%E3%82%BD%E3%82%B3%E3%83%B3%E3%83%BB%E5%90%84%E7%A8%AE%E3%83%A1%E3%83%87%E3%82%A3%E3%82%A2%E3%82%92%E5%89%B5%E9%80%A0%E4%BC%9A%E6%96%BD%E8%A8%AD%E5%86%85%E3%81%A7%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AE%E7%94%B3%E8%AB%8B%E6%9B%B8%E5%85%BC%E8%AA%93%E7%B4%84%E6%9B%B8.pdf"
												target="_blank"
											>
												申請書はこちら
											</a>
										</span>
									</li>
								</ul>
							</label>
							<div class="row row-cols-1 row-cols-lg-4 g-2">
								@for($key = 1; $key >= 0; $key--)
									<div class="col">
										{!! Form::radio("wifi[submitted][{$i}]", $key, ($key == 1) ? true : false, [
											'class' => 'btn-check',
											'id' => "submitted{$i}-{$key}",
										]) !!}
										<label
											class="btn btn-outline-primary btn-sm w-100"
											for="submitted{!! $i !!}-{!! $key !!}"
										>
											<span class="small fw-bold">
												{!! __("lang.dictionary.is_yesno.{$key}") !!}
											</span>
										</label>
									</div>
								@endfor
							</div>
						</div>
						
					</div>
				</div>
			@endfor

			<div class="card mb-4">
				<div class="card-header">
					<h6 class="">
						{!! __("lang.application.wifi.remark") !!}
					</h6>
				</div>
				<div class="card-body">
					{!! Form::textarea('wifi[remark]', '', [
						'class' => 'form-control',
						'rows' => 6,
					]) !!}
				</div>
			</div>

		</div>
	</div>

</section>
<!-- /.section -->

<!-- btn-fixed -->
<div
	class="btn-fixed"
	style="z-index:999"
>
	<button
		class="btn btn-primary"
		id="confirm"
		type="submit"
		name="action"
		value="cofirm"
		style="width:160px;"
	>
		<span class="small fw-bold">
			{!! __("lang.button.confirm") !!}
		</span>
	</button>
	<a
		class="btn btn-outline-secondary"
		href="{!! route('application.wifi.index') !!}"
		style="width:100px;"
	>
		<span class="small fw-bold">
			{!! __("lang.button.back") !!}
		</span>
	</a>
	{{--<a
		class="btn btn-outline-secondary"
		href="{!! route('application.wifi.create') !!}"
		style="width:100px;"
	>
		<span class="small fw-bold">
			{!! __("lang.button.reset") !!}
		</span>
	</a>--}}
	<a
		class="btn btn-secondary"
		href="#page-top"
	>
		<span class="fw-bold">
			<i class="fas fa-angle-up"></i>
		</span>
	</a>
</div>
<!-- /.btn-fixed -->

{!! Form::close() !!}
@endsection

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

</style>
@stop

{{-- js --}}
@section('js')
<script>
$(function() {
	
	//
	$("#confirm").click(function() {
		
		const count = {!! Session::get('application.wifi.count') !!};

		for(let i = 0; i < count; i++) {

			let provided = $('input[name="wifi[provided][' + i + ']"]:checked');
			let device_number = $('input[name="wifi[device_number][' + i + ']"]');
			let submitted = $('input[name="wifi[submitted][' + i + ']"]:checked');
			
			// 
			if(Number(provided.val()) === 1 && String(device_number.val()) === '') {
				
				alert("入力エラー：【" + (i + 1) + "台目】 利用端末の端末番号を入力してください");
				device_number.focus();
				return false;
			}

			// 
			if(Number(provided.val()) === 0 && Number(submitted.val()) === 0) {
				
				alert("入力エラー：【" + (i + 1) + "台目】 個人端末使用申請書の申請および承認が必要です");
				return false;
			}
		}

		return true;
	});
	
});
</script>
@stop