@extends('layouts.dashboard.main')

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

{{-- nav --}}
@include('layouts.dashboard.components.circular.nav')

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

	<!-- toolbar -->
	<div class="d-flex justify-content-center align-items-center mb-3">
		<div>
			<a
				class=""
				href="{!! route('circular.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('circular.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('circular.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-2">
		<div class="me-auto">
			{!! __("lang.common.count") !!} : <span class="fw-bold">{!! $circular_list_count !!}</span>
		</div>
		<div>
			@if(\Session::get('staff.is_circular'))
				<div
					class="btn-group btn-group-sm"
					role="group"
				>
					<a
						class="btn btn-outline-secondary"
						href="{!! route('circular.update') !!}"
					>
						<span class="small fw-bold">
							{!! implode('', [
								'新規',
								__('lang.button.create'),
							]) !!}
						</span>
					</a>
				</div>
			@endif
		</div>
	</div>
	<!-- /.toolbar -->

	<!-- table -->
	<div class="table-responsive">
		<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>
						<ul class="list-unstyled mb-0">
							<li>
								{!! __("lang.circular.timestamp") !!}
							</li>
						</ul>
					</th>
					<th scope="col" nowrap>
						{!! __("lang.circular_file.short_title") !!}
					</th>
					<th scope="col" nowrap>
						<ul class="list-unstyled mb-0">
							<li>
								{!! __("lang.circular.circular_title") !!}
							</li>
						</ul>
					</th>
					<th scope="col" nowrap>
						<ul class="list-unstyled mb-0">
							<li>
								{!! __("lang.circular.staff_name") !!}
							</li>
						</ul>
					</th>
				</tr>
			</thead>
			<tbody class="table-group-divider">
				@if($circular_list_count > 0)
					@foreach($circular_list as $key => $value)
						<tr
							class="clickable {!! (!$value['is_read']) ? 'table-warning' : '' !!}"
							data-href="{!! route('circular.show', [
								$value['circular_code'],
							]) !!}"
							role="button"
						>
							<th nowrap scope="row">
								<div class="text-center">
									{!! $key + 1 !!}
								</div>
							</th>
							<td nowrap>
								@if(!$value['is_read'])
									<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>
								{!! \Carbon\Carbon::parse($value['timestamp'])->isoFormat('YYYY年MM月DD日 (ddd)') !!}
							</td>
							<td nowrap>
								@if($value['circular_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['circular_title'] !!}
										</span>
									</li>
								</ul>
							</td>
							<td nowrap>
								<ul class="list-unstyled mb-0">
									<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"
>
	<a
		class="btn btn-secondary"
		href="#page-top"
	>
		<span class="small 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