@extends('layouts.dashboard.main')

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

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

	<!-- main -->
	<main class="col">

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

			<!-- section-title -->
			<div class="section-title d-flex justify-content-between align-items-center mb-3">
				<div class="me-auto">
					<h5>
						{!! __('lang.circular.title') !!}
					</h5>
				</div>
			</div>
			<!-- /.section-title -->

			{{-- error --}}
			@if($errors->any())
				<div class="alert alert-danger mb-3">
					<ul class="small fw-bold mb-0 ps-3">
						@foreach($errors->all() as $error)
							<li>
								{!! $error !!}
							</li>
						@endforeach
					</ul>
				</div>
			@endif
			{{-- /.error --}}

			<div class="card">
				<div class="card-body pb-0">

					<div class="row mb-2">
						<label
							class="col-lg-2 col-form-label text-lg-end"
							for=""
						>
							{!! __("lang.circular.date_deadline") !!}
						</label>
						<div class="col-auto">
							{!! Form::date('circular[date_deadline]', (isset($circular)) ? $circular['date_deadline'] : '', [
								'class' => 'form-control form-control-sm',
							]) !!}
						</div>
					</div>
					<div class="row mb-2">
						<label
							class="col-lg-2 col-form-label text-lg-end"
							for=""
						>
							{!! __("lang.circular.circular_title") !!}
							<span class="badge text-bg-danger me-1">
								{!! __("lang.form.request") !!}
							</span>
						</label>
						<div class="col">
							{!! Form::text('circular[circular_title]', (isset($circular)) ? $circular['circular_title'] : '', [
								'class' => 'form-control form-control-sm',
							]) !!}
						</div>
					</div>
					<div class="row mb-2">
						<label
							class="col-lg-2 col-form-label text-lg-end"
							for=""
						>
							{!! __("lang.circular.circular_body") !!}
							<span class="badge text-bg-danger me-1">
								{!! __("lang.form.request") !!}
							</span>
						</label>
						<div class="col">
							{!! Form::textarea('circular[circular_body]', (isset($circular)) ? $circular['circular_body'] : '', [
								'class' => 'form-control form-control-sm',
								'rows' => '10',
							]) !!}
						</div>
					</div>
					<div class="row mb-2">
						<label
							class="col-lg-2 col-form-label text-lg-end"
							for=""
						>
							{!! __("lang.dictionary.is_disabled.1") !!}
						</label>
						<div class="col">
							<div class="d-flex align-items-center">
								<div class="btn-group" role="group">
									@for($i = 0; $i <= 1; $i++)
										{!! Form::radio('circular[is_disabled]', $i, (isset($circular)) ? (($i == $circular['is_disabled']) ? true : false) : (($i == 0) ? true : false), [
											'class' => 'btn-check',
											'id' => "is_disabled{$i}",
										]) !!}
										<label
											class="btn btn-outline-primary btn-sm"
											for="is_disabled{!! $i !!}"
											style="width: 80px;"
										>
											<span class="fw-bold">
												{!! __("lang.dictionary.is_yesno.{$i}") !!}
											</span>
										</label>
									@endfor
								</div>
							</div>
						</div>
					</div>

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

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

			<div class="card">
				<div class="card-body">

					<div class="row mb-2">
						<label
							class="col-lg-2 col-form-label text-lg-end"
							for=""
						>
							{!! __("lang.circular_template.circular_template_label") !!}
						</label>
						<div class="col">
							{!! Form::select('', $circular_template_list, null, [
								'class' => 'form-select form-select-sm',
							]) !!}
						</div>
					</div>
					<div class="row mb-2">
						<label
							class="col-lg-2 col-form-label text-lg-end"
							for=""
						>
							{!! __("lang.circular_template.staff_list") !!}
						</label>
						<div class="col">
							<div class="row g-4">
								<div class="col">

								</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">
									{!! Form::select('staff_list[]', $staff_list, null, [
										'class' => 'form-select form-select-sm',
										'id' => 'staff_list',
										'multiple' => '',
										'style' => 'height:280px;',
									]) !!}
								</div>
							</div>
						</div>
					</div>

				</div>
			</div>

			<div class="row g-4">

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

					<!-- section-title -->
					<div class="section-title text-center mb-3">
						<h5>
							対象職員
						</h5>
					</div>
					<!-- /.section-title -->

					<select
						class="form-select"
						name="staff[]"
						id="staff"
						style="height:410px;"
						multiple
					>
						@foreach($circular_mapping_list as $key => $value)
							<option value="{!! $key !!}">
								{!! $value['staff_number'] !!} :
								{!! implode(' ', [
									$value['staff_sname'],
									$value['staff_gname'],
								]) !!}
							</option>
						@endforeach
					</select>

				</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-5">
					<!-- section-title -->
					<div class="section-title text-center mb-3">
						<h5>
							候補職員
						</h5>
					</div>
					<!-- /.section-title -->

					<select
						class="form-select text-secondary text-opacity-50"
						name="staff_list[]"
						id="staff_list"
						style="height:410px;"
						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>
		</section>
		<!-- /.section -->

	</main>
	<!-- /.main -->

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

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

			<!-- section-title -->
			<div class="section-title d-flex justify-content-between align-items-center mb-3">
				<div class="me-auto">
					<h5>
						添付ファイル
					</h5>
				</div>
			</div>
			<!-- /.section-title -->

			<div class="card bg-body-tertiary mb-3">
				<div class="card-body">
					<div id="file_drag_drop_area" class="text-center">
						<p class="lh-lg mb-0">
							ここにファイルをドラッグ&ドロップ<br/>
							<span>または</span><br/>
							{!! Form::file('circular_file[]', [
								'class' => '',
								'multiple' => '',
							]) !!}
						</p>
					</div>
				</div>
			</div>

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

		@if(isset($circular_file_list))
		<!-- section -->
		<section class="mb-4">

			<!-- section-title -->
			<div class="section-title d-flex justify-content-between align-items-center mb-3">
				<div class="me-auto">
					<h5>
						アップロード済み添付ファイル
					</h5>
				</div>
			</div>
			<!-- /.section-title -->

			@if($circular_file_list_count > 0)
				<div class="card mb-3">
					<ul class="list-group list-group-flush">
						@foreach($circular_file_list as $key => $value)
							<li class="list-group-item list-group-item-action d-flex justify-content-start align-items-center">
								<div class="me-auto">
									<ul class="list-inline small mb-0">
										<li class="list-inline-item">
											種別：{!! $value['extension'] !!}
										</li>
										<li class="list-inline-item">
											容量：{!! App\Helper::getByteFormat($value['size'], 0) !!}
										</li>
									</ul>
									<span class="fw-bold">
										{!! $value['original_name'] !!}
									</span>
								</div>
								<div>
									<div
										class="btn-group"
										role="group"
									>
										<a
											class="btn btn-outline-secondary btn-sm"
											href="{!! implode('/', [
												asset('storage'),
												'circular',
												$value['file_name'],
											]) !!}"
											data-fancybox
										>
											<span class="small fw-bold">
												{!! __("lang.button.open") !!}
											</span>
										</a>
										<button
											class="btn btn-outline-secondary btn-sm delete"
											type="button"
											name="id"
											value="{!! $value['dtb_circular_file_id'] !!}"
										>
											<span class="small fw-bold">
												{!! __("lang.button.delete") !!}
											</span>
										</button>
									</div>
								</div>
							</li>
						@endforeach
					</ul>
				</div>
			@endif

		</section>
		<!-- /.section -->
		@endif

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

