@extends('layouts.dashboard.main')

{{-- content --}}
@section('content')
{!! Form::open($form) !!}
{!! Form::hidden('mtb_center_id', $mtb_center_id) !!}
{!! Form::hidden('mtb_department_id', $mtb_department_id) !!}
{!! Form::hidden('mtb_division_id', $mtb_division_id) !!}

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

{{-- section --}}
<section class="mb-5">

	{{-- block --}}
	<div class="row g-4 justify-content-center mb-4">
		<div class="col col-lg-7">

			{{-- alert --}}
			<div class="alert alert-primary mb-0">
				<p class="text-center mb-0">
					情報共有する職員を右部リストから選択してください
				</p>
			</div>
			{{-- /.alert --}}
			
		</div>
	</div>
	{{-- /.block --}}

	{{-- block --}}
	<div class="row g-4 justify-content-center">

		<div class="col-lg-3">
	
			{{-- card --}}
			<div class="card">
				<div class="card-header">
					<h6>
						対象職員
					</h6>
				</div>
				<div class="card-body">

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

				</div>
			</div>
			{{-- /.card --}}
		</div>
		
		<div class="col-lg-1 align-self-center">
			{{-- button --}}
			<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>
			{{-- /.button --}}
		</div>
	
		<div class="col-lg-3">
	
			{{-- card --}}
			<div class="card">
				<div class="card-header">
					<h6>
						職員一覧
					</h6>
				</div>
				<div class="card-body">
					<select
						class="form-select form-select-sm 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>
				</div>
			</div>
	
		</div>
	
	</div>
	{{-- /.block --}}

</section>
{{-- /.section --}}

{{-- 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('own.home.index') !!}"
		style="width:100px;"
	>
		<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