@extends('layouts.dashboard.main')

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

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

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

	<!-- aside -->
	<aside class="col col-lg-3">
		{!! Form::open($form) !!}

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

			<!-- section-title -->
			<div class="section-title d-flex justify-content-between align-items-center mb-3">
				<div>
					<h5>
						{!! implode('', [
							__("lang.tag.title"),
							__("lang.button.index"),
						]) !!}
					</h5>
				</div>
				<div>
					<div
						class="btn-group btn-group-sm"
						role="group"
					>
						<a
							class="btn btn-outline-secondary disabled"
							href=""
						>
							<span class="small fw-bold">
								{!! implode('', [
									__("lang.tag.title"),
									__("lang.button.management"),
								]) !!}
							</span>
						</a>
					</div>
				</div>
			</div>
			<!-- /.section-title -->

			@if($tag_list_count > 0)
				<div class="card">
					<div class="card-body">

						<div class="mb-3">
							<label
								class="form-label"
								for=""
							>
								{!! __("lang.tag.title") !!}
							</label>
							<ul class="list-inline mb-0">
								@foreach($tag_list as $key => $value)
									<li class="list-inline-item me-0 mb-1">
										{!! Form::checkbox("tag[{$key}]", $key, (isset($tag[$key])) ? true : false, [
											'class' => 'btn-check tag',
											'id' => "tag{$key}",
											'autocomplete' => 'off',
										]) !!}
										<label
											class="btn btn-outline-primary btn-sm"
											for="tag{!! $key !!}"
										>
											<span class="small fw-bold">
												{!! $value !!}
											</span>
										</label>
									</li>
								@endforeach
							</ul>
						</div>

						<div class="d-grid gap-2">
							<button
								class="btn btn-primary btn-sm"
								type="submit"
								name="action"
								action="submit"
							>
								<span class="fw-bold">
									{!! __("lang.button.search") !!}
								</span>
							</button>
							<a
								class="btn btn-outline-secondary btn-sm"
								href="{!! route('report.tag.index') !!}"
							>
								<span class="fw-bold">
									{!! __("lang.button.reset") !!}
								</span>
							</a>
						</div>
					</div>
				</div>
			@else
				<div
					class="alert alert-secondary text-center"
					role="alert"
				>
					<span class="fw-bold">
						{!! __("lang.error.empty") !!}
					</span>
				</div>
			@endif

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

		{!! Form::close() !!}
	</aside>
	<!-- /.aside -->

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

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

			@if(isset($report_list))

				<!-- 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-light 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="text-white">
										{!! __("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>
											{!! __("lang.topic.title") !!}
										</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="4">
										{!! __("lang.error.empty") !!}
									</td>
								</tr>
							@endif
						</tbody>
					</table>
				</div>
				<!-- /.table -->
			@else

			@endif

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

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

</div>

<!-- 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() {

	//
	$('form').submit(function() {

		// get vals
		const vals = $('.tag:checked').map(function() {
			return $(this).val();
		}).get();
		//alert(vals.length);return false;

		if(vals.length < 1) {
			alert("タグが選択されていません。");
			return false;
		}
	});
});
</script>
@stop