</div>

<!-- btn-fixed -->
<div
	class="btn-fixed"
	style="z-index:999"
	>
	<button
		class="btn btn-primary"
		id="submit"
		type="submit"
		name="action"
		value="store"
		style="width:180px;"
	>
		<span class="fw-bold">
			{!! __("lang.button.submit") !!}
		</span>
	</button>
	<a
		class="btn btn-outline-secondary"
		href="{!! route('circular.update') !!}"
		style="width:120px;"
	>
		<span class="fw-bold">
			{!! __("lang.button.reset") !!}
		</span>
	</a>
	<a
		class="btn btn-outline-secondary"
		href="{!! route('circular.index') !!}"
		style="width:120px;"
	>
		<span class="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);
	});

    // delete
	$('.delete').on('click', function() {

		if(confirm("この添付文書を削除してもいいですか？\n削除すると文書を復活させることができません。\n本当によろしいですか？")) {

			const id = $(this).val();
			const url = [
				'{!! route('ajax.circular.deletefile.destroy') !!}',
				id
			].join('/');
			//alert(url);

			$.ajax({
				type: 'GET',
				url: url,
				dataType : 'json'
			})
			.done(function(data){

				window.location.reload();
			})
			.fail(function(XMLHttpRequest, textStatus, errorThrown){
				alert(errorThrown);
			});
		}
	});
});
</script>
@stop