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

	.swal2-html-container {
		overflow: visible !important;
	}

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


	.arrow {
		border-style: dashed;
		border-color: transparent;
		border-width: 0.20em;
		display: -moz-inline-box;
		display: inline-block;
		/* Use font-size to control the size of the arrow. */
		font-size: 70px;
		#min-hegth: 37px;
		height: 0;
		line-height: 0;
		position: relative;
		vertical-align: middle;
		width: 0;
		#background-color: #fff;
		/* change background color acc to bg color */
		border-left-width: 0.15em;
		border-left-style: solid;
		#border-left-color: #ff0000;
		#left: 0.25em;
	}

	.timeline-event-custom:before {
		border-left-color: inherit !important;
		border-right-color: inherit !important;
	}

	.timeline-event-custom:after {
		border-left-color: inherit !important;
		border-right-color: inherit !important;
	}

	.box-header {
		border: none;
	}

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

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

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

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

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

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

	.form-control:disabled,
	.form-control:read-only {
		background-color: #f2f5fa;
		opacity: 1;
	}

	.daterangepicker .ranges li.active {
		background-color: #60b86c !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: #60b86c !important;
	}

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

	.theme-primary .btn-primary {
		background-color: #60b86c;
		border-color: #60b86c;
		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;
	}

	.steps {
		list-style-type: none;
		padding: 0;
	}

	.steps li {
		display: inline-block;
		margin-bottom: 3px;
	}

	.steps li a,
	.steps li p {
		background: #e5f4fd;
		padding: 8px 20px;
		color: #0077bf;
		display: block;
		font-size: 14px;
		font-weight: bold;
		position: relative;
		text-indent: 12px;
	}

	.steps li.first a,
	.steps li.first p {
		border-top-left-radius: 10px;
		/* Adicionado */
		border-bottom-left-radius: 10px;
		/* Adicionado */
	}

	.steps li.last a,
	.steps li.last p {
		border-top-right-radius: 10px;
		/* Adicionado */
		border-bottom-right-radius: 10px;
		/* Adicionado */
	}

	.steps li a:hover,
	.steps li p:hover {
		text-decoration: none;
	}

	.steps li a:before,
	.steps li p:before {
		border-bottom: 18px solid transparent;
		border-left: 12px solid #fff;
		border-top: 18px solid transparent;
		content: "";
		height: 0;
		position: absolute;
		left: 0;
		top: 50%;
		width: 0;
		margin-top: -18px;
	}

	.steps li a:after,
	.steps li p:after {
		border-bottom: 18px solid transparent;
		border-left: 12px solid #e5f4fd;
		border-top: 18px solid transparent;
		content: "";
		height: 0;
		position: absolute;
		left: 100%;
		top: 50%;
		width: 0;
		margin-top: -18px;
		z-index: 1;
	}

	.steps li.first a:before,
	.steps li.first p:before {
		display: none;
		/* Adicionado */
	}

	.steps li.last a:after,
	.steps li.last p:after {
		display: none;
		/* Adicionado */
	}

	.steps li.active a,
	.steps li.active p {
		background: #0077bf;
		color: #fff;
	}

	.steps li.active a:after,
	.steps li.active p:after {
		border-left: 12px solid var(--active-color);
	}

	.steps li.undone a,
	.steps li.undone p {
		background: #eee;
		color: #333;
	}

	.steps li.undone a:after,
	.steps li.undone p:after {
		border-left: 12px solid #eee;
	}

	.steps li.undone p {
		color: #aaa;
	}

	.styled-hr {
		border: 0;
		height: 3px !important;
		background: linear-gradient(to right, rgb(121, 121, 121), rgb(151, 151, 151));
		margin: 20px 0;
		border-radius: 10px;
	}

	.timeline {
		list-style: none;
		padding: 0;
		position: relative;
	}

	.timeline:before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		width: 2px;
		background: #ddd;
		left: 50%;
		transform: translateX(-50%);
		margin: 0;
	}

	.timeline-item {
		margin-bottom: 20px;
		position: relative;
		display: flex;
		align-items: center;
	}

	.timeline-item:before {
		content: '';
		display: table;
	}

	.timeline-item:after {
		content: '';
		display: table;
		clear: both;
	}

	.timeline-item .timeline-body {
		background: #fff;
		padding: 10px 20px;
		border-radius: 5px;
		position: relative;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	.timeline-item .timeline-body:before {
		content: '';
		position: absolute;
		top: 10px;
		left: -10px;
		border-style: solid;
		border-width: 10px 10px 10px 0;
		border-color: transparent #fff transparent transparent;
	}

	.timeline-item .timeline-meta {
		font-size: 12px;
		color: #999;
		margin-bottom: 5px;
	}

	.timeline-item .timeline-content {
		font-size: 14px;
		color: #333;
	}

	.timeline-item .timeline-content h6 {
		font-size: 16px;
		margin-bottom: 5px;
		font-weight: bold;
	}

	.timeline-item .timeline-content .text-secondary {
		color: #666;
	}

	.timeline-item .timeline-point {
		position: absolute;
		top: 50% !important;
		width: 12px;
		height: 12px;
		background: #007bff;
		border: 2px solid #fff;
		border-radius: 50%;
		z-index: 2;
	}

	.timeline-item .timeline-point i {
		font-size: 12px;
		color: #999;
	}

	.timeline-item .timeline-point.timeline-indicator {
		background: #007bff;
		border-color: #007bff;
		color: #fff;
	}

	.timeline-item .timeline-point.timeline-indicator i {
		color: #fff;
	}

	.timeline-container {
		max-height: 400px;
		overflow-y: auto;
	}

	.timeline .timeline-item>.timeline-point {
		background: #585ea8 !important;
	}

	.timeline .timeline-item {
		margin-bottom: 40px !important;
	}

	.timeline-container::-webkit-scrollbar {
		width: 0;
		height: 0;
	}

	.timeline-container {
		-ms-overflow-style: none;
		scrollbar-width: none;
	}

	@media (max-width: 768px) {
		.steps li {
			display: block;
			width: 100%;
			text-align: center;
			margin-bottom: 10px;
		}

		.steps li a,
		.steps li p {
			padding: 10px;
			font-size: 16px;
		}

		.steps li a:before,
		.steps li p:before,
		.steps li a:after,
		.steps li p:after {
			display: none;
		}

		.steps li.first a,
		.steps li.first p,
		.steps li.last a,
		.steps li.last p {
			border-radius: 10px;
		}
	}
</style>

<div class="content-wrapper bg-light text-start">
	<div class="container-full ">

		<!-- Content Header (Page header) -->
		<div class="content-header">
			<div class="">
				<h4 class="page-title d-flex align-items-center pe-0">
					<div class="col text-purple fw-bold">Movimentações</div>
				</h4>
			</div>
		</div>

		<!-- Main content -->
		<section class="content">
			<div class="row">
				<div class="col-12">
					<div class="box">
						<div id="filtros" class="box-header with-border p-3 pb-0" style="animation-duration: 0.05s;">
							<div class="row p-0 mb-2">
								<div class="col-lg-3 col-12">
									<label for="funilFiltro" class="fw-bold text-purple"><i class="fa-solid fa-filter me-1"></i>Funil</label>
									<div class="form-group">
										<select id="funilFiltro" class="col-12 form-control form-control-sm"
											title="Selecionar funil"
											data-live-search="true"
											data-selected-text-format="count > 2"
											data-count-selected-text="{0} estagios selecionados"
											data-actions-box="true"
											data-deselect-all-text="Desmarcar" autocomplete="off">
											{% for key,fc in funilClientes %}
											<option value="{{fc.idFunilClientes}}" class="" style="letter-spacing: 1px !important;">{{fc.nome}}</option>
											{% endfor %}
										</select>
									</div>
								</div>
								<div class="col-lg-3 col-12">
									<div class="form-group mb-0">
										<label for="periodoFiltro" class="text-purple fw-bold">Selecione o Período</label>
										<div class="input-group mb-0" style="">
											<div class="input-group-addon bg-manager-gray text-purple py-0 d-flex align-items-center" style="">
												<i class="fa fa-calendar" style="font-size: 14px !important;"></i>
											</div>
											<input type="text" class="form-control bg-manager-gray border-0 form-control-sm pull-right" id="periodoFiltro" style="height: 26.5px;" autocomplete="off">
										</div>
									</div>
								</div>
								<div class="col-lg-1 mb-3 d-flex ">
									<a id="buscarContatos" class="btn btn-circle btn-green-manager2 btn-xs mt-auto"><i class="fa fa-search"></i></a>
								</div>
							</div>
						</div>
					</div>

					<div id="content-container" class="box">
						<div id="no-funil-selected" class="text-center fs-4 p-4 d-flex gap-2 justify-content-center align-items-center fw-bold text-purple">
							<i class="fa-solid fa-filter-circle-xmark"></i>
							<p class="m-0">Nenhum funil selecionado. Por favor, selecione um funil para visualizar as movimentações.</p>
						</div>
						<div id="funil-content" style="display: none;">
							<div class="row justify-content-center">
								<div class="col-12">
									<ul class="steps d-flex justify-content-center gap-1 m-0 flex-wrap" style="margin-top: 16px!important;" id="steps">
										
									</ul>
									<hr class="styled-hr">
								</div>
							</div>

							<div class="container-sm">
								<div class="row">
									<div class="col-12 col-md-8">
										<div class="card widget-card border-0 shadow-none bsb-timeline-8">
											<div class="card-body p-4">
												<h5 class="card-title widget-card-title mb-3 fw-bold text-purple">Movimentações Recentes</h5>
												<div class="timeline-container">
													<ul class="timeline">

													</ul>
												</div>
											</div>
										</div>
									</div>

									<div class="col-12 col-md-4">
										<div class="box box-body contatos-ativos bg-purple mb-3">
											<div class="flexbox">
												<span class="fs-30"><i class="fa-solid fa-user"></i></span>
												<span class="fs-30 fw-200"></span>
											</div>
											<div class="text-end">Contatos Ativos</div>
										</div>
										<div class="box box-body contatos-adicionados bg-green-manager mb-3">
											<div class="flexbox">
												<span class="fs-30"><i class="fa-solid fa-user-plus"></i></span>
												<span class="fs-30 fw-200"></span>
											</div>
											<div class="text-end">Contatos Adicionados</div>
										</div>
										<div class="box box-body bg-danger contatos-movidos mb-3">
											<div class="flexbox">
												<span class="fs-30"><i class="fa-solid fa-user-minus"></i></span>
												<span class="fs-30 fw-200"></span>
											</div>
											<div class="text-end">Contatos Movidos</div>
										</div>
									</div>
								</div>
							</div>

							<div class="table-responsive mt-4" style="max-height: 66vh; overflow: auto; border-radius: 10px 10px 0 0;">
								<table id="tabelaContatos" class="table table-hover">
									<thead class="bg-purple sticky-top" style="z-index: 99;">
										<tr>
											<th>#</th>
											<th><i class="fa-solid fa-calendar-days me-1"></i>Data</th>
											<th><i class="fa-solid fa-user me-1"></i>Contato</th>
											<th><i class="fa-solid fa-arrow-right-arrow-left me-1"></i>Movimentação</th>
										</tr>
									</thead>
									<tbody>

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

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




{% endblock %}
{% block scripts %}
<script>
	$('body').addClass('sidebar-collapse');

	$(document).ready(function() {
		$('#funilFiltro').selectpicker();

		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": 6
			}
		});

		$('#buscarContatos').on('click', function() {
			getContatos();
			loadEstagios($('#funilFiltro').val());
			loadContatosEstagios($('#funilFiltro').val());
		});

		function loadEstagios(funilId) {
			fetch('getEstagiosFunil', {
					method: 'POST',
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					body: 'idFunilClientes=' + funilId
				})
				.then(function(res) {
					return res.json();
				})
				.then(function(res) {
					if (res.Success) {
						var estagios = res.estagios;
						var stepsHtml = '';
						estagios.forEach(function(e, index) {
							var firstClass = index === 0 ? 'first' : '';
							var lastClass = index === estagios.length - 1 ? 'last' : '';
							var activeClass = index === 0 ? 'active' : 'undone';
							var colorStyle = index === 0 ? 'style="background:' + e.cor + '; color: #fff; --active-color:' + e.cor + ';"' : '';
							stepsHtml += '<li class="' + activeClass + ' ' + firstClass + ' ' + lastClass + '" data-color="' + e.cor + '" data-estagio="' + e.nome + '"><a href="#" ' + colorStyle + '>' + e.nome + '</a></li>';
						});
						$('#steps').html(stepsHtml);

						$('#steps li a').on('click', function(e) {
							e.preventDefault();
							$('#steps li').removeClass('active').addClass('undone').find('a').removeAttr('style');
							$(this).parent().addClass('active').removeClass('undone');
							var color = estagios[$(this).parent().index()].cor;
							$(this).css('background', color).css('color', '#fff');
							$(this).parent().css('--active-color', color);
							var selectedStage = $(this).parent().data('estagio');
							loadContatosEstagios($('#funilFiltro').val(), selectedStage);
						});

						if (estagios.length > 0) {
							loadContatosEstagios($('#funilFiltro').val(), estagios[0].nome);
						}
					} else {
						console.error('Erro ao carregar os estágios.');
					}
				})
				.catch(function(error) {
					console.error('Erro ao carregar os estágios:', error);
				});
		}

		function loadContatosEstagios(funilId, selectedStage) {
			fetch('contarClientesEstagio', {
					method: 'POST',
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					body: 'idFunilClientes=' + funilId
				})
				.then(function(res) {
					return res.json();
				})
				.then(function(res) {
					if (res.Success) {
						var estagios = res.estagioContatos;
						if (estagios && Array.isArray(estagios)) {
							estagios.forEach(function(estagio) {
								var totalClientes = estagio.totalClientes || 0;
								var estagioNome = estagio.nome || 'Desconhecido';
								var totalParticipantes = totalClientes;

								if (estagioNome === selectedStage) {
									getContatos(selectedStage, totalParticipantes, estagioNome);
								}
							});
						} else {
							console.error('Estagios não está definido ou não é um array:', estagios);
						}
					} else {
						console.error('Erro ao carregar os contatos dos estágios:', res.Erro);
					}
				})
				.catch(function(error) {
					console.error('Erro ao carregar os contatos dos estágios:', error);
				});
		}

		var initBuscaContatos = 0;

		function getContatos(selectedStage = '', totalParticipantes = 0, estagioNome = '') {
			var funilId = $('#funilFiltro').val();
			if (!funilId) {
				$('#no-funil-selected').removeClass('d-none');
				$('#funil-content').hide();
				return;
			} else {
				$('#no-funil-selected').addClass('d-none');
				$('#funil-content').show();
			}

			let dataInicio = moment($('#periodoFiltro').data('daterangepicker').startDate._d).format('YYYY-MM-DD');
			let dataFinal = moment($('#periodoFiltro').data('daterangepicker').endDate._d).format('YYYY-MM-DD');

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

			fetch('buscar_funil_historico_simples', {
					method: 'POST',
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					body: 'funil=' + $('#funilFiltro').selectpicker('val') +
						'&dataInicio=' + dataInicio + '&dataFinal=' + dataFinal
				})
				.then(function(res) {
					return res.json();
				})
				.then(function(res) {
					if (res.Success) {
						$('#tabelaContatos > tbody').empty();
						let funilContatos = res.funilContatos;

						let totalAtivos = 0;
						let totalEntraram = 0;
						let totalSairam = 0;
						let contatosAtivos = totalParticipantes;

						let today = moment().format('YYYY-MM-DD');
						let todayEntries = [];

						$(funilContatos).each(function(index, fc) {
							let c = fc.idContatos;
							let senderIcon = '<i class="fa-brands fa-whatsapp me-2"></i>';
							switch (c.sender) {
								case 'venom':
									senderIcon = '<i class="fa-brands fa-whatsapp me-2"></i>';
									break;
								case 'facebook':
									senderIcon = '<i class="fa-brands fa-facebook-messenger me-2"></i>';
									break;
								case 'instagram':
									senderIcon = '<i class="fa-brands fa-instagram me-2"></i>';
									break;
							}

							var historico = fc.historico;
							var dataHist = historico.length > 0 ? historico[historico.length - 1].data.date : '';
							var estagioAtual = historico.length > 0 ? historico[historico.length - 1].estagioAtual : '';
							var estagioAnterior = historico.length > 1 ? historico[historico.length - 2].estagioAtual : '';

							if (estagioAtual === 'Concluído' && !fc.idEstagioAtual && estagioAnterior === selectedStage) {
								contatosAtivos--;
								return true;
							}

							let movimentacao = '';
							if (estagioAtual === selectedStage && estagioAnterior !== selectedStage) {
								movimentacao = '<i class="fa-solid fa-circle-arrow-up text-green-manager me-1"></i>Adicionado no Estágio';
								totalEntraram++;
							} else if (estagioAtual !== selectedStage && estagioAnterior === selectedStage) {
								movimentacao = '<i class="fa-solid fa-circle-arrow-down text-danger me-1"></i>Movido para ' + estagioAtual;
								totalSairam++;
							}

							if (selectedStage === '' || estagioAtual === selectedStage || estagioAnterior === selectedStage) {
								$('#tabelaContatos > tbody').append(
									'<tr class="text-muted">' +
									'<td>' + fc.idFunilContatos + '</td>' +
									'<td>' + moment(dataHist).format('DD/MM/YY') + '</td>' +
									'<td style="white-space: nowrap;">' + senderIcon + (c.nomeExibir == null ? (c.nome == null ? c.numero : c.nome) : c.nomeExibir) + '</td>' +
									'<td class="" style="overflow-x: auto; scrollbar-color: var(--bs-secondary) rgba(0,0,0,0.1);scrollbar-width: thin;">' +
									'<div>' + movimentacao + '</div>' +
									'</td>' +
									'</tr>'
								);
							}

							if (moment(dataHist).format('YYYY-MM-DD') === today) {
								todayEntries.push(fc);
							}
						});

						if ($('#tabelaContatos > tbody').children().length === 0) {
							$('#tabelaContatos > tbody').append(
								'<tr class="text-muted">' +
								'<td colspan="4" class="text-center">Nenhuma movimentação no estágio</td>' +
								'</tr>'
							);
						}

						$('.contatos-ativos .fs-30.fw-200').text(contatosAtivos);
						$('.contatos-adicionados .fs-30.fw-200').text(totalEntraram);
						$('.contatos-movidos .fs-30.fw-200').text(totalSairam);

						displayTodayEntries(todayEntries);

						Swal.close();
					} else {
						Swal.fire({
							title: res.Erro,
							icon: 'error',
							confirmButtonColor: 'var(--bs-info)',
							scrollbarPadding: false
						});
					}
				})
				.catch(function(error) {
					console.error('Erro ao carregar os contatos:', error);
					Swal.fire({
						title: 'Erro ao carregar os contatos',
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					});
				});
		}

		function displayTodayEntries(entries) {
			let timelineHtml = '';
			let isPurple = true;

			entries.forEach(function(fc) {
				let lastHistorico = fc.historico[fc.historico.length - 1];
				let pointColor = isPurple ? 'background: #585ea8!important;' : 'background: #60b86c!important;';
				isPurple = !isPurple;

				timelineHtml += '<li class="timeline-item">' +
					'<div class="timeline-point" style="' + pointColor + '"></div>' +
					'<div class="timeline-body">' +
					'<div class="timeline-meta">' +
					'<span>' + moment(lastHistorico.data.date).fromNow() + '</span>' +
					'</div>' +
					'<div class="timeline-content">' +
					'<h6 class="mb-1 text-purple">Contato movido para ' + lastHistorico.estagioAtual + '.</h6>' +
					'<span class="text-green-manager fs-7">Contato: ' + (fc.idContatos.nomeExibir == null ? (fc.idContatos.nome == null ? fc.idContatos.numero : fc.idContatos.nome) : fc.idContatos.nomeExibir) + '</span>' +
					'</div>' +
					'</div>' +
					'</li>';
			});

			$('.timeline').html(timelineHtml);
		}
	});
</script>
{% endblock %}