@extends('layouts.dashboard.main')

{{-- content --}}
@section('content')
<div class="row g-4 mb-5">

	<!-- aside -->
	<aside class="col col-lg-3">
		<div class="list-group" role="tablist">
			<a
				class="list-group-item list-group-item-action {!! ($tab == 0) ? 'active' : '' !!}"
				data-bs-toggle="list"
				href="#list-division"
				role="tab"
				aria-controls="list-division"
			>
				{!! implode('', [
					__("lang.division.title"),
				]) !!}
			</a>
			<a
				class="list-group-item list-group-item-action {!! ($tab == 1) ? 'active' : '' !!}"
				data-bs-toggle="list"
				href="#list-report"
				role="tab"
				aria-controls="list-report"
			>
				{!! implode('', [
					__("lang.report.title"),
				]) !!}
			</a>
		</div>
	</aside>
	<!-- /.aside -->

	<!-- main -->
	<main class="col">
		<div class="tab-content">
			<div
				class="tab-pane fade {!! ($tab == 0) ? 'show active' : '' !!}"
				id="list-division"
				role="tabpanel"
			>
				<div class="row g-4 mb-5">

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

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

							<!-- toolbar -->
							<div class="d-flex justify-content-between align-items-center mb-3">
								<div>
									<h6>
										{!! implode('', [
											__("lang.division.title"),
										]) !!}
									</h6>
								</div>
								<div>
									<div
										class="btn-group btn-group-sm"
										role="group"
									>
										<a
											class="btn btn-outline-secondary"
											href="{!! route('report.board.update') !!}"
										>
											<span class="small fw-bold">
												{!! __("lang.button.update") !!}
											</span>
										</a>
									</div>
								</div>
							</div>
							<!-- /.toolbar -->

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

									<dl class="row mb-3">
										<dt class="col col-lg-4 text-lg-end">
											{!! __("lang.division.division_label") !!}
										</dt>
										<dd class="col">
											{!! $division['division_label'] !!}
										</dd>
									</dl>
									<dl class="row mb-0">
										<dt class="col col-lg-4 text-lg-end">
											{!! __("lang.form.remark") !!}
										</dt>
										<dd class="col">
											@if(is_null($division['remark']))
												&nbsp;
											@else
												{!! nl2br($division['remark']) !!}
											@endif
										</dd>
									</dl>

								</div>
							</div>

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

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

					<div class="col">

						<!-- section -->
						<section class="mb-5">
							<!-- toolbar -->
							<div class="d-flex justify-content-between align-items-center mb-3">
								<div>
									<h6>
										{!! implode('', [
											__("lang.staff.title"),
										]) !!}
										（{!! $staff_list_count !!}）
									</h6>
								</div>
								<div>
									<div
										class="btn-group btn-group-sm"
										role="group"
									>
										<a
											class="btn btn-outline-secondary"
											href="{!! route('report.board.update') !!}"
										>
											<span class="small fw-bold">
												{!! __("lang.button.update") !!}
											</span>
										</a>
									</div>
								</div>
							</div>
							<!-- /.toolbar -->

							@if($staff_list_count > 0)
								<ul class="list-group">
									@foreach($staff_list as $key => $value)
										<li class="list-group-item align-items-center py-3">

											<ul class="list-unstyled mb-0 ">
												@if(!is_null($value['class_label']))
													<li>
														<span class="small fw-bold">
															{!! $value['class_label'] !!}
														</span>
													</li>
												@endif
												<li>
													{!! implode(' ', [
														$value['staff_sname'],
														$value['staff_mname'],
														$value['staff_gname'],
													]) !!}
												</li>
											</ul>
										</li>
									@endforeach
								</ul>
							@else
								<div class="alert alert-secondary" role="alert">
									<p class="mb-0">
										{!! __("lang.error.empty") !!}
									</p>
								</div>
							@endif

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

					</div>

				</div>

			</div>
			<div
				class="tab-pane fade {!! ($tab == 1) ? 'show active' : '' !!}"
				id="list-report"
				role="tabpanel"
			>
				<div class="row row-cols-1 row-cols-lg-2 g-4 mb-5">

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

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

							<!-- toolbar -->
							<div class="d-flex justify-content-between align-items-center mb-3">
								<div>
									<h6>
										{!! implode('', [
											__("lang.report.title"),
										]) !!}
									</h6>
								</div>
								<div>
									<div
										class="btn-group btn-group-sm"
										role="group"
									>
										<a
											class="btn btn-outline-secondary"
											href="{!! route('division.report.update') !!}"
										>
											<span class="small fw-bold">
												{!! __("lang.button.update") !!}
											</span>
										</a>
									</div>
								</div>
							</div>
							<!-- /.toolbar -->

							@if($staff_mapping_list_count > 0)
								<ul class="list-group">
									@foreach($staff_mapping_list as $key => $value)
										<li class="list-group-item align-items-center">
											<dl class="mb-0">
												<dt class="mb-2">
													{!! $value['division_label'] !!}
												</dt>
												<dd class="mb-0">
													<ul class="list-unstyled">
														@foreach($value['staff_list'] as $staff)
															<li>
																{!! $staff['staff_number'] !!}
																：
																{!! implode(' ', [
																	$staff['staff_sname'],
																	$staff['staff_gname'],
																]) !!}
															</li>
														@endforeach
													</ul>
												</dd>
											</dl>
										</li>
									@endforeach
								</ul>
							@else
								<div class="alert alert-secondary" role="alert">
									<p class="mb-0">
										{!! __("lang.error.empty") !!}
									</p>
								</div>
							@endif

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

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

				</div>

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

</div>
@endsection

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

</style>
@stop

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