{% extends "cliente/base.php" %}
{% block body %}
<style>
div {
	scrollbar-color: var(--bs-secondary) rgba(0,0,0,0.1);
	scrollbar-width: thin;
}

#listaEstagios {
	scrollbar-width: auto;
}

#listaEstagios .card .contato{
	transition: 0.1s;
	opacity: 1;
	#background: var(--bs-white);
}
#listaEstagios .card .contato:hover{
	#background: #FFFFFFCC;
	opacity: 0.8;
	transition: 0.1s;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
.bootstrap-select .dropdown-toggle{
	max-height: 33.5px;
}

.sortable-chosen.sortable-drag{
	transform: rotate(3deg);
}

.input-group-addon {
	border: none !important;
}
.btn-light {
	background-color: #F2F5FA;
	border: none;
	color: #000000;
}
.wrapper .border-light {
	border: none;
}

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

.cont-prioridade{
	width: 65px;
	height: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	right: 0;
	border-radius: 0 10px;
}

.nav-tabs-custom > .nav-tabs > li > a.active {
    background-color: #60b86c;
    color: #ffffff!important;
}

.theme-primary .nav-tabs-custom > .nav-tabs > li a.active {
    border-top-color: #60b86c;
    border-radius: 0 0 10px 10px;
}

.nav-tabs{
	border: 0!important;
}

.nav-tabs-custom > .nav-tabs > li > a.active:hover {
    background-color: #60b86c;
    color: #ffffff;
}

.nav-tabs-custom > .nav-tabs > li > a:hover {
    background: #60b86c;
    margin: 0;
    border-radius: 0 0 10px 10px;
    color: #fff!important;
}

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

@media (max-width: 768px) {
    .contato_nome {
        max-width: 115px;
    }
}

@media (min-width: 769px) {
    .contato_nome {
        max-width: 230px;
    }
}
</style>

<div class="content-wrapper bg-light">
	<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="text-start" style="min-width: 200px;">
						<h6 for="selectFunilClientes" class="mb-1 fw-bold text-purple" style="">Selecionar Funil</h6>
						<select id="selectFunilClientes" class="selectpicker form-control form-control-sm b-1" title="Selecionar Funil" autocomplete="off" data-live-search="true">
							{%for key,fc in funilClientes%}
								<option value="{{fc.idFunilClientes}}" data-departamento="{{fc.idDepartamento.idDepartamentos}}" data-atendente="{{fc.idAtendente.idAtendentes}}" {%if key == 0%}selected{%endif%}>{{fc.nome}}</option>
							{%endfor%}
						</select>
					</div>
					{% if userLogged.tipo == 'CLIENTE' %}
					<div class="text-start ms-2">
						<a id="editarFunil" class="btn btn-green-manager fw-bold btn-sm mt-4"><i class="fa fa-pencil"></i> Editar Selecionado</a>
					</div>
					
					<div class="text-start ms-2">
						<a id="adicionarFunil" class="btn btn-green-manager fw-bold btn-sm mt-4"><i class="fa fa-plus"></i> Novo Funil</a>
					</div>
					{%endif%}
					
					<div class="ms-auto">
						<a id="gerenciarEstagios" class="btn btn-green-manager fw-bold btn-sm mt-4"><i class="fa fa-gear"></i> Gerenciar Estágios</a>
					</div>
				</h4>
			</div>
		</div>

		<!-- Main content -->
		<section class="content">
			<div class="row">
				<div class="col-12">
					<div id="boxFunil" class="box" style="overflow: hidden;">
						
						<div id="filtrosFunil" class="p-2 mb-0 d-flex">
							<!--h5 class="mb-0 d-flex align-items-center">Funil 1</h5-->
							<div class="col-xl-2 col-lg-2 ms-auto text-start">
								<!--label for="ordemExibicao" class="" style="font-size: 12px;">Ordenar</label-->
								<select id="ordemExibicao" class="selectpicker col-12 form-control form-control-sm" title="Filtrar status" data-container="body" autocomplete="off">
									<option value="PRIORIDADE:DESC" class="" data-content='<i class="fas fa-arrow-up-wide-short"></i> Prioridade' selected>Prioridade</option>
									<option value="PRIORIDADE:ASC" class="" data-content='<i class="fas fa-arrow-down-wide-short"></i> Prioridade'>Prioridade</option>
									<option value="PROXINTERACAO:DESC" class="" data-content='<i class="fas fa-arrow-up-wide-short"></i> Próxima Interação'>Próxima Interação</option>
									<option value="PROXINTERACAO:ASC" class="" data-content='<i class="fas fa-arrow-down-wide-short"></i> Próxima Interação'>Próxima Interação</option>
									<option value="VALOR:DESC" class="" data-content='<i class="fa-solid fa-arrow-down-9-1"></i> Valor'>Valor</option>
									<option value="VALOR:ASC" class="" data-content='<i class="fa-solid fa-arrow-up-1-9"></i> Valor'>Valor</option>
								</select>
							</div>
						</div>
					
						<div id="listaEstagios" class="d-flex pt-0" style="overflow-x: auto; scroll-behavior: smooth;">
							{% for e in estagios %}
							<!--div class="card col-xl-3 col-lg-4 col-md-6 col-10 m-3 mx-1 mt-1 shadow-sm noselect" data-id="{{e.idFunilEstagios}}" data-ordem="{{e.ordem}}" style="overflow: hidden;">
								<div class="estagio-title p-2" style="background: linear-gradient(to bottom, {{e.cor}} , {{e.cor}}AA ); z-index: 1;">
									<div class="d-flex flex-wrap align-items-center text-white" style="">
										<h5 class="estagio-nome m-0 " style="text-shadow: 1px 1px #686868;">{{e.nome}}</h5>
										
										<span class="dropdown ms-auto">
											<a class="text-white bg-none" type="button" data-bs-toggle="dropdown">
												<i class="fa fa-ellipsis-vertical ps-2 pe-1" style=""></i>
											</a>
											<div class="dropdown-menu" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate(0px, 43px);" data-popper-placement="bottom-start">
												<a class="pesquisarContato dropdown-item" href="javascript:void(0)"><i class="fa fa-search"></i> Pesquisar Contato</a>
												<a class="adicionarContato dropdown-item" href="javascript:void(0)" data-id="{{e.idFunilEstagios}}" data-nome="{{e.nome}}"><i class="fa fa-user-plus"></i> Adicionar Contato</a>
											</div>
										</span>
										
										<div class="buscarContato px-2 py-1 position-relative d-none" style="flex-basis: 100%;">
											<input type="text" placeholder="Nome contato..." class="form-control form-control-sm w-p100 pe-4 rounded-pill" value=""/>
										
											<a href="javascript:void(0)" class="hideBuscarContato" style="position: absolute; top: 18%; right: 15px;">
												<i class="fa fa-close text-danger"></i>
											</a>
										</div>
									</div>
								</div>
								
								<div class="contatos p-2 pt-0 h-p100" style="overflow-y: hidden; background: linear-gradient(to bottom, {{e.cor}}AA , {{e.cor}}55); scroll-behavior: smooth;">
									
								</div>
							</div-->
							{%endfor%}
						</div>
					</div>
				</div>
			</div>
		</section>
		<!-- /.content -->
	</div>
