{% 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;}
#.table-responsive>table .dropdown>.dropdown-menu{left:0 !important;top:0 !important;}


.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 #5255CC;
	}

	.card-body {
		padding: 1.5rem;
		background-color: #F2F2F2;
	}

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

	[type="checkbox"] + label:before, [type="checkbox"]:not(.filled-in) + label:after {
    	border: 2px solid #60b86c;
	}

	.btn-close {
	  filter: invert(47%) sepia(88%) saturate(403%) hue-rotate(336deg) brightness(90%) contrast(95%);
	  opacity: 1;
	}

	@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;
	}
</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 fw-bold text-purple">Contatos</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; border: none;">
							<div class="row p-0 mb-2">
								<!--h4 class="box-title">Últimas Conversas</h4-->
								<div class="col-lg-3">
									<div class="form-group">
										<label for="cadastroFiltro" class="mb-2 fw-bold text-purple"><i class="far fa-calendar"></i> Data Cadastro:</label>
										<div class="input-group">
											<div class="input-group-addon bg-purple py-0 d-flex align-items-center">
												<i class="fa fa-calendar" style="font-size: 14px !important;"></i>
											</div>
											<input type="text" class="form-control border-0 bg-manager-gray form-control-sm pull-right" id="cadastroFiltro" placeholder="Data Cadastro" autocomplete="off">
										</div>
									</div>
								</div>
								<div class="col-lg-3">
									<div class="form-group">
										<label class="form-label fw-bold text-purple"><i class="fa-solid fa-user"></i> Nome / Número:</label>
										<input type="text" class="form-control bg-manager-gray border-0 form-control-sm pull-right" placeholder="Nome/Número contato" id="filtroNomeContato" autocomplete="off">
									</div>
								</div>

								<div class="col-lg-3">
									<div class="form-group">
										<label for="filtroGrupo" class="mb-1 mt-1 fw-bold text-purple"><i class="fa-solid fa-people-group"></i> Grupo</label>
										<select id="filtroGrupo" class="selectpicker col-12 form-control form-control-sm" title="Filtrar grupo" data-live-search="true" autocomplete="off" multiple>
											<option value="-1" class="" style="letter-spacing: 1px !important;">Sem Grupo</option>
											{%for g in grupos%}
											<option value="{{g.getIdGrupos}}" class="" style="letter-spacing: 1px !important;">{{g.getNome}}</option>
											{%endfor%}
										</select>
									</div>
								</div>

								<div class="col-xl-2 col-lg-2">
											<h6 for="canaisFiltro" class="text-purple" style="font-weight: 500;"><i class="fa fa-comments"></i> Canais</h6>
											<select id="canaisFiltro" class="selectpicker col-12 form-control form-control-sm" title="Filtrar canal" data-selected-text-format="count > 2" data-count-selected-text="{0} canais selecionados" data-actions-box="true" data-select-all-text="Todos" data-deselect-all-text="Desmarcar" multiple>
												<option value="whatsapp" class="" style="letter-spacing: 1px !important;">Whatsapp</option>
												<option value="instagram" class="" style="letter-spacing: 1px !important;">Instagram</option>
												<option value="facebook" class="" style="letter-spacing: 1px !important;">Facebook</option>
											</select>
								</div>

								<div class="col-lg-1 mb-3 d-flex mt-md-0 mt-2">
									<a id="buscarContatos" class="btn btn-circle btn-green-manager2 btn-xs mt-auto"><i class="fa fa-search"></i></a>
								</div>

								<div id="filtrosAdicionais" style="display: block;">
									<div class="row p-0 mb-2">
										<div class="col-lg-3">
											<div class="form-group">
												<label for="tagsFiltro" class="mb-1 mt-1 fw-bold text-purple"><i class="fa-solid fa-tags"></i> Tags</label>
												<select id="tagsFiltro" class="selectpicker col-12 form-control form-control-sm"
													title="Filtrar tags" data-live-search="true"
													data-selected-text-format="count > 2"
													data-count-selected-text= "{0} tags selecionadas" 
													data-actions-box="true" data-select-all-text="Marcar Todas"
													data-deselect-all-text="Desmarcar" autocomplete="off" multiple>
													{% for t in tags %}
													<option value="{{t.getIdTags}}" class="" style="letter-spacing: 1px !important;" data-content="<i class='fa-solid fa-tag' style='color: {{t.getCor}}'></i> {{t.getNome}}">{{t.getNome}}</option>
													{% endfor %}
												</select>
											</div>
										</div>

										<div class="col-lg-5">
											<label for="filtroInfoAdicional" class="mb-1 mt-1 fw-bold text-purple"><i class="fa fa-id-card"></i> Informação Adicional</label>
											<div class="d-flex">
												<div class="form-group w-p50">
													<select id="filtroInfoAdicionalCampo" class="selectpicker col-12 form-control form-control-sm" title="Selecionar campo" data-live-search="true" autocomplete="off">
														{%for c in camposAdicionais|json_decode%}
														<option value="{{c.id}}" data-tipo="{{c.tipo}}" class="" style="letter-spacing: 1px !important;">{{c.nome}}</option>
														{%endfor%}
													</select>
												</div>

												<div class="form-group ms-1 w-p50 position-relative">
													<input type="text" class="form-control form-control-sm border-0 bg-manager-gray position-relative pe-4" placeholder="Valor" id="filtroInfoAdicionalValor" autocomplete="off" disabled />
													<a id="removeFiltroInfoAdicional" href="javascript:void(0)" style="position:absolute;top:18%;right:5px;display:none;">
														<i class="fa fa-close text-danger"></i>
													</a>
												</div>
											</div>
										</div>

										<div class="col-lg-4 row mt-0 g-1">
											<label for="funilFiltro" class="fw-bold text-purple"><i class="fa fa-filter"></i> Funil/Estágio</label>
											<div class="col-6">
												<div class="form-group">
													<select id="funilFiltro" class="selectpicker 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">
														<option value="-1" class="" style="letter-spacing: 1px !important;">Nenhum</option>
														{% for fc in funilClientes %}
														<option value="{{fc.getIdFunilClientes}}" class="" style="letter-spacing: 1px !important;">{{fc.getNome}}</option>
														{% endfor %}
													</select>
												</div>
											</div>
											<div class="col-6">
												<div class="form-group">
													<select id="estagiosFiltro" class="selectpicker col-12 form-control form-control-sm"
														title="Estágio funil ativo"
														data-live-search="true"
														data-selected-text-format="count > 2"
														data-count-selected-text= "{0} estagios selecionados" 
														data-actions-box="true" data-select-all-text="Marcar Todos"
														data-deselect-all-text="Desmarcar" autocomplete="off" multiple>
														{% for fc in funilClientes %}
														{% for e in fc.getFunilEstagios %}
														<option value="{{e.getIdFunilEstagios}}" class="" style="letter-spacing: 1px !important;" data-cor="{{e.getCor}}" data-funil="{{fc.getIdFunilClientes}}" data-content="<i class='fa fa-circle' style='color: {{e.getCor}}'></i> {{e.getNome}}">{{e.getNome}}</option>
														{%endfor%}
														{%endfor%}


													</select>
												</div>
											</div>
										</div>
									</div>
								</div>

								<div class="col-lg-3 mb-2">
									<a id="toggleFiltrosBtn" class="btn btn-purple-manager fw-bold btn-sm" onclick="toggleFiltros()"><i class="fa-solid fa-filter me-1"></i>Filtros Detalhados</a>
								</div>
							</div>
						</div>

						<div id="acaoSelecionados" class="box-header with-border p-3 pb-0 d-none" style="animation-duration: 0.05s;">
							<label class="mb-2 fw-bold text-purple"><i class="fa fa-square-check"></i> <b><span id="nSelecionados"></span> Selecionados:</b></label><br>
							<div class="d-flex flex-wrap">
								<div class="me-1">
									<div class="form-group">
										<a id="incluiSelecionadosGrupo" class="btn btn-primary btn-sm"><i class="fa fa-user-plus"></i> Incluir em um grupo</a>
									</div>
								</div>

								<div class="me-1">
									<div class="form-group">
										<a id="removeSelecionadosGrupo" class="btn btn-danger btn-sm"><i class="fa fa-user-xmark"></i> Remover de um grupo</a>
									</div>
								</div>
							</div>
						</div>
					</div>

					<div class="d-flex justify-content-end mb-3">
						<div class="">
							<a id="infoAdicional" class="btn btn-purple-manager fw-bold btn-sm pull-right me-2"><i class="fa fa-id-card me-1"></i>Informações adicionais</a>
						</div>

						<div class="">
							<a id="novoContato" class="btn btn-green-manager2 fw-bold btn-sm pull-right"><i class="fa-solid fa-user-plus me-1"></i>Adicionar Contato</a>
						</div>
					</div>

					<div class="box">
						<div class="box-body no-padding">
								<div class="table-responsive" style="max-height: 66vh; overflow: auto; border-radius: 15px 15px 0 0;">
									<table id="tabelaContatos" class="table table-hover">
										<thead class="bg-purple sticky-top" style="z-index: 99;">
											<tr>
												<th>
													<div class="bg-purple">
														<input type="checkbox" class="chk-col-success" id="check_contatos" autocomplete="off">
														<label class="" for="check_contatos">#</label>
													</div>
												</th>
												<th><i class="fa-solid fa-user me-1"></i>Nome</th>
												<th><i class="fa-solid fa-user-pen me-1"></i>Nome Exibição</th>	
												<th><i class="fa-solid fa-mobile-screen me-1"></i>Número / ID</th>
												<th><i class="fa-solid fa-calendar-check me-1"></i>Cadastro</th>
												<th class="text-center"><i class="fa fa-filter" data-bs-toggle="tooltip" data-bs-original-title="Estágio Funil Ativo"></i></th>																			
												<th></th>
											</tr>
										</thead>
										<tbody>
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>

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

