{% extends "cliente/base.php" %}
{% block body %}
<style>
	.rotate {
		-webkit-animation: spin 2s linear infinite;
		/* Safari */
		animation: spin 2s linear infinite;
	}

	/* Safari */
	@-webkit-keyframes spin {
		0% {
			-webkit-transform: rotate(0deg);
		}

		100% {
			-webkit-transform: rotate(360deg);
		}
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.input-group-addon {
		border: none !important;
	}

	.btn-light {
		background-color: #F2F5FA;
		border: none;
		color: #000000;
	}

	.wrapper .border-light {
		border: none;
	}

	.daterangepicker .ranges li.active {
		background-color: #2FB649 !important;
		color: #fff;
	}

	.theme-primary .ranges li:hover,
	.theme-primary .ranges li:active,
	.theme-primary .ranges li.active {
		border: none;
	}

	.theme-primary .daterangepicker td.active {
		background-color: #2FB649 !important;
	}

	.daterangepicker td.in-range {
		background-color: #c2efcb;
		border-color: transparent;
		color: #000;
		border-radius: 0;
	}

	.theme-primary .btn-primary {
		background-color: #2FB649;
		border-color: #2FB649;
		color: #ffffff;
	}

	.theme-primary .btn-primary:hover,
	.theme-primary .btn-primary:active,
	.theme-primary .btn-primary:focus,
	.theme-primary .btn-primary.active {
		background-color: #1b9c35 !important;
		border-color: #1b9c35 !important;
		color: #ffffff !important;
	}

	@media (max-width: 768px) {
		.fixed .content-wrapper {
			margin-top: 75px !important;
		}
	}

	.fixed .content-wrapper {
		margin-top: 0px;
	}

	.card-header {
		display: -webkit-box;
		display: flex;
		-webkit-box-pack: justify;
		justify-content: center;
		-webkit-box-align: center;
		align-items: center;
		padding: 1.5rem;
		background-color: transparent;
		border-bottom: 1px solid rgba(0, 0, 0, 0.07);
		border-radius: 15px 15px 0 0 !important;
	}

	.card {
		border-radius: 15px;
		box-shadow: 0 3px 5px 1px rgba(0, 0, 0, 0.05);
		margin-bottom: 1.5rem !important;
		border: none;
		border-bottom: 15px solid #585EA8;
	}

	.card-body {
		padding: 1.5rem;
		background-color: #F2F2F2;
	}
</style>


<div class="content-wrapper bg-light">
	<div class="container-full ">
		<!-- Content Header (Page header) -->
		<div class="content-header">
			<div class="d-flex align-items-center">
				<div class="me-auto">
					<h4 class="page-title fw-bold text-purple">Relatório Atendentes</h4>
				</div>
			</div>
		</div>

		<!-- Main content -->
		<section class="content">
			<div class="row">
				<div class="col-12">
					<div class="box p-3" style="min-height: 80vh;">
						<div class="row g-2 justify-content-center">
							<div class="col-12 col-lg-3">
								<div class="input-group">
									<div class="input-group-addon bg-purple border-light">
										<i class="fa fa-calendar"></i>
									</div>
									<input type="text" class="form-control bg-manager-gray border-light" id="periodoFiltro">
								</div>
							</div>

							<div class="col-12 col-lg-3 ">
								<div class="input-group">
									<div class="input-group-addon bg-purple border-light">
										<i class="fa fa-phone"></i>
									</div>
									<select id="meusNumeros" class="selectpicker form-control form-control-sm bg-white border-light" title="Nenhum número cadastrado" style="letter-spacing: 1px !important;">
										{% for n in numeros %}
										<option value="{{n.idNumeros}}" style="letter-spacing: 1px !important;">{{n.descricao}} ({{n.numero}})</option>
										{% endfor %}
									</select>
								</div>
							</div>

							<div class="mb-4 col-12 col-lg-3">
								<div class="input-group">
									<div class="input-group-addon bg-purple border-light">
										<i class="fa fa-sort"></i>
									</div>
									<select id="order" class="selectpicker form-control form-control-sm bg-white border-light" title="Nenhum número cadastrado" style="letter-spacing: 1px !important;">
										<option value="az">Nome A-Z</option>
										<option value="za">Nome Z-A</option>
										<option value="atend_desc" selected>Mais atendimentos</option>
										<option value="atend_asc">Menos atendimentos</option>
										<option value="tempoinicio_desc">Maior tempo início</option>
										<option value="tempionicio_asc">Menor tempo início</option>
										<option value="tempoatend_desc">Maior tempo atendimento</option>
										<option value="tempoatend_asc">Menor tempo atendimento</option>
										<option value="avaliacao_desc">Maior avaliação</option>
										<option value="avaliacao_asc">Menor avaliação</option>
									</select>
								</div>
							</div>

						</div>
						<div class="row g-0 mb-3">
							<div class="box-body no-padding">
								<div class="table-responsive" style="max-height: 68vh; overflow: auto; border-radius: 15px 15px 0 0;">
									<table id="tabelaAtendentes" class="table table-hover">
										<thead class="bg-purple sticky-top" style="z-index: 99;">
											<tr>
												<th><i class="fa-solid fa-id-card-clip"></i> Id</th>
												<th><i class="fa-solid fa-headset"></i> Atendente</th>
												<th><i class="fa-solid fa-check"></i> Atendimentos</th>
												<th><i class="fa-regular fa-calendar-check"></i> 1º Atend.Iniciado</th>
												<th><i class="fa-solid fa-clock"></i> Tempo Início</th>
												<th><i class="fa-solid fa-user-clock"></i> Tempo Atendimento</th>
												<th><i class="fa-solid fa-star"></i> Avaliação</th>
											</tr>
										</thead>
										<tbody>

										</tbody>
									</table>
								</div>
							</div>
						</div>

						<div class="row">
							<div class="col-md-4">
								<div class="box-body no-padding">
									<div class="card">
										<div class="card-header bg-purple rounded-4 with-border p-3">
											<h5 class="card-title fw-bold">Porcentagem de Atendimentos</h5>
										</div>
										<div class="card-body">
											<div class="d-flex align-items-center justify-content-center" style="max-height: 330px; min-height: 330px;">
												<canvas id="graficoAtendimentos" style="max-height: 300px;"></canvas>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-md-4">
								<div class="box-body no-padding">
									<div class="card">
										<div class="card-header bg-purple rounded-4 with-border p-3">
											<h5 class="card-title fw-bold">Tempo Aguardando Atendimento</h5>
										</div>
										<div class="card-body">
											<div class="d-flex align-items-center justify-content-center" style="max-height: 330px; min-height: 330px;">
												<canvas id="graficoTempoInicio" style="max-height: 300px;"></canvas>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-md-4">
								<div class="box-body no-padding">
									<div class="card">
										<div class="card-header bg-purple rounded-4 with-border p-3">
											<h5 class="card-title fw-bold">Tempo de Atendimento</h5>
										</div>
										<div class="card-body">
											<div class="d-flex align-items-center justify-content-center" style="max-height: 330px; min-height: 330px;">
												<canvas id="graficoTempoAtendimento" style="max-height: 300px;"></canvas>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
		<!-- /.content -->
	</div>
</div>

{% endblock %}
{% block scripts %}

<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
<script>
	$('body').addClass('sidebar-collapse');

	var colors = [];
	var colorsLight = [];
	$(document).ready(function() {
		$('.dropdown-toggle').css('min-height', '34px');
		$('.dropdown-toggle').css('font-size', '14px');
		$('#meusNumeros').selectpicker();
		$('#meusNumeros').selectpicker('val', '{{numeros.0.idNumeros}}');

		moment.locale('pt-br');
		$('#periodoFiltro').daterangepicker({
			locale: {
				cancelLabel: 'Limpar',
				applyLabel: 'Aplicar',
				customRangeLabel: 'Escolher período',
			},
			ranges: {
				'Hoje': [moment(), moment()],
				'Ontem': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
				'Últimos 7 dias': [moment().subtract(6, 'days'), moment()],
				'Últimos 30 dias': [moment().subtract(29, 'days'), moment()],
				'Esse Mês': [moment().startOf('month'), moment().endOf('month')],
				'Último Mês': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
			},
			"maxSpan": {
				"months": 12
			},
		});

		$('#periodoFiltro').val('Hoje')
		$('#periodoFiltro, #meusNumeros, #order').on('change', function(e) {
			if ($('#periodoFiltro').val() == $('#periodoFiltro').data('lastValue')) {
				$('#periodoFiltro').val($('#periodoFiltro').data('daterangepicker').chosenLabel)
				return;
			}
			if ($('#periodoFiltro').data('daterangepicker').chosenLabel != 'Escolher período') {
				$('#periodoFiltro').data('lastValue', $('#periodoFiltro').val())
				$('#periodoFiltro').val($('#periodoFiltro').data('daterangepicker').chosenLabel)
			}
			getTotais();
		})
		getTotais();
	})

	let graficoAtendimentos;
	let graficoTempoInicio;
	let graficoTempoAtendimento;

	function getTotais() {
		Swal.fire({
			title: 'Buscando...',
			allowOutsideClick: false,
			scrollbarPadding: false
		});
		Swal.showLoading();

		let inicio = moment($('#periodoFiltro').data('daterangepicker').startDate._d).format('YYYY-MM-DD');
		let final = moment($('#periodoFiltro').data('daterangepicker').endDate._d).format('YYYY-MM-DD');
		let numero = $('#meusNumeros').val();

		fetch('getRelatoioAtendentesTotais', {
				method: 'POST',
				headers: {
					'Content-Type': 'application/x-www-form-urlencoded'
				},
				body: 'inicio=' + inicio + '&final=' + final + '&numero=' + numero + '&order=' + $('#order').val()
			})
			.then(res => res.json())
			.then(res => {
				$('#periodoFiltro').blur();

				if (res.Success) {
					var atendentes = res.atendentes;

					$('#tabelaAtendentes > tbody').empty();
					$('#tabelaAtendentes > tfoot').remove();
					var totalAtendimentos = 0;
					var labels = [];
					var data = [];
					var colors = [];

					var tempoInicioLabels = [];
					var tempoInicioData = [];
					var tempoInicioColors = [];

					var tempoAtendimentoLabels = [];
					var tempoAtendimentoData = [];
					var tempoAtendimentoColors = [];

					var totalTempoInicia = 0;
					var totalTempoAtendimento = 0;
					var totalAvaliacao = 0;
					var totalLinhas = 0;

					$(atendentes).each(function(index, a) {
						$('#tabelaAtendentes > tbody').append(
							'<tr>' +
							'<td>' + (index + 1) + '</td>' +
							'<td>' + a.nomeAtendente + '</td>' +
							'<td>' + a.totalAtendimentos + '</td>' +
							'<td>' + (a.primeiroAtendimento != null ? moment(a.primeiroAtendimento).format('DD/MM/YY HH:mm') : 'Nenhum') + '</td>' +
							'<td>' + moment.utc(a.tempoInicia * 1000).format((a.tempoInicia > 3599 ? 'HH:mm:ss' : 'mm:ss')) + '</td>' +
							'<td>' + moment.utc(a.tempoAtendimento * 1000).format((a.tempoAtendimento > 3599 ? 'HH:mm:ss' : 'mm:ss')) + '</td>' +
							'<td>' + (Math.round(a.avaliacao * 10) / 10).toFixed(1) + '</td>' +
							'</tr>'
						);

						totalLinhas++;
						totalAtendimentos += +a.totalAtendimentos;
						totalTempoInicia += +a.tempoInicia;
						totalTempoAtendimento += +a.tempoAtendimento;
						totalAvaliacao += +Math.round(a.avaliacao * 10) / 10;

						labels.push(a.nomeAtendente);
						data.push(a.totalAtendimentos);
						colors.push(`hsl(${Math.random() * 360}, 70%, 70%)`);

						tempoInicioLabels.push(a.nomeAtendente);
						tempoInicioData.push(Number(a.tempoInicia) || 0);
						tempoInicioColors.push(`hsl(${Math.random() * 360}, 70%, 70%)`);

						tempoAtendimentoLabels.push(a.nomeAtendente);
						tempoAtendimentoData.push(Number(a.tempoAtendimento) || 0);
						tempoAtendimentoColors.push(`hsl(${Math.random() * 360}, 70%, 70%)`);
					});

					if (atendentes.length > 0) {
						$('#tabelaAtendentes').append(
							'<tfoot class="bg-lightest" style="position: -webkit-sticky; position: sticky; bottom: 0; z-index: 99;">' +
							'<tr>' +
							'<th>' + totalLinhas + '</th>' +
							'<th></th>' +
							'<th>' + totalAtendimentos + '</th>' +
							'<th></th>' +
							'<th>' + moment.utc((totalTempoInicia / totalLinhas) * 1000).format(((totalTempoInicia / totalLinhas) > 3599 ? 'HH:mm:ss' : 'mm:ss')) + '</th>' +
							'<th>' + moment.utc((totalTempoAtendimento / totalLinhas) * 1000).format(((totalTempoAtendimento / totalLinhas) > 3599 ? 'HH:mm:ss' : 'mm:ss')) + '</th>' +
							'<th>' + (Math.round((totalAvaliacao / totalLinhas) * 100) / 100).toFixed(1) + '</th>' +
							'</tr>' +
							'</tfoot>'
						);
						$('.table > tbody > tr:last-child > *').css('border', 'none');
					}

					// Gráfico de atendimentos
					if (graficoAtendimentos) graficoAtendimentos.destroy();
					const ctxAtendimentos = document.getElementById('graficoAtendimentos').getContext('2d');
					graficoAtendimentos = new Chart(ctxAtendimentos, {
						type: 'pie',
						data: {
							labels: labels,
							datasets: [{
								data: data,
								backgroundColor: colors,
								borderWidth: 1
							}]
						},
						options: {
							responsive: true,
							plugins: {
								title: {
									display: true,
									text: `Total de Atendimentos: ${totalAtendimentos}`
								},
								tooltip: {
									callbacks: {
										label: function(tooltipItem) {
											let total = data.reduce((sum, value) => sum + value, 0);
											let percentage = ((tooltipItem.raw / total) * 100).toFixed(2);
											return `${tooltipItem.label}: ${tooltipItem.raw} (${percentage}%)`;
										}
									}
								},
								datalabels: {
									formatter: (value, ctx) => {
										let total = ctx.chart.data.datasets[0].data.reduce((sum, val) => sum + val, 0);
										let percentage = ((value / total) * 100).toFixed(2);
										return `${percentage}%`;
									},
									color: '#fff',
									font: {
										weight: 'bold'
									}
								}
							}
						},
						plugins: [ChartDataLabels]
					});

					// Gráfico de tempo de início
					if (graficoTempoInicio) graficoTempoInicio.destroy();
					const ctxTempoInicio = document.getElementById('graficoTempoInicio').getContext('2d');
					graficoTempoInicio = new Chart(ctxTempoInicio, {
						type: 'pie',
						data: {
							labels: tempoInicioLabels,
							datasets: [{
								data: tempoInicioData,
								backgroundColor: tempoInicioColors,
								borderWidth: 1
							}]
						},
						options: {
							responsive: true,
							plugins: {
								title: {
									display: true,
									text: `Total de Tempo de Início: ${moment.utc(totalTempoInicia * 1000).format('HH:mm:ss')}`
								},
								tooltip: {
									callbacks: {
										label: function(tooltipItem) {
											let total = tempoInicioData.reduce((sum, value) => sum + value, 0);
											let valor = tooltipItem.parsed;
											if (total > 0) {
												let percentage = ((valor / total) * 100).toFixed(2);
												return `${tooltipItem.label}: ${moment.utc(valor * 1000).format('HH:mm:ss')} (${percentage}%)`;
											} else {
												return `${tooltipItem.label}: ${moment.utc(valor * 1000).format('HH:mm:ss')} (0%)`;
											}
										}
									}
								},
								datalabels: {
									formatter: (value, ctx) => {
										let total = ctx.chart.data.datasets[0].data.reduce((sum, val) => sum + val, 0);
										let percentage = ((value / total) * 100).toFixed(2);
										return `${percentage}%`;
									},
									color: '#fff',
									font: {
										weight: 'bold'
									}
								}
							}
						},
						plugins: [ChartDataLabels]
					});

					// Gráfico de tempo de atendimento
					if (graficoTempoAtendimento) graficoTempoAtendimento.destroy();
					const ctxTempoAtendimento = document.getElementById('graficoTempoAtendimento').getContext('2d');
					graficoTempoAtendimento = new Chart(ctxTempoAtendimento, {
						type: 'pie',
						data: {
							labels: tempoAtendimentoLabels,
							datasets: [{
								data: tempoAtendimentoData,
								backgroundColor: tempoAtendimentoColors,
								borderWidth: 1
							}]
						},
						options: {
							responsive: true,
							plugins: {
								title: {
									display: true,
									text: `Total de Tempo de Atendimento: ${moment.utc(totalTempoAtendimento * 1000).format('HH:mm:ss')}`
								},
								tooltip: {
									callbacks: {
										label: function(tooltipItem) {
											let total = tempoAtendimentoData.reduce((sum, value) => sum + value, 0);
											let valor = tooltipItem.parsed;
											if (total > 0) {
												let percentage = ((valor / total) * 100).toFixed(2);
												return `${tooltipItem.label}: ${moment.utc(valor * 1000).format('HH:mm:ss')} (${percentage}%)`;
											} else {
												return `${tooltipItem.label}: ${moment.utc(valor * 1000).format('HH:mm:ss')} (0%)`;
											}
										}
									}
								},
								datalabels: {
									formatter: (value, ctx) => {
										let total = ctx.chart.data.datasets[0].data.reduce((sum, val) => sum + val, 0);
										let percentage = ((value / total) * 100).toFixed(2);
										return `${percentage}%`;
									},
									color: '#fff',
									font: {
										weight: 'bold'
									}
								}
							}
						},
						plugins: [ChartDataLabels]
					});

					Swal.close();
				} else {
					Swal.fire({
						title: 'Erro ao buscar totais',
						text: res.Erro,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					});
				}
			});
	}
</script>
{% endblock %}