@extends('layouts.dashboard.main')

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

@include('layouts.dashboard.components.report.nav')

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

	<!-- toolbar -->
	<div class="d-flex justify-content-center align-items-center mb-3">
		<div>
			<a
				class=""
				href="{!! route('report.date.index', [
					$date['prev']['yy'],
					$date['prev']['mm'],
				]) !!}"
			>
				<i class="fa-solid fa-circle-chevron-left fa-fw fs-4"></i>
			</a>
		</div>
		<div class="mx-2">
			<h5>
				{!! \Carbon\Carbon::create(
					$yy,
					$mm,
					1
				)->format(__("lang.date.yymm")) !!}
			</h5>
		</div>
		<div>
			<a
				class=""
				href="{!! route('report.date.index', [
					$date['next']['yy'],
					$date['next']['mm'],
				]) !!}"
			>
				<i class="fa-solid fa-circle-chevron-right fa-fw fs-4"></i>
			</a>
		</div>
	</div>
	<!-- /.toolbar -->

	<!-- toolbar -->
	<div
		class="btn-group btn-group-sm d-flex"
		role="group"
	>
		@for($i = 1; $i <= 12; $i++)
			<a
				class="btn btn-outline-primary w-100 {!! ($i == $mm) ? 'active' : '' !!}"
				href="{!! route('report.date.index', [
					$yy,
					$i,
				]) !!}"
			>
				<span class="fw-bold">
					{!! implode('', [
						$i,
						__("lang.date.mm"),
					]) !!}
				</span>
			</a>
		@endfor
	</div>
	<!-- /.toolbar -->

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

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

	<!-- toolbar -->
	<div class="d-flex justify-content-start align-items-center mb-3">
		<div class="me-auto">
			{!! __("lang.common.count") !!} : <span class="fw-bold">{!! $report_list_count !!}</span>
		</div>
		<div></div>
	</div>
	<!-- /.toolbar -->

	<!-- table -->
	<div class="table-response">
		<table class="table table-hover">
			<colgroup>
				<col>
				<col>
				<col>
				<col>
				<col width="100%">
				<col>
			</colgroup>
			<thead class="table-group-divider">
				<tr>
					<th scope="col" nowrap>
						<div class="mx-2">
							#
						</div>
					</th>
					<th scope="col" nowrap>
						未読
					</th>
					<th scope="col" nowrap>
						<span class="">
							{!! __("lang.report.is_important") !!}
						</span>
					</th>
					<th scope="col" nowrap>
						{!! __("lang.report_file.short_title") !!}
					</th>
					<th scope="col" nowrap>
						<ul class="list-unstyled mb-0">
							<li>
								{!! __("lang.report.report_subject") !!}
							</li>
							<li>
								<nav class="mb-0" style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
									<ol class="breadcrumb mb-0">
										<li class="breadcrumb-item mb-0">
											{!! __("lang.board.title") !!}
										</li>
										<li class="breadcrumb-item mb-0">
											{!! __("lang.thread.title") !!}
										</li>
										<li class="breadcrumb-item mb-0">
											{!! __("lang.topic.title") !!}
										</li>
									</ol>
								</nav>
							</li>
						</ul>
					</th>
					<th scope="col" nowrap>
						<ul class="list-unstyled mb-0">
							<li>
								{!! __("lang.report.datetime") !!}
							</li>
							<li>
								{!! __("lang.report.staff_name") !!}
							</li>
						</ul>
					</th>
				</tr>
			</thead>
			<tbody class="table-group-divider">
				@if($report_list_count > 0)
					@foreach($report_list as $key => $value)
						<tr
							class="clickable {!! (is_null($value['timestamp'])) ? 'table-warning' : '' !!}"
							data-href="{!! route('report.report.show', [
								$value['board_code'],
								$value['thread_code'],
								$value['topic_code'],
								$value['report_code'],
							]) !!}"
							role="button"
						>
							<th nowrap scope="row">
								<div class="text-center">
									{!! $key + 1 !!}
								</div>
							</th>
							<td nowrap>
								@if(is_null($value['timestamp']))
									<div class="text-center">
										<span class="badge rounded-pill text-bg-warning">
											未読
										</span>
										{{--<i class="fa-solid fa-check fa-fw fa-lg"></i>--}}
									</div>
								@endif
							</td>
							<td nowrap>
								<div class="text-center">
									@if($value['is_important'])
										<span class="badge rounded-pill text-bg-danger">
											{!! __("lang.report.is_important") !!}
										</span>
									@endif
								</div>
							</td>
							<td nowrap>
								@if($value['report_file_count'] > 0)
									<div class="text-center">
										<i class="fa-solid fa-paperclip fa-fw fa-lg"></i>
									</div>
								@endif
							</td>
							<td nowrap>
								<ul class="list-unstyled mb-0">
									<li>
										<span class="fw-bold">
											{!! $value['report_subject'] !!}
										</span>
									</li>
									<li class="small mt-1">
										<nav aria-label="breadcrumb">
											<ol class="breadcrumb mb-0">
												<li class="breadcrumb-item mb-0">
													<a
														class=""
														href="{!! route('report.thread.index', [
															$value['board_code'],
														]) !!}"
													>
														{!! $value['board_title'] !!}
													</a>
												</li>
												<li class="breadcrumb-item mb-0">
													<a
														class=""
														href="{!! route('report.thread.index', [
															$value['board_code'],
														]) !!}"
													>
														{!! $value['thread_title'] !!}
													</a>
												</li>
												<li class="breadcrumb-item mb-0">
													<a
														class=""
														href="{!! route('report.report.index', [
															$value['board_code'],
															$value['thread_code'],
															$value['topic_code'],
														]) !!}"
													>
														{!! $value['topic_title'] !!}
													</a>
												</li>
											</ol>
										</nav>
									</li>
								</ul>
							</td>
							<td nowrap>
								<ul class="list-unstyled mb-0">
									<li>
										{!! \Carbon\Carbon::parse($value['datetime'])->isoFormat("YYYY年MM月DD日(ddd)") !!}
									</li>
									<li>
										{!! implode(' ', [
											$value['staff_sname'],
											$value['staff_gname'],
										]) !!}
									</li>
								</ul>
							</td>
						</tr>
					@endforeach
				@else
					<tr>
						<td colspan="5">
							{!! __("lang.error.empty") !!}
						</td>
					</tr>
				@endif
			</tbody>
		</table>
	</div>
	<!-- /.table -->

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

<!-- btn-fixed -->
<div
	class="btn-fixed bg-white"
	style="z-index:999"
></div>
<!-- /.btn-fixed -->
@endsection

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

</style>
@stop

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