<!-- Modal Info Adicional -->
<div id="modalInfoAdicional" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" data-bs-backdrop="static" aria-hidden="true" style="display: none;">
	<div class="modal-dialog modal-lg">
		<div class="modal-content rounded" style="min-height: 75vh; border-radius: 15px!important;">
			<div class="modal-header bg-purple text-center">
				<h4 class="modal-title fw-bold" id="modalInfoAdicionalTitle">Gerenciar informações adicionais de contatos</h4>
				<button type="button" class="btn-close text-danger" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body p-3">
				<div class="d-block" style="min-height: 70vh;">
					<div class="row">
						<div class="col-lg-5 text-start mt-2">
							<h6 class="mb-1 fw-bold text-purple"><i class="fa-solid fa-info"></i> Nome Informação Adicional</h6>
							<input id="novaInfoNome" placeholder="Nome. Ex: CEP, Data nascimento..." class="form-control border-0 bg-manager-gray" autocomplete="off" />
							<input id="novaInfoId" type="hidden" class="" autocomplete="off" />
						</div>
						<div class="col-lg-4 text-start mt-2 mb-lg-0 mb-2">
							<h6 class="mb-1 fw-bold text-purple"><i class="fa-solid fa-arrow-down-a-z"></i> Tipo</h6>
							<select id="novaInfoTipo" class="form-control selectpicker" style="max-height: 33.5px;">
								<option value="text">Texto</option>
								<option value="number">Número</option>
								<option value="date">Data</option>
							</select>
						</div>
						<div class="col-lg-2 text-start mt-2 mb-lg-0 mb-2">
							<h6 class="mb-1 fw-bold text-purple"><i class="fa-solid fa-circle-exclamation"></i> Obrigatório</h6>
							<select id="novaInfoObrigatorio" class="form-control selectpicker" style="max-height: 33.5px;">
								<option value="nao">Não</option>
								<option value="sim">Sim</option>
							</select>
						</div>
						<div class="col-lg-1 text-start mt-auto">
							<a id="addInfoAdicional" href="javascript:void(0)" class="btn btn-green-manager2 btn-circle btn-xs float-end"><i class="fas fa-plus"></i></a>
						</div>
					</div>
					<hr>
					<div id="showInfoAdicionais" class="row p-2">

					</div>
				</div>
			</div>
			<div class="modal-footer bg-purple border-0 text-end">
				<button type="button" class="btn btn-green-manager2 fw-bold text-start" data-bs-dismiss="modal"><i class="fa-solid fa-check me-1"></i>Ok</button>
			</div>
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal-dialog -->
</div>
<!-- /.modal -->


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

$(document).ready(function() {
	$('#filtroNumeroContato').mask('9999999999999999');
	$('#tabelaContatos').parent().scrollTop(0) 
	
	moment.locale('pt-br');
	$('#cadastroFiltro').daterangepicker({ 
		autoUpdateInput: false,
		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": 3
		}
	});
	
	$('#cadastroFiltro').on('apply.daterangepicker', function (ev, picker) {
		$(this).val(picker.startDate.format('L') + ' - ' + picker.endDate.format('L'));
	});

	$('#cadastroFiltro').on('cancel.daterangepicker', function (ev, picker) {
		$(this).val('');
	});
	
	
	$('#funilFiltro').on('change', function(){
		$('#estagiosFiltro').selectpicker('val', '');
		if($('#funilFiltro').selectpicker('val') == -1){
			$('#funilFiltro').selectpicker('val', '')
		}else{
			$('#estagiosFiltro option').hide()
			$('#estagiosFiltro option[data-funil="'+ $('#funilFiltro').selectpicker('val') +'"]').show()
			$('#estagiosFiltro').selectpicker('destroy')
			$('#estagiosFiltro').selectpicker()
		}
	})
	
	$('#estagiosFiltro option').hide()
	$('#estagiosFiltro').selectpicker();
	$('#estagiosFiltro').on('change', function(){
	})
	
	initilizeTooltips();
	getContatos();
	toggleFiltros();
})

function toggleFiltros() {
		const filtrosAdicionais = document.getElementById('filtrosAdicionais');
		const toggleBtn = document.getElementById('toggleFiltrosBtn');

		if (filtrosAdicionais.style.display === 'none' || filtrosAdicionais.style.display === '') {
		    filtrosAdicionais.style.display = 'block';
		    toggleBtn.innerHTML = '<i class="fa-solid fa-filter-circle-xmark me-1"></i>Filtros Detalhados';
		} else {
		    filtrosAdicionais.style.display = 'none';
		    toggleBtn.innerHTML = '<i class="fa-solid fa-filter me-1"></i>Filtros Detalhados';
		}
	}

function initilizeTooltips(){
	var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
	var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
	  return new bootstrap.Tooltip(tooltipTriggerEl)
	})
}

$('#filtroGrupo').on('change', function(){
	if($('#filtroGrupo').selectpicker('val').includes("-1")){
		$('#filtroGrupo').selectpicker('val', "-1");
	}
})

