@extends('layout.backend')

@section('title', 'Visitas — Acompanhamento')

@section('styles')
	@parent
	<link href="{{ asset('css/chart.css') }}" rel="stylesheet">
@endsection

@section('scripts')
	@parent
	@vite(['resources/js/visits.js'])
	<script type="text/javascript" src="{{ asset('js/chart.js/dist/chart.umd.min.js') }}"></script>
	@vite(['resources/js/graph-chart.js'])
@endsection

@section('content')

<x-form.header.button-bar>
	<x-form.header.button-back :route="route('visits.index')" label="Voltar às visitas" tooltip="Retorna à listagem de visitas" />
</x-form.header.button-bar>

@include('components.widget.alerts')

<x-filter.area label="Visitas — acompanhamento" class="bg-info" route="{{ route('visits.digest') }}" filter-code="visitsdigest">
	<x-filter.select class="col-12 col-sm-4 col-md-4 col-lg-3"
		name="type" :items="$types" :value="$data['type']">
		Tipo
	</x-filter.select>
	<x-filter.select class="col-12 col-sm-4 col-md-4 col-lg-3"
		name="year" :items="$years" :value="$data['year']">
		Ano
	</x-filter.select>
	<x-filter.select class="col-12 col-sm-4 col-md-4 col-lg-3"
		name="region" :items="$arrRegions" :value="$data['region']">
		Região
	</x-filter.select>
</x-filter.area>

<div class="card shadow mb-4">
	<div class="card-header py-3 d-flex flex-column flex-md-row align-items-md-center justify-content-between">
		<div>
			<h6 class="m-0 font-weight-bold text-primary">
				<i class="fas fa-chart-line mr-2 text-gray-500"></i>Resumo geral
			</h6>
			<p class="small text-muted mb-0 mt-2">
				Percentual de membros que realizaram visitas na COLIH {{ config('app.name') }}.
			</p>
		</div>
		<span
			class="iconchart mt-3 mt-md-0"
			data-name="Percentual de membros que fizeram<br/>visitas na COLIH {{ config('app.name') }}"
			data-chartdata={{ $perChart }}
			role="button"
			tabindex="0"
		>
			<i class="fas fa-chart-pie fa-lg text-primary"></i>
		</span>
	</div>
</div>

<p class="small text-muted mb-3 px-1">
	<strong>Legenda:</strong>
	<span class="text-danger font-weight-bold">Ab</span> = abertas (não finalizadas) ·
	<span class="text-success font-weight-bold">Fn</span> = finalizadas.
	Clique nos números para abrir a listagem filtrada.
</p>

@foreach ($regions as $region)
	<div class="card shadow mb-4 border-left-primary">
		<div class="card-header py-3 bg-white">
			<h6 class="m-0 font-weight-bold text-primary text-uppercase">
				<i class="fas fa-map-marker-alt mr-2 text-secondary"></i>{{ $region->name }}
			</h6>
		</div>
		<div class="card-body p-0">
			<div class="table-responsive">
				<table class="table table-sm table-bordered table-hover mb-0 text-nowrap" style="min-width: 720px;" cellspacing="0">
					<thead class="thead-light">
						<tr>
							<th class="text-center align-middle bg-light" colspan="{{ 1 + ($mesend * 2) }}">
								<span class="text-primary font-weight-bold">Membros e totais por mês</span>
							</th>
						</tr>
						<tr>
							<th rowspan="2" class="align-middle text-left pl-3" style="min-width: 12rem;">Membro</th>
							@for ($m = 1; $m <= $mesend; $m++)
								<th colspan="2" class="text-center small font-weight-bold py-2">
									{{ $months[$m] }}
								</th>
							@endfor
						</tr>
						<tr>
							@for ($m = 1; $m <= $mesend; $m++)
								<th class="text-center small py-1 text-danger border-left" data-toggle="tooltip" data-placement="top" title="Abertas (não finalizadas)">Ab</th>
								<th class="text-center small py-1 text-success" data-toggle="tooltip" data-placement="top" title="Finalizadas">Fn</th>
							@endfor
						</tr>
					</thead>
					<tbody>
						@foreach ($users[$region->id] as $user)
							<tr>
								<td class="align-middle pl-3 pr-2">
									<div class="d-flex align-items-center justify-content-between">
										<span class="text-dark">{{ $user->shortname }}</span>
										<span
											class="iconchart flex-shrink-0 ml-2"
											data-percent="false"
											data-name="Quantidade de visitas por mês<br/> do membro {{ $user->shortname }}"
											data-chartdata={{ $chartUser[$user->id] }}
											role="button"
											tabindex="0"
										>
											<i class="fas fa-chart-pie text-secondary"></i>
										</span>
									</div>
								</td>
								@for ($m = 1; $m <= $mesend; $m++)
									<td class="text-center align-middle font-weight-bold border-left" data-toggle="tooltip" data-placement="top" title="Abertas (não finalizadas)">
										<a href="{!! route('visits.index', ['members' => $user->id, 'satus' => '1']) !!}" target="_blank" rel="noopener" class="text-danger">
											{{ $visitDigest[$region->id][$user->id][$m]['opened'] }}
										</a>
									</td>
									<td class="text-center align-middle font-weight-bold" data-toggle="tooltip" data-placement="top" title="Finalizadas">
										<a href="{!! route('visits.index', ['members' => $user->id, 'satus' => '2']) !!}" target="_blank" rel="noopener" class="text-success">
											{{ $visitDigest[$region->id][$user->id][$m]['ended'] }}
										</a>
									</td>
								@endfor
							</tr>
						@endforeach
						<tr class="table-secondary font-weight-bold">
							<td class="align-middle pl-3">
								<div class="d-flex align-items-center justify-content-between">
									<span>Total</span>
									<span
										class="iconchart flex-shrink-0 ml-2"
										data-name="Percentual de membros que fizeram<br/>visitas na região {{ $region->name }}"
										data-chartdata={{ $chartRegion[$region->id] }}
										role="button"
										tabindex="0"
									>
										<i class="fas fa-chart-pie text-primary"></i>
									</span>
								</div>
							</td>
							@for ($m = 1; $m <= $mesend; $m++)
								<td colspan="2" class="text-center align-middle h5 mb-0 py-2">
									{{ $totalRegionMes[$region->id][$m]['nv'] }}
								</td>
							@endfor
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
@endforeach

@endsection