@extends('layouts.dashboard.main')

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

<!-- page-title -->
<div class="section-title mb-4">
	<div>
		<h4 class="mb-2">
			@if($report['is_important'])
				<span class="me-1">
					<span class="badge rounded-pill text-bg-danger">
						{!! __("lang.report.is_important") !!}
					</span>
				</span>
			@endif
			{!! $report['report_subject'] !!}
		</h4>
	</div>
</div>
<!-- /.page-title -->

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

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

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

			<!-- toolbar -->
			<div class="d-flex justify-content-between align-items-center mb-2">
				<div>
					<ul class="list-inline mb-0">
						<li class="list-inline-item me-3">
							<span class="fw-bold">作成日：</span>{!! \Carbon\Carbon::parse($report['datetime'])->isoFormat("YYYY年MM月DD日（ddd）") !!}
						</li>
						<li class="list-inline-item me-3">
							<span class="fw-bold">作成者：</span>{!! implode(' ', [
								$report['staff_sname'],
								$report['staff_gname'],
							]) !!}
						</li>
					</ul>
				</div>
			</div>
			<!-- /.toolbar -->

			<!-- toolbar -->
			@if($tag_mapping_list_count > 0)
				<ul class="list-inline mb-3">
					@foreach($tag_mapping_list as $key => $value)
						<li class="list-inline-item me-1">
							<div class="badge rounded-pill text-bg-light border border-dark px-3 py-2">
								<span class="badge-tag">
									{!! $value['tag_label'] !!}
								</span>
							</div>
						</li>
					@endforeach
				</ul>
			@endif
			<!-- /.toolbar -->

			<div class="card mb-4">
				<div class="card-body">
					<p class="lh-lg mb-0">
						{!! nl2br($report['report_body']) !!}
					</p>
				</div>
			</div>

			<!-- toolbar -->
			<div class="d-flex justify-content-between align-items-center mb-0">
				<div>
					<ul class="list-inline mb-0">
						<li class="list-inline-item me-3">
							<span class="fw-bold">既読者：</span>{!! ($log_report_list) ? implode(', ', $log_report_list) : 'なし' !!}
						</li>
					</ul>
				</div>
				<div></div>
			</div>

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

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

	<!-- aside -->
	<aside class="col col-lg-4">

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

			<!-- toolbar -->
			<div class="d-flex justify-content-between align-items-center mb-2">
				<div>
					<ul class="list-inline mb-0">
						<li class="list-inline-item me-3">
							<span class="fw-bold">添付ファイル数：</span>{!! $report_file_list_count !!}
						</li>
					</ul>
				</div>
			</div>
			<!-- /.toolbar -->

			<div class="card mb-3">
				<div class="list-group list-group-flush">
					@if($report_file_list_count > 0)
						@foreach($report_file_list as $key => $value)
							<a
								class="list-group-item list-group-item-action d-flex justify-content-start align-items-center py-2"
								href="{!! implode('/', [
									asset('storage'),
									'report',
									$value['file_name'],
								]) !!}"
								@if($value['extension'] == 'pdf' || $value['extension'] == 'jpg' || $value['extension'] == 'jpeg' || $value['extension'] == 'png')
									data-fancybox
								@endif
							>
								<div class="me-3">
									<img
										class=""
										src="{!! implode('/', [
											asset('img'),
											'icons',
											$value['extension'] . '.png'
										]) !!}"
										style="height:38px;"
									>
								</div>
								<div class="me-auto">
									<ul class="list-inline small mb-0">
										<li class="list-inline-item">
											種別：{!! $value['extension'] !!}
										</li>
										<li class="list-inline-item">
											容量：{!! App\Helper::getByteFormat($value['size'], 0) !!}
										</li>
									</ul>
									<span class="fw-bold">
										{!! $value['original_name'] !!}
									</span>
								</div>
								<div>
									<i class="fa-solid fa-angle-right fa-fw"></i>
								</div>
							</a>
						@endforeach
					@else
						<div class="list-group-item list-group-item-action py-3">
							<p class="fw-bold text-center mb-0">
								添付ファイルはありません
							</p>
						</div>
					@endif
				</div>
			</div>

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

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

</div>

<!-- btn-fixed -->
<div
	class="btn-fixed"
	style="z-index:999"
	>
	<a
		class="btn btn-outline-secondary"
		href="{!! url()->previous(); !!}"
		style="width:120px;"
	>
		<span class="fw-bold">
			{!! __("lang.button.back") !!}
		</span>
	</a>
</div>
<!-- /.btn-fixed -->

@endsection

{{-- css --}}
@section('css')
<style>
.badge-tag {
	font-size: .85rem;
	font-weight: normal;
}
</style>
@stop

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

	//
});
</script>
@stop