$('#filtroInfoAdicionalCampo').on('change', function(){
	$('#filtroInfoAdicionalValor').prop('disabled', false);
	$('#removeFiltroInfoAdicional').show();
	
	$('#filtroInfoAdicionalValor').val('');
	$('#filtroInfoAdicionalValor').unmask();
	switch($('#filtroInfoAdicionalCampo option:selected').data('tipo')){
		case 'text':
			$('#filtroInfoAdicionalValor').get(0).type = 'text';
			break;
		case 'number':
			$('#filtroInfoAdicionalValor').get(0).type = 'text';
			$('#filtroInfoAdicionalValor').mask('99999999999999999999999999999999999999999999999999');
			break;
		case 'date':
			$('#filtroInfoAdicionalValor').get(0).type = 'date';
			break;
	}
})
$('#removeFiltroInfoAdicional').on('click', function(){
	$('#filtroInfoAdicionalCampo').selectpicker('val', '');
	$('#filtroInfoAdicionalValor').val('');
	$('#filtroInfoAdicionalValor').prop('disabled', true);
	$('#removeFiltroInfoAdicional').hide();
	$('#filtroInfoAdicionalValor').unmask();
	$('#filtroInfoAdicionalValor').get(0).type = 'text';
})


$('#check_contatos').on('change', function(e){
	if($('#check_contatos').is(':checked')){
		$('.check_contato').prop('checked', true);
	}else{
		$('.check_contato').prop('checked', false);
	}
	showAcaoSelecionar();
	
})
$('#tabelaContatos > tbody').on('change', '.check_contato', function(e){
	showAcaoSelecionar();
})

function showAcaoSelecionar(){

	if($('.check_contato').is(':checked')){
		if(!$('#filtros').hasClass('d-none')){
			$('#filtros').addClass('animated fadeOut').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
				$('#filtros').removeClass('animated fadeOut');
				$('#filtros').toggleClass('d-none');
				
				$('#acaoSelecionados').toggleClass('d-none');
				$('#acaoSelecionados').addClass('animated fadeIn').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
					$('#acaoSelecionados').removeClass('animated fadeIn');
				});
			});
		}
	}else{
		if($('#filtros').hasClass('d-none')){
			
			$('#acaoSelecionados').addClass('animated fadeOut').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
				$('#acaoSelecionados').removeClass('animated fadeOut');
				$('#acaoSelecionados').toggleClass('d-none');
				
				$('#filtros').toggleClass('d-none');
				$('#filtros').addClass('animated fadeIn').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
					$('#filtros').removeClass('animated fadeIn');
				});
			});
		}
	}
	
	if($('.check_contato:checked').length > 0){
		$('#nSelecionados').text($('.check_contato:checked').length);
	}else{
		$('#nSelecionados').text('');
	}
	
}

$('#buscarContatos').on('click', function(){
	getContatos();
})

var buscarMaisContatos = false;
$('#tabelaContatos').parent().scroll(function(e){
	if(buscarMaisContatos){return;}
	if($('#tabelaContatos').parent().scrollTop() + $('#tabelaContatos').parent().height() +1 >= $("#tabelaContatos").parent().get(0).scrollHeight) {
		buscarMaisContatos = true;
		getContatos();
	}
})

var initBuscaContatos = 0;
function getContatos(){
	Swal.fire({title : 'Buscando contatos', allowOutsideClick: false, scrollbarPadding: false});
	Swal.showLoading();
	
	var nomeContato = $('#filtroNomeContato').val()
	
	var infoCampo = $('#filtroInfoAdicionalCampo').selectpicker('val');
	var infoValor = $('#filtroInfoAdicionalValor').val();

	if($('#cadastroFiltro').val() != ''){
		var cadastroInicio = moment($('#cadastroFiltro').data('daterangepicker').startDate._d).format('YYYY-MM-DD');
		var cadastroFinal = moment($('#cadastroFiltro').data('daterangepicker').endDate._d).format('YYYY-MM-DD');
	}else{
		var cadastroInicio = '';
		var cadastroFinal = '';
	}
	initBuscaContatos = (!buscarMaisContatos ? 0 : initBuscaContatos)
	fetch('buscarContatos', {
		method: 'POST',
		headers: {'Content-Type': 'application/x-www-form-urlencoded'},
		body: 'nomeContato=' + nomeContato + 
				'&cadastroInicio=' + cadastroInicio +
				'&cadastroFinal=' + cadastroFinal +
				'&grupos=' + JSON.stringify($('#filtroGrupo').selectpicker('val')) +
				'&tags=' + JSON.stringify($('#tagsFiltro').selectpicker('val')) +
				'&estagios=' + JSON.stringify($('#estagiosFiltro').selectpicker('val')) +
				'&infoCampo=' + infoCampo +
				'&infoValor=' + infoValor +
				'&canais=' + JSON.stringify($('#canaisFiltro').val()) +
				'&init=' + initBuscaContatos
	})
	.then(function(res){ return res.json(); })
	.then(function(res){
		if(res.Success){
			if(!buscarMaisContatos){$('#tabelaContatos > tbody').empty();}
			let contatos = res.contatos;
			
			$(contatos).each(function(index,c){
				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;
				}
				if(c.funil.length == 0){
					initBuscaContatos += 1;
					var estagio = '<span class="addFunilContato badge b-1 border-dark badge-pill text-dark d-flex align-items-center justify-content-center m-auto" data-id="'+ c.idContatos +'" data-bs-toggle="tooltip" data-bs-original-title="Incluir no Funil de Atendimento" style="height: 25px; width: 25px; cursor: pointer;"><i class="fa fa-plus p-0"></i></span>';
				}else{
					initBuscaContatos += c.funil.length;
					var estagio = '';
					estagio = '<span id="estagio_'+ c.idContatos +'" class="addFunilContato b-1 border-dark badge badge-pill text-dark d-flex align-items-center justify-content-center m-auto" data-id="'+ c.idContatos +'" data-bs-trigger="hover focus" data-bs-toggle="popover" style="height: 25px; width: 25px; cursor: pointer;">'+ c.funil.length +'</span>';
				}
				$('#tabelaContatos > tbody').append(
					'<tr class="text-muted">' +
						'<td class="position-relative">'+ 
							'<input type="checkbox" id="check_'+ c.idContatos +'" class="check_contato">' +
							'<label for="check_'+ c.idContatos +'">' + c.idContatos + '</label>' +
						'</td>' +
						'<td>' + senderIcon + (c.nome == null ? c.numero : c.nome)+'</td>' +
						'<td>'+ 
							'<div class="nomeExibirDiv d-flex align-items-center">' +
								'<text href="javascript:void(0)" id="" style="">'+ (c.nomeExibir == null ? 'Não informado' : c.nomeExibir) +'</text>' +
								'<input class="nomeExibirInput form-control form-control-sm d-none w-auto" placeholder="Nome contato" value="'+ (c.nomeExibir == null ? '' : c.nomeExibir) +'"></input>' +
								'<a class="ms-2 nomeExibir" data-id="'+ c.idContatos +'" style="cursor: pointer;" ><i class="fa fa-pencil fa-sm"></i></a>' +
								'<a class="ms-2 nomeExibirConfirmar d-none" data-id="'+ c.idContatos +'" style="cursor: pointer;" ><i class="fa fa-check fa-sm"></i></a>' +
								'<a class="ms-2 nomeExibirCancel d-none" data-id="'+ c.idContatos +'" style="cursor: pointer;" ><i class="fa fa-close fa-sm"></i></a>' +
							'</div>' +
						'</td>' +
						'<td>'+ c.numero +'</td>' +
						'<td>' + moment(c.dataCadastro.date).format('DD/MM/YYYY') +'</td>' +
						'<td class="text-center">' + estagio + '</td>' +						
						'<td>' +
							'<div class="dropdown float-end">' +
								'<a class="px-10 pt-5" href="#" data-bs-toggle="dropdown" aria-expanded="false"><i class="ti-more-alt"></i></a>' +
								'<div class="dropdown-menu dropdown-menu-end" style="position:static;">' +
									'<a  data-id="'+ c.idContatos +'" class="dropdown-item editarInformacoes" href="javascript:void(0)"><i class="fa fa-id-card text-purple"></i> Editar informações</a>' +
									'<a  data-id="'+ c.idContatos +'" data-nome="'+ (c.nomeExibir == null ? 'Não informado' : c.nomeExibir) +'" class="dropdown-item excluirContato text-purple" href="javascript:void(0)"><i class="fa fa-close"></i> Excluir contato</a>' +
									
									'<a  data-id="'+ c.idContatos +'" data-nome="'+ (c.nomeExibir == null ? 'Não informado' : c.nomeExibir) +'" class="dropdown-item excluirConversas text-purple" href="javascript:void(0)"><i class="fa fa-trash-can"></i> Excluir conversas</a>' +
									{%if userLogged.tipo == 'CLIENTE'%}
									{%endif%}
									'<a  data-id="'+ c.idContatos +'" data-nome="'+ (c.nomeExibir == null ? 'Não informado' : c.nomeExibir) +'" class="dropdown-item adicionarGrupo text-purple" href="javascript:void(0)"><i class="fa fa-user-plus"></i> Incluir em um grupo</a>' +
								'</div>' +
							'</div>' +
						'</td>' +
					'</tr>'
				)
				
				if($('#estagio_' + c.idContatos).length > 0){
					var estagioContent = '';
					var title = '';
					var estagioColor = '';
					var percestagioColor = 100/c.funil.length;
					$(c.funil).each(function(index,f){
						var e = f.idFunilEstagios;
						estagioContent = estagioContent + 
						(index > 0 ? '<br>' : '') + 
						f.idFunilClientes.nome + '<span class="badge badge-pill ms-1 my-1"  style="background-color: '+ e.cor +'">'+ e.nome +'</span>';
					
						//(index > 0 ? estagioColor = estagioColor + ',' : '');
						//estagioColor = estagioColor + e.cor + ' ' + (percestagioColor*index) + '%, ' + e.cor + ' ' + (percestagioColor*(index+1)) + '%';
					})
					
					//estagioColor = 'border-image: linear-gradient(to right, '+ estagioColor +');';
					//$('#estagio_' + c.idContatos).attr('style', $('#estagio_' + c.idContatos).attr('style')  + estagioColor);
					
					$('#estagio_' + c.idContatos).popover({
						html: true, 
						sanitize: false,
						content: estagioContent
					})
				}
			})
			
			initilizeTooltips();
			Swal.close();
			
			buscarMaisContatos = false;
		}else{
			Swal.fire({
				title: res.Erro,
				scrollbarPadding: false,
				icon: 'error',
				confirmButtonColor: 'var(--bs-info)',
				scrollbarPadding: false
			}).then(() =>{
				//location.reload();
			})
		}
	})
}