</div>


<!-- Modal Estágios -->
<div id="modalEstagios" class="modal fade bs-example-modal-lg" role="dialog" data-bs-backdrop="static" aria-hidden="true" style="display: none;">
	<div class="modal-dialog modal-lg" style="">
		<div class="modal-content rounded" style="min-height: 75vh;">
			<div class="modal-header bg-purple">
				<h4 class="modal-title fw-bold" id="modalEstagiosTitle"></h4>
				<button type="button" class="btn-close" 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-6 text-start mt-2">
							<h6 class="mb-1 fw-bold text-purple"><i class="fa-solid fa-diagram-project me-1"></i>Nome Estágio</h6>
							<input id="novoEstagioNome" placeholder="Nome Estágio" class="form-control border-0 bg-manager-gray" autocomplete="off" maxlength="45"/>
						</div>
						<div class="col-lg-3 text-start mt-2 mb-lg-0 mb-2">
							<h6 class="mb-1 fw-bold text-purple"><i class="fa-solid fa-fill-drip me-1"></i>Cor</h6>
							<input id="novoEstagioCor" type="text" class="form-control border-0 bg-manager-gray" autocomplete="off"/>
						</div>
						<div class="col-lg-3 mt-auto ms-auto">
							<a id="addEstagio" href="javascript:void(0)" class="btn btn-green-manager fw-bold btn-sm float-end"><i class="fas fa-plus me-1"></i>Incluir Estágio</a>
						</div>
					</div>
					<hr>
					<div class="modal-header border-0 p-0 mb-3 mt-4">
						<h4 class="modal-title text-purple fw-bold"><i class="fa-solid fa-diagram-project me-2"></i>Estágios Criados</h4>
					</div>
					<div id="showEstagios" class="row p-2">
						
					</div>
				</div>
			</div>
			<div class="modal-footer bg-purple text-end">
				<button type="button" class="btn btn-green-manager fw-bold text-start" data-bs-dismiss="modal"><i class="fa-solid fa-floppy-disk me-2"></i>Salvar</button>
			</div>
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal-dialog -->
</div>
<!-- /.modal -->




<style>
</style>
{% endblock %}
{% block scripts %}
<script src="assets/vendor_plugins/sortable/sortable_1-15-1.js"></script>

<script>

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

$(document).ready(function() {
	$('body').addClass('sidebar-collapse');
	
	$('#selectFunilClientes').selectpicker();
	$('#selectFunilClientes').parent().find('button').removeClass('btn-light')
	$('#selectFunilClientes').parent().find('button').addClass('bg-white text-dark')
	
	buscarContatosEstagios();
	resizeBox();
})

$('#selectFunilClientes').on('change', function(){
	$('#listaEstagios').empty();
	buscarContatosEstagios();
})




/***************************************** GERENCIAR FUNIL ******************************************/
let departamentos = [];
{% for key,d in departamentos %}
	departamentos[{{key}}] = {};
	departamentos[{{key}}]['idDepartamentos'] = '{{d.getIdDepartamentos}}';
	departamentos[{{key}}]['nomeDepartamento'] = '{{d.getNomeDepartamento}}';
{%endfor%};

let atendentes = [];
{% for key,a in atendentes %}
	atendentes[{{key}}] = {};
	atendentes[{{key}}]['idAtendentes'] = '{{a.getIdAtendentes}}';
	atendentes[{{key}}]['idDepartamento'] = '{{a.getIdDepartamento.getIdDepartamentos}}';
	atendentes[{{key}}]['nomeAtendente'] = '{{a.getNomeAtendente}}';
{%endfor%};
$('#adicionarFunil').on('click', function(){
	adicionarEditarFunil();
})
$('#editarFunil').on('click', function(){
	if($('#selectFunilClientes').selectpicker('val') == ''){
		Swal.fire({
			title: 'Nenhum funil selecionado',
			text: '',
			scrollbarPadding: false,
			icon: 'error',
			confirmButtonColor: 'var(--bs-info)',
			scrollbarPadding: false
		})
		return;
	}
	var idFunil = $('#selectFunilClientes').selectpicker('val');
	var nomeFunil = $('#selectFunilClientes option:selected').text();
	var departamentoFunil = $('#selectFunilClientes option:selected').data('departamento');
	var atendenteFunil = $('#selectFunilClientes option:selected').data('atendente');
	adicionarEditarFunil({id:idFunil,nome:nomeFunil,departamento:departamentoFunil,atendente:atendenteFunil});
})
function adicionarEditarFunil(funil = null){
	Swal.fire({
	  title:'<span class="text-purple">' + (funil ? 'Editar Funil' : 'Novo Funil') + '</span>',
	   html:
		'<div class="container">' +
			'<div class="col-12 text-start mt-2">' +
				'<h6 class="mb-1 fw-bold text-purple"><i class="fa-solid fa-filter me-1"></i>Nome Funil</h6>' +
				'<input id="novoFunilNome" class="form-control border-0 bg-manager-gray" placeholder="Nome funil" maxlength="100"/>' +
			'</div>' +
			'</br>' +
			'<div class="col-12 text-start mt-2">' +
				'<h6 class="mb-1 fw-bold text-purple"><i class="fa-solid fa-sitemap me-1"></i>Departamento</h6>' +
				'<select id="novoFunilDepartamento" class="border-0 rounded" title="Selecione um departamento" data-container="body">' +
					
				'</select>' +
			'</div>' +
			'</br>' +
			'<div class="col-12 text-start mt-2">' +
				'<h6 class="mb-1 fw-bold text-purple"><i class="fa-solid fa-headset me-1"></i>Atendente</h6>' +
				'<select id="novoFunilAtendente" class="border-0 rounded" title="Selecione um atendente" data-container="body">' +
					
				'</select>' +
			'</div>' +
			'' +
		'</div>' +
		'',
	  showCloseButton: true,
	  showCancelButton: true,
	  focusConfirm: false,
	  confirmButtonText: (funil ? 'Salvar' : 'Adicionar'),
	  cancelButtonText: 'Cancelar',
	  allowOutsideClick: false,
	  confirmButtonColor: '#60b86c',
	  scrollbarPadding: false,
	  willOpen: () => {
			/*{%if userLogged.tipo == 'CLIENTE'%}
				
			{%else%}
				{%if userLogged.idDepartamento.idDepartamentos is empty%}
					$('#novoFunilDepartamento').append('<option value="-1" selected class="" style="letter-spacing: 1px !important;">Nenhum</option>');
				{%endif%}
			{%endif%}*/
			{%if userLogged.tipo == 'CLIENTE' or userLogged.idDepartamento.idDepartamentos is empty%}
				$('#novoFunilDepartamento').append('<option value="-1" class="" style="letter-spacing: 1px !important;">Todos</option>');
				$('#novoFunilAtendente').append('<option value="-1" class="" style="letter-spacing: 1px !important;">Todos</option>');		
			{%endif%}
			
			$(departamentos).each(function(index, d) {
				let selected = '';
				{%if userLogged.tipo == 'ATENDENTE'%}
					if(d.idDepartamentos == '{{userLogged.idDepartamento.idDepartamentos}}'){
						selected = 'selected';
						$('#novoFunilDepartamento').attr('disabled', true);
					}
				{%endif%}
				$('#novoFunilDepartamento').append('<option value="'+ d.idDepartamentos +'" '+selected+' class="" style="letter-spacing: 1px !important;">'+ d.nomeDepartamento +'</option>');
			});
		
			$(atendentes).each(function(index, a) {
				let selected = '';
				{%if userLogged.tipo == 'ATENDENTE'%}
					if(a.idAtendentes == '{{userLogged.idAtendentes}}'){
						selected = 'selected';
						$('#novoFunilAtendente').attr('disabled', true);
					}
				{%endif%}
				$('#novoFunilAtendente').append('<option value="'+ a.idAtendentes +'" '+selected+' class="" style="letter-spacing: 1px !important;">'+ a.nomeAtendente +'</option>');
			});
			
			$('#novoFunilDepartamento').on('change', function(){
				let idDepartamento = $(this).val();
			
				$('#novoFunilAtendente').selectpicker('destroy');
				$('#novoFunilAtendente').empty();
				$(atendentes).each(function(index, a) {
					if(a.idDepartamento == idDepartamento || a.idDepartamento == '' || idDepartamento == -1){
						$('#novoFunilAtendente').append('<option value="'+ a.idAtendentes +'" class="" style="letter-spacing: 1px !important;">'+ a.nomeAtendente +'</option>');
					}
				});
				$('#novoFunilAtendente').selectpicker();
			})
			
			$('#novoFunilDepartamento').selectpicker();
			$('#novoFunilAtendente').selectpicker();
			
			if(funil){
				$('#novoFunilNome').val(funil.nome);
				
				if(funil.atendente != ''){
					$('#novoFunilAtendente').selectpicker('val', funil.atendente.toString());
				}
				
				if(funil.departamento != ''){
					$('#novoFunilDepartamento').selectpicker('val', funil.departamento.toString());
					$('#novoFunilDepartamento').trigger('change');
				}
			}
	  },
	  didOpen: () => {
			$('#novoFunilNome').focus();
			
	  },
	  preConfirm: (value) => {
		  let novoFunilNome = $('#novoFunilNome').val();
		  switch(true){
			case novoFunilNome == '':
				Swal.showValidationMessage('Digite um nome para o funil')
				break;
			case novoFunilNome.length < 5:
				Swal.showValidationMessage('Nome deve ter no mínimo 5 caracteres')
				break;
		}
	  }
	  
	}).then((result) => {
		let novoFunilNome = $('#novoFunilNome').val();
		let novoFunilDepartamento = $('#novoFunilDepartamento').selectpicker('val');
		let novoFunilAtendente = $('#novoFunilAtendente').selectpicker('val');
		
		if(result.isConfirmed){
			Swal.fire({title : (funil ? 'Salvando funil...' : 'Adicionando funil...'), allowOutsideClick: false, scrollbarPadding: false});
			Swal.showLoading();
			
			var data = new FormData();
			data.append('nome', novoFunilNome);
			data.append('departamento', novoFunilDepartamento);
			data.append('atendente', novoFunilAtendente);
			(funil ? data.append('id', funil.id) : '');
			
			fetch('adicionarEditarFunil', {
				method: 'POST',
				body: data
			})
			.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(() =>{
						location.reload();
					})
				}else{
					Swal.fire({
						title: 'Erro ao adicionar funil',
						text: res.Erro,
						scrollbarPadding: false,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						
					})
				}
			})
		}
	})
}

