{% 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);
		}
	}

	.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: #F2F5FA;
	}

	.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;
	}

	.selecionar-numero .btn-light{
		background-color: #fff!important;
	}

	.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 (min-width: 992px) {
		.sidebar-mini.sidebar-collapse .sidebar-menu>li {
			position: relative;
			padding: 0px 10px;
			margin: 0px 0px 15px 0px;
		}
	}

	@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 mt-50">
		<!-- 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">Visão Geral</h4>
				</div>
			</div>
		</div> -->

		<div class="row g-2 justify-content-center">
			<div class="col-10 col-lg-3">
				<div class="input-group shadow-sm">
					<div class="input-group-addon bg-purple">
						<i class="fa fa-calendar"></i>
					</div>
					<input type="text" class="form-control bg-white border-0" id="periodoFiltro">
				</div>
			</div>
			<div class="col-10 col-lg-4 ">
				<div class="input-group selecionar-numero shadow-sm">
					<div class="input-group-addon bg-purple">
						<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;" multiple>
						{% for n in numeros %}
						<option value="{{n.idNumeros}}" style="letter-spacing: 1px !important;">{{n.descricao}} ({{n.numero}})</option>
						{% endfor %}
					</select>
				</div>
			</div>
			<div class="col-10 col-lg-4 ">
				<div class="input-group selecionar-numero shadow-sm">
					<div class="input-group-addon bg-purple">
						<i class="fa-solid fa-sitemap"></i>
					</div>
					<select id="departamentoFiltro" class="selectpicker col-12 form-control form-control-sm" title="Filtrar departamento">
						<option value="" class="" style="letter-spacing: 1px !important;">Todos Departamentos</option>
						{% for d in departamentos %}
						<option value="{{d.getNomeDepartamento}}" class="" style="letter-spacing: 1px !important;">{{d.getNomeDepartamento}}</option>
						{%endfor%}
					</select>
				</div>
			</div>

		</div>
		<!-- Main content -->
		<section class="content">
			<div class="row" style="margin-top: 60px;">
				<div class="col-12">
					<div class="box p-3" style="">
						<div class="row justify-content-around mb-3" style="margin-top: -65px;">
							<div class="col-12 col-md-10 col-lg-3 mb-4 text-center" style="">
								<div class="box-body shadow rounded-4 border-primary bg-primary-light ps-30" style="min-height: 130px;">
									<h6 class="ms-1 text-uppercase fw-bold"><i class="fa fa-circle-info" data-bs-toggle="tooltip" data-bs-original-title="Total de novos contatos no período independente do número."></i> Novos contatos</h6>
									<div class="flexbox mt-2">
										<span class="fs-30 text-primary"><i class="mdi mdi-account-plus"></i></span><br>
										<span id="novosContatos" class=" fs-30 fw-bold">0</span>
									</div>
								</div>
							</div>


							<div class="col-12 col-md-10 col-lg-3 mb-4 text-center" style="">
								<div class="box-body shadow rounded-4 border-info bg-info-light ps-30" style="min-height: 130px;">
									<h6 class="ms-1 text-uppercase text-purple fw-bold"><i class="fa fa-circle-info" data-bs-toggle="tooltip" data-bs-original-title="Total de atendimentos no período qualquer status."></i> Atendimentos</h6>
									<div class="flexbox mt-2">
										<span class="fs-30 text-purple"><i class="fa  fa-comments"></i></span><br>
										<span id="atendimentos" class=" fs-30 text-purple fw-bold">0</span>
									</div>
								</div>
							</div>


							<div class="col-12 col-md-10 col-lg-3 mb-4 text-center" style="">
								<div class="box-body shadow rounded-4 border-success bg-green-manager-light ps-30" style="min-height: 130px;">
									<h6 class="text-uppercase text-green-manager2 fw-bold"><i class="fa fa-circle-info" data-bs-toggle="tooltip" data-bs-original-title="Total de atendimentos com status ATENDIMENTO CHATBOT, ATENDIMENTO INICIADO ou AGUARDANDO ATENDENTE."></i> Atendimentos Abertos</h6>
									<div class="flexbox mt-2">
										<span class="fs-30 text-green-manager2"><i class="fa fa-commenting"></i></span><br>
										<span id="atendimentosAbertos" class=" fs-30 text-green-manager2 fw-bold">0</span>
									</div>
								</div>
							</div>


							<div class="col-12 col-md-10 col-lg-3 mb-4 text-center" style="">
								<div class="box-body shadow rounded-4 border-warning bg-warning-light ps-30" style="min-height: 130px;">
									<h6 class="text-uppercase fw-bold"><i class="fa fa-circle-info" data-bs-toggle="tooltip" data-bs-original-title="Total de créditos API/Lista de transmissão."></i> Créditos</h6>
									<div class="flexbox mt-2">
										<span class="fs-30 text-warning"><i class="fa fa-dollar"></i></span><br>
										<span id="creditos" class=" fs-30 fw-bold">0</span>
									</div>
								</div>
							</div>
						</div>


						<div class="row">
							<div class="col-12 col-md-12 col-lg-4">
								<div class="card" style="">
									<div class="card-header bg-purple rounded-4 with-border p-3">
										<h5 class="card-title fw-bold">Atendentes</h5>
									</div>

									<div class="card-body">
										<div class="d-flex align-items-center justify-content-center" style="max-height: 330px; min-height: 330px;">
											<iframe class="chartjs-hidden-iframe" style="width: 100%; display: block; border: 0px none; height: 0px; margin: 0px; position: absolute; inset: 0px;"></iframe>
											<canvas id="atendentesChart"></canvas>
										</div>
									</div>
								</div>
							</div>

							<div class="col-12 col-md-12 col-lg-8">
								<div class="card" style="">
									<div class="card-header bg-purple rounded-4 with-border p-3">
										<h5 class="card-title fw-bold">Departamentos</h5>
									</div>

									<div class="card-body">
										<div class="d-flex align-items-center justify-content-center" style="max-height: 330px; min-height: 330px;">
											<iframe class="chartjs-hidden-iframe" style="width: 100%; display: block; border: 0px none; height: 0px; margin: 0px; position: absolute; inset: 0px;"></iframe>
											<canvas id="departamentosChart"></canvas>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>

					<div class="box p-3" style="">
						<div class="row g-2">
							<h4 class="text-purple fw-bold">Atendentes Online</h4>
							<div id="atendentesOnline" class="row gap-4">
								<script>
									var atendentes = [];
								</script>
								{% for a in atendentes %}
								<script>
									atendentes.push({
										nome: '{{a.nomeAtendente}}',
										data_online: "{% if a.dataOnline is empty%}null{%else%}{{a.dataOnline|date('Y-m-d H:i:s')}}{%endif%}",
										pagina: '{{a.paginaOnline}}'
									});
								</script>
								{%endfor%}
							</div>
						</div>
					</div>


					<div class="box p-3" style="">
						<div class="row g-2 mb-4">
							<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="periodoFiltroMensagens">
								</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="meusNumerosMensagens" class="selectpicker fw-bold form-control form-control-sm bg-light-gray border-light" title="Nenhum número cadastrado" style="letter-spacing: 1px !important;" multiple>
										{% for n in numeros %}
										<option value="{{n.idNumeros}}" style="letter-spacing: 1px !important;">{{n.descricao}} ({{n.numero}})</option>
										{% endfor %}
									</select>
								</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-solid fa-comments"></i>
									</div>
									<select id="selectMsgConv" class="selectpicker bg-light-gray form-control form-control-sm" style="letter-spacing: 1px !important;" autocomplete="off">
										<option value="CONVERSAS" style="letter-spacing: 1px !important;" active>Conversas</option>
										<option value="MENSAGENS" style="letter-spacing: 1px !important;">Mensagens</option>
									</select>
								</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-solid fa-headset"></i>
									</div>
									<select id="selectAtendente" class="selectpicker bg-light-gray form-control form-control-sm" style="letter-spacing: 1px !important;" autocomplete="off">
										<option value="TODOS" style="letter-spacing: 1px !important;" active>Todos Atendentes</option>
										{% for a in atendentes %}
										<option value="{{a.idAtendentes}}" style="letter-spacing: 1px !important;">{{a.nomeAtendente}}</option>
										{% endfor %}
									</select>
								</div>
							</div>
						</div>

						<div class="row">
							<div class="col-12 mb-4">
								<div class="card" style="">
									<div class="card-header bg-purple with-border p-3">
										<h5 class="card-title fw-bold"><span class="msg_conv"></span> por dia da semana</h5>
									</div>

									<div class="card-body pb-0">
										<div class="d-flex align-items-center justify-content-center" style="max-height: 280px; min-height: 280px;">
											<iframe class="chartjs-hidden-iframe" style="width: 100%; display: block; border: 0px none; height: 0px; margin: 0px; position: absolute; inset: 0px;"></iframe>
											<canvas id="mensagensPorDiaChart" style="max-height: 280px; width: 100%;"></canvas>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div class="row">
							<div class="col-12">
								<div class="card" style="">
									<div class="card-header bg-purple with-border p-3">
										<h5 class="card-title fw-bold"><span class="msg_conv">Mensagens</span> por horário</h5>
									</div>

									<div class="card-body pb-0">
										<div class="d-flex align-items-center justify-content-center" style="max-height: 280px; min-height: 280px;">
											<iframe class="chartjs-hidden-iframe" style="width: 100%; display: block; border: 0px none; height: 0px; margin: 0px; position: absolute; inset: 0px;"></iframe>
											<canvas id="mensagensPorHoraChart" style="max-height: 280px; width: 100%;"></canvas>
										</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@2"></script>