let numeros = [];
{% for n in numeros%}numeros.push('{{n.getIdNumeros}}');{%endfor%};
$('#tabelaContatos > tbody').on('click', '.nomeExibir', function(){
	let nomeExibir = $(this);
	let text = $(this).parent().find('text');
	let id = $(this).data('id');
	let input = $(this).parent().find('.nomeExibirInput');
	let nomeExibirConfirmar = $(this).parent().find('.nomeExibirConfirmar');
	let nomeExibirCancel = $(this).parent().find('.nomeExibirCancel');

	$(input).removeClass('d-none');
	$(nomeExibirConfirmar).removeClass('d-none');
	$(nomeExibirCancel).removeClass('d-none');
	$(text).addClass('d-none');
	$(nomeExibir).addClass('d-none');
	
	$(input).focus();
})

$('#tabelaContatos > tbody').on('click', '.nomeExibirCancel', function(){
	let nomeExibirCancel = $(this);
	let text = $(this).parent().find('text');
	let id = $(this).data('id');
	let input = $(this).parent().find('.nomeExibirInput');
	let nomeExibirConfirmar = $(this).parent().find('.nomeExibirConfirmar');
	let nomeExibir = $(this).parent().find('.nomeExibir');

	$(input).addClass('d-none');
	$(nomeExibirConfirmar).addClass('d-none');
	$(nomeExibirCancel).addClass('d-none');
	$(text).removeClass('d-none');
	$(nomeExibir).removeClass('d-none');
})

$('#tabelaContatos > tbody').on('click', '.nomeExibirConfirmar', function(){
	let nomeExibirConfirmar = $(this);
	let text = $(this).parent().find('text');
	let id = $(this).data('id');
	let input = $(this).parent().find('.nomeExibirInput');
	let nomeExibirCancel = $(this).parent().find('.nomeExibirCancel');
	let nomeExibir = $(this).parent().find('.nomeExibir');
	
	/*if($(input).val() == ''){
		Swal.fire({
			title: 'Atenção',
			text: 'Nome contato não pode ser vazio',
			scrollbarPadding: false,
			icon: 'warning',
			confirmButtonColor: 'var(--bs-info)',
			scrollbarPadding: false
		}).then(() =>{
			//location.reload();
		})
		return;
	}*/
	
	Swal.fire({title : 'Alterando nome...', allowOutsideClick: false, scrollbarPadding: false});
	Swal.showLoading();
	
	fetch('alterarNomeContato', {
		method: 'POST',
		headers: {'Content-Type': 'application/x-www-form-urlencoded'},
		body: 'id='+ id + '&nomeContato=' + $(input).val()
	})
	.then(function(res){ return res.json(); })
	.then(function(res){
		if(res.Success){
			$(text).text(($(input).val() == '' ? 'Não informado' : $(input).val()));
			$(input).addClass('d-none');
			$(nomeExibirConfirmar).addClass('d-none');
			$(nomeExibirCancel).addClass('d-none');
			$(text).removeClass('d-none');
			$(nomeExibir).removeClass('d-none');
			
			
			Swal.close();
		}else{
			Swal.fire({
				title: res.Erro,
				scrollbarPadding: false,
				icon: 'error',
				confirmButtonColor: 'var(--bs-info)',
				scrollbarPadding: false
			}).then(() =>{
				//location.reload();
			})
		}
	})
})

$('#tabelaContatos > tbody').on('click', '.excluirContato', function(){
	let id = $(this).data('id');
	let nome = $(this).data('nome');
	Swal.fire({
	  title: '<span class="text-purple">Excluir Contato ?</span>',
	  html: '<span class="fw-bold">Deseja excluir o contato: <strong class="text-purple">' + nome + '</strong> ?</span>',
	  icon: 'question',
	  showCloseButton: true,
	  showCancelButton: true,
	  focusConfirm: false,
	  confirmButtonText: 'Excluir',
	  cancelButtonText: 'Cancelar',
	  allowOutsideClick: false,
	  confirmButtonColor: 'var(--bs-danger)',
	  scrollbarPadding: false,
	  didOpen: () => {
		$('.swal2-close').blur()
	  }
	}).then((result) => {
		if(result.isConfirmed){
			Swal.fire({title : 'Excluindo contato...', allowOutsideClick: false, scrollbarPadding: false});
			Swal.showLoading();
			
			fetch('excluirContatos', {
				method: 'POST',
				headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				body: 'id='+ id
			})
			.then(function(res){ return res.json(); })
			.then(function(res){
				if(res.Success){
					getContatos();
					Swal.fire({
						title: res.Success,
						icon: 'success',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						getContatos();
					})
				}else{
					Swal.fire({
						title: res.Erro,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						//location.reload();
					})
				}
			})
	
		}
	})
})