/***************************************** GERENCIAR FUNIL ******************************************/




/***************************************** GERENCIAR ESTAGIOS ******************************************/
$("#novoEstagioCor").spectrum({
	preferredFormat: "hex",
	allowEmpty: true,
	showPalette: true,
	cancelText: 'Cancelar',
	chooseText: 'Selecionar',
});
$('#gerenciarEstagios').on('click', function(){
	$('#novoEstagioNome').val('');
	$('#novoEstagioCor').val('');
	$('#showEstagios').empty();
	
	$("#novoEstagioCor").spectrum();
	$('.sp-colorize-container').css('width', '40px');
	$('.sp-alpha').hide();
	
	if($('#selectFunilClientes').selectpicker('val') == ''){
		Swal.fire({
			title: 'Nenhum funil selecionado',
			text: '',
			icon: 'error',
			confirmButtonColor: 'var(--bs-info)',
			scrollbarPadding: false
		})
		return;
	}
	
	Swal.fire({title : 'Buscando estagios...', allowOutsideClick: false, scrollbarPadding: false});
	Swal.showLoading();
	
	fetch('getEstagiosFunil', {
		method: 'POST',
		headers: {'Content-Type': 'application/x-www-form-urlencoded'},
		body: 'idFunilClientes=' + $('#selectFunilClientes').selectpicker('val')
	})
	.then(function(res){ return res.json(); })
	.then(function(res){
		if(res.Success){
			var estagios = res.estagios;
			$(estagios).each(function(index,e){
				$('#showEstagios').append(
					'<div class="estagio text-start p-2 box shadow-sm mb-3" data-nome="'+ e.nome +'" data-cor="'+ e.cor +'" data-id="'+ e.idFunilEstagios +'" style="background: '+ e.cor +'; ">' +
						'<div class="d-flex align-items-center" >' +
							'<span class="fa fa-up-down-left-right  me-2 text-white" aria-hidden="true" style="cursor: move;"></span>' +
							'<h5 class="estagio-nome m-0 text-white">'+ e.nome +'</h5>' +
							'<div class="ms-auto">' +
								'<a href="javascript:void(0)" class="editaEstagio p-1" data-nome="'+ e.nome +'" data-cor="'+ e.cor +'" data-id="'+ e.idFunilEstagios +'">' +
									'<i class="fas fa-pen fa-xs text-white"></i>' +
								'</a>' +
								'<a href="javascript:void(0)" class="deletaEstagio p-1" data-nome="'+ e.nome +'" data-id="'+ e.idFunilEstagios +'">' +
									'<i class="fas fa-close text-white"></i>' +
								'</a>' +
							'</div>' +
						'</div>' +
					'</div>'
				);
			})
		}
		Swal.close();
	})
	
	const containerClaimReqModal = document.getElementById("modalEstagios"); 
	const claimReqModal = new bootstrap.Modal(containerClaimReqModal,{focus:false});
	
	$('#modalEstagiosTitle').text($('#selectFunilClientes option:selected').text() + ' - Gerenciar Estágios')
	$('#modalEstagios').modal('toggle');
	
	Sortable.create($('#showEstagios')[0], {
		handle: '.fa-up-down-left-right',
		animation: 150,
		onEnd: function (evt) {
			Swal.fire({title : 'Alterando ordem...', allowOutsideClick: false, scrollbarPadding: false});
			Swal.showLoading();
			
			var ordemEstagios = [];
			$('#showEstagios .estagio').each(function(index,e){
				ordemEstagios.push({id: Number($(e).attr('data-id')), ordem: (index+1)});
			})
			
			fetch('alteraOrdemEstagiosFunil', {
			method: 'POST',
				headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				body: 'estagios=' + JSON.stringify(ordemEstagios)
			})
			.then(function(res){ return res.json(); })
			.then(function(res){
				if(res.Success){
					$('#listaEstagios .card').each(function(index,c){
						var ordem = ordemEstagios.filter(x => x.id === $(c).data('id'))[0].ordem;
						$(c).attr('data-ordem', ordem);
					})
					
					animateSort($('#listaEstagios'), $('.card'), 'data-ordem');
					buscarContatosEstagios();
					Swal.close();
				}else{
					Swal.fire({
						title: 'Não foi possível alterar ordem, tente novamente',
						text: res.Erro,
						scrollbarPadding: false,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					})
				}
			})
		},
	});
})

