@extends('layouts.dashboard.main')

{{-- content --}}
@section('content')
{!! Form::open($form) !!}
{!! Form::hidden('circular_template[circular_template_code]', $circular_template_code) !!}

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

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

<div class="row g-4 mb-3">

	{{-- aside --}}
	<aside class="col-12 col-lg-4">
		
		<div class="card">
			<div class="card-header">
				<h6 class="">
					{!! __("lang.template.title") !!}
				</h6>
			</div>
			<div class="card-body">

				<div class="mb-3">
					<label
						class="form-label mb-2"
						for=""
					>
						@include('layouts.dashboard.components.required')
						{!! __("lang.circular_template.circular_template_label") !!}
					</label>
					{!! Form::text('circular_template[circular_template_label]', (isset($circular_template)) ? $circular_template['circular_template_label'] : '', [
						'class' => 'form-control form-control-sm',
						'id' => 'circular_template_label',
					]) !!}
				</div>
				<div class="mb-3">
					<label
					class="form-label mb-2"
						for=""
					>
						{!! __("lang.form.seq") !!}
					</label>
					<div class="w-25">
						{!! Form::number('circular_template[seq]', (isset($circular_template)) ? $circular_template['seq'] : $seq, [
							'class' => 'form-control form-control-sm',
						]) !!}
					</div>
				</div>
				<div class="mb-3">
					<label
						class="form-label mb-2"
						for=""
					>
						@include('layouts.dashboard.components.required')
						{!! __("lang.circular_template.staff_list") !!}
					</label>
					<div class="row g-3">
						<div class="col-5">
							{!! Form::select('staff[]', $circular_template_staff_list, '', [
								'class' => 'form-select form-select-sm',
								'id' => 'staff',
								'multiple' => '',
								'style' => 'height:270px;',
							]) !!}
						</div>
						<div class="col-2 align-self-center">
							<div class="d-grid gap-3">
								<button
									class="btn btn-outline-secondary btn-sm"
									id="plus"
									type="button"
								>
									<i class="fa-solid fa-plus fa-fw"></i>
								</button>
								<button
									class="btn btn-outline-secondary btn-sm"
									id="minus"
									type="button"
								>
									<i class="fa-solid fa-minus fa-fw"></i>
								</button>
							</div>
						</div>
						<div class="col-5">
							{!! Form::select('staff_list[]', $staff_list, '', [
								'class' => 'form-select form-select-sm',
								'id' => 'staff_list',
								'multiple' => '',
								'style' => 'height:270px;',
							]) !!}
						</div>
					</div>
				</div>
				<div class="mb-0">
					<label
						class="form-label"
						for=""
					>
						{!! __("lang.dictionary.is_disabled.1") !!}
					</label>
					<div class="col-auto d-flex align-items-center">
						<div class="btn-group btn-group-sm" role="group">
							@for($i = 0; $i <= 1; $i++)
								{!! Form::radio('circular_template[is_disabled]', $i, (isset($circular_template)) ? (($i == $circular_template['is_disabled']) ? true : false) : (($i == 0) ? true : false), [
									'class' => 'btn-check',
									'id' => "is_disabled{$i}",
								]) !!}
								<label
									class="btn btn-outline-secondary"
									for="is_disabled{!! $i !!}"
									style="width: 80px;"
								>
									<span class="small fw-bold">
										{!! __("lang.dictionary.is_yesno.{$i}") !!}
									</span>
								</label>
							@endfor
						</div>
					</div>
				</div>

			</div>
		</div>

	</aside>
	{{-- /.aside --}}

	{{-- main --}}
	<main class="col-12 col-lg-8">
		
		<!-- toolbar -->
		<div class="d-flex justify-content-start align-items-center mb-2">
			<div class="me-auto">
				{!! __("lang.common.count") !!} : <span class="fw-bold">{!! $circular_template_list_count !!}</span>
			</div>
			<div></div>
		</div>
		<!-- /.toolbar -->

		<!-- table -->
		<div class="table-response">
			<table class="table table-hover">
				<colgroup>
					<col>
					<col width="100%">
					<col>
					<col>
					<col>
					<col>
				</colgroup>
				<thead class="table-group-divider">
					<tr>
						<th scope="col" nowrap>
							<div class="mx-2">
								#
							</div>
						</th>
						<th scope="col" nowrap>
							{!! __("lang.circular_template.circular_template_label") !!}
						</th>
						<th scope="col" nowrap>
							{!! __("lang.circular_template.staff_list_count") !!}
						</th>
						<th scope="col" nowrap>
							{!! __("lang.form.seq") !!}
						</th>
						<th scope="col" nowrap>
							{!! __("lang.form.date_created") !!}
						</th>
					</tr>
				</thead>
				<tbody class="table-group-divider">
					@if($circular_template_list_count > 0)
						@foreach($circular_template_list as $key => $value)
							<tr
								class="clickable {!! ($value['circular_template_code'] == $circular_template_code) ? 'table-primary' : '' !!}"
								data-href="{!! route('manage.circular.template.index', [
									$value['circular_template_code'],
								]) !!}"
								role="button"
							>
								<th nowrap scope="row">
									<div class="text-center">
										{!! $key + 1 !!}
									</div>
								</th>
								<td nowrap>
									<span class="fw-bold">
										{!! $value['circular_template_label'] !!}
									</span>
								</td>
								<td nowrap>
									<div class="text-center">
										{!! $value['staff_list_count'] !!}
										<span class="small">名</span>
									</div>
								</td>
								<td nowrap>
									<div class="text-center">
										{!! $value['seq'] !!}
									</div>
								</td>
								<td nowrap>
									{!! \Carbon\Carbon::parse($value['date_created'])->isoFormat('YYYY年MM月DD日') !!}
								</td>
							</tr>
						@endforeach
					@else
						<tr>
							<th scope="col" nowrap>
								<div class="mx-2">
									&nbsp;
								</div>
							</th>
							<td colspan="4">
								{!! __("lang.error.empty") !!}
							</td>
						</tr>
					@endif
				</tbody>
			</table>
		</div>

	</main>
	{{-- /.main --}}

</div>

{{-- btn-fixed --}}
<div
	class="btn-fixed"
	style="z-index:999"
>
	<button
		class="btn btn-primary"
		type="submit"
		name="action"
		value="store"
		style="width:160px;"
	>
		<span class="small fw-bold">
			{!! __("lang.button.submit") !!}
		</span>
	</button>
	<a
		class="btn btn-outline-secondary"
		href="{!! route('circular.index') !!}"
		style="width:100px;"
	>
		<span class="small fw-bold">
			{!! __("lang.button.back") !!}
		</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() {
	
	let move = (source, target) => {

		$('select[id=' + source + '] option:selected').each(function() {

			// append element
			$('select[id=' + target + ']').append($(this).clone());

			// remove element
			$(this).remove();
		});
	};

	// click for append
	$('#plus').on('click', function() {
		move('staff_list', 'staff');
	});

	// click for remove
	$('#minus').on('click', function() {
		move('staff', 'staff_list');
	});

	// submit
	$('form').submit(function () {

		const circular_template_label = $("#circular_template_label").val();

		if(circular_template_label) {
			
			$('#staff option').prop("selected", true);
			$('#staff_list option').prop("selected", false);
		}

		else {
			
			alert('テンプレート名は入力必須項目です');
			return false;
		}
	});
});
</script>
@stop