$('#tabelaContatos > tbody').on('click', '.excluirConversas', function(){
	let id = $(this).data('id');
	let nome = $(this).data('nome');
	Swal.fire({
	  title: '<span class="text-purple">Excluir Conversas ?</span>',
	  html: '<span class="fw-bold">Antes de excluir verifique se o contato não possui algum chamado em aberto.</span><br><br><b><i class="fa-solid fa-triangle-exclamation text-purple me-1"></i>ATENÇÃO</b>: Após a exclusão não será possível recuperar os dados.',
	  icon: 'question',
	  showCloseButton: true,
	  showCancelButton: true,
	  focusConfirm: false,
	  confirmButtonText: 'Excluir',
	  cancelButtonText: 'Cancelar',
	  scrollbarPadding: false,
	  allowOutsideClick: false,
	  confirmButtonColor: 'var(--bs-danger)',
	  scrollbarPadding: false,
	  didOpen: () => {
		$('.swal2-close').blur()
	  }
	}).then((result) => {
		if(result.isConfirmed){
			Swal.fire({title : 'Excluindo conversas...', allowOutsideClick: false, scrollbarPadding: false});
			Swal.showLoading();
			
			fetch('excluirConversas', {
				method: 'POST',
				headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				body: 'id='+ id
			})
			.then(function(res){ return res.json(); })
			.then(function(res){
				if(res.Success){
					Swal.fire({
						title: res.Success,
						scrollbarPadding: false,
						icon: 'success',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						getContatos();
					})
				}else{
					Swal.fire({
						title: res.Erro,
						scrollbarPadding: false,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						//location.reload();
					})
				}
			})
	
		}
	})
})

$('#tabelaContatos > tbody').on('click', '.adicionarGrupo', function(){
	let id = $(this).data('id');
	let nome = $(this).data('nome');
	
	Swal.fire({
	  title: '<span class="text-purple">Selecione um grupo</span>',
	  html: '<div class="container mt-2 mb-2">' +
				'<h6 class="mb-1">Adicionar <strong class="text-purple">'+ nome +'</strong> ao grupo: </h6>' +
				'<select id="novoGrupoIncluir" class="selectpicker" title="Selecione um grupo">' +
					{% for g in grupos %}
					'<option value="{{g.getIdGrupos}}" class="" style="letter-spacing: 1px !important;">{{g.getNome}}</option>' +
					{% endfor %}
				'</select>' +
			'</div>' +
		'',
	  showCloseButton: true,
	  showCancelButton: true,
	  focusConfirm: false,
	  confirmButtonText: 'Adicionar',
	  cancelButtonText: 'Cancelar',
	  scrollbarPadding: false,
	  allowOutsideClick: false,
	  confirmButtonColor: '#60b86c',
	  scrollbarPadding: false,
	  willOpen: () => {
	  },
	  didOpen: () => {
			$('.swal2-close').blur();
			$('#novoGrupoIncluir').selectpicker();
			$('#novoGrupoIncluir').on('show.bs.select', function () {
				$('.swal2-actions').css('z-index', '0');
			});
			$('#novoGrupoIncluir').on('hidden.bs.select', function () {
				$('.swal2-actions').css('z-index', '');
			});
	  },
	  preConfirm: (value) => {
		let novoGrupoIncluir = $('#novoGrupoIncluir').val();
		
		switch(true){
			case novoGrupoIncluir == '':
				Swal.showValidationMessage('Selecione um Grupo')
				break;
		}
	  }
	  
	}).then((result) => {
		if(result.isConfirmed){
			let novoGrupoIncluir = $('#novoGrupoIncluir').val();
			
			Swal.fire({title : 'Incluindo contato ao grupo...', allowOutsideClick: false, scrollbarPadding: false});
			Swal.showLoading();
			
			fetch('adicionarContatoAoGrupo', {
				method: 'POST',
				headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				body: 'id_contatos=' + id + '&id_grupos=' + novoGrupoIncluir
			})
			.then(function(res){ return res.json(); })
			.then(function(res){
				if(res.Success){
					Swal.fire({
						title: 'Contato adicionado',
						text: res.Success,
						scrollbarPadding: false,
						icon: 'success',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						//location.reload();
					})
				}else{
					Swal.fire({
						title: 'Erro',
						text: res.Erro,
						scrollbarPadding: false,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						//location.reload();
					})
				}
			})
		}
	})
})


$('#incluiSelecionadosGrupo').on('click', function(){
	let ids = [];
	$.each($('.check_contato:checked').parent().find('label') , function(index, val){
		ids.push($(val).text());
	})
	let nome = $(this).data('nome');
	
	Swal.fire({
	  title: '<span class="text-purple">Selecione um grupo</span>',
	  html: '<div class="container mt-2 mb-2">' +
				'<h6 class="mb-1 fw-bold">Adicionar selecionados ao grupo: </h6>' +
				'<select id="novoGrupoIncluir" class="selectpicker" title="Selecione um grupo">' +
					{% for g in grupos %}
					'<option value="{{g.getIdGrupos}}" class="" style="letter-spacing: 1px !important;">{{g.getNome}}</option>' +
					{% endfor %}
				'</select>' +
			'</div>' +
		'',
	  showCloseButton: true,
	  showCancelButton: true,
	  focusConfirm: false,
	  confirmButtonText: 'Adicionar',
	  cancelButtonText: 'Cancelar',
	  scrollbarPadding: false,
	  allowOutsideClick: false,
	  confirmButtonColor: '#60b86c',
	  scrollbarPadding: false,
	  willOpen: () => {
	  },
	  didOpen: () => {
			$('.swal2-close').blur();
			$('#novoGrupoIncluir').selectpicker();
			$('#novoGrupoIncluir').on('show.bs.select', function () {
				$('.swal2-actions').css('z-index', '0');
			});
			$('#novoGrupoIncluir').on('hidden.bs.select', function () {
				$('.swal2-actions').css('z-index', '');
			});
	  },
	  preConfirm: (value) => {
		let novoGrupoIncluir = $('#novoGrupoIncluir').val();
		
		switch(true){
			case novoGrupoIncluir == '':
				Swal.showValidationMessage('Selecione um Grupo')
				break;
		}
	  }
	  
	}).then((result) => {
		if(result.isConfirmed){
			let novoGrupoIncluir = $('#novoGrupoIncluir').val();
			
			Swal.fire({title : 'Incluindo contatos ao grupo...', allowOutsideClick: false, scrollbarPadding: false});
			Swal.showLoading();
			
			fetch('adicionarSelecionadosAoGrupo', {
				method: 'POST',
				headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				body: 'id_contatos=' + JSON.stringify(ids) + '&id_grupos=' + novoGrupoIncluir
			})
			.then(function(res){ return res.json(); })
			.then(function(res){
				if(res.Success){
					Swal.fire({
						//title: 'Contato adicionado',
						html: '<span class="text-purple fw-bold">'+res.Success+'</span>',
						scrollbarPadding: false,
						icon: 'success',
						confirmButtonColor: '#60b86c',
						scrollbarPadding: false
					}).then(() =>{
						//location.reload();
						$('.check_contato').prop('checked',false);
						showAcaoSelecionar();
						getContatos();
					})
				}else{
					Swal.fire({
						title: 'Erro',
						text: res.Erro,
						scrollbarPadding: false,
						icon: 'error',
						confirmButtonColor: '#60b86c',
						scrollbarPadding: false
					}).then(() =>{
						//location.reload();
					})
				}
			})
		}
	})
})