$('#addEstagio').on('click', function(){
	var err = '';
	switch(true){
		case $('#novoEstagioNome').val() == '':
			err = 'Nome não pode ser vazio.'
			break;
		case $('#novoEstagioCor').val() == '':
			err = 'Cor não pode ser vazia.'
			break;
	}
	
	if(err != ''){
		Swal.fire({
			title: 'Atenção',
			html: err,
			scrollbarPadding: false,
			icon: 'warning',
			confirmButtonColor: 'var(--bs-info)',
			scrollbarPadding: false
		})
		return;
	}
	
	var novoEstagioNome = $('#novoEstagioNome').val();
	var novoEstagioCor = $('#novoEstagioCor').spectrum('get').toHexString();
	
	fetch('addEstagioFunil', {
		method: 'POST',
		headers: {'Content-Type': 'application/x-www-form-urlencoded'},
		body: 'nomeEstagio=' + novoEstagioNome + '&corEstagio=' + novoEstagioCor + '&idFunilClientes=' + $('#selectFunilClientes').selectpicker('val')
	})
	.then(function(res){ return res.json(); })
	.then(function(res){
		if(res.Success){
			$('#novoEstagioNome').val('');
			$('#novoEstagioCor').val('');
			$("#novoEstagioCor").spectrum();
			$('.sp-colorize-container').css('width', '40px');
			$('.sp-alpha').hide();
			
			$('#showEstagios').append(
				'<div class="estagio text-start p-2 box shadow-sm mb-1" data-nome="'+ novoEstagioNome +'" data-cor="'+ novoEstagioCor +'" data-id="'+ res.idFunilEstagios +'" style="background: '+ novoEstagioCor +'; ">' +
					'<div class="d-flex align-items-center" >' +
						'<span class="fa fa-up-down-left-right  me-2 text-white" aria-hidden="true" style="cursor: move;"></span>' +
						'<h5 class="estagio-nome m-0 text-white" style="text-shadow: 1px 1px #686868;">'+ novoEstagioNome +'</h5>' +
						'<div class="ms-auto">' +
							'<a href="javascript:void(0)" class="editaEstagio p-1" data-nome="'+ novoEstagioNome +'" data-cor="'+ novoEstagioCor +'" data-id="'+ res.idFunilEstagios +'">' +
								'<i class="fas fa-pen fa-xs text-white"></i>' +
							'</a>' +
							'<a href="javascript:void(0)" class="deletaEstagio p-1" data-nome="'+ novoEstagioNome +'" data-id="'+ res.idFunilEstagios +'">' +
								'<i class="fas fa-close text-white"></i>' +
							'</a>' +
						'</div>' +
					'</div>' +
				'</div>'
			);
			
			reloadEstagios = true;
		}else{
			Swal.fire({
				title: 'Não foi possível incluir nova informação',
				text: res.Erro,
				icon: 'error',
				confirmButtonColor: 'var(--bs-info)',
				scrollbarPadding: false
			})
		}
	})
})

$('#showEstagios').on('click', '.editaEstagio', function(){
	var id = $(this).data('id');
	var nome = $(this).attr('data-nome');
	var cor = $(this).attr('data-cor');
	
	Swal.fire({
	  title: 'Editar Estágio',
	  html:
		'<div class="container">' +
			'<div class="col-12 text-left mt-4">' +
				'<h6 class="mb-1 font-weight-bold">Nome Estágio</h6>' +
				'<input id="editarEstagioNome" placeholder="Nome" class="form-control" value="'+nome+'"/>' +
			'</div>' +
			'<div class="col-12 text-left mt-4">' +
				'<h6 class="mb-1 font-weight-bold">Cor</h6>' +
				'<input id="editarEstagioCor" type="text" class="form-control" value="'+cor+'"/>' +
			'</div>' +
			'' +
		'</div>' +
		'',
	  showCloseButton: true,
	  showCancelButton: true,
	  focusConfirm: false,
	  confirmButtonText: 'Salvar',
	  cancelButtonText: 'Cancelar',
	  allowOutsideClick: false,
	  confirmButtonColor: 'var(--bs-info)',
	  scrollbarPadding: false,
	  willOpen: () => {
			
	  },
	  didOpen: () => {
			$('#editarEstagioNome').focus();
			$('#editarEstagioCor').spectrum({
				preferredFormat: "hex",
				allowEmpty: true,
				showPalette: true,
				cancelText: 'Cancelar',
				chooseText: 'Selecionar',
			});
			$('.sp-alpha').hide();
	  },
	  preConfirm: (value) => {
		let editarEstagioNome = $('#editarEstagioNome').val();
		let editarEstagioCor = $('#editarEstagioCor').val();
		
		switch(true){
			case editarEstagioNome == '':
				Swal.showValidationMessage('Nome Tag não pode ser vazio');
				break;
			case editarEstagioCor == '':
				Swal.showValidationMessage('Cor não pode ser vazia');
				break;
		}
	  }
	  
	}).then((result) => {
		if(result.isConfirmed){
			let editarEstagioNome = $('#editarEstagioNome').val();
			var editarEstagioCor = $('#editarEstagioCor').spectrum('get').toHexString();
			
			Swal.fire({title : 'Salvando Estágio...', allowOutsideClick: false, scrollbarPadding: false});
			Swal.showLoading();
			
			fetch('editarEstagio', {
				method: 'POST',
				headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				body: 'id=' + id + '&nomeEstagio=' + editarEstagioNome + '&corEstagio=' + editarEstagioCor
			})
			.then(function(res){ return res.json(); })
			.then(function(res){
				if(res.Success){
					$('#showEstagios .estagio[data-id='+ id +']').attr('data-nome', editarEstagioNome);
					$('#showEstagios .estagio[data-id='+ id +']').attr('data-cor', editarEstagioCor);
					$('#showEstagios .estagio[data-id='+ id +'] .editaEstagio').attr('data-nome', editarEstagioNome);
					$('#showEstagios .estagio[data-id='+ id +'] .editaEstagio').attr('data-cor', editarEstagioCor);
					
					$('#showEstagios .estagio[data-id='+ id +']').css('background', editarEstagioCor);
					$('#showEstagios .estagio[data-id='+ id +'] .estagio-nome').text(editarEstagioNome);
					
					$('#listaEstagios .card[data-id='+ id +'] .estagio-nome').text(editarEstagioNome);
					$('#listaEstagios .card[data-id='+ id +'] .estagio-title').css('background', 'linear-gradient(to bottom, '+editarEstagioCor+' , '+editarEstagioCor+'AA )');
					$('#listaEstagios .card[data-id='+ id +'] .contatos').css('background', 'linear-gradient(to bottom, '+editarEstagioCor+'AA , '+editarEstagioCor+'55)');
					
					Swal.fire({
						title: 'Editar Estágio',
						text: res.Success,
						icon: 'success',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					})
				}else{
					Swal.fire({
						title: 'Erro ao editar estágio',
						text: res.Erro,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					})
				}
			})
		}
	})
})


