{% extends "admin/base.php" %}
{% block body %}

<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">Painel Admin</h4>
				</div>
				<div class="float-right">
					<button id="adicionar_numero" onclick="reeviarEmail()" type="button" class="btn btn-sm btn-green-manager">
						<i class="fa-solid fa-reply-all me-2"></i><span class="fw-bold">Reenviar Email</span>
					</button>

					<button id="adicionar_numero" onclick="criarUsuario()" type="button" class="btn btn-sm btn-green-manager">
						<i class="fa-solid fa-user-plus me-2"></i><span class="fw-bold">Novo Admin</span>
					</button>
				</div>
			</div>
		</div>

		<!-- Main content -->
		<section class="content">
			<div class="box text-start">
				<div class="box-body no-padding" style="overflow: hidden;">
					<div class="box-header with-border p-3 pb-0">
						<div class="row p-0 mb-2">
							<div class="col-lg-3 mb-2">
								<div class="form-group">
									<label class="form-label fw-bold text-purple"><i class="fa-solid fa-user me-1"></i>Nome:</label>
									<input type="text" class="form-control bg-light-gray border-0 form-control-sm pull-right" placeholder="Nome do Cliente" id="filtroNomeCliente" autocomplete="off">
								</div>
							</div>
							<div class="col-lg-3 mb-2">
								<div class="form-group">
									<label class="form-label fw-bold text-purple"><i class="fa fa-envelope me-1" aria-hidden="true"></i>Email:</label>
									<input type="email" class="form-control bg-light-gray border-0 form-control-sm pull-right" placeholder="Email do Cliente" id="filtroEmailCliente" autocomplete="off">
								</div>
							</div>
							<div class="col-lg-3 mb-2">
								<label class="form-label fw-bold text-purple"><i class="fa-solid fa-clipboard-check me-1"></i>Plano:</label>
								<select data-container="body" id="filtroPlano" class="selectpicker">
									<option value="todos">Todos</option>
									<option value="Inicial">Inicial</option>
									<option value="Básico">Básico</option>
									<option value="Profissional">Profissional</option>
									<option value="teste">Teste</option>
									<option value="sem plano">Sem Plano</option>
								</select>
							</div>
							<div class="col-lg-2">
								<label class="form-label fw-bold text-purple"><i class="fa-solid fa-chart-simple me-1"></i>Status:</label>
								<select data-container="body" id="filtroStatus" class="selectpicker">
									<option value="todos">Todos</option>
									<option value="active">Ativo</option>
									<option value="canceled">Cancelado</option>
									<option value="expired">Desativado</option>
								</select>
							</div>
							<div class="col-lg-1 d-flex justify-content-between align-items-center text-center btn-pesquisar-mobile">
								<button id="buscarClientes" class="waves-effect waves-circle btn btn-circle btn-green-manager2 d-flex justify-content-center align-items-center mt-2">
									<i class="fa-solid fa-magnifying-glass"></i>
								</button>
							</div>

						</div>
					</div>
					<div class="table-responsive text-nowrap" style="border-radius: 10px 10px 0 0;">
						<table class="table table-hover">
							<thead class="bg-purple">
								<tr>
									<th><i class="fa fa-id-card" aria-hidden="true"></i>Id</th>
									<th><i class="fa-solid fa-user"></i>Nome</th>
									<th><i class="fa fa-envelope" aria-hidden="true"></i>Email</th>
									<th><i class="fa-solid fa-clipboard-check"></i>Plano</th>
									<th><i class="fa-solid fa-money-bill"></i>Valor</th>
									<th><i class="fa-solid fa-headset"></i>Atendentes</th>
									<th><i class="fa-solid fa-calendar"></i>Data de Vencimento</th>
									<th><i class="fa-solid fa-chart-simple"></i>Status</th>
									<th class="text-end"><i class="fa-solid fa-pen-to-square"></i>Editar</th>
								</tr>
							</thead>
							<tbody>

							</tbody>
						</table>
					</div>
				</div>
				<div id="pagination-controls" class="d-flex justify-content-center mt-3">
					<nav aria-label="Page navigation">
						<ul class="pagination">
							<li class="page-item">
								<button id="prevPage" class="page-link btn-purple-manager" onclick="prevPage()">Anterior</button>
							</li>
							<li class="page-item disabled">
								<span id="pageInfo" class="page-link fw-bold text-purple"></span>
							</li>
							<li class="page-item">
								<button id="nextPage" class="page-link btn-purple-manager" onclick="nextPage()">Próxima</button>
							</li>
						</ul>
					</nav>
				</div>
			</div>

		</section>
		<!-- /.content -->
	</div>
</div>


{% endblock %}
{% block scripts %}
<style>
	.box-header {
		border: none;
	}

	.box-header.with-border {
		border: none;
	}

	.table-responsive>table .dropdown {
		position: static;
	}

	.table-responsive>table .dropdown>.dropdown-menu {
		left: 0 !important;
	}

	th>i {
		margin-right: 5px;
	}

	.badge {
		font-weight: bold !important;
	}

	.plano-teste,
	.sem-plano,
	.plano-inicial,
	.plano-basico,
	.plano-profissional {
		font-weight: bold;
		color: #838383;
	}

	.plano-teste {
		color: #F5B700;
	}

	.plano-inicial {
		color: #6CB555;
	}

	.plano-basico {
		color: #7B7DD8;
	}

	.plano-profissional {
		color: #98298B;
	}

	.bootstrap-select>.dropdown-toggle {
		height: 27.38px;
		padding: 0 5px;
	}

	.waves-circle,
	.btn-circle {
		width: 30px;
		height: 30px;
		transition: none;
	}

	@media only screen and (max-width: 995px) {
		.btn-pesquisar-mobile {
			justify-content: end !important;
			margin: 0.5rem 0;
		}
	}

	.i-color-tabela {
		color: #475f7b;
	}

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

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

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

	/* Style Modals */
	.swal2-html-container {
		font-weight: 500;
		color: #475f7b;
	}

	input[type=number]::-webkit-inner-spin-button {
		-webkit-appearance: none;

	}

	.hidden {
		display: none !important;
	}

	input[type=number] {
		-moz-appearance: textfield;
		appearance: textfield;

	}

	.swal2-html-container>.container>.bootstrap-select>.dropdown-toggle {
		height: 33px;
		padding: 5px;
	}

	.bootstrap-select .dropdown-menu {
		max-width: 100%;
	}

	/* --- Style Modals */