$('#removeSelecionadosGrupo').on('click', function(){
	let ids = [];
	$.each($('.check_contato:checked').parent().find('label') , function(index, val){
		ids.push($(val).text());
	})
	let nome = $(this).data('nome');
	
	Swal.fire({
	  title: '<span class="text-purple">Selecione um grupo</span>',
	  html: '<div class="container mt-2 mb-2">' +
				'<h6 class="mb-1 fw-bold">Remover selecionados do grupo: </h6>' +
				'<select id="novoGrupoIncluir" class="selectpicker" title="Selecione um grupo">' +
					{% for g in grupos %}
					'<option value="{{g.getIdGrupos}}" class="" style="letter-spacing: 1px !important;">{{g.getNome}}</option>' +
					{% endfor %}
				'</select>' +
			'</div>' +
		'',
	  showCloseButton: true,
	  showCancelButton: true,
	  focusConfirm: false,
	  confirmButtonText: 'Adicionar',
	  cancelButtonText: 'Cancelar',
	  scrollbarPadding: false,
	  allowOutsideClick: false,
	  confirmButtonColor: '#60b86c',
	  scrollbarPadding: false,
	  willOpen: () => {
	  },
	  didOpen: () => {
			$('.swal2-close').blur();
			$('#novoGrupoIncluir').selectpicker();
			$('#novoGrupoIncluir').on('show.bs.select', function () {
				$('.swal2-actions').css('z-index', '0');
			});
			$('#novoGrupoIncluir').on('hidden.bs.select', function () {
				$('.swal2-actions').css('z-index', '');
			});
	  },
	  preConfirm: (value) => {
		let novoGrupoIncluir = $('#novoGrupoIncluir').val();
		
		switch(true){
			case novoGrupoIncluir == '':
				Swal.showValidationMessage('Selecione um Grupo')
				break;
		}
	  }
	  
	}).then((result) => {
		if(result.isConfirmed){
			let novoGrupoIncluir = $('#novoGrupoIncluir').val();
			
			Swal.fire({title : 'Incluindo contatos ao grupo...', allowOutsideClick: false, scrollbarPadding: false});
			Swal.showLoading();
			
			fetch('removerSelecionadosDoGrupo', {
				method: 'POST',
				headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				body: 'id_contatos=' + JSON.stringify(ids) + '&id_grupos=' + novoGrupoIncluir
			})
			.then(function(res){ return res.json(); })
			.then(function(res){
				if(res.Success){
					Swal.fire({
						//title: 'Contato adicionado',
						text: res.Success,
						scrollbarPadding: false,
						icon: 'success',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						//location.reload();
						$('.check_contato').prop('checked',false);
						showAcaoSelecionar();
						getContatos();
					})
				}else{
					Swal.fire({
						title: 'Erro',
						text: res.Erro,
						scrollbarPadding: false,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						//location.reload();
					})
				}
			})
		}
	})
})




$('#novoContato').on('click', function(){
	Swal.fire({
	  title: '<span class="fw-bold text-purple">Novo Contato</span>',
	  html:
		'<h5 class="text-purple">Informe o número para adicionar um novo contato</h5>' +
		'<div class="container row">' +
			'<div class="col-3 text-start mt-2">' +
				'<h6 class="mb-1 fw-bold text-purple"><i class="fa-solid fa-earth-americas me-1"></i>País</h6>' +
				'<input id="novoContatoPais" placeholder="País" class="form-control border-0 bg-manager-gray" value="55" autocomplete="off"/>' +
			'</div>' +
			
			'<div class="col-9 text-start mt-2">' +
				'<h6 class="mb-1 fw-bold text-purple"><i class="fa-solid fa-mobile-screen-button me-1"></i>Número</h6>' +
				'<input id="novoContatoNumero" placeholder="DDD + Telefone" class="form-control border-0 bg-manager-gray" />' +
			'</div>' +
			'<div class="col-12 text-start mt-3">' +
				'<h6 class="mb-1 fw-bold text-purple"><i class="fa-solid fa-user me-1"></i>Nome</h6>' +
				'<input id="novoContatoNome" placeholder="Nome" class="form-control border-0 bg-manager-gray" />' +
			'</div>' +
			'' +
		'</div>' +
		'',
	  showCloseButton: true,
	  showCancelButton: true,
	  focusConfirm: false,
	  confirmButtonText: 'Adicionar',
	  cancelButtonText: 'Cancelar',
	  scrollbarPadding: false,
	  allowOutsideClick: false,
	  confirmButtonColor: '#60b86c',
	  scrollbarPadding: false,
	  willOpen: () => {
	  },
	  didOpen: () => {
		  $('.swal2-close').blur();
		  $('#novoContatoNumero').focus();
		  $('#novoContatoNumero').mask('000000000000000000000');
		  
		  $('#novoContatoPais').mask('0000');
		  
	  },
	  preConfirm: (value) => {
		let novoContatoPais = $('#novoContatoPais').val();
		let novoContatoNumero = $('#novoContatoNumero').val();
		let novoContatoNome = $('#novoContatoNome').val();
		
		switch(true){
			case novoContatoPais == '':
				Swal.showValidationMessage('País não pode ser vazio')
				break;
			case !/^\d+$/.test(novoContatoPais):
				Swal.showValidationMessage('País deve conter apenas números')
				break;
			case novoContatoNumero == '':
				Swal.showValidationMessage('Número não pode ser vazio')
				break;
			case novoContatoNome == '':
				Swal.showValidationMessage('Nome não pode ser vazio')
				break;
		}
	  }
	  
	}).then((result) => {
		if(result.isConfirmed){
			let novoContatoPais = $('#novoContatoPais').val();
			let novoContatoNumero = $('#novoContatoNumero').val();
			let novoContatoNome = $('#novoContatoNome').val();
		
			
			Swal.fire({title : 'Adicionando contato...', allowOutsideClick: false, scrollbarPadding: false});
			Swal.showLoading();
			
			fetch('chatNovoContato', {
				method: 'POST',
				headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				body: 'pais=' + novoContatoPais + '&numero=' + novoContatoNumero + '&nome=' + novoContatoNome +
						'&sourceNumber=' + numeros[0]
			})
			.then(function(res){ return res.json(); })
			.then(function(res){
				if(res.Success){
					getContatos();
				}else{
					Swal.fire({
						title: 'Contato não adicionado',
						text: res.Erro,
						scrollbarPadding: false,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						//location.reload();
					})
				}
			})
		}
	})
})