$('#showEstagios').on('click', '.deletaEstagio', function(){
	var id = $(this).data('id');
	var nome = $(this).attr('data-nome');
	
	Swal.fire({
	  title: 'Deletar Estágio ?',
	  text: 'Deseja deletar o estágio \''+ nome +'\' ?',
	  showCloseButton: true,
	  showCancelButton: true,
	  focusConfirm: false,
	  confirmButtonText: 'Deletar',
	  cancelButtonText: 'Cancelar',
	  allowOutsideClick: false,
	  confirmButtonColor: 'var(--bs-danger)',
	  scrollbarPadding: false,
	  willOpen: () => {
			
	  },
	  didOpen: () => {
		$('.swal2-close').blur()
	  },
	  preConfirm: (value) => {
		
	  }
	}).then((result) => {
		if(result.isConfirmed){
			Swal.fire({title : 'Deletando Estágio...', allowOutsideClick: false, scrollbarPadding: false});
			Swal.showLoading();
			
			fetch('deletarEstagio', {
				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){
					reloadEstagios = true;
					$('#showEstagios .estagio[data-id='+ id +']').remove();
					$('#listaEstagios .card[data-id='+ id +']').remove();
					
					Swal.fire({
						title: 'Deletar Estágio',
						text: res.Success,
						icon: 'success',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					})
				}else{
					Swal.fire({
						title: 'Erro ao deletar estágio',
						text: res.Erro,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					})
				}
			})
		}
	})
})



$('#listaEstagios').on('click', '.adicionarContato', function(){
	var idEstagio = $(this).data('id');
	var nomeEstagio = $(this).data('nome');
	
	Swal.fire({
	  //title: nomeEstagio + ' - Adicionar Contato',
	  html:
		'<div class="container">' +
			'<h4 class="fw-bold text-purple">' + nomeEstagio + ' - Adicionar Contato</h4>' +
			'<div class="col-12 text-start mt-4">' +
				'<h6 class="mb-1 fw-bold text-purple"><i class="fa-solid fa-user me-1"></i>Pesquisar Contato</h6>' +
				'<input id="pesquisaContato" placeholder="Nome/Número" class="form-control border-0 bg-manager-gray" value=""/>' +
			'</div>' +
			'<div id="listaContatosPesquisa" class="my-4 px-2 rounded10 bg-manager-gray" style="min-height: 250px; max-height: 250px; overflow-y: auto;">' +
				'<h6 class="mt-25">Nenhum contato encontrado</h6>' +
			'</div>' +
			'' +
		'</div>' +
		'',
	  showCloseButton: true,
	  showCancelButton: false,
	  focusConfirm: false,
	  showConfirmButton: false,
	  cancelButtonText: 'Cancelar',
	  allowOutsideClick: false,
	  scrollbarPadding: false,
	  willOpen: () => {
		
	  },
	  didOpen: () => {
		$('#pesquisaContato').focus();
		
		$("#pesquisaContato").on("keyup", function() {
			var value = $(this).val().toLowerCase();
			if(value.length >= 3 || value.length == 0){
				listarContatos();
			}
		});
		
		$('#listaContatosPesquisa').scroll(function(e){
			if($('#listaContatosPesquisa').scrollTop() + $('#listaContatosPesquisa').height() == $("#listaContatosPesquisa").get(0).scrollHeight) {
				if($('#carregandoMaisContatos').length == 0 && buscandoContatos == false){
					listarContatos($('#listaContatosPesquisa .contato').length , 30);
					$('#listaContatosPesquisa').append('<div id="carregandoMaisContatos" class="p-2 d-flex justify-content-center align-items-center mt-auto">Buscando contatos...</div>');
				}
			}
		})
		
		$('#listaContatosPesquisa').on('click', '.contato', function(){
			var idContato = $(this).data('idcontatos');
			adicionarContatoEstagio(idEstagio, idContato);
		})
	  },
	  preConfirm: (value) => {
		let editarEstagioNome = $('#editarEstagioNome').val();
		let editarEstagioCor = $('#editarEstagioCor').val();
		
		switch(true){
			case editarEstagioNome == '':
				Swal.showValidationMessage('Nome Tag não pode ser vazio');
				break;
			case editarEstagioCor == '':
				Swal.showValidationMessage('Cor não pode ser vazia');
				break;
		}
	  }
	  
	}).then((result) => {
		if(result.isConfirmed){
			let editarEstagioNome = $('#editarEstagioNome').val();
			var editarEstagioCor = $('#editarEstagioCor').spectrum('get').toHexString();
			
			Swal.fire({title : 'Salvando Estágio...', allowOutsideClick: false, scrollbarPadding: false});
			Swal.showLoading();
			
			fetch('editarEstagio', {
				method: 'POST',
				headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				body: 'id=' + idEstagio + '&nomeEstagio=' + editarEstagioNome + '&corEstagio=' + editarEstagioCor
			})
			.then(function(res){ return res.json(); })
			.then(function(res){
				if(res.Success){
					
					Swal.fire({
						title: 'Editar Estágio',
						text: res.Success,
						icon: 'success',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					})
				}else{
					Swal.fire({
						title: 'Erro ao editar estágio',
						text: res.Erro,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					})
				}
			})
		}
	})
})

var reloadEstagios = false;
$('#modalEstagios').on('hidden.bs.modal', function () {
    if(reloadEstagios){
		reloadEstagios = false;
		//$('#listaEstagios').empty();
		buscarContatosEstagios();
		//location.reload();
	}
});


/***************************************** GERENCIAR ESTAGIOS ******************************************/




/***************************************** CARD ESTAGIOS ******************************************/
/*----------------- SCROLL ESTAGIOS -------------------*/
$(window).on('resize', function(){
	resizeBox();
})

var buscarMaisContatos = false;
document.querySelector("#listaEstagios").addEventListener('wheel', (event) => {
	event.preventDefault();
	if($(event.target).hasClass('contatos') || $($(event.target)).parents('.contatos').length > 0){
		
		var scrollEl;
		if($(event.target).hasClass('contatos')){
			var top = $(event.target).scrollTop();
			scrollEl = $(event.target);
			//$(event.target).scrollTop(top + (event.deltaY < 0 ? -100 : 100));
			//$(event.target).animate({ scrollTop: top + (event.deltaY < 0 ? -50 : 50) }, 30);
		}else{
			var top = $($(event.target)).parents('.contatos').scrollTop();
			scrollEl = $(event.target).parents('.contatos');
			//$(event.target).parents('.contatos').scrollTop(top + (event.deltaY < 0 ? -100 : 100));
			//$(event.target).parents('.contatos').animate({ scrollTop: top + (event.deltaY < 0 ? -50 : 50) }, 30);
		}
		
		/*console.log(($(scrollEl).scrollTop() + $(scrollEl).height() +1));
		console.log($(scrollEl).get(0).scrollHeight);
		
		if($(scrollEl).scrollTop() + $(scrollEl).height() +10 >= $(scrollEl).get(0).scrollHeight) {
			console.log('aqui');
		}*/
		
		$(scrollEl).scrollTop(top + (event.deltaY < 0 ? -200 : 200));
		
		if(buscarMaisContatos){return;}
		if($(scrollEl).find('.contato').length >= 50){
			if($(scrollEl).scrollTop() + $(scrollEl).height() +20 >= $(scrollEl).get(0).scrollHeight) {
				buscarMaisContatos = true;
				buscarContatosEstagios(JSON.stringify([$($('.contatos')[0]).parent().data('id')]), $(scrollEl).find('.contato').length);
			}
		}
	}else{
		document.querySelector("#listaEstagios").scrollBy({
			left: event.deltaY < 0 ? -200 : 200,
		});
	}
});
function resizeBox(){
	$('#listaEstagios').css('height', $(window).height() -($('.content-header').position().top +$('.content-header').height() +$('#filtrosFunil').height() +$('.main-header').height() ) + 'px');
}
/*----------------- SCROLL ESTAGIOS -------------------*/


