@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">

		<section class="mb-3">

			<!-- section-title -->
			<div class="section-title d-flex justify-content-between align-items-center mb-3">
				<div>
					<h5>
						{!! implode('', [
							__("lang.board.title"),
							__("lang.button.index"),
						]) !!}
					</h5>
				</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">
								{!! implode('', [
									__("lang.board.title"),
									__("lang.button.management"),
								]) !!}
							</span>
						</a>
					</div>
				</div>
			</div>
			<!-- /.section-title -->

			@if($board_list_count > 0)
				<ul class="list-group">
					@foreach($board_list as $key => $value)
						<a
							class="list-group-item list-group-item-action d-flex justify-content-start align-items-center {!! ($value['board_code'] == $board_code) ? 'active' : '' !!}"
							href="{!! route('report.thread.index', [
								$value['board_code'],
							]) !!}"
						>
							<div class="me-auto">
								<span class="fw-bold">
									{!! $value['board_title'] !!}
								</span>
							</div>
							@if($value['is_public'])
								<div class="me-2">
									<span class="badge rounded-pill text-bg-danger">
										{!! __("lang.board.is_public") !!}
									</span>
								</div>
							@endif
							<div>
								<i class="fas fa-angle-right fa-fw"></i>
							</div>
						</a>
					@endforeach
				</ul>
			@else
				<div class="alert alert-secondary py-3">
					<span class="fw-bold">
						{!! __("lang.error.empty") !!}
					</span>
				</div>
			@endif
		</section>

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

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

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

			@if(isset($thread_list))
				<!-- section-title -->
				<div class="d-flex justify-content-between align-items-center mb-3">
					<div>
						<h5>
							{!! implode('', [
								__("lang.thread.title"),
								__("lang.button.index"),
							]) !!}（{!! $thread_list_count !!}）
						</h5>
					</div>
					<div>
						<div
							class="btn-group btn-group-sm"
							role="group"
						>
							<a
								class="btn btn-outline-secondary"
								href="{!! route('report.thread.update', [
									$board_code,
								]) !!}"
							>
								<span class="small fw-bold">
									{!! implode('', [
										__("lang.thread.title"),
										__("lang.button.management"),
									]) !!}
								</span>
							</a>
						</div>
					</div>
				</div>
				<!-- /.section-title -->

				@if($thread_list_count > 0)
					@foreach($thread_list as $key => $value)
						<div class="mb-5">

							<div class="d-flex justify-content-between align-items-center mb-3 p-3 bg-primary-subtle">
								<div>
									<h6>
										{{--<span class="fw-bold me-1">
											<i class="far fa-circle fa-fw"></i>
										</span>--}}
										{!! $key + 1 !!}.&nbsp;
										{!! implode('', [
											$value['thread_title'],
										]) !!}（{!! $value['topic_list_count'] !!}）
									</h6>
								</div>
							</div>

							<!-- toolbar -->
							<div class="d-flex justify-content-start align-items-center mb-2">
								<div class="me-auto">
									{!! __("lang.common.count") !!} : <span class="fw-bold">{!! $value['topic_list_count'] !!}</span>
								</div>
								<div>
									<div
										class="btn-group btn-group-sm"
										role="group"
									>
										<a
											class="btn btn-outline-secondary"
											href="{!! route('report.topic.update', [
												$board_code,
												$value['thread_code'],
											]) !!}"
										>
											<span class="small fw-bold">
												{!! implode('', [
													__("lang.topic.title"),
													__("lang.button.management"),
												]) !!}
											</span>
										</a>
									</div>
								</div>
							</div>
							<!-- /.toolbar -->

							<!-- table -->
							<div class="table-response">
								<table class="table table-hover">
									<colgroup>
										<col>
										<col>
										<col width="100%">
										<col>
									</colgroup>
									<thead class="table-light table-group-divider">
										<tr>
											<th scope="col" nowrap>
												<span class="px-2">
													#
												</span>
											</th>
											<th scope="col" nowrap>
												<span class="">
													共有
												</span>
											</th>
											<th scope="col" nowrap>
												{!! __("lang.topic.title") !!}
											</th>
											<th scope="col" nowrap>
												{!! implode('', [
													//__("lang.report.title"),
													'報告',
													__("lang.unit.number"),
												]) !!}
											</th>
										</tr>
									</thead>
									<tbody class="table-group-divider">
										@if($value['topic_list_count'] > 0)
											@foreach($value['topic_list'] as $i => $topic)
												<tr
													class="clickable"
													data-href="{!! route('report.report.index', [
														$board_code,
														$value['thread_code'],
														$topic['topic_code'],
													]) !!}"
													role="button"
												>
													<th nowrap scope="row">
														<div class="text-center">
															{!! $i + 1 !!}
														</div>
													</th>
													<td nowrap>
														@if($topic['is_share'])
															<div class="text-center">
																<span class="badge rounded-pill text-bg-warning">
																	{!! __("lang.form.is_share") !!}
																</span>
															</div>
														@endif
													</td>
													<td nowrap>
														{!! $topic['topic_title'] !!}
													</td>
													<td nowrap>
														<div class="text-center">
															<span class="{!! ($topic['report_list_count'] > 0) ? 'fw-bold' : 'text-secondary' !!}">
																{!! $topic['report_list_count'] !!}
															</span>
														</div>
													</td>
												</tr>
											@endforeach
										@else
											<tr>
												<td colspan="4">
													{!! __("lang.error.empty") !!}
												</td>
											</tr>
										@endif
									</tbody>
								</table>
							</div>
							<!-- /.table -->

						</div>
					@endforeach
				@else
					<div class="alert alert-secondary">
						<p class="text-center mb-0">
							<span class="fw-bold">
								{!! __("lang.error.empty") !!}
							</span>
						</p>
					</div>
				@endif

			</section>
			<!-- /.section -->
		@endif

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

</div>

<!-- btn-fixed -->
<div
	class="btn-fixed"
	style="z-index:999"
>
	<a
		class="btn btn-outline-secondary"
		href="{!! route('report.thread.index') !!}"
		style="width:120px;"
	>
		<span class="small fw-bold">
			{!! implode('', [
				__("lang.button.back"),
			]) !!}
		</span>
	</a>
	<a
		class="btn btn-primary"
		href="#page-top"
	>
		<span class="fw-bold">
			<i class="fas fa-angle-up"></i>
		</span>
	</a>
</div>
<!-- /.btn-fixed -->
@endsection

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

</style>
@stop

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

	//
});
</script>
@stop