{% 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;
	}
</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>
					</div>
				</div>
			</div>
		</section>
		<!-- /.content -->
	</div>
</div>

{% endblock %}
{% block scripts %}


<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();
	})

	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(function(res){ return res.json(); })
		.then(function(res){
			$('#periodoFiltro').blur();

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

				$('#tabelaAtendentes > tbody').empty();
				$('#tabelaAtendentes > tfoot').remove();
				var totalLinhas = 0;
				var totalAtendimentos = 0;
				var totalTempoInicia = 0;
				var totalTempoAtendimento = 0;
				var totalAvaliacao = 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 = totalLinhas+1;
					totalAtendimentos = totalAtendimentos + +a.totalAtendimentos;
					totalTempoInicia = totalTempoInicia + +a.tempoInicia;
					totalTempoAtendimento = totalTempoAtendimento + +a.tempoAtendimento;
					totalAvaliacao = totalAvaliacao + +Math.round(a.avaliacao * 10) / 10;
				})

				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>')
					/*REMOVE A BORDA DA ULTIMA LINHA*/
					$('.table > :not(:last-child) > :last-child > *').css('border','none') 
				}



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