</style>

<script>
	/* Variaveis Gerais */
	const token = getCookie("adminLogged");

	const url = "{{host_admin}}painel_clientes?pagina=0&tamanho_pagina=50";

	let clientes = []

	let currentPage = 0;
	const pageSize = 10;

	let creditos = [];
	let planos = [];

	let allClientes = [];
	let filteredClientes = [];
	/* --Variaveis Gerais */

	/* Funções de uso Geral */
	function formatarValor(input) {
		let value = input.value.replace(/\D/g, '');

		value = (value / 100).toFixed(2).replace(',', '.');

		value = value.replace(/\B(?=(\d{3})+(?!\d))/g, '.');

		input.value = value;

		document.getElementById('valorNumber').value = parseFloat(value.replace(/\./g, '').replace(',', '.'))
	}

	function calcularValorFinal(cliente, qtdAtendentes, qtdNumeros, planoBase) {
		var valorPlano = parseFloat(planoBase.valor);
		var valorAtendentesAdicionais = parseFloat(planoBase.valor_atendentes_adicionais);
		var valorNumerosAdicionais = parseFloat(planoBase.valor_numeros_adicionais);
		var valorBase = parseFloat(cliente.plano.valor);

		var valorAdicionalAtendentes = 0;
		var valorAdicionalNumeros = 0;

		if (qtdAtendentes > cliente.plano.qtd_atendentes) {
			valorAdicionalAtendentes = (qtdAtendentes - cliente.plano.qtd_atendentes) * valorAtendentesAdicionais;
		} else if (qtdAtendentes < cliente.plano.qtd_atendentes) {
			valorAdicionalAtendentes = (cliente.plano.qtd_atendentes - qtdAtendentes) * valorAtendentesAdicionais * -1;
		} else {
			valorAdicionalAtendentes = 0;
		}

		if (qtdNumeros > cliente.plano.qtd_numeros) {
			valorAdicionalNumeros = (qtdNumeros - cliente.plano.qtd_numeros) * valorNumerosAdicionais;
		} else if (qtdNumeros < cliente.plano.qtd_numeros) {
			valorAdicionalNumeros = (cliente.plano.qtd_numeros - qtdNumeros) * valorNumerosAdicionais * -1;
		} else {
			valorAdicionalNumeros = 0;
		}


		var valorFinal = valorBase + valorAdicionalAtendentes + valorAdicionalNumeros;
		return valorFinal.toFixed(2);
	}

	/* Paginação */
	function displayPage(page, clientes = allClientes) {
		const startIndex = page * pageSize;
		const endIndex = startIndex + pageSize;
		const paginatedClientes = clientes.slice(startIndex, endIndex);

		createTable(paginatedClientes);
		updatePaginationControls(clientes.length);
	}

	// Função para ir para a próxima página
	function nextPage() {
		currentPage++;
		displayPage(currentPage, filteredClientes.length ? filteredClientes : allClientes);
	}

	// Função para ir para a página anterior
	function prevPage() {
		if (currentPage > 0) {
			currentPage--;
			displayPage(currentPage, filteredClientes.length ? filteredClientes : allClientes);
		}
	}

	// Função para atualizar os controles de paginação
	function updatePaginationControls(itemsCount) {
		const totalPages = Math.ceil(itemsCount / pageSize);
		document.getElementById('pageInfo').innerText = `Página ${currentPage + 1} de ${totalPages}`;
		document.getElementById('prevPage').disabled = currentPage === 0;
		document.getElementById('nextPage').disabled = (currentPage + 1) * pageSize >= itemsCount;
	}
	/* -- Paginação */

	function formatarData(dateString) {
		const options = {
			year: 'numeric',
			month: '2-digit',
			day: '2-digit'
		};
		const date = new Date(dateString);
		return date.toLocaleDateString('pt-BR', options)
	}

	/* Filtragem de Dados */
	document.getElementById('buscarClientes').addEventListener('click', async function() {
		const nomeCliente = document.getElementById('filtroNomeCliente').value.toLowerCase();
		const emailCliente = document.getElementById('filtroEmailCliente').value.toLowerCase();
		const planoCliente = document.getElementById('filtroPlano').value.toLowerCase();
		const statusCliente = document.getElementById('filtroStatus').value.toLowerCase();

		const isAllFieldsEmpty = nomeCliente === "" && emailCliente === "" && planoCliente === "todos" && statusCliente === "todos";

		if (isAllFieldsEmpty) {
			document.getElementById('pagination-controls').classList.remove('hidden');
			currentPage = 0;
			await conectionAPI(currentPage);
		} else {
			filteredClientes = allClientes.filter(cliente => {
				const nomeMatch = nomeCliente === "" || cliente.nome.nome_completo.toLowerCase().includes(nomeCliente);
				const emailMatch = emailCliente === "" || cliente.contato.email.toLowerCase().includes(emailCliente);
				const planoMatch = planoCliente === "todos" ||
					(cliente.plano === null && planoCliente === "sem plano") ||
					(cliente.plano && cliente.plano.valor === 0 && planoCliente === "teste") ||
					(cliente.plano && cliente.plano.plano && cliente.plano.plano.nome.toLowerCase().includes(planoCliente) && cliente.plano.valor !== 0);
				const statusMatch = statusCliente === "todos" || (cliente.plano && cliente.plano.status && cliente.plano.status.toLowerCase().includes(statusCliente));

				return nomeMatch && emailMatch && planoMatch && statusMatch;
			});

			currentPage = 0;
			displayPage(currentPage, filteredClientes);
			document.getElementById('pagination-controls').classList.remove('hidden');
		}
	});

	/* Aplica os filtros na pagina */
	function aplicarFiltrosPaginas(filters, page) {
		filteredClientes = allClientes.filter(cliente => {
			const nomeMatch = filters.nomeCliente === "" || cliente.nome.nome_completo.toLowerCase().includes(filters.nomeCliente);
			const emailMatch = filters.emailCliente === "" || cliente.contato.email.toLowerCase().includes(filters.emailCliente);
			const planoMatch = filters.planoCliente === "todos" ||
				(cliente.plano === null && filters.planoCliente === "sem plano") ||
				(cliente.plano && cliente.plano.valor === 0 && filters.planoCliente === "teste") ||
				(cliente.plano && cliente.plano.plano && cliente.plano.plano.nome.toLowerCase().includes(filters.planoCliente) && cliente.plano.valor !== 0);
			const statusMatch = filters.statusCliente === "todos" || (cliente.plano && cliente.plano.status && cliente.plano.status.toLowerCase().includes(filters.statusCliente));

			return nomeMatch && emailMatch && planoMatch && statusMatch;
		});

		displayPage(page, filteredClientes);
		document.getElementById('pagination-controls').classList.remove('hidden');
	}

	function getCurrentPage() {
		return currentPage;
	}

	function getFiltrosAtuais() {
		return {
			nomeCliente: document.getElementById('filtroNomeCliente').value.toLowerCase(),
			emailCliente: document.getElementById('filtroEmailCliente').value.toLowerCase(),
			planoCliente: document.getElementById('filtroPlano').value.toLowerCase(),
			statusCliente: document.getElementById('filtroStatus').value.toLowerCase()
		};
	}
	/* -- Filtragem de Dados */


	/* --Funções de uso Geral */

	function getCookie(name) {
		let cookieArr = document.cookie.split(";");
		for (let i = 0; i < cookieArr.length; i++) {
			let cookiePair = cookieArr[i].split("=");
			if (name == cookiePair[0].trim()) {
				return decodeURIComponent(cookiePair[1]);
			}
		}
		return null;
	}

	function deleteCookie(name) {
		document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
	}


	/* Funções de conexões com a API */
	document.getElementById('pageInfo').innerText = 'Carregando...';

	async function conectionAPI(page = 0) {
		Swal.fire({
			title: 'Carregando...',
			text: 'Por favor, aguarde enquanto carregamos os dados.',
			allowOutsideClick: false,
			didOpen: () => {
				Swal.showLoading();
			}
		});

		try {
			const response = await fetch(`{{host_admin}}painel_clientes?pagina=${page}&tamanho_pagina=10000`, {
				method: 'GET',
				headers: {
					'Authorization': `Bearer ${token}`,
					'Content-Type': 'application/json'
				},
			});

			if (!response.ok) {
				if (response.status === 401) {
					deleteCookie("adminLogged");
					Swal.fire({
						icon: 'error',
						title: 'Sessão Expirada',
						text: 'Sua sessão expirou. Por favor, faça login novamente.',
						confirmButtonColor: 'var(--bs-info)',
						showConfirmButton: true,
						allowOutsideClick: false,
					}).then(() => {
						window.location.reload();
					});
				} else {
					Swal.fire({
						icon: 'error',
						title: 'Erro',
						text: 'Erro ao carregar os dados da API. Por favor, tente novamente.',
						confirmButtonColor: 'var(--bs-info)',
						showConfirmButton: true,
						allowOutsideClick: false,
					});
				}
				return;
			}

			const data = await response.json();

			allClientes = data.clientes.slice().reverse();

			displayPage(page);
			Swal.close();
		} catch (error) {
			Swal.fire({
				icon: 'error',
				title: 'Erro',
				text: 'Erro ao carregar os dados da API. Por favor, tente novamente.',
				confirmButtonColor: 'var(--bs-info)',
				showConfirmButton: true,
				allowOutsideClick: false,
			});
		}
	}

	conectionAPI(currentPage);

	/* Função para buscar os creditos*/
	async function fetchCreditos() {
		try {
			const response = await fetch(`{{host_admin}}creditos`, {
				method: 'GET',
				headers: {
					'Authorization': `Bearer ${token}`,
					'Content-Type': 'application/json'
				},
			});
			if (!response.ok) {
				throw new Error("Erro ao buscar valores dos Creditos");
			}
			creditos = await response.json();
		} catch (error) {
			throw new Error("Erro ao buscar Creditos.");
		}
	}

	/* Função para buscar os planos*/
	async function fetchPlanos() {
		try {
			const response = await fetch(`{{host_admin}}planos`, {
				method: 'GET',
				headers: {
					'Authorization': `Bearer ${token}`,
					'Content-Type': 'application/json'
				},
			});
			if (!response.ok) {
				throw new Error("Erro ao buscar Planos.");
			}
			planos = await response.json();
		} catch (error) {
			throw new Error("Erro ao buscar Planos.");
		}
	}

	/* Carregar Funções ao carregar a página */
	window.onload = async () => {
		await fetchCreditos();
		await fetchPlanos();
	};

	async function atualizaCliente(dadosAtualizados) {
		const urlAtualizacao = `{{host_admin}}painel_clientes`;

		try {
			const response = await fetch(urlAtualizacao, {
				method: 'PATCH',
				headers: {
					'Authorization': `Bearer ${token}`,
					'Content-Type': 'application/json'
				},
				body: JSON.stringify(dadosAtualizados)
			});
			if (!response.ok) {
				const errorData = await response.json();
				throw new Error("Erro ao atualizar dados da API");
			}
			Swal.fire({
				title: 'Sucesso!',
				text: 'As informações foram atualizadas com sucesso.',
				icon: 'success',
				confirmButtonText: 'OK',
				confirmButtonColor: 'var(--bs-info)',
			}).then(async () => {
				await conectionAPI();
				aplicarFiltrosPaginas(currentFilters, currentPage);
			});
		} catch (error) {
			Swal.fire({
				title: 'Erro!',
				text: 'Erro ao atualizar infromações do Cliente. Tente Novamente.',
				icon: 'error',
				confirmButtonText: 'OK',
				confirmButtonColor: 'var(--bs-danger)',
			});
		}
	}

	async function atualizaPlano(dadosAtualizados) {
		const urlAtualizacao = `{{host_admin}}planos_clientes`;
		const currentPage = getCurrentPage();
		const currentFilters = getFiltrosAtuais();

		try {
			const response = await fetch(urlAtualizacao, {
				method: 'PATCH',
				headers: {
					'Authorization': `Bearer ${token}`,
					'Content-Type': 'application/json'
				},
				body: JSON.stringify(dadosAtualizados)
			});

			if (!response.ok) {
				const errorData = await response.json();
				throw new Error("Erro ao atualizar dados da API");
			}
			Swal.fire({
				title: 'Sucesso!',
				text: 'Informações do plano atualizadas com sucesso.',
				icon: 'success',
				confirmButtonText: 'OK',
				confirmButtonColor: 'var(--bs-info)',
			}).then(async () => {
				await conectionAPI();
				aplicarFiltrosPaginas(currentFilters, currentPage);
			});
		} catch (error) {
			Swal.fire({
				title: 'Erro!',
				text: 'Erro ao atualizar infromações do Plano. Tente Novamente.',
				icon: 'error',
				confirmButtonText: 'OK',
				confirmButtonColor: 'var(--bs-danger)',
			});
		}
	}

	async function createPlano(planoTeste) {
		const urlCriarPlano = `{{host_admin}}planos_clientes`;

		try {
			const response = await fetch(urlCriarPlano, {
				method: 'POST',
				headers: {
					'Authorization': `Bearer ${token}`,
					'Content-Type': 'application/json'
				},
				body: JSON.stringify(planoTeste)
			});

			if (!response.ok) {
				const errorData = await response.json();
				throw new Error("Erro ao criar Plano Teste");
			}
			Swal.fire({
				title: 'Sucesso!',
				text: 'O plano foi criado com sucesso.',
				icon: 'success',
				confirmButtonText: 'OK',
				confirmButtonColor: 'var(--bs-info)',
			}).then(async () => {
				await conectionAPI();
				aplicarFiltrosPaginas(currentFilters, currentPage);
			});

		} catch (error) {
			Swal.fire({
				icon: 'error',
				title: 'Erro',
				text: 'Erro ao criar Plano de Teste. Tente Novamente.',
				confirmButtonColor: 'var(--bs-info)',
				showConfirmButton: true,
				allowOutsideClick: false,
			});
		}
	}

	async function novUsuario(dadosUsuario) {
		const urlAtualizacao = `{{host_admin}}usuario/criar`;

		try {
			const response = await fetch(urlAtualizacao, {
				method: 'POST',
				headers: {
					'Authorization': `Bearer ${token}`,
					'Content-Type': 'application/json'
				},
				body: JSON.stringify(dadosUsuario)
			});
			if (!response.ok) {
				const errorData = await response.json();
				throw new Error(errorData.mensagem);
			}
			Swal.fire({
				title: '<span class="text-purple">Sucesso!</span>',
				text: 'O usuário foi cadastrado com sucesso.',
				icon: 'success',
				confirmButtonText: 'OK',
				confirmButtonColor: 'var(--bs-info)',
			}).then(async () => {
				await conectionAPI();
			});
		} catch (error) {
			Swal.fire({
				title: 'Erro!',
				text: error,
				icon: 'error',
				confirmButtonText: 'OK',
				confirmButtonColor: 'var(--bs-danger)',
			});
		}
	}

	async function reenvioEmail(emailUsuario) {
		const urlAtualizacao = `{{host_admin}}usuario/enviar_confirmacao_email`;

		Swal.fire({
			title: '<span class="text-purple">Aguarde...</span>',
			html: '<span class="fw-bold">Enviando email...</span>',
			allowOutsideClick: false,
			didOpen: () => {
				Swal.showLoading();
			}
		});

		try {
			const response = await fetch(urlAtualizacao, {
				method: 'POST',
				headers: {
					'Authorization': `Bearer ${token}`,
					'Content-Type': 'application/json'
				},
				body: JSON.stringify(emailUsuario)
			});

			Swal.close();

			if (!response.ok) {
				const errorData = await response.json();
				throw new Error(errorData.mensagem);
			}
			Swal.fire({
				title: '<span class="text-purple">Sucesso!</span>',
				text: 'O email foi reenviado com sucesso.',
				icon: 'success',
				confirmButtonText: 'OK',
				confirmButtonColor: 'var(--bs-info)',
			}).then(async () => {
				await conectionAPI();
			});
		} catch (error) {

			Swal.close();

			Swal.fire({
				title: 'Erro!',
				text: error,
				icon: 'error',
				confirmButtonText: 'OK',
				confirmButtonColor: 'var(--bs-danger)',
			});
		}
	}

	/* --Funções de conexões com a API */

	/* Funções principais montagem de tabela e modais de edições */

	/* Montar Tabela */
	function createTable(clientes) {
		const tbody = document.querySelector('table tbody');
		tbody.innerHTML = '';

		clientes.map((cliente) => {
			const tr = document.createElement('tr');
			tr.style.cursor = "pointer";

			let emailFinanceiroClass = '';
			if (cliente.contato.email_pagamento == null) {
				emailFinanceiroClass = 'hide'
			}

			let planoColor = 'sem-plano'
			let planoNome = 'Sem Plano';
			let planoValor = 'N/A';
			let qtdAtendentes = 'N/A';
			let status = 'N/A'
			let statusClass = 'bg-secondary';
			let dataClass = 'bg-secondary';

			if (cliente.plano && cliente.plano.plano) {
				planoNome = cliente.plano.plano.nome;

				if (cliente.plano.valor == 0 || cliente.plano.valor == null) {
					planoValor = 'R$ ' + cliente.plano.valor.toFixed(2);
					planoNome = 'Teste';
					planoColor = 'plano-teste';
				} else {
					planoValor = 'R$ ' + cliente.plano.valor.toFixed(2);
				}

				qtdAtendentes = cliente.plano.qtd_atendentes;

				if (cliente.plano.status === 'active') {
					status = 'Ativo';
					statusClass = 'bg-success';
				} else if (cliente.plano.status === 'expired') {
					status = 'Inativo';
					statusClass = 'bg-danger';
				} else if (cliente.plano.status === 'canceled') {
					status = 'Cancelado';
					statusClass = 'bg-warning';
				}

				if (cliente.plano.id_planos == 1 && cliente.plano.valor != 0) {
					planoColor = 'plano-inicial';
				} else if (cliente.plano.id_planos == 2 && cliente.plano.valor != 0) {
					planoColor = 'plano-basico';
				} else if (cliente.plano.id_planos == 3 && cliente.plano.valor != 0) {
					planoColor = 'plano-profissional';
				}

				const dataTeste = '2024-08-01'
				const difInMes = new Date(cliente.plano.data_vencimento) - new Date();
				const difInDays = Math.ceil(difInMes / (1000 * 60 * 60 * 24));

				if (difInDays >= 7) {
					dataClass = 'bg-success';
				} else if (difInDays < 7 && difInDays > 0) {
					dataClass = 'bg-warning'
				} else {
					dataClass = 'bg-danger'
				}
			}

			const dataVencimento = cliente.plano && cliente.plano.data_vencimento ? formatarData(cliente.plano.data_vencimento) : 'N/A';

			tr.innerHTML = `<td>${cliente.id_clientes}</td>
                                <td>${cliente.nome.nome_completo}</td>
                                <td>
                                    <div class="d-flex flex-row pb-2 align-items-center">
                                        <i class="fa fa-envelope me-1 text-purple" aria-hidden="true"></i>
                                        <p class="mb-0">${cliente.contato.email}</p>
                                    </div>

                                    <div id="emailFinanceiro" class="d-flex flex-row pb-2 align-items-center ${emailFinanceiroClass}">
                                        <i class="fa-solid fa-dollar-sign me-1 text-purple "></i>
                                        <p class="mb-0">${cliente.contato.email_pagamento}</p>
                                    </div>
                                </td>
                                <td class="${planoColor}">${planoNome}</td>
                                <td><b class="text-mute">${planoValor}</b></td>
                                <td class="text-center"><b class="text-mute">${qtdAtendentes}</b></td>
                                <td><small class="badge ${dataClass} font-weight-bold">${dataVencimento}</small></td>
                                <td><small class="badge ${statusClass} font-weight-bold">${status}</small></td>
                                <td class="text-end">
                                    <div class="dropdown">
                                        <a class="px-10 pt-5" href="#" data-bs-toggle="dropdown" aria-expanded="false"><i class="ti-more-alt rotate-90"></i></a>
                                        <div class="dropdown-menu dropdown-menu-end">
										    ${cliente.plano ? 
										        `<a onclick="editarCliente(${cliente.id_clientes})" id="editarInformacoes" class="dropdown-item text-purple" href="#"><i class="fa-solid fa-pen-to-square"></i>Editar Informações Cliente</a>` +
										        `<a onclick="editarPlano(${cliente.id_clientes})" id="editarPlano" class="dropdown-item text-purple" href="#"><i class="fa-solid fa-clipboard-list"></i>Editar Plano</a>` :
										        `<a onclick="criarPlano(${cliente.id_clientes})" id="criarPlano" class="dropdown-item text-purple" href="#"><i class="fa-solid fa-clipboard-list"></i>Criar Plano de Teste</a>`
										    }
										</div>
                                    </div>
                                </td>`;
			tbody.appendChild(tr);
		})
	}
	/* -- Montar Tabela */

	/* Funcao Editar Informações Cliente */
	function editarCliente(clienteId) {
		const cliente = allClientes.find(cliente => cliente.id_clientes === clienteId);

		if (!cliente) {
			Swal.fire({
				icon: 'error',
				title: 'Erro',
				text: 'Erro Cliente não encontrado. Por favor, atualize a página e tente novamente.',
				confirmButtonColor: 'var(--bs-info)',
				showConfirmButton: true,
				allowOutsideClick: false,
			});
			return;
		}

		let emailFinanceiroClass = '';
		let showAddButton = false;
		if (cliente.contato.email_pagamento == null) {
			emailFinanceiroClass = 'hide';
			showAddButton = true;
		}

		Swal.fire({
			title: "<span class='text-purple'>Editar Informações</span>",
			html: `
        		<div class='container text-start mb-4'>
        		    <label class="form-label fw-bold text-purple text-start"><i class="fa fa-envelope me-1" aria-hidden="true"></i>Novo Email:</label>
        		    <input type="email" class="form-control bg-light-gray border-0" placeholder="Email" id="novoEmail" autocomplete="off" value="">
        		    <br>
        		    <div id="emailFinanceiroContainer" class="${emailFinanceiroClass}">
        		        <label class="form-label text-start fw-bold text-purple"><i class="fa-solid fa-dollar-sign me-1" aria-hidden="true"></i>Novo Email Financeiro:</label>
        		        <input type="email" class="form-control bg-light-gray border-0" placeholder="Email Financeiro" id="pagamentoEmail" autocomplete="off" value="">
        		        <br>
        		    </div>
        		    ${showAddButton ? '<div class="text-center"><button type="button" id="addEmailFinanceiro" class="btn theme-primary btn-green-manager"><i class="fa fa-plus-circle me-1"></i>Adicionar Email Financeiro</button></div>' : ''}
        		</div>`,
			confirmButtonText: 'Salvar',
			confirmButtonColor: '#60b86c',
			showCancelButton: true,
			cancelButtonText: "Cancelar",
			showCloseButton: true,
			allowOutsideClick: false,
			didOpen: () => {
				$('.selectpicker').selectpicker();
				if (showAddButton) {
					document.getElementById('addEmailFinanceiro').addEventListener('click', () => {
						const emailFinanceiroContainer = document.getElementById('emailFinanceiroContainer');
						emailFinanceiroContainer.classList.remove('hide');
						document.getElementById('addEmailFinanceiro').classList.add('hide');
					});
				}
			},
			preConfirm: () => {
				var email = document.getElementById("novoEmail").value;
				var pagamentoEmail = document.getElementById("pagamentoEmail").value;
				var emailValidation = /\S+@\S+\.\S+/;

				if (email && !emailValidation.test(email)) {
					Swal.showValidationMessage("Por favor, insira um email válido.");
					return false;
				}

				if (pagamentoEmail && !emailValidation.test(pagamentoEmail)) {
					Swal.showValidationMessage("Por favor, insira um email válido.");
					return false;
				}

				if (!email && !pagamentoEmail) {
					Swal.showValidationMessage("Por favor, faça pelo menos uma alteração.");
					return false;
				}

				return {
					id_clientes: clienteId,
					nome: {
						nome: cliente.nome.nome,
						sobrenome: cliente.nome.sobrenome
					},
					contato: {
						email: email || cliente.contato.email,
						email_pagamento: pagamentoEmail || cliente.contato.email_pagamento,
						telefone: cliente.contato.telefone
					},
					endereco: cliente.endereco,
					plano: {
						id_planos_clientes: cliente.plano.id_planos_clientes,
						id_clientes: cliente.plano.id_clientes,
						id_planos: cliente.plano.id_planos,
						id_creditos: cliente.plano.id_creditos,
						id_cupons_desconto: cliente.plano.id_cupons_desconto,
						desconto: cliente.plano.desconto,
						data: cliente.plano.data,
						qtd_numeros: cliente.plano.qtd_numeros,
						qtd_atendentes: cliente.plano.qtd_atendentes,
						valor: cliente.plano.valor,
						data_vencimento: cliente.plano.data_vencimento,
						status: cliente.plano.status,
						qtd_funil: cliente.plano.qtd_funil
					}
				};
			}
		}).then((result) => {
			if (result.isConfirmed) {
				const confirmCliente = clientes.find(cliente => cliente.id_clientes === clienteId);

				var dadosAtualizados = result.value;

				atualizaCliente(dadosAtualizados);
			}
		});
	}

	/* Funcao Editar Plano */
	function editarPlano(clienteId) {
		const cliente = allClientes.find(cliente => cliente.id_clientes === clienteId);

		if (!cliente) {
			Swal.fire({
				icon: 'error',
				title: 'Erro',
				text: 'Erro Cliente não encontrado. Por favor, atualize a página e tente novamente.',
				confirmButtonColor: 'var(--bs-info)',
				showConfirmButton: true,
				allowOutsideClick: false,
			});
			return;
		}

		const planoBase = planos.find(plano => plano.id_planos === cliente.plano.id_planos);

		Swal.fire({
			title: "<span class='text-purple'>Editar Plano</span>",
			html: `
            <div class='container text-start mb-4'>
                <label class="form-label fw-bold text-purple"><i class="fa-solid fa-calendar me-1"></i>Nova Data de Vencimento:</label>
                <input type="date" class="form-control bg-light-gray border-0" id="novaData" value="">
                <br>
                <label class="form-label fw-bold text-purple"><i class="fa-solid fa-money-bill me-1"></i>Novo Valor:</label>
                <div class="input-group">
                    <div class="input-group-addon bg-light-gray border-0 text-purple">
                        <i class="fa-solid fa-brazilian-real-sign"></i>
                    </div>
                    <input type="text" class="form-control bg-light-gray border-0" placeholder="00,00" id="novoValor" oninput="formatarValor(this)" value="">
                </div>
                <input type="number" class="form-control hidden" id="valorNumber">
                <br>
                <label class="form-label fw-bold text-purple"><i class="fa-solid fa-headset me-1"></i>Quantidade de Atendentes:</label>
                <div class="input-group">
                    <div class="input-group-addon bg-light-gray border-0 text-purple">
                        <i class="fa-solid fa-users"></i>
                    </div>
                    <input type="number" class="form-control bg-light-gray border-0" value="${cliente.plano.qtd_atendentes}" id="quantidadeAtendentes">
                </div>
                <br>
                <label class="form-label fw-bold text-purple"><i class="fa-solid fa-phone me-1"></i>Quantidade de Números:</label>
                <div class="input-group">
                    <div class="input-group-addon text-purple bg-light-gray border-0">
                        <i class="fa-solid fa-square-phone"></i>
                    </div>
                    <input type="number" class="form-control bg-light-gray border-0" value="${cliente.plano.qtd_numeros}" id="quantidadeNumeros">
                </div>
                <br>
                <label class="form-label fw-bold text-purple"><i class="fa-solid fa-chart-simple me-1"></i>Status:</label>
                <select data-container="body" id="novoStatus" class="form-control selectpicker">
                    <option value="">Selecione um Status</option>
                    <option value="active" ${cliente.plano && cliente.plano.status==='active' ? 'selected' : '' }>Ativo</option>
                    <option value="expired" ${cliente.plano && cliente.plano.status==='expired' ? 'selected' : '' }>Desativado</option>
                </select>
            </div>`,
			confirmButtonText: 'Salvar',
			confirmButtonColor: '#60b86c',
			showCancelButton: true,
			cancelButtonText: "Cancelar",
			showCloseButton: true,
			allowOutsideClick: false,
			didOpen: () => {
				$('.selectpicker').selectpicker();
			},
			preConfirm: () => {
				var novaData = document.getElementById("novaData").value;
				var novoValor = document.getElementById("novoValor").value;
				var qtdAtendentes = parseInt(document.getElementById("quantidadeAtendentes").value, 10);
				var qtdNumeros = parseInt(document.getElementById("quantidadeNumeros").value, 10);
				var novoStatus = document.getElementById("novoStatus").value;

				if (novaData) {
					var date = new Date(novaData);
					var now = new Date();
					if (date <= now) {
						Swal.showValidationMessage("Por favor, insira uma data futura.");
						return false;
					}
				}

				if (isNaN(novoValor) || novoValor < 0) {
					Swal.showValidationMessage("Por favor, insira um valor positivo.");
					return false;
				}

				if (!novaData && !novoValor && !novoStatus && !qtdAtendentes && !qtdNumeros) {
					Swal.showValidationMessage("Por favor, faça pelo menos uma alteração.");
					return false;
				}

				if (qtdAtendentes < planoBase.qtd_atendentes) {
					Swal.showValidationMessage("A quantidade de atendentes não pode ser menor do que a quantidade do plano base.");
					return false;
				}

				if (qtdNumeros < planoBase.qtd_numeros) {
					Swal.showValidationMessage("A quantidade de números não pode ser menor do que a quantidade do plano base.");
					return false;
				}

				var valorFinal = calcularValorFinal(
					cliente, qtdAtendentes || cliente.plano.qtd_atendentes,
					qtdNumeros || cliente.plano.qtd_numeros,
					planoBase
				);

				return {
					id_planos_clientes: cliente.plano.id_planos_clientes,
					id_clientes: cliente.plano.id_clientes,
					id_planos: cliente.plano.id_planos,
					id_creditos: cliente.plano.id_creditos,
					id_cupons_desconto: cliente.plano.id_cupons_desconto,
					desconto: cliente.plano.desconto,
					data: cliente.plano.data,
					qtd_numeros: qtdNumeros || cliente.plano.qtd_numeros,
					qtd_atendentes: qtdAtendentes || cliente.plano.qtd_atendentes,
					valor: valorFinal ? parseFloat(valorFinal) : cliente.plano.valor,
					data_vencimento: novaData ? novaData + 'T23:59' : cliente.plano.data_vencimento,
					status: novoStatus || cliente.plano.status,
					qtd_funil: cliente.plano.qtd_funil
				};
			}
		}).then((result) => {
			if (result.isConfirmed) {
				const confirmCliente = clientes.find(cliente => cliente.id_clientes === clienteId);

				var dadosAtualizados = result.value;
				atualizaPlano(dadosAtualizados);
			}
		});
	}
	/* -- Funcao Editar Plano */

	/* Funcao Criar Plano de Teste */
	function criarPlano(clienteId) {

		const cliente = allClientes.find(cliente => cliente.id_clientes === clienteId);

		if (!cliente) {
			Swal.fire({
				icon: 'error',
				title: 'Erro',
				text: 'Erro Cliente não encontrado. Por favor, atualize a página e tente novamente.',
				confirmButtonColor: 'var(--bs-info)',
				showConfirmButton: true,
				allowOutsideClick: false,
			});
			return;
		}
		Swal.fire({
			title: "<span class='text-purple'>Plano de Teste</span>",
			html: `
		<div class='container text-start mb-4'>
		<label class="form-label fw-bold text-purple text-start"><i class="fa-solid fa-calendar-xmark me-1"></i>Data de Vencimento:</label>
		<input type="date" class="form-control bg-light-gray border-0" id="planoValidade">
		<br>
		<label class="form-label fw-bold text-purple"><i class="fa-solid fa-clipboard-list me-1"></i>Selecione o Plano Base:</label>
		<select id="planoBase" class="form-control selectpicker" data-container="body">
			<option value="">Selecione o Plano Base</option>
			${planos.map(plano => `<option id="${plano.id_planos}" value="${plano.id_planos}" data-numeros="${plano.qtd_numeros}" data-atendentes="${plano.qtd_atendentes}">${plano.nome}</option>`).join('')}
		</select>
		<br>
		<br>
		<label class="form-label fw-bold text-purple"><i class="fa-solid fa-headset me-1"></i>Quantidade de Atendentes:</label>
		<div class="input-group">
			<div class="input-group-addon bg-light-gray text-purple">
				<i class="fa-solid fa-users"></i>
			</div>
			<input type="number" class="form-control bg-light-gray border-0" placeholder="0" id="quantidadeAtendentes">
		</div>
		<br>
		<label class="form-label fw-bold text-purple"><i class="fa-solid fa-phone me-1"></i>Quantidade de Números:</label>
		<div class="input-group">
			<div class="input-group-addon bg-light-gray text-purple">
				<i class="fa-solid fa-square-phone"></i>
			</div>
			<input type="number" class="form-control bg-light-gray border-0" placeholder="0" id="quantidadeNumeros">
		</div>
		<br>
		<label class="form-label fw-bold text-purple"><i class="fa-solid fa-coins me-1"></i>Créditos:</label>
		<select id="qtdCreditos" class="form-control selectpicker" data-container="body">
			<option value="">Selecione a Quantidade de Créditos</option>
			${creditos.map(credito => `<option id="${credito.id_creditos}" value="${credito.id_creditos}">${credito.qtd}</option>`).join('')}
		</select>
	</div>`,
			confirmButtonText: 'Criar',
			confirmButtonColor: '#60b86c',
			showCancelButton: true,
			cancelButtonText: "Cancelar",
			showCloseButton: true,
			allowOutsideClick: false,
			didOpen: () => {
				$('.selectpicker').selectpicker();
				document.getElementById('planoBase').addEventListener('change', function() {
					const selectedOption = this.options[this.selectedIndex];
					const qtdNumeros = selectedOption.getAttribute('data-numeros');
					const qtdAtendentes = selectedOption.getAttribute('data-atendentes');
					document.getElementById('quantidadeNumeros').value = qtdNumeros;
					document.getElementById('quantidadeAtendentes').value = qtdAtendentes;
				});
			},
			preConfirm: () => {
				var dataValidade = document.getElementById("planoValidade").value;
				var qtdAtendentes = parseInt(document.getElementById("quantidadeAtendentes").value, 10);
				var qtdNumeros = parseInt(document.getElementById("quantidadeNumeros").value, 10);
				var qtdCreditos = parseInt(document.getElementById("qtdCreditos").value, 10);
				var planoBase = parseInt(document.getElementById("planoBase").value, 10);
				var dataCriacao = new Date()

				if (dataValidade == "") {
					Swal.showValidationMessage("A Data de Validade é obrigatória.");
					return false;
				}

				var dateVal = new Date(dataValidade);
				var dataAgora = new Date();
				if (dateVal < dataAgora) {
					Swal.showValidationMessage("Por favor, insira uma data futura.");
					return false;
				}

				if (qtdAtendentes == "") {
					Swal.showValidationMessage("A quantidade de atendentes é obrigatória.");
					return false;
				}

				if (qtdNumeros == "") {
					Swal.showValidationMessage("A quantidade de números é obrigatória.");
					return false;
				}

				if (qtdCreditos == "") {
					Swal.showValidationMessage("Por favor, selecione a quantidade de crédito.");
					return false;
				}

				return {
					id_clientes: clienteId,
					id_planos: planoBase,
					id_creditos: qtdCreditos,
					id_cupons_desconto: null,
					desconto: 0,
					qtd_numeros: qtdNumeros,
					qtd_atendentes: qtdAtendentes,
					valor: 0,
					data_vencimento: dataValidade + 'T23:59',
					status: 'active',
					qtd_funil: 50

				};
			}
		}).then((result) => {
			if (result.isConfirmed) {

				var planoTeste = result.value;
				createPlano(planoTeste);
			}
		});
	};
	/* -- Funcao Criar Plano de Teste */

	/* Funcao Criar Novo Usuario */
	function criarUsuario() {
		Swal.fire({
			title: "<span class='text-purple'>Criar Novo Usuario</span>",
			html: `
				<div class='container text-start mb-4'>
        		    <label class="form-label fw-bold text-purple text-start"><i class="fa fa-envelope me-1" aria-hidden="true"></i>Novo Email:</label>
        		    <input type="email" class="form-control bg-light-gray border-0" placeholder="Email" id="novoEmailAdmin" autocomplete="off" value="">
        		    <br>
        		    <label class="form-label fw-bold text-purple text-start"><i class="fa-solid fa-lock me-1"></i>Senha:</label>
        		    <input type="password" class="form-control bg-light-gray border-0" placeholder="Senha" id="senhaAdmin" autocomplete="off" value="">
					<br>
        		    <label class="form-label fw-bold text-purple text-start"><i class="fa-solid fa-lock me-1"></i></i>Confirmar Senha:</label>
        		    <input type="password" class="form-control bg-light-gray border-0" placeholder="Confirmar Senha" id="confSenhaAdmin" autocomplete="off" value="">
        		</div>`,
			confirmButtonText: 'Criar',
			confirmButtonColor: '#60b86c',
			showCancelButton: true,
			cancelButtonText: "Cancelar",
			showCloseButton: true,
			allowOutsideClick: false,
			didOpen: () => {
				$('.selectpicker').selectpicker();
			},
			preConfirm: () => {
				var email = document.getElementById("novoEmailAdmin").value;
				var senha = document.getElementById("senhaAdmin").value;
				var confSenhaAdmin = document.getElementById("confSenhaAdmin").value;
				var emailValidation = /\S+@\S+\.\S+/;

				if (email && !emailValidation.test(email)) {
					Swal.showValidationMessage("Por favor, insira um email válido.");
					return false;
				}

				if (senha == "") {
					Swal.showValidationMessage("A senha é obrigatória.");
					return false;
				}

				if (confSenhaAdmin == "") {
					Swal.showValidationMessage("Confirme sua senha.");
					return false;
				}

				if (confSenhaAdmin != senha) {
					Swal.showValidationMessage("As senhas não conferem.");
					return false;
				}

				return {
					email: email,
					senha: senha,
					senha_confirmacao: senha,
				};
			}
		}).then((result) => {
			if (result.isConfirmed) {

				var dadosUsuario = result.value;

				novUsuario(dadosUsuario)
			}
		});
	};
	/* -- Funcao Criar Novo Usuario */

	/* Funcao Reenviar Email */
	function reeviarEmail() {
		Swal.fire({
			title: "<span class='text-purple'>Reenviar Email Confirmação</span>",
			html: `
            <div class='container text-start mb-4'>
                <label class="form-label fw-bold text-purple text-start"><i class="fa fa-envelope me-1" aria-hidden="true"></i>Informe o email do usuario:</label>
                <input type="email" class="form-control bg-light-gray border-0" placeholder="Email" id="reenvioEmail" autocomplete="off" value="">
                <br>
            </div>`,
			confirmButtonText: 'Enviar',
			confirmButtonColor: '#60b86c',
			showCancelButton: true,
			cancelButtonText: "Cancelar",
			showCloseButton: true,
			allowOutsideClick: false,
			didOpen: () => {
				$('.selectpicker').selectpicker();
			},
			preConfirm: () => {
				const email = document.getElementById("reenvioEmail").value;
				const emailValidation = /\S+@\S+\.\S+/;

				if (email && !emailValidation.test(email)) {
					Swal.showValidationMessage("Por favor, insira um email válido.");
					return false;
				}

				return {
					email: email,
				};
			}
		}).then((result) => {
			if (result.isConfirmed) {
				const emailUsuario = result.value;

				reenvioEmail(emailUsuario);
			}
		});
	}
	/* -- Funcao Reenviar Email */
</script>
{% endblock %}