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

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

	.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 API</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 mb-4 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>

						<div class="row g-0 mb-3">
							<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">Mensagens API</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="apiChart" style="max-height: 300px;"></canvas>
										</div>
									</div>
								</div>

								<div class="table-responsive rounded-4" style="max-height: 68vh; overflow: auto; border-radius: 15px 15px 0 0;">
									<table id="tabelaMensagens" class="table table-hover">
										<thead class="bg-purple sticky-top" style="z-index: 99;">
											<tr>
												<th><i class="fa-solid fa-arrow-down-1-9"></i></th>
												<th><i class="fa-solid fa-calendar"></i> Data</th>
												<th><i class="fa-solid fa-check-double"></i> Total</th>
											</tr>
										</thead>
										<tbody>

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


						<div class="row">

						</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');
		$('.dropdown-toggle').css('font-size', '14px');
		$('#meusNumeros').selectpicker();
		$('#meusNumeros').selectpicker('val', '{{numeros.0.idNumeros}}');

		moment.locale('pt-br');
		$('#periodoFiltro').daterangepicker({
			startDate: moment().subtract(6, 'days'),
			endDate: moment(),
			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": 1
			},
		});


		$('#periodoFiltro').val('Últimos 7 dias')
		$('#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();
	})

	var colors = [];
	var colorsLight = [];
	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();
	})

	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('getRelatoioApiTotais', {
				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) {
				if (res.Success) {
					var mensagens = res.mensagens;

					$('#tabelaMensagens > tbody').empty();
					$('#tabelaMensagens > tfoot').remove();
					var totalLinhas = 0;
					var totalMensagens = 0;
					$(mensagens).each(function(index, m) {
						$('#tabelaMensagens > tbody').append(
							'<tr>' +
							'<td>' + (index + 1) + '</td>' +
							'<td>' + moment(m.data).format('DD/MM/YYYY') + '</td>' +
							'<td>' + m.total + '</td>' +
							'</tr>'
						)

						totalLinhas = totalLinhas + 1;
						totalMensagens = totalMensagens + +m.total;
					})

					if (mensagens.length > 0) {
						$('#tabelaMensagens').append('<tfoot class="bg-lightest" style="position: -webkit-sticky;position: sticky;bottom: 0;z-index:99;">' +
							'<tr >' +
							'<th>' + totalLinhas + '</th>' +
							'<th></th>' +
							'<th>' + totalMensagens + '</th>' +
							'</tr>' +
							'</tfoot>')
						/*REMOVE A BORDA DA ULTIMA LINHA*/
						$('.table > :not(:last-child) > :last-child > *').css('border', 'none')
					}

					/*GRAFICO API*/
					let labelsDp = [];
					let totaisDp = [];
					let titleApiChart = {
						text: '',
						display: false
					};
					$.each(res.mensagens, function(index, msg) {
						labelsDp.push(moment(msg.data).format('DD/MM'));
						totaisDp.push(msg.total);
					})
					if (labelsDp.length == 0) {
						titleApiChart = {
							text: 'Sem dados',
							display: true
						};
					}

					if (apiChart) {
						apiChart.destroy();
					}
					if ($('#apiChart').length > 0) {
						var chartElApi = document.getElementById("apiChart").getContext("2d");
						var labels = labelsDp;
						var dataDp = {
							labels: labels,
							datasets: [{
								data: totaisDp,
								//barPercentage: 0.95,
								//categoryPercentage: 0.95,
								backgroundColor: colors[6],
								borderColor: colors[6],
								hoverBackgroundColor: colorsLight[6],
								borderWidth: 0.6,
								tension: 0.5,
								fill: false,
							}]
						}

					}
					geraApiChart(chartElApi, dataDp, titleApiChart);
					/*GRAFICO API*/


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

	var apiChart;

	function geraApiChart(chartEl, data, title) {
		apiChart = new Chart(chartEl, {
			type: 'line',
			data: data,
			plugins: [ChartDataLabels],
			options: {
				elements: {
					point: {
						hitRadius: 90
					}
				},
				scales: {
					x: {
						grid: {
							drawOnChartArea: false,
						}
					},
					y: {
						grid: {
							drawOnChartArea: true,
						},
						beginAtZero: 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 '' //`${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
						},
					},

				}
			}
		});
	}
</script>
{% endblock %}