$('#infoAdicional').on('click', function(){
	$('#novaInfoNome').val('');
	$('#novaInfoId').val('');
	$('#novaInfoTipo').selectpicker('val', 'text');
	$('#novaInfoObrigatorio').selectpicker('val', 'nao');
	$('#showInfoAdicionais').empty();
	
	$(contatoInfoAdicional).each(function(index,info){
		var tipo = info.tipo;
		switch(tipo){
			case 'text':
				tipo = 'Texto';
				break;
			case 'number':
				tipo = 'Número';
				break;
			case 'date':
				tipo = 'Data';
				break;
		}
		var obrigatorio = (info.obrigatorio ? info.obrigatorio : 'nao');
		
		$('#showInfoAdicionais').append(
			'<div class="text-start border-0 bg-manager-gray p-2 box b-1 mb-3" data-nome="'+ info.nome +'" data-id="'+ info.id +'" data-tipo="'+ info.tipo +'">' +
				'<div class="d-flex">' +
					'<h5 class="m-0 text-purple w-p100">'+ info.nome +' ('+ tipo +')</h5>' +
					
					'<div class="ms-auto w-100 fw-bold text-purple text-end">' +
						(obrigatorio == 'sim' ? '*Obrigatório' : '')+
					'</div>' +
					'<div class="ms-auto w-50 text-end">' +
						'<a href="javascript:void(0)" class="deletaInfo p-1" data-nome="'+ info.nome +'" data-id="'+ info.id +'" data-tipo="'+ info.tipo +'">' +
							'<i class="fas fa-close text-danger"></i>' +
						'</a>' +
					'</div>' +
				'</div>' +
			'</div>'
		);
	})
	
	
	$('#modalInfoAdicional').modal('toggle');
	$('#novaInfoTipo').parent().find('button').css('max-height', '33.5px');
	$('#novaInfoObrigatorio').parent().find('button').css('max-height', '33.5px');
})

nomeInfoMask = {
	translation: {
	  'Z': {
		pattern: /[a-zA-Z0-9_-]/, optional: true
	  }
	}
};
$('#novaInfoNome').mask('ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ', nomeInfoMask);

replaceSpaceByUnderscore = {
  onKeyPress: function(val, e, field, options) {
	  $('#novaInfoId').val(val.replace(' ', '_').toLowerCase());
	},
	translation: {
	  'Z': {
		pattern: /[a-z0-9_ ]/, optional: true
	  }
	}
};
$('#novaInfoId').mask('ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ', replaceSpaceByUnderscore);
$('#novaInfoNome').on('keyup', function(){
	$('#novaInfoId').val($('#novaInfoNome').val().toLowerCase().replaceAll(' ', '_'))
})

var contatoInfoAdicional = {%if camposAdicionais is not empty %}JSON.parse('{{camposAdicionais|raw}}'){%else%}[]{%endif%};
$('#addInfoAdicional').on('click', function(){
	
	var err = '';
	switch(true){
		case $('#novaInfoNome').val() == '':
			err = 'Nome informação adicional não pode ser vazio.'
			break;
		case $('#novaInfoTipo').val() == '':
			err = 'Tipo informação adicional não pode ser vazio.'
			break;
	}
	
	var nomeInfo = $('#novaInfoNome').val();
	var idInfo = $('#novaInfoId').val();
	var tipoInfo = $('#novaInfoTipo').val();
	var nomeTipoInfo = $('#novaInfoTipo > option:selected').text();
	var obrigatorio = $('#novaInfoObrigatorio').val();
	
	if(err == ''){
		$(contatoInfoAdicional).each(function(index,info){
			if(idInfo == info.id){
				err = 'Já existe uma informação com nome: \''+ nomeInfo +'\'.<br>Escolha um outro nome.';
			}
		})
	}
	
	if(err != ''){
		Swal.fire({
			title: 'Atenção',
			html: err,
			scrollbarPadding: false,
			icon: 'warning',
			confirmButtonColor: 'var(--bs-info)',
			scrollbarPadding: false
		})
		return;
	}
	
	
	
	fetch('adicionarInfoAdicional', {
		method: 'POST',
		headers: {'Content-Type': 'application/x-www-form-urlencoded'},
		body: 'idInfo=' + idInfo + '&nomeInfo=' + nomeInfo + '&tipoInfo=' + tipoInfo + '&obrigatorio=' + obrigatorio
	})
	.then(function(res){ return res.json(); })
	.then(function(res){
		if(res.Success){
			$('#novaInfoNome').val('');
			$('#novaInfoId').val('');
			$('#novaInfoTipo').selectpicker('val', 'text');
			$('#novaInfoObrigatorio').selectpicker('val', 'nao');
			
			contatoInfoAdicional.push({id:idInfo, nome:nomeInfo, tipo:tipoInfo, obrigatorio:obrigatorio});

			$('#showInfoAdicionais').append(
				'<div class="text-start p-2 box b-1 mb-1" data-nome="'+ nomeInfo +'" data-id="'+ idInfo +'" data-tipo="'+ tipoInfo +'">' +
					'<div class="d-flex">' +
						'<h5 class="m-0 w-p100">'+ nomeInfo +' ('+ nomeTipoInfo +')</h5>' +
						'<div class="ms-auto w-100 text-end">' +
							(obrigatorio == 'sim' ? '*Obrigatório' : '')+
						'</div>' +
						'<div class="ms-auto w-50 text-end">' +
							'<a href="javascript:void(0)" class="deletaInfo p-1" data-nome="'+ nomeInfo +'" data-id="'+ idInfo +'" data-tipo="'+ tipoInfo +'">' +
								'<i class="fas fa-close text-danger"></i>' +
							'</a>' +
						'</div>' +
					'</div>' +
				'</div>'
			);
		}else{
			Swal.fire({
				title: 'Não foi possível incluir nova informação',
				text: res.Erro,
				scrollbarPadding: false,
				icon: 'error',
				confirmButtonColor: 'var(--bs-info)',
				scrollbarPadding: false
			})
		}
	})
})

$('#showInfoAdicionais').on('click', '.deletaInfo', function(){
	var nomeInfo = $(this).data('nome');
	var idInfo = $(this).data('id');
	var tipoInfo = $(this).data('tipo');
	
	Swal.fire({
	  title: 'Excluir Informação ?',
	  html: 'Deseja a informação: ' + nomeInfo + ' ? <br><br><i class="fa fa-triangle-exclamation text-danger"></i> Após excluir não será possível recuperar essa informação dos contatos!',
	  icon: 'question',
	  showCloseButton: true,
	  showCancelButton: true,
	  focusConfirm: false,
	  confirmButtonText: 'Excluir',
	  cancelButtonText: 'Cancelar',
	  scrollbarPadding: false,
	  allowOutsideClick: false,
	  confirmButtonColor: 'var(--bs-danger)',
	  scrollbarPadding: false,
	  didOpen: () => {
		$('.swal2-close').blur()
	  }
	}).then((result) => {
		if(result.isConfirmed){
			Swal.fire({title : 'Excluindo informação...', allowOutsideClick: false, scrollbarPadding: false});
			Swal.showLoading();
			
			fetch('excluirInfoAdicional', {
				method: 'POST',
				headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				body: 'idInfo=' + idInfo + '&nomeInfo=' + nomeInfo + '&tipoInfo=' + tipoInfo
			})
			.then(function(res){ return res.json(); })
			.then(function(res){
				if(res.Success){
					contatoInfoAdicional.splice(res.index, 1);
					$('#showInfoAdicionais .box')[res.index].remove();
					
					Swal.fire({
						title: 'Informação excluída',
						scrollbarPadding: false,
						icon: 'success',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						
					})
				}else{
					Swal.fire({
						title: res.Erro,
						scrollbarPadding: false,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					})
				}
			})
	
		}
	})
})