$('#ordemExibicao').on('change', function(){
	buscarContatosEstagios();
})

function buscarContatosEstagios(idEstagio = null, init = 0){
	Swal.fire({title : 'Buscando contatos...', allowOutsideClick: false, scrollbarPadding: false});
	Swal.showLoading();
	
	var formData = new FormData();
	(idEstagio == null ? '' : formData.append('idEstagio', idEstagio));
	formData.append('idFunilClientes', $('#selectFunilClientes').selectpicker('val'));
	formData.append('ordem', $('#ordemExibicao').val());
	formData.append('init', init);
	
	fetch('buscarContatosEstagios', {
		method: 'POST',
		//headers: {'Content-Type': 'application/x-www-form-urlencoded'},
		body: formData
	})
	.then(function(res){ return res.json(); })
	.then(function(res){
		if(res.Success){
			var estagios = res.estagios;
			$(estagios).each(function(iEst, e){
				if($('#listaEstagios .card[data-id='+ e.idFunilEstagios +'] .contatos').length == 0){
					$('#listaEstagios').append(
						'<div class="card col-xl-3 col-lg-4 col-md-6 col-10 m-3 mx-1 mt-1 shadow-sm noselect" data-id="'+ e.idFunilEstagios +'" data-ordem="'+ e.ordem +'" style="overflow: visible; max-width: 350px;">' +
							'<div class="estagio-title p-2" style="background: ' + e.cor + '; border-top-left-radius: 8px;border-top-right-radius: 8px;">' +
								'<div class="d-flex flex-wrap align-items-center text-white" style="">' +
									'<h5 class="estagio-nome m-0 fw-bold">' + e.nome + '</h5>' +
									
									'<span class="dropdown ms-auto">' +
										'<a class="text-white bg-none" type="button" data-bs-toggle="dropdown">' +
											'<i class="fa fa-ellipsis-vertical ps-2 pe-1" style=""></i>' +
										'</a>' +
										'<div class="dropdown-menu" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate(0px, 43px);" data-popper-placement="bottom-start">' +
											//'<a class="pesquisarContato dropdown-item" href="javascript:void(0)"><i class="fa fa-search"></i> Pesquisar Contato</a>' +
											'<a class="adicionarContato text-purple dropdown-item" href="javascript:void(0)" data-id="' + e.idFunilEstagios + '" data-nome="' + e.nome + ' +"><i class="fa fa-user-plus me-1"></i>Adicionar Contato</a>' +
										'</div>' +
									'</span>' +
									
									'<div class="buscarContato px-2 py-1 position-relative d-none" style="flex-basis: 100%;">' +
										'<input type="text" placeholder="Nome contato..." class="form-control form-control-sm w-p100 pe-4 rounded-pill" value=""/>' +
									
										'<a href="javascript:void(0)" class="hideBuscarContato" style="position: absolute; top: 18%; right: 15px;">' +
											'<i class="fa fa-close text-danger"></i>' +
										'</a>' +
									'</div>' +
								'</div>' +
							'</div>' +
							'<div class="contatos p-2 pt-0 h-p100 bg-manager-gray" style="overflow-y: hidden; scroll-behavior: smooth; border-bottom-left-radius: 8px;border-bottom-right-radius: 8px;">' +
							'</div>' +
						'</div>'
					)
				}
			})
			
			
			
			
			var estagioContatos = res.estagioContatos;
			if(init == 0){
				$(JSON.parse(idEstagio)).each(function(i,e){
					$('#listaEstagios .card[data-id='+ e +'] .contatos').empty();
					var replace = $('#listaEstagios .card[data-id='+ e +'] h5').text().substring($('#listaEstagios .card[data-id='+ e +'] h5').text().indexOf(' ('));
					$('#listaEstagios .card[data-id='+ e +'] h5').text($('#listaEstagios .card[data-id='+ e +'] h5').text().replace(replace, ''));
				})
			}
			
			$(estagioContatos).each(function(iEc, estagio){
    			var contatos = estagio.contatos;

    			if (init == 0) {
    			    $('#listaEstagios .card[data-id='+ estagio.idFunilEstagios +'] .contatos').empty();
    			}
			
    			// Calcula a quantidade de participantes
    			var totalParticipantes = contatos.length + $('#listaEstagios .card[data-id='+ estagio.idFunilEstagios +'] .contatos .contato').length;
			
    			// Define o texto de participante ou participantes com base na quantidade
    			var participantesText = totalParticipantes === 1 ? 'Participante' : 'Participantes';
			
    			// Atualiza o HTML do título com o nome do estágio e a quantidade de participantes
    			$('#listaEstagios .card[data-id='+ estagio.idFunilEstagios +'] h5').html(
    			    estagio.nome + '<text style="font-size: 12px;"> ('+ totalParticipantes +' ' + participantesText + ')</text>'
    			);
			
    			$(contatos).each(function(iC, c) {
    			    let nome = (c.idContatos.nomeExibir == null ? c.idContatos.nome : c.idContatos.nomeExibir);
    			    if (nome == null) {
    			        nome = c.idContatos.numero;
    			    }
				
    			    var senderIcon = '';
    			    switch(c.idContatos.sender) {
    			        case 'venom':
    			        case 'whatsapp':
    			        case null:
    			            senderIcon = '<i class="fa-brands fa-whatsapp fa-sm ms-1"></i>';
    			            break;
    			        case 'facebook':
    			            senderIcon = '<i class="fa-brands fa-facebook-messenger fa-sm ms-1"></i>';
    			            break;
    			        case 'instagram':
    			            senderIcon = '<i class="fa-brands fa-instagram fa-sm ms-1"></i>';
    			            break;
    			    }
				
    			    var prioridadeIcon = 'bg-white';
    			    var prioridadeColor = '';
    			    switch(c.prioridade) {
    			        case 0:
    			            prioridadeColor = 'bg-dark';
    			            prioridadeIcon = '<i class="fa fa-circle-exclamation fa-sm"></i>';
							prioridadeTitulo = 'data-bs-toggle="tooltip" data-bs-original-title="Sem Prioridade"';
    			            break;
    			        case 1:
    			            prioridadeColor = 'bg-primary';
    			            prioridadeIcon = '<i class="fa fa-circle-exclamation text-white fa-sm"></i>';
							prioridadeTitulo = 'data-bs-toggle="tooltip" data-bs-original-title="Prioridade Baixa"';
    			            break;
    			        case 2:
    			            prioridadeColor = 'bg-info';
    			            prioridadeIcon = '<i class="fa fa-circle-exclamation text-white fa-sm"></i>';
							prioridadeTitulo = 'data-bs-toggle="tooltip" data-bs-original-title="Prioridade Normal"';
    			            break;
    			        case 3:
    			            prioridadeColor = 'bg-warning';
    			            prioridadeIcon = '<i class="fa fa-circle-exclamation text-white fa-sm"></i>';
							prioridadeTitulo = 'data-bs-toggle="tooltip" data-bs-original-title="Prioridade Moderada"';
    			            break;
    			        case 4:
    			            prioridadeColor = 'bg-danger';
    			            prioridadeIcon = '<i class="fa fa-circle-exclamation text-white fa-sm"></i>';
							prioridadeTitulo = 'data-bs-toggle="tooltip" data-bs-original-title="Prioridade Alta"';
    			            break;
    			    }
				
    			    $('#listaEstagios .card[data-id='+ estagio.idFunilEstagios +'] .contatos').append(
    			        '<div class="contato mb-3 rounded10 p-2 my-2 shadow-sm d-flex flex-wrap bg-lighter bs-3" style="cursor: pointer; position: relative;" data-id_funil="'+ c.idFunilContatos +'" data-id_contato="'+ c.idContatos.idContatos +'">' +
							'<div class="cont-prioridade '+ prioridadeColor +'" '+ prioridadeTitulo +'>'+prioridadeIcon+'</div>'+
    			            '<h6 class="mb-1 contato_nome text-purple" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"><b>'+ nome + '</b>' + senderIcon +'</h6>' +
    			            (c.idAtendente ? '<div class="d-flex" style="flex-basis: 100%;"><span style="font-size: 12px;"><i class="fa fa-headset"></i> <b>'+ c.idAtendente.nomeAtendente + '</b></span></div>' : '') +
    			            '<div class="d-flex mt-1" style="flex-basis: 100%;">' +
    			                '<div>' + 
    			                    '<h6 class="m-0 text-start fw-bold" style="font-size:12px; color: #6b6b6b"><i class="fa-solid fa-clock me-1"></i>Início:<br>'+ moment(c.data.date).format("DD/MM/YYYY HH:mm") +'</h6>' +
    			                '</div>' +    
    			                '<div class="ms-auto">' +
    			                    '<h6 class="m-0 text-end fw-bold" style="font-size:12px; color: #6b6b6b"><i class="fa-solid fa-money-bill me-1"></i>Valor:<br>'+ Number(c.valor).toLocaleString('pt-BR', {minimumFractionDigits: 2 , style: 'currency', currency: 'BRL'}) +'</h6>' +
    			                '</div>' +
    			            '</div>' +
    			            '<hr class="m-1" style="flex-basis: 100%;">' +
    			            '<div class="d-flex mt-1" style="flex-basis: 100%;">' +
    			                '<div>' + 
    			                    '<h6 class="m-0 text-start" style="font-size:12px; color: #6b6b6b">Última interação:<br>'+ (c.ultimaInteracao == null ? '--/--/--' : moment(c.ultimaInteracao.date).format("DD/MM/YYYY HH:mm")) +'</h6>' +
    			                '</div>' +    
    			                '<div class="ms-auto">' +
    			                    '<h6 class="m-0 text-end" style="font-size:12px; color: #6b6b6b">Próxima interação:<br>'+ (c.dataProximaInteracao == null ? '--/--/--' : moment(c.dataProximaInteracao.date).format("DD/MM/YYYY HH:mm")) +'</h6>' +
    			                '</div>' +
    			            '</div>' +
    			        '</div>'
    			    );
    			});
			});

			
			
			/*ARRASTAR CARDS ENTRE OS ESTÁGIOS*/
			var list = $('#listaEstagios .contatos');
			//async function init() {
			[].forEach.call( list, function (el) {   
				Sortable.create(el, {
					animation: 150,
					handle: ".contato",
					ghostClass: 'bg-success-light',
					group: 'listaEstagiosContatos',
					forceFallback: true,
					fallbackOnBody: true,
					clone: function (/** HTMLElement */elToClone) {
						console.log(elToClone)
					},
					onStart:function(evt){
						isDragging = true;
					},
					onAdd: function(evt) {	
					},
					onEnd: async function(evt){
						var item = evt.item;
						var from = evt.from;
						var to = evt.to;
						
						await new Promise(r => setTimeout(r, 50));
						isDragging = false;
						
						if($(from).parent().data('id') === $(to).parent().data('id')){
							return;
						}else{
							$('#listaEstagios').css('pointer-events', 'none');
							$('#listaEstagios').css('opacity', '0.5');
							$('#listaEstagios').css('transition-duration', '0.5s');
							fetch('alterarFuinilContatoEstagio', {
								method: 'POST',
								headers: {'Content-Type': 'application/x-www-form-urlencoded'},
								body: 'idFunilContatos=' + $(item).data('id_funil') + '&idEstagio=' + $(to).parent().data('id')
							})
							.then(function(res){ return res.json(); })
							.then(function(res){
								$('#listaEstagios').css('pointer-events', '');
								$('#listaEstagios').css('opacity', '');
								$('#listaEstagios').css('transition-duration', '');
								if(res.Success){
								}else{
									Swal.fire({
										title: res.Erro,
										icon: 'error',
										confirmButtonColor: 'var(--bs-info)',
										scrollbarPadding: false
									}).then(() =>{
										buscarContatosEstagios();
									})
								}
							})
						}
					},
					onUpdate: function(evt){
					},
					onMove: function(evt, ui){
						$(evt.clone).addClass('bg-success');
					}
				});
			});
			/*ARRASTAR CARDS ENTRE OS ESTÁGIOS*/
			//};
			//init();


			
			buscarMaisContatos = false;
			initializeTooltips();
			Swal.close();
		}else{
			Swal.fire({
				title: 'Erro ao buscar contatos',
				text: res.Erro,
				icon: 'error',
				confirmButtonColor: 'var(--bs-info)',
				scrollbarPadding: false
			})
			buscarMaisContatos = false;
		}
	})
}


