@extends('layouts.dashboard.main')

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

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

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

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

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

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

			<div class="card">
				<div class="card-header">
					<h6>
						{!! __('lang.circular.title') !!}
					</h6>
				</div>
				<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' => '16',
							]) !!}
						</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 btn-group-sm" 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"
											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>
			</div>
		</section>
		<!-- /.section -->

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

			<div class="card">
				<div class="card-header">
					<h6>
						{!! __('lang.circular_template.title') !!}
					</h6>
				</div>
				<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',
								'id' => 'circular_template_id',
							]) !!}
						</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">
									{!! Form::select('staff[]', $circular_template_staff_list, null, [
										'class' => 'form-select form-select-sm',
										'id' => 'staff',
										'multiple' => '',
										'style' => 'height:280px;',
									]) !!}
								</div>
								<div class="col-lg-2 align-self-center">
									<div class="d-grid gap-2">
										<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">
									{!! 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>
		</section>
		<!-- /.section -->

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

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

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

			<div class="card bg-body-tertiary mb-3">
				<div class="card-header">
					<h6>
						添付ファイル
					</h6>
				</div>
				<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">

			@if($circular_file_list_count > 0)
				<div class="card mb-3">
					<div class="card-header">
						<h6>
							アップロード済み添付ファイル
						</h6>
					</div>
					<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:160px;"
	>
		<span class="small fw-bold">
			{!! __("lang.button.submit") !!}
		</span>
	</button>
	<a
		class="btn btn-outline-secondary"
		href="{!! route('circular.update') !!}"
		style="width:100px;"
	>
		<span class="small fw-bold">
			{!! __("lang.button.reset") !!}
		</span>
	</a>
	{{--  --}}
	@if(is_null($circular_code))
		<a
			class="btn btn-outline-secondary"
			href="{!! url()->previous() !!}"
			style="width:100px;"
		>
			<span class="small fw-bold">
				{!! __("lang.button.back") !!}
			</span>
		</a>
	@else
		<a
			class="btn btn-outline-secondary"
			href="{!! route('circular.show', [
				$circular_code,
			]) !!}"
			style="width:100px;"
		>
			<span class="small fw-bold">
				{!! __("lang.button.back") !!}
			</span>
		</a>
	@endif
</div>
<!-- /.btn-fixed -->

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

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

</style>
@stop

{{-- js --}}
@section('js')
<script>
$(function() {

	// 
	$('#circular_template_id').on('change', function() {
		
		const id = $(this).val();
		//alert(id);

		$("select#staff").children().remove();

		if(id) {
			
			const url = [
				'{!! route('ajax.circular.circular_template.index') !!}',
				id,
			].join('/');
			
			$.ajax({
				url: url,
				dataType: 'json',
			})
			.done(function(data) {
				
				// append
				$.each(data, function(id, name) {
					
					$("select#staff").append($('<option>').text(name).attr('value', id));
				});

				// remove
				$.each(data, function(id, name) {

					//$("select#staff_list").children(`option[value=${id}]`).remove();
				});
			})
			.fail(function() {
				
				alert('処理エラーが発生しました');
			});
		}
	});

	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