$('#tabelaContatos > tbody').on('click', '.editarInformacoes', async function(){
	var id = $(this).data('id');
	
	if(contatoInfoAdicional.length == 0){
		Swal.fire({
			title: 'Atenção',
			text: 'Antes de editar as informações adicionais, é necessário incluí-las no botão \'Informações Adicionais\' no topo da página.',
			scrollbarPadding: false,
			icon: 'warning',
			confirmButtonColor: 'var(--bs-info)',
			scrollbarPadding: false
		})
		return;
	}
	
	Swal.fire({title : 'Buscando informação...', allowOutsideClick: false, scrollbarPadding: false});
	Swal.showLoading();
	
	var infoContato = null;
	await fetch('infoAdicionalContato', {
		method: 'POST',
		headers: {'Content-Type': 'application/x-www-form-urlencoded'},
		body: 'id=' + id
	})
	.then(function(res){ return res.json(); })
	.then(function(res){
		if(res.Success){
			infoContato = res.info;
		}else{
			Swal.fire({
				title: res.Erro,
				scrollbarPadding: false,
				icon: 'error',
				confirmButtonColor: 'var(--bs-info)',
				scrollbarPadding: false
			})
			return;
		}
	})
	
	
	var campos = '';
	$(contatoInfoAdicional).each(function(index,info){
		campos +=  '<div class="'+ (info.tipo == 'text' ? 'col-12' : 'col-lg-6 col-12') +' text-start mt-2">' +
						'<h6 class="mb-1 fw-bold text-purple">'+ info.nome +'</h6>' +
						'<input type="'+ (info.tipo == 'number' ? 'text' : info.tipo) +'" id="'+ info.id +'" placeholder="'+ info.nome +'" class="form-control border-0 bg-manager-gray" maxlength="100"/>' +
					'</div>';
	})
	
	let width = '100vw';
	if($(window).width() > 990){width = ($(window).width()/2.5);}
	
	Swal.fire({
		width: width,
		title: '<span class="text-purple">Editar informações adicionais</span>',
		html:
			'<div id="editarInfoContato" class="container row" style="max-height:75vh; overflow-y: auto;">' +
				campos +
			'</div>' +
			'',
		showCloseButton: true,
		showCancelButton: true,
		focusConfirm: false,
		confirmButtonText: 'Salvar',
		cancelButtonText: 'Cancelar',
		allowOutsideClick: false,
		confirmButtonColor: '#60b86c',
		scrollbarPadding: false,
		willOpen: () => {
			$(contatoInfoAdicional).each(function(index,info){
				if(info.tipo == 'number'){
					$('#' + info.id).mask('99999999999999999999999999999999999999999999999999');
				}
			})
			
			if(infoContato != null){
				$(contatoInfoAdicional).each(function(index,info){
					if(infoContato[info.id]){
						$('#' + info.id).val(infoContato[info.id]);
					}
				})
			}
		},
		didOpen: () => {
			$('.swal2-close').blur();
			$('#novoContatoNumero').focus();
			$('#novoContatoNumero').mask('000000000000000000000');
		  
		},
		preConfirm: (value) => {
		
		}
	  
	}).then((result) => {
		if(result.isConfirmed){
			var infoSalvar = {};
			$($('#editarInfoContato input')).each(function(index,info){
				var key = $(info).attr('id');
				var value = $(info).val();
				infoSalvar[key] = value;
			})
			
			fetch('salvarInfoAdicionalContato', {
				method: 'POST',
				headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				body: 'id=' + id + '&info=' + JSON.stringify(infoSalvar)
			})
			.then(function(res){ return res.json(); })
			.then(function(res){
				if(res.Success){
					Swal.fire({
						title: 'Informações alteradas',
						scrollbarPadding: false,
						icon: 'success',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					})
				}else{
					Swal.fire({
						title: res.Erro,
						scrollbarPadding: false,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					})
				}
			})
		}
	})
})


$('#tabelaContatos > tbody').on('click', '.addFunilContato', function(){
	$(this).blur();
	var idContato = $(this).data('id');
	
	Swal.fire({
		title: 'Incluir contato no Funil',
		html:
			'<div class="container row">' +
				'<div class="col-12">' +
					'<h6 class="text-start">Funil</h6>' +
					'<select id="incluirFunilCliente" class="selectpicker col-12" title="Selecionar funil" data-container="body">' +
					{% for fc in funilClientes %}
						'<option class="m-0" value="{{fc.getIdFunilClientes}}" data-cor="{{e.getCor}}" style="letter-spacing: 1px !important;">' +
							'{{fc.getNome}}' +
						'</option>' +
					{%endfor%}
					'</select>' +
				'<div class="col-12 mt-3">' +
					'<h6 class="text-start">Estágio</h6>' +
					'<select id="incluirFunilEstagio" class="selectpicker col-12" title="Selecionar estágio" data-container="body">' +
					{% for fc in funilClientes %}
						{% for e in fc.getFunilEstagios %}
							'<option class="m-0" value="{{e.getIdFunilEstagios}}" data-funil="{{fc.getIdFunilClientes}}" data-cor="{{e.getCor}}" style="letter-spacing: 1px !important;"'+ 
									' data-content=\'<span class="p-0"> {{e.getNome}}</span>\'> {{e.getNome}} ' +
							'</option>' +
						{%endfor%}
					{%endfor%}
					'</select>' +
				'</div>' +
			'</div>' +
			'',
		showCloseButton: true,
		showCancelButton: true,
		focusConfirm: false,
		confirmButtonText: 'Incluir',
		cancelButtonText: 'Cancelar',
		allowOutsideClick: false,
		confirmButtonColor: 'var(--bs-info)',
		scrollbarPadding: false,
		willOpen: () => {
			
		},
		didOpen: () => {
			$('.swal2-close').blur();
			
			$('#incluirFunilCliente').selectpicker();
			$('#incluirFunilCliente').on('change', function(){
				$('#incluirFunilEstagio option').hide()
				$('#incluirFunilEstagio option[data-funil="'+ $('#incluirFunilCliente').selectpicker('val') +'"]').show()
				$('#incluirFunilEstagio').selectpicker('destroy')
				$('#incluirFunilEstagio').selectpicker()
			})
			
			$('#incluirFunilEstagio option').hide()
			$('#incluirFunilEstagio').selectpicker();
			$('#incluirFunilEstagio').on('change', function(){
				$('#incluirFunilEstagio').parent().find('button').css('color', 'white');
				$('#incluirFunilEstagio').parent().find('button').removeClass('btn-light');
				
				$('#incluirFunilEstagio').parent().find('button').css('background', $('#incluirFunilEstagio option:selected').data('cor'));
				$('#incluirFunilEstagio').parent().find('button').blur();
			})
		},
		preConfirm: (value) => {
			let idFunil = $('#incluirFunilCliente').val();
			let idEstagio = $('#incluirFunilEstagio').val();
		
			switch(true){
				case idFunil == '':
					Swal.showValidationMessage('Selecione um funil')
					break;
				case idEstagio == '':
					Swal.showValidationMessage('Selecione um estágio')
					break;
			}
		}
	}).then((result) => {
		if(result.isConfirmed){
			let idFunil = $('#incluirFunilCliente').val();
			let idEstagio = $('#incluirFunilEstagio').val();
			
			Swal.fire({title : 'Adicionando contato ao funil...', allowOutsideClick: false, scrollbarPadding: false});
			Swal.showLoading();
			
			fetch('adicionarContatoEstagio', {
				method: 'POST',
				headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				body: 'idContato=' + idContato + '&idFunilClientes=' + idFunil + '&idEstagio=' + idEstagio
			})
			.then(function(res){ return res.json(); })
			.then(function(res){
				if(res.Success){
					Swal.fire({
						title: 'Contato adicionado ao funil',
						scrollbarPadding: false,
						icon: 'success',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						getContatos();
					})
				}else{
					Swal.fire({
						title: res.Erro,
						scrollbarPadding: false,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					})
				}
			})
		}
	})
})
</script>
{% endblock %}