$('.pesquisarContato').on('click', function(){
	var elem = $(this).parent().parent().parent().find('.buscarContato');
	if($(elem).hasClass('d-none')){
		$(elem).removeClass('d-none');
		$(elem).addClass('animated fadeIn faster').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
			$(elem).removeClass('animated fadeIn faster');
			$(elem).find('input').focus();
		});
	}
})

$('.hideBuscarContato').on('click', function(){
	var elem = $(this).parent();
	if(!$(elem).hasClass('d-none')){
		$(elem).addClass('animated fadeOut faster').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
			$(elem).removeClass('animated fadeOut faster');
			$(elem).addClass('d-none');
		});
	}
})


function animateSort(parent, child, sortAttribute) {
	var promises = [];
	var positions = [];
	var originals = $(parent).find(child);
	
	var sorted = originals.toArray().sort(function(a, b) {
		//return $(a).attr(sortAttribute) < $(b).attr(sortAttribute);
		//return $(a).attr(sortAttribute) < $(b).attr(sortAttribute) ? 1 : -1;
		return $(a).attr(sortAttribute) - $(b).attr(sortAttribute);
	});
	

	originals.each(function() {
		//store original positions
		positions.push($(this).position());
	}).each(function(originalIndex) {
		//change items to absolute position
		var $this = $(this);
		var newIndex = sorted.indexOf(this);
		sorted[newIndex] = $this.clone(); //copy the original item before messing with its positioning
		//$this.css("position", "absolute").css("top", positions[originalIndex].top + "px").css("left", positions[originalIndex].left + "px");
		//console.log( $this);
		//$this.css("position", "absolute").css('width', '100%').css("top", positions[originalIndex].top + "px");
		
		//animate to the new position
		var promise = $this.animate({
			top: positions[newIndex].top + "px",
			//left: positions[newIndex].left + "px"
		}, 100);
		//var promise = positions[newIndex].top + "px";
		promises.push(promise);
	});

	//instead of leaving the items out-of-order and positioned, replace them in sorted order
	$.when.apply($, promises).done(function() {
		originals.each(function(index) {
			if(index > 0 && !$(sorted[index]).hasClass('border-top')){
				$(sorted[index]).addClass('border-top');
			}
			if(index == 0 && $(sorted[index]).hasClass('border-top')){
				$(sorted[index]).removeClass('border-top');
			}
			
			$(this).replaceWith(sorted[index]);
		});
	});
}




