@extends('layouts.dashboard.main')

{{-- content --}}
@section('content')

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

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

		<!-- 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>
						{!! __('lang.circular.title') !!}
					</h5>
				</div>
			</div>
			<!-- /.section-title -->

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

					<dl class="row mb-3">
						<dt
							class="col-lg-2 text-lg-end"
							for=""
						>
							{!! __("lang.circular.timestamp") !!}
						</dt>
						<dd class="col-auto">
							{!! \Carbon\Carbon::parse($circular['timestamp'])->isoFormat('YYYY年M月D日') !!}
						</dd>
					</dl>
					<dl class="row mb-3">
						<dt
							class="col-lg-2 text-lg-end"
							for=""
						>
							{!! __("lang.circular.date_deadline") !!}
						</dt>
						<dd class="col-auto">
							@if(is_null($circular['date_deadline']))
								-
							@else
								{!! \Carbon\Carbon::parse($circular['date_deadline'])->isoFormat('YYYY年M月D日') !!}
							@endif
						</dd>
					</dl>
					<dl class="row mb-3">
						<dt
							class="col-lg-2 text-lg-end"
							for=""
						>
							{!! __("lang.circular.circular_title") !!}
						</dt>
						<dd class="col">
							{!! $circular['circular_title'] !!}
						</dd>
					</dl>
					<dl class="row mb-3">
						<dt class="col-lg-2 text-lg-end">
							{!! __("lang.circular.circular_body") !!}
						</dt>
						<dd class="col mb-0">
							{!! nl2br($circular['circular_body']) !!}
						</dd>
					</dl>

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

		<!-- 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 -->

			<ul class="list-group">
				@for($i = 1; $i >= 0; $i--)
					<li class="list-group-item py-3">
						<dl class="row mb-0">
							<dt class="col-lg-2 text-lg-end">
								{!! __("lang.dictionary.is_read.{$i}") !!}
							</dt>
							<dd class="col mb-0">
								<span class="">
									{!! implode(',　', $circular_mapping_list[$i]) !!}
								</span>
							</dd>
						</dl>
					</li>
				@endfor
			</ul>

		</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 mb-3">
				<div class="list-group list-group-flush">
					@if($circular_file_list_count > 0)
						@foreach($circular_file_list as $key => $value)
							<a
								class="list-group-item list-group-item-action d-flex justify-content-start align-items-center py-2"
								href="{!! implode('/', [
									asset('storage'),
									'circular',
									$value['file_name'],
								]) !!}"
								@if($value['extension'] == 'pdf' || $value['extension'] == 'jpg' || $value['extension'] == 'jpeg' || $value['extension'] == 'png')
									data-fancybox
								@endif
							>
								<div class="me-3">
									<img
										class=""
										src="{!! implode('/', [
											asset('img'),
											'icons',
											$value['extension'] . '.png'
										]) !!}"
										style="height:38px;"
									>
								</div>
								<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>
									<i class="fa-solid fa-angle-right fa-fw"></i>
								</div>
							</a>
						@endforeach
					@else
						<div class="list-group-item list-group-item-action py-3">
							<p class="fw-bold text-center mb-0">
								添付ファイルはありません
							</p>
						</div>
					@endif
				</div>
			</div>

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

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

</div>

<!-- btn-fixed -->
<div
	class="btn-fixed"
	style="z-index:999"
>
	@if(\Session::get('staff.dtb_staff_id') == $circular['dtb_staff_id'])
		<a
			class="btn btn-primary"
			href="{!! route('circular.update', [
				$circular_code,
			]) !!}"
			style="width:120px;"
		>
			<span class="fw-bold">
				{!! __("lang.button.edit") !!}
			</span>
		</a>
		{{--<button
			class="btn btn-danger delete"
			type="button"
			name="delete"
			value="{!! $report['dtb_report_id'] !!}"
			style="width:120px;"
		>
			<span class="fw-bold">
				{!! __("lang.button.delete") !!}
			</span>
		</button>--}}
	@endif
	<a
		class="btn btn-outline-secondary"
		href="{!! url()->previous(); !!}"
		style="width:120px;"
	>
		<span class="fw-bold">
			{!! __("lang.button.back") !!}
		</span>
	</a>
</div>
<!-- /.btn-fixed -->

@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