@extends('layouts.dashboard.main')

{{-- content --}}
@section('content')
<section class="mb-5">

	<!-- nav -->
	<nav class="mb-4">
		<div
			class="nav nav-tabs nav-fill"
			role="tablist"
		>
			@foreach($staff_list as $i => $content)
				<button
					class="nav-link {!! ($i == $tab) ? 'active' : '' !!}"
					data-bs-toggle="tab"
					data-bs-target="#tab{!! $i !!}"
					type="button"
					role="tab"
					aria-selected="{!! ($i == $tab) ? 'true' : 'false' !!}"
				>
					<span class="fw-bold">
						{!! $content['coe_label'] !!}
					</span>
				</button>
			@endforeach
		</div>
	</nav>
	<!-- /.nav -->

	<!-- tab-content -->
	<div class="tab-content">
		@foreach($staff_list as $i => $content)
			<div
				class="tab-pane fade {!! ($i == $tab) ? 'show active' : '' !!}"
				id="tab{!! $i !!}"
				role="tabpanel"
			>

				<!-- toolbar -->
				<div class="d-flex justify-content-between align-items-center mb-3">
					<div class="">
						{!! __("lang.common.count") !!}：<span class="fw-bold">{!! count($content['staff_list']) !!}{!! __("lang.unit.human") !!}</span>
					</div>
					<div></div>
				</div>
				<!-- /.toolbar -->

				<!-- table -->
				<div class="table-responsive">
					<table class="table table-hover">
						<colgroup>
							<col>
							<col>
							<col>
							<col>
							<col>
							<col>
							<col width="40%">
							<col>
							<col>
							<col width="60%">
						</colgroup>
						<thead class="table-group-divider">
							<tr>
								<th scope="col" nowrap>
									&nbsp;
								</th>
								<th scope="col" nowrap>
									#
								</th>
								<th scope="col" nowrap>
									{!! __("lang.year.title") !!}
								</th>
								<th scope="col" nowrap>
									{!! __("lang.scheme.title") !!}
								</th>
								<th scope="col" nowrap>
									{!! __("lang.staff.staff_number") !!}
								</th>
								<th scope="col" nowrap>
									{!! __("lang.employee.title") !!}
								</th>
								<th scope="col" nowrap>
									{!! __("lang.staff.staff_name") !!}
								</th>
								<th scope="col" nowrap>
									{!! __("lang.staff.gender") !!}
								</th>
								<th scope="col" nowrap>
									{!! __("lang.staff.age") !!}
								</th>
								<th scope="col" nowrap>
									{!! __("lang.workplace.title") !!}
								</th>
							</tr>
						</thead>
						<tbody class="table-group-divider">
							@if(count($content['staff_list']) > 0)
								@foreach($content['staff_list'] as $key => $value)
									<tr
										class="clickable"
										data-href="{!! route('international.foreigner.show', [
											$value['staff_code'],
										]) !!}"
									>
										<td>
											@if(is_null($value['image']))
												<img
													class="rounded"
													src="{!! implode('/', [
														asset('img'),
														'avators',
														"{$value['gender']}.png",
													]) !!}"
													style="height:80px;"
												>
											@else
												<img
													class="rounded"
													src="{!! implode('/', [
														asset('storage'),
														'staff',
														$value['image'],
													]) !!}"
													style="height:80px;"
												>
											@endif
										</td>
										<th nowrap scope="row">
											<div class="text-center">
												{!! $key + 1 !!}
											</div>
										</th>
										<td nowrap>
											{!! mb_substr($value['year_label'], 0, 3) !!}
										</td>
										<td nowrap>
											{!! $value['scheme_label'] !!}
										</td>
										<td nowrap>
											<div class="text-center">
												<span class="fw-bold">
													{!! $value['staff_number'] !!}
												</span>
											</div>
										</td>
										<td nowrap>
											{!! $value['employee_label'] !!}
										</td>
										<td nowrap>
											{!! implode(' ', [
												$value['staff_skana'],
												$value['staff_mkana'],
												$value['staff_gkana'],
											]) !!}
										</td>
										<td nowrap>
											{!! __("lang.dictionary.gender.{$value['gender']}") !!}
										</td>
										<td nowrap>
											<div class="text-center">
												{!! App\Helper::getAge($value['birthday']) !!}
											</div>
										</td>
										<td nowrap>
											{!! $value['workplace_label'] !!}
										</td>
									</tr>
								@endforeach
							@else
								<tr>
									<td>
										<img
											class="rounded"
											src="{!! implode('/', [
												asset('img'),
												'noimage.png',
											]) !!}"
											style="height:80px;"
										>
									</td>
									<td colspan="10">
										{!! __("lang.error.empty") !!}
									</td>
								</tr>
							@endif
						</tbody>
					</table>
				</div>
				 <!-- /.table -->

			</div>
		@endforeach
		<!-- /.tab-content -->

	</div>

</section>
@endsection

{{-- css --}}
@section('css')
<style>
.clickable {
	cursor: pointer;
}
</style>
@stop

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

	$(".clickable").click(function() {
		window.location = $(this).data("href");
	});
});
</script>
@stop