@extends('layouts.dashboard.main')

{{-- content --}}
@section('content')
{!! Form::open($form) !!}
{!! Form::hidden('mtb_center_id', $center['mtb_center_id']) !!}
{!! Form::hidden('mtb_department_id', (isset($department)) ? $department['mtb_department_id'] : 0) !!}
{!! Form::hidden('mtb_division_id', (isset($division)) ? $division['mtb_division_id'] : 0) !!}
{!! Form::hidden('mtb_center_id', $center['mtb_center_id']) !!}
{!! Form::hidden('center_code', $center_code) !!}
{!! Form::hidden('department_code', $department_code) !!}
{!! Form::hidden('division_code', $division_code) !!}

<div class="row">

	<!-- aside -->
	<aside class="col col-lg-3">

		<!-- section -->
		<section class="mb-5">

			<!-- section-title -->
			<div class="section-title mb-3">
				<h5>
					{!! __("lang.master.organization") !!}
				</h5>
			</div>
			<!-- /.section-title -->

			<div class="card">
				<div class="list-group list-group-flush">

					{{--  --}}
					@if(!is_null($division_code))
						@foreach($division_list as $key => $value)
							<a
								class="list-group-item list-group-item-action d-flex justify-content-start align-items-center {!! ($value['division_code'] == $division_code) ? 'active' : '' !!}"
								href="{!! route('admin.staff_join.update', [
									$center_code,
									$department_code,
									$value['division_code'],
								]) !!}"
							>
								<div class="me-auto">
									<span class="fw-normal">
										{!! $value['division_label'] !!}
									</span>
								</div>
								<div class="">
									<i class="fa-solid fa-angle-right fa-fw"></i>
								</div>
							</a>
						@endforeach
					@else

						{{--  --}}
						@if(!is_null($department_code))
							@foreach($department_list as $key => $value)
								<a
									class="list-group-item list-group-item-action d-flex justify-content-start align-items-center {!! ($value['department_code'] == $department_code) ? 'active' : '' !!}"
									href="{!! route('admin.staff_join.update', [
										$center_code,
										$value['department_code'],
									]) !!}"
								>
									<div class="me-auto">
										<span class="fw-normal">
											{!! $value['department_label'] !!}
										</span>
									</div>
									<div class="">
										<i class="fa-solid fa-angle-right fa-fw"></i>
									</div>
								</a>
							@endforeach

						{{--  --}}
						@else
							@foreach($center_list as $key => $value)
								<a
									class="list-group-item list-group-item-action d-flex justify-content-start align-items-center {!! ($value['center_code'] == $center_code) ? 'active' : '' !!}"
									href="{!! route('admin.staff_join.update', [
										$value['center_code'],
									]) !!}"
								>
									<div class="me-auto">
										<span class="fw-normal">
											{!! $value['center_label'] !!}
										</span>
									</div>
									<div class="">
										<i class="fa-solid fa-angle-right fa-fw"></i>
									</div>
								</a>
							@endforeach

						@endif
					@endif
				</div>
			</div>

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

	</aside>
	<!-- /.aside -->

	<!-- main -->
	<main class="col col-lg-9">
		<div class="row g-4">

			<div class="col-lg-4">

				<!-- section -->
				<section class="mb-0">

					<!-- section-title -->
					<div class="section-title mb-3">
						<h5>
							選択済職員
						</h5>
					</div>
					<!-- /.section-title -->

					<select
						class="form-select"
						name="staff[]"
						id="staff"
						size="18"
						multiple
					>
						@foreach($staff_mapping_list as $key => $value)
							<option value="{!! $key !!}">
								{!! $value['staff_number'] !!} :
								{!! implode(' ', [
									$value['staff_sname'],
									$value['staff_gname'],
								]) !!}
							</option>
						@endforeach
					</select>

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

			</div>
			<div class="col-lg-2 align-self-center">
				<div class="d-grid gap-3">
					<button
						class="btn btn-outline-secondary"
						id="plus"
						type="button"
					>
						<i class="fa-solid fa-plus fa-fw"></i>
					</button>
					<button
						class="btn btn-outline-secondary"
						id="minus"
						type="button"
					>
						<i class="fa-solid fa-minus fa-fw"></i>
					</button>
				</div>
			</div>
			<div class="col-lg-4">

				<!-- section -->
				<section class="mb-0">

					<!-- section-title -->
					<div class="section-title mb-3">
						<h5>
							未選択職員
						</h5>
					</div>
					<!-- /.section-title -->

					<select
						class="form-select text-secondary text-opacity-50"
						name="staff_list[]"
						id="staff_list"
						size="18"
						multiple
					>
						@foreach($staff_list as $key => $value)
							@if(!isset($staff_mapping_list[$key]))
								<option value="{!! $key !!}">
									{!! $value['staff_number'] !!} :
									{!! implode(' ', [
										$value['staff_sname'],
										$value['staff_gname'],
									]) !!}
								</option>
							@endif
						@endforeach
					</select>

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

			</div>

		</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:120px;"
	>
		<span class="small fw-bold">
			{!! __("lang.button.submit") !!}
		</span>
	</button>
	<a
		class="btn btn-outline-secondary"
		href="{!! route('admin.staff.index', [
			$center_code,
			$department_code,
			$division_code,
		]) !!}"
		style="width:120px;"
	>
		<span class="small fw-bold">
			{!! __("lang.button.back") !!}
		</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 () {
		$('#staff option').prop("selected", true);
		$('#staff_list option').prop("selected", false);
	});
});
</script>
@stop