/*----------------- ADICIONA CONTATOS -------------------*/
var buscandoContatos = false;
function listarContatos(init = 0, limit = 30){
	if(buscandoContatos == true){return;}
	buscandoContatos = true;
	
	fetch('funilListarcontatos', {
		method: 'POST',
		headers: {'Content-Type': 'application/x-www-form-urlencoded'},
		body: 'nome_num=' + $("#pesquisaContato").val() + '&init=' + init + '&limit=' + limit
	})
	.then(function(res){ return res.json(); })
	.then(function(res){
		if(res.Success){
			if(init == 0){$('#listaContatosPesquisa').empty();}
			$('#carregandoMaisContatos').remove();
			
			let contatos = res.contatos;
			$(contatos).each(function(index, c) {
				
				var profileData = getProfileData(c.profileData);
				
				let nome = (c.nomeExibir == null ? c.nome : c.nomeExibir);
				if(nome == null){
					nome = c.numero;
				}
				
				var senderIcon = '';
				switch(c.sender){
					case 'venom':
					case 'whatsapp':
					case null:
						senderIcon = '<i class="fa-brands fa-whatsapp fa-sm me-2"></i>';
						break;
					case 'facebook':
						senderIcon = '<i class="fa-brands fa-facebook-messenger fa-sm me-2"></i>';
						break;
					case 'instagram':
						senderIcon = '<i class="fa-brands fa-instagram fa-sm me-2"></i>';
						break;
				}
				
				$('#listaContatosPesquisa').append(
					'<div data-idcontatos="'+ c.idContatos +'" data-nome="'+ nome +'" data-numero="'+ c.numero +'" class="contato d-flex align-items-center rounded10 text-start b-1 w-p100 h-80 p-2 my-2 shadow-sm bg-white" style="cursor: pointer;">' +
						'<a class="avatar avatar-lg" href="javascript:void(0)">' +
						'<img class="" src="' + (profileData.previewEurl == null ? '{{host}}assets/images/svg-icon/image.svg' : profileData.previewEurl) +'" alt="" style="'+(profileData.previewEurl == null ? 'filter: invert(0.50);' : '')+'"></a>' +
						'<span class="row ms-2">' +
							'<p class="fs-16">' +
								'<div><text class="text-dark" style="font-weight: 500;">'+ nome +'</text></div>' +
								'<div>' + senderIcon + '<span id="" class="" style="font-size: 12px;">'+ c.numero +'</span></div>' +
							'</p>' +
						'</span>' +
					'</div>'
				);
			})
			
			if(contatos.length == 0 && init == 0){
				$('#listaContatosPesquisa').append('<h6 class="mt-25">Nenhum contato encontrado</h6>');
			}

			buscandoContatos = false;
		}else{
			Swal.fire({
				title: res.Erro,
				icon: 'error',
				confirmButtonColor: 'var(--bs-info)',
				scrollbarPadding: false
			}).then(() =>{
				//location.reload();
			})
			
			//$('#contatosLoading').addClass('d-none');
		}
	})
}

function adicionarContatoEstagio(idEstagio, idContato){
	Swal.fire({title : 'Adicionando contato...', allowOutsideClick: false, scrollbarPadding: false});
	Swal.showLoading();
	
	fetch('adicionarContatoEstagio', {
		method: 'POST',
		headers: {'Content-Type': 'application/x-www-form-urlencoded'},
		body: 'idFunilClientes=' + $('#selectFunilClientes').selectpicker('val') + '&idEstagio=' + idEstagio + '&idContato=' + idContato
	})
	.then(function(res){ return res.json(); })
	.then(function(res){
		if(res.Success){
			Swal.fire({
				title: 'Contato adicionado',
				text: res.Success,
				icon: 'success',
				confirmButtonColor: 'var(--bs-info)',
				scrollbarPadding: false
			}).then(() =>{
				buscarContatosEstagios(JSON.stringify([idEstagio]));
			})
		}else{
			Swal.fire({
				title: 'Erro ao adicionar contato',
				text: res.Erro,
				icon: 'error',
				confirmButtonColor: 'var(--bs-info)',
				scrollbarPadding: false
			})
		}
	})
}
/*----------------- ADICIONA CONTATOS -------------------*/
/***************************************** CARD ESTAGIOS ******************************************/





/***************************************** FUNIL CONTATOS ******************************************/
var isDragging = false;
$('#listaEstagios').on('click', '.contato', function(){
	if(isDragging){return;}
	var idFunilContatos = $(this).data('id_funil');
	var idContato = $(this).data('id_contato');
	
	showModalFunilContato(idFunilContatos, idContato);
})

{% include 'cliente/funil.js' %}
{% include 'cliente/agendamento.js' %}
/***************************************** FUNIL CONTATOS ******************************************/





function getProfileData(data){
	var profileData = JSON.parse(data);
	if(profileData == null){
		if(profileData.previewEurl){
			var u = new URL(profileData.previewEurl);
			var oe = u.searchParams.get('oe');
			var hex='0x'+oe, profileImgTs=+hex;
			if(moment.unix((profileImgTs)) < moment()){
				profileData.previewEurl = null;
			}
		}
		if(profileData.profilePicThumbObj){
			if(profileData.profilePicThumbObj.eurl){
				var u = new URL(profileData.profilePicThumbObj.eurl);
				var oe = u.searchParams.get('oe');
				var hex='0x'+oe, profileImgTs=+hex;
				if(moment.unix((profileImgTs)) < moment()){
					profileData.previewEurl = null;
				}else{
					profileData.previewEurl = profileData.profilePicThumbObj.eurl;
				}
			}
		}
	}else{
		profileData = {};
		profileData['previewEurl'] = null;
	}
	
	return profileData;
}

function arrSort(key) {
	return function(a,b){
		return moment(b[key].date) - moment(a[key].date);
	}
}
</script>
{% endblock %}