<script>
	$('body').addClass('sidebar-collapse');
	var colors = [];
	var colorsLight = [];
	$(document).ready(function() {
		$('.dropdown-toggle').css('min-height', '34px');
		$('#meusNumeros,#meusNumerosMensagens').selectpicker({
			actionsBox: true,
			selectAllText: 'Todos',
			deselectAllText: 'Desmarcar'
		});
		$('#meusNumeros,#meusNumerosMensagens').selectpicker('val', '{{numeros.0.idNumeros}}');

		var classesColors = ['primary', 'info', 'success', 'warning', 'danger', 'dark', 'green-manager'] //.sort( () => .5 - Math.random() );
		$.each(classesColors, function(index, color) {
			$('body').append('<div id="generateJsColor" class="bg-' + color + ' d-none"></div>');
			colors.push($('.bg-' + color).css("backgroundColor"));
			$('.generateJsColor').remove();
			$('body').append('<div id="generateJsColor" class="bg-' + color + '-light d-none"></div>');
			colorsLight.push($('.bg-' + color + '-light').css("backgroundColor"));
			$('.generateJsColor').remove();
		})

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

		$('#meusNumeros').on('change', function(e) {
			if ($('#meusNumeros').val() != '') {
				getTotais();
			}
		})

		$('#periodoFiltroMensagens').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
			},
		});
		$("#periodoFiltroMensagens").data('daterangepicker').setStartDate(moment().startOf('month'));
		$("#periodoFiltroMensagens").data('daterangepicker').setEndDate(moment().endOf('month'));
		$('#periodoFiltroMensagens').val('Esse Mês')
		$('#periodoFiltroMensagens').on('change', function(e) {
			if ($('#periodoFiltroMensagens').val() == $('#periodoFiltroMensagens').data('lastValue')) {
				$('#periodoFiltroMensagens').val($('#periodoFiltroMensagens').data('daterangepicker').chosenLabel)
				return;
			}
			if ($('#periodoFiltroMensagens').data('daterangepicker').chosenLabel != 'Escolher período') {
				$('#periodoFiltroMensagens').data('lastValue', $('#periodoFiltroMensagens').val())
				$('#periodoFiltroMensagens').val($('#periodoFiltroMensagens').data('daterangepicker').chosenLabel)
			}
			getTotaisMensagens();
		})

		$('#meusNumerosMensagens').on('change', function(e) {
			getTotaisMensagens();
		})

		if ($(this).val() == 'MENSAGENS') {
			$('.msg_conv').text('Mensagens');
		} else {
			$('.msg_conv').text('Conversas');
		}
		$('#selectMsgConv').on('change', function() {
			if ($(this).val() == 'MENSAGENS') {
				$('.msg_conv').text('Mensagens');
			} else {
				$('.msg_conv').text('Conversas');
			}
			getTotaisMensagens();
		})
		$('#selectAtendente').on('change', function() {
			getTotaisMensagens();
		})


		getTotais(true);


		$.each(atendentes, function(index, a) {
			var dataOnline = '';
			console.log(moment().diff(a.data_online, 'minutes'))
			switch (true) {
				case (a.data_online == 'null'):
					dataOnline = '<span class="badge badge-xs badge-pill badge-dark fw-bold">Offline<span>';
					break;
				case (moment().diff(a.data_online, 'minutes') > 5):
					textData = moment(a.data_online).fromNow().charAt(0).toUpperCase() + moment(a.data_online).fromNow().slice(1)
					dataOnline = '<span class="badge fw-bold badge-xs badge-pill bg-light-purple">' + textData + '<span>';
					break;
				case true:
					dataOnline = '<span class="badge badge-xs badge-pill bg-green-manager fw-bold">Online</span>';
					break;
			}

			$('#atendentesOnline').append(
				'<div style="min-width: 200px;" class="align-items-center me-3 p-3 d-flex flex-row bg-manager-gray text-purple rounded shadow-sm fw-bold text-center justify-content-between col-lg-2 col-md-4 col-sm-6 col-12">' +
				'<p class="mb-0" style="">' +
				'<i class="fa fa-headset me-1"></i><text class=""> ' + a.nome + '</text>' +
				'</p>' +
				'<h6 class="mb-0 fs-12">' +
				dataOnline +
				'</h6>' +
				'</div>' +
				''
			);
		})
	})

	var atendentesChart;
	var departamentosChart;

	// Variável global para armazenar os dados da resposta
	let globalResData = null;
	
	// Função principal para obter os totais
	function getTotais(firstTime = false) {
	    if ($('#meusNumeros').val() == '') {
	        Swal.fire({
	            title: 'Selecione um número',
	            scrollbarPadding: false,
	            icon: 'error',
	            confirmButtonColor: 'var(--bs-info)'
	        });
	        return;
	    }
	
	    Swal.fire({
	        title: 'Buscando...',
	        allowOutsideClick: false,
	        scrollbarPadding: false
	    });
	    Swal.showLoading();
	
	    if (firstTime) {
	        getTotaisMensagens();
	    }
	
	    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('getDashboardTotais', {
	        method: 'POST',
	        headers: {
	            'Content-Type': 'application/x-www-form-urlencoded'
	        },
	        body: 'inicio=' + inicio + '&final=' + final + '&numero=' + numero
	    })
	        .then(function (res) {
	            return res.json();
	        })
	        .then(function (res) {
	            $('#periodoFiltro').blur();
	            $('#meusNumeros').blur();
			
	            if (res.Success) {
	                globalResData = res; // Armazena os dados globalmente para reutilização
				
	                var animationOut = 'flipOutX';
	                var animationIn = 'flipInX';
	                animateNumber('#novosContatos', res.novosContatos, animationIn, animationOut);
	                animateNumber('#atendimentos', res.atendimentos, animationIn, animationOut);
	                animateNumber('#atendimentosAbertos', res.atendimentosAbertos, animationIn, animationOut);
	                animateNumber('#creditos', res.creditos, animationIn, animationOut);
				
	                // Atualização de gráficos
	                atualizaGraficoAtendentes(res);
	                atualizaGraficoDepartamentos(res);
				
	            } else {
	                Swal.fire({
	                    title: 'Erro ao buscar número',
	                    text: res.Erro,
	                    scrollbarPadding: false,
	                    icon: 'error',
	                    confirmButtonColor: 'var(--bs-info)'
	                });
	            }
	        })
	        .catch(function (error) {
	            console.error('Erro ao buscar os dados:', error);
	            Swal.fire({
	                title: 'Erro',
	                text: 'Ocorreu um erro ao buscar os dados.',
	                scrollbarPadding: false,
	                icon: 'error',
	                confirmButtonColor: 'var(--bs-info)'
	            });
	        })
	        .finally(function () {
	            Swal.close(); // Sempre fecha o Swal após o processamento
	        });
	}
	
	// Função para atualizar o gráfico de atendentes
	function atualizaGraficoAtendentes(res) {
	    let labelsAt = [];
	    let totaisAt = [];
	    let titleAtendentes = {
	        text: '',
	        display: false
	    };
	
	    $.each(res.totaisAtendentes, function (index, at) {
	        labelsAt.push(at.nomeAtendente);
	        totaisAt.push(at.total);
	    });
	
	    if (labelsAt.length == 0) {
	        titleAtendentes = {
	            text: 'Sem dados',
	            display: true
	        };
	    }
	
	    if (atendentesChart) {
	        atendentesChart.destroy();
	    }
	    if ($('#atendentesChart').length > 0) {
	        let chartElAt = document.getElementById("atendentesChart").getContext("2d");
	        let dataAt = {
	            labels: labelsAt,
	            datasets: [{
	                data: totaisAt,
	                backgroundColor: colors,
	                borderColor: colors,
	                hoverBackgroundColor: colorsLight
	            }],
	            datalabels: {
	                anchor: 'end'
	            }
	        };
	        geraAtendentesChart(chartElAt, dataAt, titleAtendentes);
	    }
	}
	
	// Função para atualizar o gráfico de departamentos
	function atualizaGraficoDepartamentos(res) {
	    let nomeDepartamentoDesejado = $('#departamentoFiltro').val();
	    let labelsDp = [];
	    let totaisDp = [];
	    let titleDepartamentos = {
	        text: '',
	        display: false
	    };
	
	    if (res && res.totaisDepartamentos && Array.isArray(res.totaisDepartamentos)) {
	        if (!nomeDepartamentoDesejado) {
	            $.each(res.totaisDepartamentos, function (index, dp) {
	                labelsDp.push(dp.nomeDepartamento);
	                totaisDp.push(dp.total);
	            });
	            titleDepartamentos = {
	                text: 'Dados de todos os departamentos',
	                display: true
	            };
	        } else {
	            $.each(res.totaisDepartamentos, function (index, dp) {
	                if (dp.nomeDepartamento === nomeDepartamentoDesejado) {
	                    labelsDp.push(dp.nomeDepartamento);
	                    totaisDp.push(dp.total);
	                    titleDepartamentos = {
	                        text: `Dados do ${dp.nomeDepartamento}`,
	                        display: true
	                    };
	                }
	            });
	        }
		
	        if (labelsDp.length === 0) {
	            titleDepartamentos = {
	                text: 'Sem dados disponíveis',
	                display: true
	            };
	        }
		
	        if (departamentosChart) {
	            departamentosChart.destroy();
	        }
		
	        if ($('#departamentosChart').length > 0) {
	            let chartElDp = document.getElementById("departamentosChart").getContext("2d");
	            let dataDp = {
	                labels: labelsDp,
	                datasets: [{
	                    data: totaisDp,
	                    barPercentage: 0.95,
	                    categoryPercentage: 0.95,
	                    backgroundColor: colors,
	                    borderColor: colors,
	                    hoverBackgroundColor: colorsLight,
	                    borderWidth: 2
	                }]
	            };
	            geraDepartamentosChart(chartElDp, dataDp, titleDepartamentos);
	        }
	    }
	}
	
	// Atualiza o gráfico de departamentos sempre que o filtro for alterado
	$('#departamentoFiltro').on('change', function () {
	    atualizaGraficoDepartamentos(globalResData);
	});


	function animateNumber(className, value, animationIn, animationOut) {
		$(className).css('animation-duration', '500ms');
		$(className).addClass('animated ' + animationOut).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
			$(className).removeClass('animated ' + animationOut);
			$(className).text(value);
			$(className).addClass('animated ' + animationIn).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
				$(className).removeClass('animated ' + animationIn);
			});
		});
	}


	function geraAtendentesChart(chartEl, data, title) {
		const emptyState = {
			id: 'emptyDoughnut',
			afterDraw(chart, args, options) {
				const {
					datasets
				} = chart.data;
				const {
					color,
					width,
					radiusDecrease
				} = options;
				let hasData = false;

				for (let i = 0; i < datasets.length; i += 1) {
					const dataset = datasets[i];
					hasData |= dataset.data.length > 0;
				}

				if (!hasData) {
					const {
						chartArea: {
							left,
							top,
							right,
							bottom
						},
						ctx
					} = chart;
					const centerX = (left + right) / 2;
					const centerY = (top + bottom) / 2;
					const r = Math.min(right - left, bottom - top) / 2;

					ctx.beginPath();
					ctx.lineWidth = width || 2;
					ctx.strokeStyle = color || 'rgba(68, 68, 68, 0.5)';
					ctx.arc(centerX, centerY, (r - radiusDecrease || 0), 0, 2 * Math.PI);
					ctx.stroke();
				}
			}
		};

		atendentesChart = new Chart(chartEl, {
			type: 'doughnut',
			data: data,
			plugins: [ChartDataLabels, emptyState],
			options: {
				spacing: 1,
				cutout: 85,
				plugins: {
					title: title,
					datalabels: {
						color: 'white',
						formatter: (val, ctx) => {
							const totalDatasetSum = ctx.chart.data.datasets[ctx.datasetIndex].data.reduce((a, b) => (a + b), 0);
							const percentage = val * 100 / totalDatasetSum;
							const roundedPercentage = Math.round(percentage * 10) / 10
							return `${roundedPercentage}%`
						},
					},
					emptyDoughnut: {
						width: 2,
						radiusDecrease: 20
					},
					animation: {
						duration: 500
					},
					responsive: true,
					legend: {
						labels: {
							usePointStyle: true,
							pointStyle: 'circle',
						},
						position: 'bottom',

					},
					tooltip: {
						cornerRadius: 5,
					},
					elements: {
						arc: {
							borderWidth: 0
						}
					}
				}
			}
		});
	}

	function geraDepartamentosChart(chartEl, data, title) {
		departamentosChart = new Chart(chartEl, {
			type: 'bar',
			data: data,
			plugins: [ChartDataLabels],
			options: {
				scales: {
					x: {
						grid: {
							drawOnChartArea: false,
						}
					},
					y: {
						grid: {
							drawOnChartArea: false,
						}
					},
				},
				plugins: {
					title: title,
					datalabels: {
						color: 'white',
						formatter: (val, ctx) => {
							const totalDatasetSum = ctx.chart.data.datasets[ctx.datasetIndex].data.reduce((a, b) => (a + b), 0);
							const percentage = val * 100 / totalDatasetSum;
							const roundedPercentage = Math.round(percentage * 10) / 10
							return `${roundedPercentage}%`
						},

					},
					animation: {
						duration: 500
					},
					responsive: true,
					legend: {
						onClick: (evt, legendItem, legend) => {
							/*const index = legend.chart.data.labels.indexOf(legendItem.text);
							legend.chart.toggleDataVisibility(index);
							legend.chart.update();*/
							return false;
						},

						labels: {
							display: false,
							generateLabels: (chart) => {
								/*return chart.data.labels.map(
									(label, index) => ({
										text: labels[index],
										strokeStyle: colors[index],
										fillStyle: colors[index]
									})
								)*/
							},
							usePointStyle: true,
							pointStyle: 'circle',
						},
						position: 'bottom',
					},
					tooltip: {
						cornerRadius: 5,
					},
					elements: {
						arc: {
							borderWidth: 0
						}
					},
				}
			}
		});
	}

	var mensagensPorDiaChart;
	var mensagensPorHoraChart;

	function getTotaisMensagens() {
		if ($('#meusNumerosMensagens').val() == '') {
			Swal.fire({
				title: 'Selecione um número',
				scrollbarPadding: false,
				icon: 'error',
				confirmButtonColor: 'var(--bs-info)',
				scrollbarPadding: false
			})
			return;
		}

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

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

		fetch('getDashboardTotaisMensagens', {
				method: 'POST',
				headers: {
					'Content-Type': 'application/x-www-form-urlencoded'
				},
				body: 'inicio=' + inicio + '&final=' + final +
					'&numero=' + numero +
					'&msg_conv=' + $('#selectMsgConv').val() +
					'&atendente=' + $('#selectAtendente').val()
			})
			.then(function(res) {
				return res.json();
			})
			.then(function(res) {
				$('#periodoFiltroMensagens').blur();
				$('#meusNumerosMensagens').blur();

				if (res.Success) {
					//GRAFICO MENSAGENS POR DIA DA SEMANA
					let labelsDia = [];
					let totaisDia = [];
					let titleDia = {
						text: '',
						display: false
					};
					$.each([0, 1, 2, 3, 4, 5, 6], function(index, d) {
						if (res.mensagensPorDia.filter(x => x.dia === d)[0]) {
							var dia = res.mensagensPorDia.filter(x => x.dia === d)[0];
							labelsDia.push(moment().day(dia.dia).format('ddd'));
							totaisDia.push(dia.total);
						} else {
							labelsDia.push(moment().day(d).format('ddd'));
							totaisDia.push(0);
						}

					})
					if (labelsDia.length == 0) {
						titleDia = {
							text: 'Sem dados',
							display: true
						};
					}

					if (typeof(mensagensPorDiaChart) != 'undefined') {
						mensagensPorDiaChart.destroy();
					}
					if ($('#mensagensPorDiaChart').length > 0) {
						var chartElDia = document.getElementById("mensagensPorDiaChart").getContext("2d");
						var labels = labelsDia;
						var dataDia = {
							labels: labels,
							datasets: [{
								data: totaisDia,
								barPercentage: 0.95,
								categoryPercentage: 0.95,
								backgroundColor: colors[0],
								borderColor: colors[0],
								hoverBackgroundColor: colorsLight[0],
								borderWidth: 2
							}]
						}
					}
					mensagensPorDiaChart = geraMensagensChart(chartElDia, dataDia, titleDia);
					//GRAFICO MENSAGENS POR DIA DA SEMANA


					//GRAFICO MENSAGENS POR HORÁRIO
					let labelsHora = [];
					let totaisHora = [];
					let titleHora = {
						text: '',
						display: false
					};
					$.each([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23], function(index, h) {
						if (res.mensagensPorHorario.filter(x => x.hora === h)[0]) {
							var hora = res.mensagensPorHorario.filter(x => x.hora === h)[0];
							labelsHora.push(hora.hora + 'h');
							totaisHora.push(hora.total);
						} else {
							labelsHora.push(h + 'h');
							totaisHora.push(0);
						}

					})
					if (labelsHora.length == 0) {
						titleHora = {
							text: 'Sem dados',
							display: true
						};
					}

					if (mensagensPorHoraChart) {
						mensagensPorHoraChart.destroy();
					}
					if ($('#mensagensPorHoraChart').length > 0) {
						var chartElHora = document.getElementById("mensagensPorHoraChart").getContext("2d");
						var labels = labelsHora;
						var dataHora = {
							labels: labels,
							datasets: [{
								data: totaisHora,
								barPercentage: 0.95,
								categoryPercentage: 0.95,
								backgroundColor: colors[0],
								borderColor: colors[0],
								hoverBackgroundColor: colorsLight[0],
								borderWidth: 2
							}]
						}
					}
					mensagensPorHoraChart = geraMensagensChart(chartElHora, dataHora, titleHora);
					//GRAFICO MENSAGENS POR HORÁRIO

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

	function geraMensagensChart(chartEl, data, title) {
		return new Chart(chartEl, {
			type: 'bar',
			data: data,
			plugins: [ChartDataLabels],
			options: {
				scales: {
					x: {
						grid: {
							drawOnChartArea: false,
						}
					},
					y: {
						grid: {
							drawOnChartArea: true,
						}
					},
				},
				plugins: {
					title: title,
					datalabels: {
						color: 'white',
						/*formatter: (val, ctx) => {
						  const totalDatasetSum = ctx.chart.data.datasets[ctx.datasetIndex].data.reduce((a, b) => (a + b), 0);
						  const percentage = val * 100 / totalDatasetSum;
						  const roundedPercentage = Math.round(percentage * 10) / 10
						  return val + '<br>(' + `${roundedPercentage}%` + ')'
						},*/
					},
					animation: {
						duration: 500
					},
					responsive: true,
					legend: {
						onClick: (evt, legendItem, legend) => {
							return false;
						},

						labels: {
							display: false,
							generateLabels: (chart) => {},
							usePointStyle: true,
							pointStyle: 'circle',
						},
						position: 'bottom',
					},
					tooltip: {
						cornerRadius: 5,
					},
					elements: {
						arc: {
							borderWidth: 0
						}
					},
				}
			}
		});
	}
</script>
{% endblock %}