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

::-webkit-scrollbar{
	height: 6px;
	width: 6px;
	background: rgba(0,0,0,0.1);
}

::-webkit-scrollbar-thumb {
	background: var(--bs-secondary); 
}

.drawflow .drawflow-node.GROUP {
	width: 350px;
	height: 350px;
	z-index: -1;
	resize: both;
    overflow: auto;
}
.drawflow .drawflow-node.GROUP.hover-drop {
	background: var(--bs-success);
}
.drawflow .drawflow-node.GROUP .drawflow-edit{
	top: 2px !important;
	right: 32px !important;
}
.drawflow .drawflow-node.GROUP .drawflow-delete{
	top: 2px !important;
	right: 2px !important;
}

.drawflow .drawflow-node.GROUP .drawflow_content_node{
	height: 100%;
}


.fab-container {
  z-index: 999;
  cursor: pointer;
  position: relative;
}

.fab-icon-holder {
  #width: 40px;
  #height: 40px;
  border-radius: 100%;
  background: #016fb9;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.fab-icon-holder:hover {
  opacity: 0.8;
}

.fab-icon-holder i {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 20px;
  color: #ffffff;
}

.fab {
  #width: 45px;
  #height: 45px;
}

.fab-options {
  #list-style-type: none;
  position: absolute;
  #bottom: calc(50% -25px);
  transition: all 0.3s ease;
  opacity: 0;
  transform: scale(0);
  transform-origin:left top;
  margin-left: 30px;
  #padding-bottom: 20px;
  top: 0;
}

.fab-options li {
  display: flex;
  justify-content: flex-center;
  padding: 5px;
}

.theme-primary [type=radio]:checked + label:after {
    border: 2px solid #60b86c;
    background-color: #60b86c;
    z-index: 0;
}

.btn-toggle.active {
    background-color: #60b86c;
}

.theme-primary .nav-pills > li > a.active {
    border-top-color: #60b86c;
    background-color: #60b86c !important;
    color: #ffffff!important;
}

.theme-primary .nav-pills > li > a.active:hover, .theme-primary .nav-pills > li > a.active:focus {
    border-top-color: #60b86c;
    background-color: #60b86c !important;
    color: #ffffff;
}

[type="radio"]:not(:checked) + label, [type="radio"]:checked + label {
    padding-left: 25px;
}

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

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

.theme-primary [type=checkbox].filled-in:checked.chk-col-primary + label:after {
    border: 2px solid #60b86c;
    background-color: #60b86c;
}

[type="checkbox"] + label {
    padding-left: 25px;
}

.theme-primary .label-primary {
    background-color: #60b86c !important;
}

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

.badge-dark {
    background-color: #60b86c;
    color: #ffffff;
}

.badge-pill {
    border-radius: 5px;
}

.drawflow .drawflow-node {
    background: #F2F5FA!important;
	color: #000000!important;
}

.drawflow .drawflow-node.selected {
    color: #585EA8!important;
}

.drawflow .drawflow-node .drawflow-node-divider {
    border: 1px dashed #60b86c!important;
}

.theme-primary .bg-primary {
    background-color: #585EA8 !important;
    color: #ffffff;
}

.drawflow .connection .main-path {
    stroke: #494cd1!important;
}

.drawflow .drawflow-node.selected {
    color: rgb(255 255 255)!important;
}

.theme-primary .bg-success {
    background-color: #363c91 !important;
    color: #ffffff;
}

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

		.ms-75{
			margin-left: 0px!important;
		}
	}
</style>
<section id="botContent">

	<!-- Content Header (Page header) -->
	<!--div class="content-header">
		<div class="d-flex align-items-center">
			<div class="me-auto">
				<h4 class="page-title">Criar Respostas Automáticas</h4>
			</div>

			
			<a href="#" data-provide="fullscreen" class="btn btn-sm btn-primary waves-effect waves-light ms-2" title="Tela Cheia">
				<i class="mdi mdi-fullscreen mdi-18px"></i>
			</a>
		</div>
	</div-->

	
	<div class="card-body bg-lighter ms-75 font-weight-bold ps-0 pe-0 m-0">
		<div id="card-header" class="row ps-4 pe-4 pt-0 pb-0">
			<div class="col-lg-4 col-12 text-md-left">
				<select id="meusNumeros" class="selectpicker col-12" title="Nenhum número cadastrado">
					{% for n in numeros %}
					<option value="{{n.idNumeros}}" data-ativo="{{n.autoBot}}" data-numero="{{n.numero}}" class="" style="letter-spacing: 1px !important;">{{n.descricao}} ({{n.numero}})</option>
					{% endfor %}
				</select>
			</div>
			
			<div class="col-lg-4 col-12 text-md-left">
				<div class="text-center mt-2">
					<input name="radioBotData" type="radio" id="botDataTest" checked="" autocomplete="off">
					<label class="me-2 text-purple fw-bold" for="botDataTest">Teste</label>
					<input name="radioBotData" type="radio" id="botData" autocomplete="off">
					<label class="me-2 text-left text-purple fw-bold" for="botData">Produção</label>
				</div>
			</div>
			
			<div class="col-lg-4 col-12 text-md-left">
				<div class="row">
					<div class="col-12 col-xxl-5 col-xl-6 col-md-8">
						<div class="col-12 d-flex justify-content-md-start justify-content-center">
							<!--a class="btn btn-md btn-primary waves-effect waves-light text-white pull-left" id="adicionar_resposta" href="javascript:void(0);" >
							   <i class="mdi mdi-comment-plus-outline mdi-18px"></i>  Adicionar resposta
							</a>

							<a class="btn btn-md btn-primary waves-effect waves-light text-white pull-left ms-2" id="adicionar_acao" href="javascript:void(0);" >
							   <i class="mdi mdi-message-alert mdi-18px"></i>  Adicionar ação
							</a-->
						</div>
					</div>
					<div class="mt-4 d-md-none d-block"></div>
					<div class="col-12 col-xxl-7 col-xl-6 col-md-4 text-md-end text-center mt-2">
						<button id="ativarBot" type="button" class="btn btn-md btn-toggle border-circle mt-1" data-bs-active="asd" data-bs-toggle="button" aria-pressed="true" autocomplete="off" style="border-radius: 360px !important;">
							<div class="handle border-circle" style="border-radius: 360px !important;"></div>
						</button>
					</div>
				</div>
			</div>
		</div>
		<hr>

		<div class="df-wrapper" style="width: 100%;">
			
			<div id="drawflow" class="d-none" style="width: 100%;">
				<!--div class="btn-export" onclick="Swal.fire({ title: 'Export',
					html: '<pre><code>'+JSON.stringify(editor.export(), null,4)+'</code></pre>'
					})">Export
				</div>
				
				<div class="btn-clear" onclick="editor.clearModuleSelected()">Limpar</div>
				
				<div class="btn-lock">
					<i id="lock" class="fas fa-lock" onclick="editor.editor_mode='fixed'; changeMode('lock');"></i>
					<i id="unlock" class="fas fa-lock-open" onclick="editor.editor_mode='edit'; changeMode('unlock');" style="display:none;"></i>
				</div-->
				<div id="" class="save-btn" style="">
					<!--button id="salvarBot" class="btn btn-md btn-primary waves-effect waves-light shadow" title="Salvar" disabled>
						<i class="mdi mdi-content-save mdi-18px"></i>
					</button>
					<button href="#" data-provide="fullscreen" class="btn btn-md btn-primary waves-effect waves-light ms-2" title="Tela Cheia">
						<i class="mdi mdi-fullscreen mdi-18px"></i>
					</button-->
				</div>
				<div class="bar-zoom mt-1" style="opacity: 0.7;">
					<i class="fa fa-search-minus m-1" onclick="editor.zoom_out()" style="cursor:pointer;"></i>
					<i class="fa fa-search m-1" onclick="editor.zoom_reset()" style="cursor:pointer;"></i>
					<i class="fa fa-search-plus m-1" onclick="editor.zoom_in()" style="cursor:pointer;"></i>
				</div>
			</div>
			
			
		</div>
	</div>

</section>
	


	
<div id="menu-acoes" class="position-absolute ms-75 rounded text-center p-1" style="left: 0px; opacity: 0.9; z-index: 99;pointer-events: none; height: 85vh;">
	<div class="m-2" >
		<button id="salvarBot" class="btn btn-md btn-circle btn-success waves-effect waves-light shadow d-none" title="Salvar" data-bs-toggle="tooltip" data-bs-original-title="Salvar mensagens" style="pointer-events: all;" disabled>
			<i class="fa fa-floppy-disk fa-lg"></i>
		</button>
	</div>
	
	<div class="m-2" >
		<button id="enviarParaProducao" class="btn btn-md btn-circle btn-green-manager2 waves-effect waves-light shadow" title="Enviar para produção" data-bs-toggle="tooltip" data-bs-original-title="Salvar mensagens" style="pointer-events: all;">
			<i class="fa fa-rocket fa-lg"></i>
		</button>
	</div>
	
	<div class="m-2 fab-container" >
		<button id="enviarAnexo" type="button" class="fab waves-effect waves-circle btn btn-md btn-circle btn-primary" style="pointer-events: all;">
			<i class="fa fa-plus fa-lg"></i>
		</button>
		
		<ul class="fab-options" style="pointer-events: all;">
			<li>
				<button class="btn btn-sm btn-primary btn-rounded d-flex align-items-center shadow" id="adicionar_resposta" href="javascript:void(0);" data-bs-toggle="" data-bs-placement="right" data-bs-original-title="Nova resposta" style="pointer-events: all;">
				   <i class="fa fa-comment me-2"></i> Resposta
				</button>
			</li>
			<li>
				<button class="btn btn-sm btn-warning btn-rounded d-flex align-items-center shadow" id="adicionar_acao" href="javascript:void(0);" data-bs-toggle="" data-bs-placement="right" data-bs-original-title="Nova ação" style="pointer-events: all;">
				   <i class="fa fa-triangle-exclamation me-2"></i> Ação
				</button>
			</li>
			<li>
				<button class="btn btn-sm btn-danger btn-rounded d-flex align-items-center shadow" id="adicionar_api" href="javascript:void(0);" data-bs-toggle="" data-bs-placement="right" data-bs-original-title="Requisição URL" style="pointer-events: all;">
				   <i class="fa fa-link me-2"></i> Requisição
				</button>
			</li>
			
			<li>
				<button class="btn btn-sm btn-dark btn-rounded d-flex align-items-center shadow" id="adicionar_condicao" href="javascript:void(0);" data-bs-toggle="" data-bs-placement="right" data-bs-original-title="Condição" style="pointer-events: all;">
				   <i class="fa fa-arrows-split-up-and-left me-2"></i> Condição
				</button>
			</li>
			<!--li>
				<button class="btn btn-sm btn-secondary btn-rounded d-flex align-items-center shadow" id="adicionar_grupo" href="javascript:void(0);" data-bs-toggle="" data-bs-placement="right" data-bs-original-title="Grupo" style="pointer-events: all;">
				   <i class="fa fa-object-group me-2"></i> Grupo
				</button>
			</li-->
		</ul>
	</div>
	
	<!--div class="m-2" style="">
		<button class="btn btn-md btn-circle btn-primary waves-effect waves-light shadow" id="adicionar_resposta" href="javascript:void(0);" data-bs-toggle="tooltip" data-bs-original-title="Nova resposta" style="pointer-events: all;">
		   <i class="fa fa-plus fa-lg"></i>
		</button>
	</div>
	<div class="m-2" style="">
		<button class="btn btn-md btn-circle btn-warning waves-effect waves-light shadow" id="adicionar_acao" href="javascript:void(0);" data-bs-toggle="tooltip" data-bs-original-title="Nova ação" style="pointer-events: all;">
		   <i class="fa fa-triangle-exclamation fa-lg"></i>
		</button>
	</div>
	<div class="m-2" style="">
		<button class="btn btn-md btn-circle btn-danger waves-effect waves-light shadow" id="adicionar_api" href="javascript:void(0);" data-bs-toggle="tooltip" data-bs-original-title="Requisição URL" style="pointer-events: all;">
		   <i class="fa fa-link fa-lg"></i>
		</button>
	</div-->
	<div class="m-2" style="">
		<button class="btn btn-md btn-circle btn-purple-manager waves-effect waves-light shadow" id="testar_bot" href="javascript:void(0);" data-bs-toggle="tooltip" data-bs-original-title="Testar ChatBot" style="pointer-events: all;">
		   <i class="fa fa-comments fa-lg"></i>
		</button>
	</div>
	
	<div class="m-2" style="position:absolute;bottom:0;">
		<button href="#" data-provide="fullscreen" class="btn btn-md btn-circle btn-dark waves-effect waves-light shadow" title="Tela Cheia" data-bs-toggle="tooltip" data-bs-original-title="Tela cheia" style="pointer-events: all;">
			<i class="fa fa-expand fa-lg"></i>
		</button>
	</div>
</div>	

		
		
<!-- Drawflow -->
<link rel="stylesheet" href="assets/css/flow/drawflow.min.css">
<script src="assets/js/flow/drawflow.min.js"></script>
<link rel="stylesheet" href="assets/css/flow/beautiful.css">

{%endblock%}
{%block scripts%}
<style>
	.drawflow.transition-animated{
		-webkit-transition: 500ms ease-in-out;
		-moz-transition: 500ms ease-in-out;
		-o-transition: 500ms ease-in-out;
		transition: 500ms ease-in-out;
	}
	.swal2-html-container{
		overflow: visible;
	}
	.bootstrap-tagsinput {
		font-size: 13px;
		text-align: left;
		width: 100%;
		overflow-x: auto;
		max-height: 100px;
		background-color: #F2F5FA!important;
		border: none!important;
		box-shadow: none!important;
	}
	.bootstrap-tagsinput span {
		font-size: 13px;
		padding: 2px 2px 2px 4px;
	}
	.nova_mensagem {
		padding-right: 15px !important;
	}
	.drawflow-node.voltar {
		padding-bottom: 0px;
	}
	
	#novaRespostaMensagens .card .mensagemText:hover {
		background-color: #00000055;
	}
	
	#novaRespostaMensagens .mensagem .mensagemDelete{
		display: none;
	}
	#novaRespostaMensagens .mensagem:hover .mensagemDelete{
		display: block;
	}
	
	#showOpcoes .card .excluir_opcao{
		display: none;
	}
	
	#showOpcoes .card:hover .excluir_opcao{
		display: block;
	}
	
	#showOpcoes .card .editar_opcao{
		display: none;
	}
	
	#showOpcoes .card:hover .editar_opcao{
		display: block;
	}
	
	#condicoes .card .excluir_condicao{
		display: none;
	}
	
	#condicoes .card:hover .excluir_condicao{
		display: block;
	}
	
	#condicoes .card .editar_condicao{
		display: none;
	}
	
	#condicoes .card:hover .editar_condicao{
		display: block;
	}
	

	#condicoes_regras .card .excluir_condicao{
		display: none;
	}
	
	#condicoes_regras .card:hover .excluir_condicao{
		display: block;
	}
	
	#condicoes_regras .card .editar_condicao{
		display: none;
	}
	
	#condicoes_regras .card:hover .editar_condicao{
		display: block;
	}
</style>

<script>
var editor = null;
$('body').addClass('sidebar-collapse');
if ($('header').css('display') === 'block') { 
    $('#menu-acoes').css('top', ($('header').height() * 2.2) + $('#card-header').height());
    $('#menu-acoes').css('height', 'calc(101vh - ' + ($('header').height() * 2.3) + 'px - ' + $('#card-header').height() + 'px)');
} else {
    $('#menu-acoes').css('top', '100px');
    $('#menu-acoes').css('height', 'calc(101vh - 100px - ' + $('#card-header').height() + 'px)');
}





/*$('.fab-container').on('click', function(){
	if($('.fab-options').css('opacity') == 0){
		$('.fab-options').css('opacity', '1');
		$('.fab-options').css('transform', 'scale(1)');
	}else{
		$('.fab-options').css('opacity', '0');
		$('.fab-options').css('transform', 'scale(0)');
	}
})

$('.fab-container').on('focusout', function(){
	$('.fab-options').css('opacity', '0');
	$('.fab-options').css('transform', 'scale(0)');
})*/

$('.fab-container').on('focusin, mouseenter', function(){
	$('.fab-options').css('opacity', '1');
	$('.fab-options').css('transform', 'scale(1)');
})

$('.fab-container').on('focusout, mouseleave', function(){
	$('.fab-options').css('opacity', '0');
	$('.fab-options').css('transform', 'scale(0)');
})

$(document).ready(async function() {
	$('#meusNumeros').selectpicker();
	$('#meusNumeros').selectpicker('val', '{{numeros.0.idNumeros}}');

	//$('.navbar').removeClass('navbar-expand-lg');
	//$('.navbar').addClass('navbar-expand-xxl');
	await initDraw();
	initilizeTooltips();
	//$('#menu-acoes').css('top', '0px');
	
	$('#botContent').attr('style', 'margin-top: calc( ' + ($('.main-header').height()+10) +'px) !important');//.css('margin-top', 'calc( ' + $('.main-header').height() +'px)');
	$('#botContent').css('height', 'calc(101vh - ' + ($('header').height()+ 20) + 'px)');
	$('.card-body').css('height', 'calc(101vh - ' + ($('header').height()+ 20) + 'px)');
});

let departamentos = [];
{% for d in departamentos%}departamentos.push({idDepartamento:{{d.getIdDepartamentos}},nome:"{{d.getNomeDepartamento}}"});{%endfor%};


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

$('.btn').on('click', function(){
	$(this).blur()
})

$('#meusNumeros').on('change', function(){
	if($('#meusNumeros :selected').data('ativo') == 1){
		if(!$('#ativarBot').hasClass('active')){$('#ativarBot').addClass('active');}
	}else{
		$('#ativarBot').removeClass('active');
	}
	
	editor.changeModule($('#meusNumeros').val());
	
	let jsObj = '';
	if($('input[type=radio][name=radioBotData]:checked').attr('id') == 'botData'){
		$('#salvarBot').removeClass('d-none');
		$('#enviarParaProducao').addClass('d-none');
		botData = JSON.stringify(editor.export());
		jsObj = JSON.parse(botData);
	}else{
		$('#salvarBot').addClass('d-none');
		$('#enviarParaProducao').removeClass('d-none');
		botDataTest = JSON.stringify(editor.export());
		jsObj = JSON.parse(botDataTest);
		$('#salvarBot').attr('disabled', true);
	}
	loadBotData(jsObj);
})

$('#ativarBot').on('click', function(e){
	fetch('ativarAutoBot', {
		method: 'POST',
		headers: {'Content-Type': 'application/x-www-form-urlencoded'},
		body: 'id_numeros=' + $('#meusNumeros').val()
	})
	.then(function(res){ return res.json(); })
	.then(function(res){
		if(res.Success){
			Swal.fire({
				title: res.title,
				text: res.text,
				scrollbarPadding: false,
				icon: 'success',
				confirmButtonColor: 'var(--bs-info)',
				scrollbarPadding: false
			}).then(() =>{
				if($('#meusNumeros :selected').data('ativo') == 1){
					$('#meusNumeros :selected').data('ativo', '0')
				}else{
					$('#meusNumeros :selected').data('ativo', '1')
				}
			})
		}else{
			Swal.fire({
				//title: 'Número não cadastrado',
				text: res.Erro,
				scrollbarPadding: false,
				icon: 'error',
				confirmButtonColor: 'var(--bs-info)',
				scrollbarPadding: false
			}).then(() =>{
				//location.reload();
				if($('#meusNumeros :selected').data('ativo') == 1){
					if(!$('#ativarBot').hasClass('active')){$('#ativarBot').addClass('active');}
				}else{
					$('#ativarBot').removeClass('active');
				}
			})
		}
	})
})

window.onbeforeunload = function() {
	if($('#salvarBot').attr('disabled') != 'disabled'){
		return "Existem alterações não salvas.";
	}
}


var botData = null;
var botDataTest = null;
var loadingBotData = false;
var dragElementHover = null;
var last_x = 0;
var last_y = 0;
var resizeElement = false;
function initDraw(){
	{%if numeros|length > 0%}
		class Drawflowoverride extends Drawflow {
			removeNodeId(id, edit = false) {
				var node = this.getNodeFromId(id.slice(5));


				var nomeNode = (node.data.nome ? node.data.nome : node.data.id);
				nomeNode = (!nomeNode ? node.name : nomeNode);
				if(node.data.name !== 'nova_mensagem'){
					if(edit == false){
						Swal.fire({
							title: 'Excluir mensagem ?',
							text: 'Deseja excluir a mensagem \''+ nomeNode +'\' ?',
							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()
							},
							preConfirm: (value) => {

							}
						}).then((result) => {
							if(result.isConfirmed){
								
								/*VALIDA VINCULO MENSAGEM*/
								if(node.data.id){
									var mensagensVinculadas = [];
									$.each(editor.drawflow.drawflow[editor.module].data, function(i,e) {
										if(e.data.mensagemEncaminhar == node.data.id && e.data.mensagemEncaminhar != e.data.id){
											mensagensVinculadas.push(e.data.nome);
										}
									})
									
									if(mensagensVinculadas != ''){
										Swal.fire({
											title: 'Exclusão não realizada',
											html: 'Essa mensagem possui vínculo com '+ (mensagensVinculadas.length > 1 ? 'as mensagens' : 'a mensagem') +': <br>' + mensagensVinculadas.join(', '),
											icon: 'warning',
											confirmButtonColor: 'var(--bs-info)',
										});
										return;
									}
								}
								/*VALIDA VINCULO MENSAGEM*/
								
								this.removeConnectionNodeId(id);
								var moduleName = this.getModuleFromNodeId(id.slice(5))
								if(this.module === moduleName) {
								  this.container.querySelector(`#${id}`).remove();
								}
								delete this.drawflow.drawflow[moduleName].data[id.slice(5)];
								this.dispatch('nodeRemoved', id.slice(5));
								
							}else{
								return;
							}
						})
					}else{
						/*VALIDA VINCULO MENSAGEM*/
						var mensagensVinculadas = [];
						$.each(editor.drawflow.drawflow[editor.module].data, function(i,e) { 
							if(e.data.mensagemEncaminhar == node.data.id && e.data.mensagemEncaminhar != e.data.id){
								mensagensVinculadas.push(e.data.nome);
							}
						})
						
						if(mensagensVinculadas != ''){
							Swal.fire({
								title: 'Exclusão não realizada',
								html: 'Essa mensagem possui vínculo com '+ (mensagensVinculadas.length > 1 ? 'as mensagens' : 'a mensagem') +': <br>' + mensagensVinculadas.join(', '),
								icon: 'warning',
								confirmButtonColor: 'var(--bs-info)',
							});
							return;
						}
						/*VALIDA VINCULO MENSAGEM*/
						
						this.removeConnectionNodeId(id);
						var moduleName = this.getModuleFromNodeId(id.slice(5))
						if(this.module === moduleName) {
						  this.container.querySelector(`#${id}`).remove();
						}
						delete this.drawflow.drawflow[moduleName].data[id.slice(5)];
						this.dispatch('nodeRemoved', id.slice(5));
					}
				}else{
					Swal.fire({
						title: 'Excluir mensagem',
						text: 'Não é possível excluir o evento \'Mensagem recebida\'',
						icon: 'warning',
						confirmButtonColor: 'var(--bs-info)',
					});
				}
			}
		}
		
		/*INICIALIZA FLOW*/
		editor = new Drawflowoverride(document.getElementById("drawflow"));
		editor.reroute = true;
		editor.start();
		/*INICIALIZA FLOW*/
		
		$('#drawflow').css('height', 'calc(101vh - ' + ($('header').height()*1.95) + 'px - '+ $('#card-header').height() +'px)');
		
		/*EVENTOS FLOW*/
		/*EVENTOS GRUPO*/
		editor.on("mouseMove", ({x,y}) => {
			if(editor.node_selected && editor.drag && editor.node_selected.classList[1] !== "GROUP") {
				const eles = document.elementsFromPoint(x,y);
				const ele = eles.filter( ele => ele.classList[1] === "GROUP");
				if(ele.length > 0) {
					dragElementHover = ele[0];
					dragElementHover.classList.add("hover-drop");
				} else {
					if(dragElementHover != null) {
						dragElementHover.classList.remove("hover-drop");
						dragElementHover = null;
					}
				}
			} else if(editor.node_selected && editor.drag && editor.node_selected.classList[1] == "GROUP") {
				const dragNode = editor.node_selected.id.slice(5);
				const dragNodeInfo = editor.getNodeFromId(dragNode);
				const elements = dragNodeInfo.data.elements;
				elements.forEach(eleN => {

					const node = document.getElementById(`node-${eleN}`);
					var xnew = (last_x - x) * editor.precanvas.clientWidth / (editor.precanvas.clientWidth * editor.zoom);
					var ynew = (last_y - y) * editor.precanvas.clientHeight / (editor.precanvas.clientHeight * editor.zoom);

					node.style.top = (node.offsetTop - ynew) + "px";
					node.style.left = (node.offsetLeft - xnew) + "px";

					editor.drawflow.drawflow[editor.module].data[eleN].pos_x = (node.offsetLeft - xnew);
					editor.drawflow.drawflow[editor.module].data[eleN].pos_y = (node.offsetTop - ynew);
					editor.updateConnectionNodes(`node-${eleN}`);

				});
			}
			last_x = x;
			last_y = y;
		})
		
		editor.on("nodeMoved", (id) => {
			const dragNode = id;
			if(dragElementHover !== null) {
				const dropNode = dragElementHover.id.slice(5);
				if(dragNode !== dropNode) {
					removeOfGroupNode(dragNode);
					dragElementHover.classList.remove("hover-drop");
					const dropNodeInfo = editor.getNodeFromId(dropNode);
					const dropNodeInfoData = dropNodeInfo.data;
					if(dropNodeInfoData.elements.indexOf(dragNode) === -1) {
						dropNodeInfoData.elements.push(dragNode);
						editor.updateNodeDataFromId(dropNode, dropNodeInfoData);
						
						//var higherRight = 0;
						//var totalHeight = 0;
						
						/*$.each(dropNodeInfoData.elements, function(i,e){
							//totalWidth = totalWidth + $('#node-' + e).width();
							if(higherRight < ($('#node-' + e).offset().left + $('#node-' + e).width())){
								higherRight = $('#node-' + e).offset().left + $('#node-' + e).width();
							}
							//totalHeight = totalWidth + $('#node-' + e).height();
						})*/
						//console.log(higherRight);
						//console.log($('#node-' + dropNode).offset().left + $('#node-' + dropNode).width());
						//$('#node-' + dropNode).width(higherRight);
						//$('#node-' + dropNode).height(totalHeight);
						
					}
				}
				dragElementHover = null;
			} else {
				removeOfGroupNode(dragNode);
			}
			
			if($('input[type=radio][name=radioBotData]:checked').attr('id') == 'botDataTest'){
				$('#salvarBot').trigger('click');
			}else{
				$('#salvarBot').attr('disabled', false);
			}
		})
		
		editor.on("nodeRemoved", (id) => {
			removeOfGroupNode(id);
			
			if($('input[type=radio][name=radioBotData]:checked').attr('id') == 'botDataTest'){
				$('#salvarBot').trigger('click');
			}else{
				$('#salvarBot').attr('disabled', false);
			}
		});

		function removeOfGroupNode(id) {
			Object.keys(editor.drawflow.drawflow[editor.module].data).forEach(ele => {
				if(editor.drawflow.drawflow[editor.module].data[ele].class === "GROUP") {
					const findIndex = editor.drawflow.drawflow[editor.module].data[ele].data.elements.indexOf(id);
					if(findIndex !== -1) {
						editor.drawflow.drawflow[editor.module].data[ele].data.elements.splice(findIndex, 1);
					}
				}
		   })
		}
		
		editor.on("clickEnd", (e) => {
			if(editor.node_selected) {
				const diffClick = 15;
				const height = editor.node_selected.getBoundingClientRect().height/editor.zoom - diffClick;
				const width = editor.node_selected.getBoundingClientRect().width/editor.zoom - diffClick;
				const xClick = e.offsetX;
				const yClick = e.offsetY;
				if(yClick >= height && xClick >= width) {
					resizeElement = true;
					editor.drag = false;
				} 
			}
		});
		

		editor.on("mouseUp", (e) => {
			if(resizeElement) {
				//console.log(`Resize Node ${editor.node_selected.id} - Width: ${editor.node_selected.style.width} - Height: ${editor.node_selected.style.height}`)
				// editor.drawflow.drawflow[editor.module].data[editor.node_selected.id].width =  ...;
				resizeElement = false;
			}
		});
		
		/*EVENTOS GRUPO*/
		/*editor.on("nodeRemoved", function(el) {
			if($('input[type=radio][name=radioBotData]:checked').attr('id') == 'botDataTest'){
				$('#salvarBot').trigger('click');
			}else{
				$('#salvarBot').attr('disabled', false);
			}
		})
		
		editor.on("nodeMoved", function(el) {
			if($('input[type=radio][name=radioBotData]:checked').attr('id') == 'botDataTest'){
				$('#salvarBot').trigger('click');
			}else{
				$('#salvarBot').attr('disabled', false);
			}
		})*/
		
		editor.on("connectionRemoved", function(el) {
			if($('input[type=radio][name=radioBotData]:checked').attr('id') == 'botDataTest'){
				$('#salvarBot').trigger('click');
			}else{
				$('#salvarBot').attr('disabled', false);
			}
		})
		
		editor.on("connectionCreated", function(info) {
			
			const nodeInfo = editor.getNodeFromId(info.output_id);
			const nodeConnected = editor.getNodeFromId(info.input_id);
			var erroAddConnection = null;
			//if(nodeInfo.outputs[info.output_class].connections.length > 1) {
				//let nodeConnected = editor.getNodeFromId(nodeInfo.outputs[info.output_class].connections[1].node);
				
				if(nodeInfo.name == 'nova_mensagem' && nodeConnected.data.requisicao){
					erroAddConnection = 'Não é possível ligar o bloco \'Mensagem recebida\' à uma requisição';
					//const removeConnectionInfo = nodeInfo.outputs[info.output_class].connections[1];
					//editor.removeSingleConnection(info.output_id, removeConnectionInfo.node, info.output_class, removeConnectionInfo.output);
					
					/*Swal.fire({
						title: 'Atenção',
						text: 'Não é possível ligar o bloco \'Mensagem recebida\' à uma requisição',
						icon: 'warning',
						confirmButtonColor: 'var(--bs-info)',
					});*/
					
					//return;
				}
				
				if(nodeInfo.data.requisicao && nodeConnected.data.requisicao){
					erroAddConnection = 'Não é possível ligar dois blocos de requisição';
				}
				if(nodeInfo.data.regras && nodeConnected.data.regras){
					erroAddConnection = 'Não é possível ligar dois blocos de condição';
				}
				if(nodeInfo.name != 'nova_mensagem' && nodeConnected.data.regras){
					erroAddConnection = 'Não é possível ligar uma condição neste bloco';
				}
				if(erroAddConnection != null){
					if(nodeInfo.outputs[info.output_class].connections.length > 1) {
						var removeConnectionInfo = nodeInfo.outputs[info.output_class].connections[1];
						editor.removeSingleConnection(info.output_id, removeConnectionInfo.node, info.output_class, removeConnectionInfo.output);
					}else{
						var removeConnectionInfo = nodeInfo.outputs[info.output_class].connections[0];
						editor.removeSingleConnection(info.output_id, removeConnectionInfo.node, info.output_class, removeConnectionInfo.output);
					}
					
					Swal.fire({
						title: 'Atenção',
						text: erroAddConnection,
						icon: 'warning',
						confirmButtonColor: 'var(--bs-info)',
					});
					
					return;
				}
				
				if(nodeInfo.outputs[info.output_class].connections.length > 1) {
					const removeConnectionInfo = nodeInfo.outputs[info.output_class].connections[0];
					editor.removeSingleConnection(info.output_id, removeConnectionInfo.node, info.output_class, removeConnectionInfo.output);
				}
				
				
			//}
			
			if($('input[type=radio][name=radioBotData]:checked').attr('id') == 'botDataTest'){
				$('#salvarBot').trigger('click');
			}else{
				$('#salvarBot').attr('disabled', false);
			}
		});
		
		$("#drawflow").on("mouseleave", (event) => {
			editor.dragEnd(event.originalEvent);
		});
		
		editor.on("edit", (e) => {
			var data = editor.getNodeFromId(editor.node_selected.id.replace('node-','')).data;

			if(data.name == 'nova_mensagem'){
				Swal.fire({
					title: 'Editar mensagem',
					text: 'Não é possível editar o evento \'Mensagem recebida\'',
					icon: 'warning',
					confirmButtonColor: 'var(--bs-info)',
				});
				
				return;
			}
			
			switch(true){
				case typeof(data.elements) != 'undefined': //GRUPO
					adicionarEditarGrupo(editor.node_selected.id);
					break;
				case typeof(data.action) != 'undefined':
					adicionarEditarNodeAction(editor.node_selected.id);
					break;
				case typeof(data.requisicao) != 'undefined':
					adicionarNodeApi(editor.node_selected.id)
					break;
				case typeof(data.regras) != 'undefined':
					adicionarEditarCondicao(editor.node_selected.id)
					break;
				case typeof(data.tipoOpcao) == 'undefined' || data.tipoOpcao == 'tipoOpcaoEscolher' || data.tipoOpcao == 'tipoOpcaoDigitar' :
					adicionarEditarResposta(editor.node_selected.id);				
					break;
			}
			
		})
		
		editor.on("nodeCreated", (id) => {
			$('#node-' + id + ' .drawflow_content_node').html(geraNodeHtml(editor.getNodeFromId(id), false));
			
			if($('input[type=radio][name=radioBotData]:checked').attr('id') == 'botDataTest'){
				$('#salvarBot').trigger('click');
			}
			
			editor.focusNode(id, true, true);
			initilizeTooltips();
		})
		
		
		/*FOCA NO NODE PELO ID*/
		editor.setTranslate = (x, y, zoom) => {
			const $this = editor
			$this.canvas_x = x;
			$this.canvas_y = y;
			let storedZoom = zoom;
			$this.zoom = 1;
			$this.precanvas.style.transform = "translate(" + $this.canvas_x + "px, " + 
															 $this.canvas_y + "px) scale(" + $this.zoom + "), transition-duration: 500ms";
			$this.zoom = storedZoom;
			$this.zoom_last_value = 1;
			$this.zoom_refresh();
		}
		editor.focusNode = (nodeId, animated, focused) => {
			
			
			const node = document.getElementById(`node-${nodeId}`)
			const args = {
				node_x: editor.drawflow.drawflow[editor.module].data[nodeId].pos_x,
				node_y: editor.drawflow.drawflow[editor.module].data[nodeId].pos_y,
				node_w: node.clientWidth,
				node_h: node.clientHeight,
				canvas_w: editor.precanvas.clientWidth,
				canvas_h: editor.precanvas.clientHeight
			}
			const pos_x = -args.node_x + (args.canvas_w / 3) - (args.node_w / 3)
			const pos_y = -args.node_y + (args.canvas_h / 2) - (args.node_h / 2)
			const zoom = editor.zoom
			editor.setTranslate(pos_x, pos_y, zoom)
			
			if (animated) {
				setTimeout( function(){
					const millisecondsStart = 50
					const millisecondsAnimate = 500
					node.style.transition = `all ${millisecondsAnimate / 1000}s ease 0s`
					window.setTimeout(() => { node.style.transform = 'scale(1.05)' }, millisecondsStart)
					window.setTimeout(() => { node.style.transform = 'scale(1.0)' }, millisecondsStart + millisecondsAnimate)
					window.setTimeout(() => { 
						 node.style.transition = ''; 
						 node.style.transform = ''; 
					}, millisecondsStart + millisecondsAnimate * 2)
				}, 250)
				
				/*setTimeout( function(){ 
					$(node).addClass('animated fast flash').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
						$(node).removeClass('animated fast flash');
					});
				}, 400)*/
			}
			
			if (focused) {
				var evt = new window.MouseEvent("mousedown", { view: window, bubbles: true, cancelable: false });
				var evt2 = new window.MouseEvent("mouseup", { view: window, bubbles: true, cancelable: false });
				document.querySelector(`#node-${nodeId} .drawflow_content_node`).dispatchEvent(evt);
				document.querySelector(`#node-${nodeId} .drawflow_content_node`).dispatchEvent(evt2);
			}
		}
		/*FOCA NO NODE PELO ID*/
		
		
		
		editor.on("import", (e) => {
			Swal.close();
		})
		/*EVENTOS FLOW*/
		
		
		loadingBotData = true;
		Swal.fire({title : 'Carregando respostas...', allowOutsideClick: false, scrollbarPadding: false});
		Swal.showLoading();
		
		{%for key,n in numeros %}
			//editor.addModule('');
			{%if key == 0 %}
				{%if n.autoBot == 1%}
					$('#ativarBot').addClass('active');
				{%endif%}
				editor.drawflow = {"drawflow": {"{{n.idNumeros}}": {"data": {}}}};
			{%else%}
				editor.addModule("{{n.idNumeros}}");
			{%endif%}
			editor.changeModule('{{n.idNumeros}}');
			
			var nova_mensagem = '<div class="ps-15 p-5 d-flex align-items-center" data-id="inicio"><i class="fa fa-paper-plane me-2"></i>Mensagem recebida</div>';
			editor.addNode('nova_mensagem', 0,  1, 50, 50, 'nova_mensagem',{"name":'nova_mensagem'}, nova_mensagem );
		
		{%endfor%}
		editor.changeModule('{{numeros.0.idNumeros}}');
		
		{%if botData != null%}
		botData = '{{botData|replace({"\\n":"\\\\n","\\t":"\\\\t","\\r":"\\\\r","\'":"\\\'", "\\":"\\\\"})|raw}}';
		{%endif%}
		{%if botDataTest != null%}
		botDataTest = '{{botDataTest|replace({"\\n":"\\\\n","\\t":"\\\\t","\\r":"\\\\r","\'":"\\\'", "\\":"\\\\"})|raw}}';
		{%endif%}
		
		if(botDataTest == null){botDataTest = botData;}
		
		if(botData == null){botData = JSON.stringify(editor.export())}
		if(botDataTest == null){botDataTest = JSON.stringify(editor.export())}
		
		
		let jsObjTest = JSON.parse(botDataTest);
		let jsObj = JSON.parse(botData);
		
		{%for key,n in numeros %}
			if(typeof(jsObj.drawflow["{{n.idNumeros}}"]) == "undefined"){
				jsObj.drawflow["{{n.idNumeros}}"] = {"data": {}};
			}
			if(typeof(jsObjTest.drawflow["{{n.idNumeros}}"]) == "undefined"){
				jsObjTest.drawflow["{{n.idNumeros}}"] = {"data": {}};
			}
		{%endfor%}
		botData = JSON.stringify(jsObj);
		botDataTest = JSON.stringify(jsObjTest);
		if($('input[type=radio][name=radioBotData]:checked').attr('id') == 'botData'){
			loadBotData(jsObj);
		}else{
			loadBotData(jsObjTest);
		}
		
	{%endif%}
}

$('input[type=radio][name=radioBotData]').on('change', function() {
	let jsObj = '';
	if($(this).attr('id') == 'botData'){
		$('#salvarBot').removeClass('d-none');
		$('#enviarParaProducao').addClass('d-none');
		botDataTest = JSON.stringify(editor.export());
		jsObj = JSON.parse(botData);
	}else{
		$('#salvarBot').addClass('d-none');
		$('#enviarParaProducao').removeClass('d-none');
		botData = JSON.stringify(editor.export());
		jsObj = JSON.parse(botDataTest);
		$('#salvarBot').attr('disabled', true);
	}
	loadBotData(jsObj);
})

function loadBotData(jsObj){
	$.each(jsObj.drawflow[editor.module].data, function(i,e){
		if(e.data.name != 'nova_mensagem'){
			jsObj.drawflow[editor.module].data[i].html = geraNodeHtml(e)
		}else{
			jsObj.drawflow[editor.module].data[i].html = '<div class="ps-15 p-5 d-flex align-items-center" data-id="inicio"><i class="fa fa-paper-plane me-2"></i>Mensagem recebida</div>';
		}
	})
	editor.import(jsObj);
	if(Object.keys(jsObj.drawflow[editor.module].data).length == 0){
		var nova_mensagem = '<div class="ps-15 p-5 d-flex align-items-center" data-id="inicio"><i class="fa fa-paper-plane me-2"></i>Mensagem recebida</div>';
		editor.addNode('nova_mensagem', 0,  1, 50, 50, 'nova_mensagem',{"name":'nova_mensagem'}, nova_mensagem );
		jsObj = editor.export();
		$.each(jsObj.drawflow[editor.module].data, function(i,e){
			if(e.data.name != 'nova_mensagem'){
				jsObj.drawflow[editor.module].data[i].html = geraNodeHtml(e)
			}else{
				jsObj.drawflow[editor.module].data[i].html = '<div class="ps-15 p-5 d-flex align-items-center" data-id="inicio"><i class="fa fa-paper-plane me-2"></i>Mensagem recebida</div>';
			}
		})
		
		editor.import(jsObj);
	}

	setTimeout(function(){ 
		$('#drawflow').removeClass('d-none');
		
		var focusNode = null;
		$.each(editor.drawflow.drawflow[editor.module].data, function(i,e) {
			editor.updateConnectionNodes('node-' + e.id);
			if(e.name == 'nova_mensagem'){
				focusNode = e.id;
			}
		})
		if(focusNode != null){
			editor.focusNode(focusNode, false, false);
		}
		
		
		loadingBotData = false;
	}, 150);
}

$('#adicionar_grupo').on('click', function(){
	adicionarEditarGrupo('')
})

function adicionarEditarGrupo(id){
	var node = null;
	if(id != ''){node = editor.getNodeFromId(id.replace('node-', ''));}
	var nome = (id != '' ? node.data.name : '');
	
	Swal.fire({
	  title: (id == '' ? 'Novo grupo' : 'Alterar grupo'),
	  html:
		'<div class="container">' +
			'<input id="editarGrupoId" type="hidden" class="form-control" value="'+id+'"/>' +
			'<div class="col-12 text-left mt-4">' +
				'<h6 class="mb-1 font-weight-bold">Nome departamento*</h6>' +
				'<input id="novoGrupoNome" placeholder="Nome" class="form-control" value="'+nome+'"/>' +
			'</div>' +
			'' +
		'</div>' +
		'',
	  showCloseButton: true,
	  showCancelButton: true,
	  focusConfirm: false,
	  confirmButtonText: 'Adicionar',
	  cancelButtonText: 'Cancelar',
	  allowOutsideClick: false,
	  confirmButtonColor: 'var(--bs-info)',
	  scrollbarPadding: false,
	  willOpen: () => {
	  },
	  didOpen: () => {
		  $('#novoGrupoNome').focus();
	  },
	  preConfirm: (value) => {
		let novoGrupoNome = $('#novoGrupoNome').val();
		
		switch(true){
			case novoGrupoNome == '':
				Swal.showValidationMessage('Nome grupo não pode ser vazio')
				break;
		}
	  }
	  
	}).then((result) => {
		let novoGrupoNome = $('#novoGrupoNome').val();
		
		if(result.isConfirmed){
			if(id == ''){
				editor.addNode('GROUP', 0, 0, ((editor.canvas_x/editor.zoom)*-1)+(300*editor.zoom), ((editor.canvas_y/editor.zoom)*-1)+(200*editor.zoom), 'GROUP', {elements: [], name:novoGrupoNome}, '');
			}else{
				var data = {data: {elements: node.data.elements, name:novoGrupoNome}};
				
				$('#node-' + node.id + ' .drawflow_content_node').html(geraNodeHtml(data, false));
				editor.updateNodeDataFromId(node.id, data);
			}
		}
	})
}


/****************************CONDICAO**************************************************/
$('#adicionar_condicao').on('click', function(){
	adicionarEditarCondicao('')
})

function adicionarEditarCondicao(id){
	if(editor == null){
		Swal.fire({
			title: 'Nenhum número cadastrado',
			text: 'Cadastre um número para poder usar as mensagens automáticas',
			icon: 'warning',
			confirmButtonColor: 'var(--bs-info)',
		});
		return;
	}
	
	let width = '100vw';
	if($(window).width() > 990){width = ($(window).width()/2.5);}
	
	
	var node = null;
	if(id != ''){node = editor.getNodeFromId(id.replace('node-', ''));}
	var nome = (id != '' ? node.data.name : '');
	
	Swal.fire({
		position: 'top-end',
		width: width,
		showClass: {
			popup: 'animated fadeInRight faster'
		},
		hideClass: {
			popup: 'animated fadeOutRight faster'
		},
		grow: 'column',
		//title: 'Nova Resposta',
		html:
			'<h4 class="fw-bold text-purple">Condição</h4>' +
			'<div id="novaCondicaoContainer" class="" style="">' +
				'<ul id="" class="nav nav-pills mb-0">' +
					'<li class=""> <a id="novaCondicaoInfoTab" href="#condicao" class="nav-link fw-bold text-purple active" data-bs-toggle="tab" aria-expanded="false" style="font-size: 14px !important;">Condição</a> </li>' +
					'<li class=""> <a id="novaCondicaoRegrasTab" href="#regras" class="nav-link fw-bold text-purple" data-bs-toggle="tab" aria-expanded="false" style="font-size: 14px !important;">Regras</a> </li>' +
				'</ul>' +
				'<hr class="mt-1 mb-1">'+
				'<div class="tab-content" style="height: 95%;">' +
					/*INFORMAÇÕES CONDIÇÃO*/
					'<div id="condicao" class="tab-pane active" style="">' +
						'<div class="row" style="">' +
							'<div class="col-12 col-lg-6 text-start mt-2">' +
								'<h6 class="mb-1 fw-bold text-purple">Nome Condição</h6>' +
								'<input id="nome_condicao" placeholder="Nome condição" class="form-control bg-manager-gray border-0" value="'+ (node ? node.data.nome: '') +'"/>' +
							'</div>' +
							'<div class="col-12 col-lg-6 text-start mt-2">' +
								'<h6 class="mb-1 fw-bold text-purple">ID Condição</h6>' +
								'<input type="text" id="id_condicao" placeholder="Gerado automaticamente" class="form-control bg-manager-gray border-0" value="'+ (node ? node.data.id: '') +'" readonly/>' +
							'</div>' +

							'<div class="col-12 mt-2" style="">' +
								'<h5 class="mt-2 fw-bold text-purple"><i class="fa-solid fa-scale-balanced me-1"></i>Criar Regra</h5>' +
								'<div id="novaCondicaoRegras" class="rounded col-12" style="overflow-y: auto;">' +
									
									'<div class="card p-2 text-start">' +
										'<div class="row g-0 m-0">' +
											'<div class="col-12">' +
												'<h6 class="mb-0 fw-bold text-purple"><i class="fa-solid fa-message me-1"></i>Mensagem recebida</h6>' +
											'</div>' +
											'<div class="col-12 mt-1">' +
												'<select id="regraMensagemCondicao" class="selectpicker form-control form-control-sm" title="Selecionar comparação" data-container="body">' +
													'<option value="igual" class="" style="letter-spacing: 1px !important;">Igual a</option>' +
													'<option value="diferente" class="" style="letter-spacing: 1px !important;">Diferente de</option>' +
													'<option value="contem" class="" style="letter-spacing: 1px !important;">Contém</option>' +
													'<option value="maior" class="" style="letter-spacing: 1px !important;">Maior que</option>' +
													'<option value="menor" class="" style="letter-spacing: 1px !important;">Menor que</option>' +
													'<option value="regex" class="" style="letter-spacing: 1px !important;">Corresponde à Regex</option>' +
												'</select>' +
											'</div>' +
										'</div>' +
										'<div class="row g-0 m-0">' +
											'<div class="col-12 mt-2">' +
												'<input id="regraMensagemValor" placeholder="Valor" class="form-control bg-manager-gray border-0 form-control-sm" data-role="tagsinput" style="height: 30px;"/>' +
											'</div>' +
										'</div>' +
									'</div>' +
									
									'<div class="card p-2 text-start">' +
										'<div class="row g-0 m-0">' +
											'<div class="col-12">' +
												'<h6 class="mb-0 fw-bold text-purple"><i class="fa-solid fa-shuffle me-1"></i>Canal</h6>' +
											'</div>' +
											'<div class="col-12 mt-1">' +
												'<select id="regraCanalCondicao" class="form-control form-control-sm" title="Selecionar canal" data-container="body" multiple="true">' +
													'<option value="whatsapp" class="" style="letter-spacing: 1px !important;">Whatsapp</option>' +
													'<option value="facebook" class="" style="letter-spacing: 1px !important;">Facebook</option>' +
													'<option value="instagram" class="" style="letter-spacing: 1px !important;">Instagram</option>' +
												'</select>' +
											'</div>' +
										'</div>' +
									'</div>' +
									
									'<div class="card p-2 text-start">' +
										'<div class="row g-0 m-0">' +
											'<div class="col-12">' +
												'<h6 class="mb-0 fw-bold text-purple"><i class="fa-solid fa-user me-1"></i>Contato</h6>' +
											'</div>' +
											'<div class="col-12 mt-1">' +
												'<select id="regraContatoCondicao" class="form-control form-control-sm" title="Selecionar" data-container="body">' +
													'<option value="" class="" style="letter-spacing: 1px !important;">Limpar</option>' +
													'<option value="novo" class="" style="letter-spacing: 1px !important;">Novo</option>' +
													'<option value="ja_existe" class="" style="letter-spacing: 1px !important;">Já Existe</option>' +
												'</select>' +
											'</div>' +
										'</div>' +
									'</div>' +
									
									'<div class="card p-2 text-start">' +
										'<div class="row g-0 m-0">' +
											'<div class="col-12">' +
												'<h6 class="mb-0 fw-bold text-purple"><i class="fa-solid fa-users me-1"></i>Grupos</h6>' +
											'</div>' +
											'<div class="col-12 mt-1">' +
												'<select id="regraGrupoContato" class="form-control form-control-sm" title="Selecionar grupo" data-container="body" multiple>' +
													{% for g in grupos %}
													'<option value="{{g.idGrupos}}" class="" style="letter-spacing: 1px !important;">{{g.nome}}</option>' +
													{% endfor %}
												'</select>' +
											'</div>' +
										'</div>' +
									'</div>' +
									
									'<div id="" class="d-flex justify-content-between w-p100" style="z-index:1;">' +
										'<a id="clearRegra" href="javascript:void(0)" class="btn btn-sm btn-warning fw-bold"><i class="fa-solid fa-trash me-1"></i>Limpar regra</a>' +
										'<a id="addRegra" href="javascript:void(0)" class="btn btn-sm btn-green-manager fw-bold"><i class="fa-solid fa-plus me-1"></i>Adicionar regra</a>' +
									'</div>' +
								'</div>' +
							'</div>' +
						'</div>' +
					'</div>' +
					
					/*INFORMAÇÕES CONDIÇÃO*/
					'<div id="regras" class="tab-pane">' +
						'<div id="condicoes_regras" class="pt-3 pe-3 w-p100" style="overflow-y: auto;">' +
							'<h4 class="text-purple fw-bold">Nenhuma regra adicionada</h4>'+
						'</div>' +
					'</div>' +
				'</div>' +
				'' +
				'' +
			'</div>' +
			'<div id="" class="d-flex justify-content-start py-2" style="z-index:1;">' +
				'<a id="novaCondicaoOk" href="javascript:void(0)" class="btn btn-green-manager2 fw-bold"><i class="fa-solid fa-floppy-disk me-1"></i>Salvar</a>' +
				'<span id="erroNovaCondicao" style="font-size: 13px; font-weight: 500;" class="ms-4 text-danger my-auto"></span>' +
			'</div>' +
			'',
		showCloseButton: true,
		showCancelButton: false,
		showConfirmButton: false,
		focusConfirm: false,
		confirmButtonText: 'Adicionar',
		cancelButtonText: 'Cancelar',
		//scrollbarPadding: false,
		allowOutsideClick: false,
		confirmButtonColor: 'var(--bs-info)',
		willOpen: () => {
			(node != null ? editor.focusNode(id.replace('node-', ''), true, true) : '');
		  
			$('.swal2-container').addClass('p-0');
		  
			replaceSpaceByUnderscore = {
			  onKeyPress: function(val, e, field, options) {
				  $('#id_condicao').val(val.replaceAll(' ', '_'));
				},
				translation: {'Z':{pattern: /[a-z0-9_ ]/, optional: true}}
			};
			$('#id_condicao').mask('ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ', replaceSpaceByUnderscore);
			
			alfanumericUnderline = {
							onKeyPress: function(val, e, field, options) { $(field).val(val.replace(' ', '_')); },
							translation: {'Z': {pattern: /[a-z0-9_ -]/, optional: true}}
						};
			$('#nomeCondicaoDigitar').mask('ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ', alfanumericUnderline);
			
			$('#condicoes_regras').on('click', '.excluir_condicao', function(e){
				excluirCondicaoRegra(node, this);
			});
			
			$('#condicoes_regras').on('click', '.editar_condicao', function(e){
				editarCondicaoRegra(node, this);
			});
		},
		didOpen: () => {
			$('.swal2-popup').css('height', '100vh');
			$('.swal2-html-container').css('height', $('.swal2-popup').height());
			
			
			$('#novaCondicaoRegras').css('height', $('.swal2-popup').height() - $('#novaCondicaoOk').parent().height() - $('#novaCondicaoRegras').position().top);
			$('#novaCondicaoContainer .nav .nav-link').on('click', function(){
				switch($(this).attr("href")){
					case '#condicao':
						$('#novaCondicaoRegras').css('height', $('.swal2-popup').height() - $('#novaCondicaoOk').parent().height() - $('#novaCondicaoRegras').position().top);
						break;
					case '#regras':
						$('#condicoes_regras').css('height', $('.swal2-popup').height() - $('#novaCondicaoOk').parent().height() - $('#condicoes_regras').position().top);
						break;
				}
			})
			
			
		
			$('#nome_condicao').focus();
			$('#nome_condicao').on('keyup', function(){
				$('#id_condicao').val($('#nome_condicao').val().toLowerCase().replaceAll(' ', '_'))
			})
		  
			$('#regraMensagemCondicao').selectpicker();
			$('#regraCanalCondicao').selectpicker();
			$('#regraContatoCondicao').selectpicker();
			$('#regraContatoCondicao').on('change', function(){
				if($('#regraContatoCondicao').selectpicker('val') == ''){
					$('#regraContatoCondicao').selectpicker('val', ' ')
				}
			})
			$('#regraGrupoContato').selectpicker();
			
		  
			$('#regraMensagemValor').tagsinput({
											tagClass: function(item) {
												switch (true) {
													case true   : return 'label label-primary';
												}
											}
										});
							
			$('#addRegra').on('click', function(){
				$('#erroNovaCondicao').html('');
				
				switch(true){
					case (
							$('#regraMensagemCondicao').selectpicker('val') == '' && 
							$('#regraCanalCondicao').selectpicker('val').length == 0 && 
							$('#regraContatoCondicao').selectpicker('val') == '' &&
							$('#regraGrupoContato').selectpicker('val') == '' 
							):
						return showNovaCondicaoErro('Nenhuma regra configurada');
						break;
					case ($('#regraMensagemCondicao').selectpicker('val') != '' && $('#regraMensagemValor').val() == ''):
						return showNovaCondicaoErro('Informe um valor para a Mensagem Recebida');
						break;
				}
				
				var opcoes = [];
				if($('#regraMensagemCondicao').selectpicker('val') != ''){
					//var valores = $('#regraMensagemValor').tagsinput()[0].itemsArray
					opcoes.push({
						nome:'Mensagem',
						tipo:'mensagem',
						condicao:$('#regraMensagemCondicao').selectpicker('val'),
						valores:$('#regraMensagemValor').val().split(','),
						condicaoTexto:$('#regraMensagemCondicao option:selected').text()
					})
				}
				if($('#regraCanalCondicao').selectpicker('val') != ''){
					opcoes.push({
						nome:'Canal',
						tipo:'canal',
						condicao:'',
						valores:$('#regraCanalCondicao').selectpicker('val'),
						condicaoTexto:$('#regraCanalCondicao option:selected').map(function(){return $(this).text();}).get()
					})
				}
				if($('#regraContatoCondicao').selectpicker('val') != ''){
					opcoes.push({
						nome:'Contato',
						tipo:'novo_contato',
						condicao:$('#regraContatoCondicao').selectpicker('val'),
						valores:$('#regraContatoCondicao').selectpicker('val'),
						condicaoTexto:$('#regraContatoCondicao option:selected').text()
					})
				}
				
				if($('#regraGrupoContato').selectpicker('val') != ''){
					regraGrupoContatoTexto = [];
					$('#regraGrupoContato option:selected').each(function(i, selected){ 
						regraGrupoContatoTexto.push($(selected).text()); 
					});
					
					opcoes.push({
						nome:'Grupo',
						tipo:'grupo_contato',
						condicao:$('#regraGrupoContato').selectpicker('val'),
						valores:$('#regraGrupoContato').selectpicker('val'),
						condicaoTexto:regraGrupoContatoTexto.join(', ')
					})
				}
				
				if(editaCondicaoIndex == -1){
					addNovaCondicao(node, opcoes);
				}else{
					alterarCondicaoRegra(node, opcoes);
				}
			})
			
			$('#clearRegra').on('click', function(){
				limparRegraCondicao();
			})
			
			$('#novaCondicaoOk').on('click', function(){
				if($('#nome_condicao').val() == ''){
					showNovaCondicaoErro('Nome condição não pode ser vazio');
					return;
				}
				
				if($('#condicoes_regras .card').length == 0){
					showNovaCondicaoErro('Adicione uma regra');
					return;
				}
				
				var idExiste = false;
				$.each(editor.drawflow.drawflow[editor.module].data, function(i,e) {
					var id = (node == null ? null : node.id);
					if(e.data.id == $('#id_condicao').val() && e.id != id){
						idExiste = true;
					}
				})
				
				if(idExiste){
					showNovaCondicaoErro('Já exista uma mensagem com o ID \''+ $('#id_condicao').val() +'\'.<br> Altere o campo NOME CONDIÇÃO para gerar um novo ID;');
					return;
				}
				
				
				if(node == null){
					var regras = [];
					$.each($('#condicoes_regras .card'), function(i,regra){
						var condicoes = [];
						
						$.each($(regra).find('.condicoes span.regra'), function(i,cond){
							condicoes.push({
											nome:$(cond).find('.nomeCondicao').text(),
											tipo:$(cond).data('tipo'),
											condicao:$(cond).data('condicao'),
											valores:$(cond).data('valores'),
											condicaoTexto:$(cond).find('.condicaoText').text()
											});
						})
						regras.push({'condicoes':condicoes});
					})
					
					var mensagemData = {
									id:$('#id_condicao').val(),
									nome:$('#nome_condicao').val(),  
									regras:regras
								};
				
					editor.addNode($('#nome_condicao').val(), 1,  regras.length+1, ((editor.canvas_x/editor.zoom)*-1)+(300*editor.zoom), ((editor.canvas_y/editor.zoom)*-1)+(200*editor.zoom), '', mensagemData, '' );
				}else{
					var data = editor.getNodeFromId(node.id).data;
					data.id = $('#id_condicao').val()
					data.nome = $('#nome_condicao').val()
					
					$('#node-' + node.id + ' .drawflow_content_node').html(geraNodeHtml({data: data}, false));
					editor.updateNodeDataFromId(node.id, data);
					
					$('#node-' + node.id + ' .opcoes').empty();
					$('#node-' + node.id + ' .opcoes').html(generateOutputs(data));
					editor.updateConnectionNodes('node-' + node.id);
					
					if($('input[type=radio][name=radioBotData]:checked').attr('id') == 'botDataTest'){
						$('#salvarBot').trigger('click');
					}
				}
				
				Swal.close();
			});
			
			if(node != null){
				$.each(node.data.regras, function(i,regra){
					var opcoes = [];
					$.each(regra.condicoes, function(i2, cond){
						if(cond.tipo == 'mensagem'){
							opcoes.push({
								tipo:cond.tipo,
								condicao:cond.condicao,
								valores:cond.valores,
								condicaoTexto:cond.condicao
							})
						}
						if(cond.tipo == 'canal'){
							opcoes.push({
								tipo:cond.tipo,
								condicao:cond.condicao,
								valores:cond.valores,
								condicaoTexto:cond.condicaoTexto
							})
						}
						if(cond.tipo == 'novo_contato'){
							opcoes.push({
								tipo:cond.tipo,
								condicao:cond.condicao,
								valores:cond.valores,
								condicaoTexto:cond.condicaoTexto
							})
						}
						if(cond.tipo == 'grupo_contato'){
							opcoes.push({
								tipo:cond.tipo,
								condicao:cond.condicao,
								valores:cond.valores,
								condicaoTexto:cond.condicaoTexto
							})
						}
					})
					
					addNovaCondicao(null, opcoes)
				})
			}
		},
		preConfirm: (value) => {
		
		}
	}).then((result) => {
		
	})
}

function addNovaCondicao(node, opcoes){
	
	//tipo, condicao, valores, condicaoTexto
	var condicoesText = '';
	
	$(opcoes).each(function(i,o) {
		if(o.tipo == 'mensagem'){
			condicoesText += '<span class="regra col-12" '+
									'data-tipo="mensagem" ' +
									'data-condicao="'+ o.condicao +'"' +
									'data-valores="'+ o.valores +'" '+
									'>- Se "<span class="nomeCondicao text-purple fw-bold">Mensagem recebida</span>" ' +
									'<span class="condicaoText">' + 
											o.condicaoTexto + 
									'</span> ' + 
									'<span class="badge badge-pill badge-md badge-dark text-white px-2 py-1" style="cursor: pointer;" data-bs-toggle="tooltip" data-bs-original-title="'+ o.valores +'"> valores</span>' +
								'</span>';
		}
		
		if(o.tipo == 'canal'){
			condicoesText += '<span class="regra col-12" ' +
									'data-tipo="canal" ' +
									'data-condicao="" ' +
									'data-valores="'+ o.valores +'">- Se ' +
									'<span class="nomeCondicao text-purple text-purple fw-bold">Cana'+(o.condicaoTexto.length > 1 ? 'is' : 'l')+'</span>: ' +
									'<span class="condicaoText">' + 
											o.condicaoTexto.join(',') + 
									'</span> ' + 
							'</span>';
		}
		
		if(o.tipo == 'novo_contato'){
			condicoesText += '<span class="regra col-12" ' +
									'data-tipo="novo_contato" ' +
									'data-condicao="'+ o.condicao +'"' +
									'data-valores="'+ o.valores +'">- Se ' +
									'<span class="nomeCondicao text-purple text-purple fw-bold">Contato</span>: ' +
									'<span class="condicaoText">' + 
											o.condicaoTexto + 
									'</span> ' + 
							'</span>';
		}
		
		if(o.tipo == 'grupo_contato'){
			condicoesText += '<span class="regra col-12" ' +
									'data-tipo="grupo_contato" ' +
									'data-condicao="'+ o.condicao +'"' +
									'data-valores="'+ o.valores +'">- Se ' +
									'<span class="nomeCondicao text-purple text-purple fw-bold">Grupo</span>: ' +
									'<span class="condicaoText">' + 
											o.condicaoTexto + 
									'</span> ' + 
							'</span>';
		}
		
	})
	
	
	if($('#condicoes_regras .card').length == 0){$('#condicoes_regras').empty();}
	$('#condicoes_regras').append(
		'<div class="card mt-2 p-2 bg-manager-gray border-0" style="margin-bottom: 15px !important;">' +
			//'<h6>Regra '+ ($('#condicoes_regras .regra').length+1) +'</h6>' +
			'<div class="row condicoes p-0 text-start">' +
				condicoesText +
			'</div>' +
			'<span class="text-end" style="position:absolute; right: 12px; top: -13px;">' +
				'<a class="btn btn-xs btn-warning rounded-circle editar_condicao text-white shadow" style="cursor: pointer;" ><i class="fa fa-pencil "></i></a>' +
			'</span>' +
			'<span class="text-end" style="position:absolute; right: -11px; top: -13px;">' +
				'<a class="btn btn-xs btn-danger rounded-circle excluir_condicao text-white shadow" style="cursor: pointer;" ><i class="fa fa-times "></i></a>' +
			'</span>' +
		'</div>'
	);
	
	
	if(node != null){
		node = editor.getNodeFromId(node.id);
		var data = node.data;
		var output = node.outputs['output_' + Object.keys(node.outputs).length];
		
		/*REMOVE CONEXAO DO PADRAO*/
		if(output){
			if(output.connections[0]){
				editor.removeSingleConnection(node.id, output.connections[0].node, 'output_' + Object.keys(node.outputs).length, output.connections[0].output)
			}
		}
		
		data.regras.push({condicoes:opcoes})
		
		editor.updateNodeDataFromId(node.id, data);
		
		$('#node-' + node.id + ' .opcoes').empty();
		$('#node-' + node.id + ' .opcoes').html(generateOutputs(data));
		
		editor.addNodeOutput(node.id);
		editor.updateConnectionNodes('node-' + node.id);
		
		node = editor.getNodeFromId(node.id);
	
		/*READICIONA CONEXAO DO PADRAO*/
		if(output){
			if(output.connections[0]){
				editor.addConnection(node.id, output.connections[0].node, 'output_' + Object.keys(node.outputs).length, output.connections[0].output)
			}
		}
		
		if($('input[type=radio][name=radioBotData]:checked').attr('id') == 'botDataTest'){
			$('#salvarBot').trigger('click');
		}
	}
	
	initilizeTooltips();
	limparRegraCondicao();
}

function showNovaCondicaoErro(erro){
	$('#erroNovaCondicao').html('<i class="fa fa-exclamation-circle"></i>&nbsp;' + erro);
	$('#erroNovaCondicao').addClass('animated shakeX').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
		$('#erroNovaCondicao').removeClass('animated shakeX');
	});
	return false;
}

function limparRegraCondicao(){
	$('#regraMensagemCondicao').selectpicker('val', '');
	$('#regraMensagemValor').tagsinput('removeAll');
	$('#regraCanalCondicao').selectpicker('val', '');
	$('#regraContatoCondicao').selectpicker('val', ' ');
	$('#regraGrupoContato').selectpicker('val', ' ');
	$('#erroNovaCondicao').html('');
	$('#addRegra').text('Adicionar regra')
}

function excluirCondicaoRegra(node, elem){
	var target = elem;
	var opcaoIndex = -1;
	$($('#condicoes_regras .excluir_condicao')).each(function(i,el) {
		if(el == target){
			opcaoIndex = i + 1;
		}
	})
	
	$(target).parent().parent().remove();
	if($('#condicoes_regras').text() == ''){
		$('#condicoes_regras').html('<h4>Nenhuma regra adicionada</h4>');
	}
	
	if(node != null){
		var data = node.data;
		var outputs = node.outputs;
		var output = node.outputs['output_' + opcaoIndex];
		
		editor.removeNodeOutput(node.id, 'output_' + opcaoIndex);
		$('#node-' + node.id + ' .opcoes .card.opcao_' + opcaoIndex).remove();
		
		data.regras.splice(opcaoIndex-1,1);
		delete outputs['output_' + opcaoIndex];
		data.outputs = outputs;
		
		editor.updateNodeDataFromId(node.id, data);
		
		$('#node-' + node.id + ' .opcoes').empty();
		$('#node-' + node.id + ' .opcoes').html(generateOutputs(data));
		editor.updateConnectionNodes('node-' + node.id);
		
		if($('input[type=radio][name=radioBotData]:checked').attr('id') == 'botDataTest'){
			$('#salvarBot').trigger('click');
		}
	}
}

var editaCondicaoIndex = -1;
function editarCondicaoRegra(node, elem){
	var target = elem;
	var opcaoIndex = -1;
	$($('#condicoes_regras .editar_condicao')).each(function(i,el) {
		
		if(el == target){
			opcaoIndex = i;
			editaCondicaoIndex = opcaoIndex;
		}
	})
	var regra = $('#condicoes_regras .card')[opcaoIndex] 

	limparRegraCondicao();

	$.each($(regra).find('.condicoes .regra'), function(i,cond){
		if($(cond).data('tipo') == 'mensagem'){
			$('#regraMensagemCondicao').selectpicker('val', $(cond).data('condicao').toString())
			var arrValores = $(cond).data('valores').split(',')
			$.each(arrValores, function(i,v){
				$('#regraMensagemValor').tagsinput('add', v); 
			})
		}
		if($(cond).data('tipo') == 'canal'){
			$('#regraCanalCondicao').selectpicker('val', $(cond).data('valores').split(','))
		}
		if($(cond).data('tipo') == 'novo_contato'){
			$('#regraContatoCondicao').selectpicker('val', $(cond).data('valores'))
		}
		if($(cond).data('tipo') == 'grupo_contato'){
			
			if(typeof($(cond).data('valores')) == 'number'){
				$('#regraGrupoContato').selectpicker('val', [$(cond).data('valores').toString()])
			}else{
				console.log($(cond).data('valores'))
				$('#regraGrupoContato').selectpicker('val', $(cond).data('valores').split(','))
			}
			
		}
	})
	
	$('[href="#condicao"]').tab('show');
	$('#addRegra').text('Editar regra')
	
}

function alterarCondicaoRegra(node, opcoes){
	var regra = $('#condicoes_regras .card')[editaCondicaoIndex];
	var condicoes = $(regra).find('.condicoes');
	
	var condicoesText = '';
	var opcao = [];
	$(opcoes).each(function(i,o) {
		if(o.tipo == 'mensagem'){
			condicoesText += '<span class="regra col-12" '+
									'data-tipo="mensagem" ' +
									'data-condicao="'+ o.condicao +'"' +
									'data-valores="'+ o.valores +'" '+
									'>- Se "<span class="nomeCondicao">Mensagem recebida</span>" ' +
									'<span class="condicaoText">' + 
											o.condicaoTexto + 
									'</span> ' + 
									'<span class="badge badge-pill badge-md badge-dark text-white px-2 py-1" style="cursor: pointer;" data-bs-toggle="tooltip" data-bs-original-title="'+ o.valores +'"> valores</span>' +
								'</span>';
		}
		
		if(o.tipo == 'canal'){
			condicoesText += '<span class="regra col-12" ' +
									'data-tipo="canal" ' +
									'data-condicao="" ' +
									'data-valores="'+ o.valores +'">- Se ' +
									'<span class="nomeCondicao">Cana'+(o.condicaoTexto.length > 1 ? 'is' : 'l')+'</span>: ' +
									'<span class="condicaoText">' + 
											o.condicaoTexto.join(',') + 
									'</span> ' + 
							'</span>';
		}
		
		if(o.tipo == 'novo_contato'){
			condicoesText += '<span class="regra col-12" ' +
									'data-tipo="novo_contato" ' +
									'data-condicao="'+ o.condicao +'"' +
									'data-valores="'+ o.valores +'">- Se ' +
									'<span class="nomeCondicao">Contato</span>: ' +
									'<span class="condicaoText">' + 
											o.condicaoTexto + 
									'</span> ' + 
							'</span>';
		}
		
		if(o.tipo == 'grupo_contato'){
			condicoesText += '<span class="regra col-12" ' +
									'data-tipo="grupo_contato" ' +
									'data-condicao="'+ o.condicao +'"' +
									'data-valores="'+ o.valores +'">- Se ' +
									'<span class="nomeCondicao">Grupo</span>: ' +
									'<span class="condicaoText">' + 
											o.condicaoTexto + 
									'</span> ' + 
							'</span>';
		}
		
		if(o.tipo == 'mensagem'){
			opcao.push({
				nome:'Mensagem recebida',
				tipo:o.tipo,
				condicao:o.condicao,
				valores:o.valores.join(),
				condicaoTexto:o.condicao
			})
		}
		if(o.tipo == 'canal'){
			opcao.push({
				nome:'Canal',
				tipo:o.tipo,
				condicao:o.condicao,
				valores:o.valores.join(),
				condicaoTexto:o.valores.join()
			})
		}
		if(o.tipo == 'novo_contato'){
			opcao.push({
				nome:'Contato',
				tipo:o.tipo,
				condicao:o.condicao,
				valores:o.valores,
				condicaoTexto:o.condicaoTexto
			})
		}
		if(o.tipo == 'grupo_contato'){
			opcao.push({
				nome:'Grupo',
				tipo:o.tipo,
				condicao:o.condicao,
				valores:o.valores,
				condicaoTexto:o.condicaoTexto
			})
		}
	})
	
	$(condicoes).empty();
	$(condicoes).append(condicoesText);
	
	if(node != null){
		node = editor.getNodeFromId(node.id)
		var data = node.data;
		var outputs = node.outputs;
		
		
		data.regras[editaCondicaoIndex].condicoes = opcao;
		
		editor.updateNodeDataFromId(node.id, data);
		
		$('#node-' + node.id + ' .opcoes').empty();
		$('#node-' + node.id + ' .opcoes').html(generateOutputs(data));
		editor.updateConnectionNodes('node-' + node.id);
		
		initilizeTooltips();
		if($('input[type=radio][name=radioBotData]:checked').attr('id') == 'botDataTest'){
			$('#salvarBot').trigger('click');
		}
		
		initilizeTooltips();
		limparRegraCondicao();
		
		editaCondicaoIndex = -1;
	}
}
/****************************CONDICAO**************************************************/


$('#adicionar_resposta').on('click', function(){
	adicionarEditarResposta(null)
})

function adicionarEditarResposta(id){
	if(editor == null){
		Swal.fire({
			title: 'Nenhum número cadastrado',
			text: 'Cadastre um número para poder usar as mensagens automáticas',
			icon: 'warning',
			confirmButtonColor: 'var(--bs-info)',
		});
		return;
	}
	
	let width = '100vw';
	if($(window).width() > 990){width = ($(window).width()/2.5);}
	
	let node = null;
	let opcoes = null;
	let opcoesTermos = null;
	let opcoesCondicoes = null;
	let opcoesValores = null;
	let tipoOpcao = null;
	if(id != null){
		id = id.replace('node-', '');
		node = editor.getNodeFromId(id);
		
		opcoes = node.data.opcoes;
		opcoesTermos = (node.data.opcoesTermos ? node.data.opcoesTermos : null);
		opcoesCondicoes = (node.data.opcoesCondicoes ? node.data.opcoesCondicoes : null);
		opcoesTextCondicoes = (node.data.opcoesTextCondicoes ? node.data.opcoesTextCondicoes : null);
		opcoesValores = (node.data.opcoesValores ? node.data.opcoesValores : null);
		tipoOpcao = (node.data.tipoOpcao ? node.data.tipoOpcao : null);
	}
	
	
	/*LISTA SELECT MENSAGENS*/
	let mensagensEncaminhar = '';
	$.each(editor.drawflow.drawflow[editor.module].data, function(i,e) { 
		if(e.name != 'nova_mensagem' && !e.data.regras){
			mensagensEncaminhar = mensagensEncaminhar + 
			'<option value="'+ e.id +'" data-id="'+ e.data.id +'" class="" style="letter-spacing: 1px !important;">'+ (e.data.nome ? e.data.nome + '('+ e.data.id +')' : e.id + ' - ' + e.data.name) +'</option>';
		}
	})
	/*LISTA SELECT MENSAGENS*/
	

	
	
	Swal.fire({
	  position: 'top-end',
	  width: width,
	  showClass: {
		popup: 'animated fadeInRight faster'
	  },
	  hideClass: {
		popup: 'animated fadeOutRight faster'
	  },
	  grow: 'column',
	  //title: 'Nova Resposta',
	  html:
		'<h4 class="text-purple fw-bold">Mensagem</h4>' +
		'<div id="novaMensagemContainer" class="" style="">' +
			'<ul id="" class="nav nav-pills mb-0">' +
				'<li class=""> <a id="novaMensagemMsgTab" href="#mensagem" class="fw-bold text-purple nav-link active" data-bs-toggle="tab" aria-expanded="false" style="font-size: 14px !important;">Mensagem</a> </li>' +
				'<li class=""> <a id="novaMensagemSaidasTab" href="#saidas" class="fw-bold text-purple nav-link" data-bs-toggle="tab" aria-expanded="false" style="font-size: 14px !important;">Saída</a> </li>' +
				'<li class=""> <a id="novaMensagemAcoesTab" href="#classificar" class="fw-bold text-purple nav-link" data-bs-toggle="tab" aria-expanded="false" style="font-size: 14px !important;">Classificar</a> </li>' +
			'</ul>' +
			'<hr class="mt-1 mb-1">'+
			'<div class="tab-content" style="height: 95%;">' +
				/*INFORMAÇÕES MENSAGEM*/
				'<div id="mensagem" class="tab-pane active" style="">' +
					'<div class="row" style="">' +
						'<div class="col-12 col-lg-6 text-start mt-2">' +
							'<h6 class="mb-1 fw-bold text-purple">Nome Mensagem</h6>' +
							'<input id="nome_mensagem" placeholder="Nome mensagem" class="form-control border-0 bg-manager-gray" value="'+ (node ? node.data.nome: '') +'"/>' +
						'</div>' +
						'<div class="col-12 col-lg-6 text-start mt-2">' +
							'<h6 class="mb-1 fw-bold text-purple">ID Mensagem</h6>' +
							'<input type="text" id="id_mensagem" placeholder="Gerado automaticamente" class="form-control border-0" value="'+ (node ? node.data.id: '') +'" readonly/>' +
						'</div>' +
						/*'<div class="col-12 text-left mt-3" style="">' +
							'<h6 class="mb-1 font-weight-bold">Mensagem</h6>' +
							'<textarea id="texto_mensagem" placeholder="Mensagem" class="form-control" >'+ (node ? node.data.mensagem: '') +'</textarea>' +
						'</div>' +*/
						'<div class="col-12 mt-2" style="">' +
							'<button id="novaMensagemAddMsg" type="button" class="waves-effect waves-light btn btn-sm btn-rounded btn-green-manager fw-bold mb-5 mt-1"><i class="fa fa-plus-circle"></i> Adicionar mensagem</button>' +
							'<div id="novaRespostaMensagens" class="bg-manager-gray p-3 rounded col-12" style="overflow-y: auto;">' +
								
							'</div>' +
						'</div>' +
					'</div>' +
				'</div>' +
				
				/*INFORMAÇÕES SAÍDAS*/
				'<div id="saidas" class="tab-pane">' +
					'<div id="" class="row" style="">' +
						'<div id="novaMensagemOpcoesRadios" class="text-center mt-2">' +
							'<input name="radiosTipoOpcao" type="radio" id="tipoOpcaoEscolher" checked="">' +
							'<label class="me-2 fw-bold text-purple" for="tipoOpcaoEscolher">Escolher opção</label>' +
							'<input name="radiosTipoOpcao" type="radio" id="tipoOpcaoDigitar">' +
							'<label class="me-2 text-left fw-bold text-purple" for="tipoOpcaoDigitar">Digitar informação</label>' +
						'</div>' +
						/*ESCOLHER OPÇÕES*/
						'<div id="novaMensagemOpcoes" class="mt-0 mb-3" >' +
							'<div class="col-12 text-left mt-3">' +
								'<h5 class="fw-bold text-purple">Solicitar que escolha uma opção</h5>' +
							'</div>' +
							'<div class="col-12 text-start mt-3">' +
								'<h6 class="fw-bold text-purple">Adicionar Opção</h6>' +
							'</div>' +
								
							'<div class="row g-1">' +
								'<div class="col-12 text-left">' +
									'<div id="termosDiv" class="mt-lg-1">' +
										'<input class="border-0 bg-manager-gray" id="termos_opcao" type="text" placeholder="Termos" data-role="tagsinput"/>' +
									'</div>' +
								'</div>' +
								
								'<div class="col-12 mt-3 text-left">' +
									'<div class="input-group">' +
										'<textarea id="nova_opcao" type="text" class="form-control form-control-sm mt-1 bg-manager-gray border-0" placeholder="Texto" style="height: 32px;min-height: 32px;"></textarea>' +
										'<button id="editar_opcao" class="btn btn-green-manager2 btn-sm mt-1 d-none" type="button" style="border-top-right-radius: 5px; border-bottom-right-radius: 5px;"><i class="fa fa-pencil"></i></button>' +
										'<button id="adicionar_opcao" class="btn btn-green-manager2 btn-sm mt-1" type="button"><i class="fa fa-plus-circle"></i></button>' +
									'</div>' +
								'</div>' +
							'</div>' +

							'<div class="col-12 text-left mt-3">' +
								'<h6 class="mb-1 fw-bold text-purple">Opções</h6>' +
							'</div>' +
							'<div class="col-12 form-group mt-1 mb-0">' +
								'<input type="checkbox" id="enviaListaOpcao" class="filled-in chk-col-primary">' +
								'<label for="enviaListaOpcao">Enviar lista de opções</label>' +
							'</div>' +
							'<div id="showOpcoes" class="col-12 text-left text-purple fw-bold p-3" style="overflow-y: auto; min-height: 50px;">' +
								'Nenhuma opção adicionada'  +
							'</div>' +
						'</div>' +
						
						/*DIGITAR TEXTO*/
						'<div id="novaMensagemDigitar" class="mt-0 mb-3">' +
							'<div class="col-12 text-start mt-3">' +
								'<h5 class="fw-bold text-purple" >' +
									'Solicitar que digite uma informação (Ex: cpf, email)' +
									'<i class="fa fa-info-circle ms-2" data-bs-toggle="tooltip" data-bs-original-title="O valor digitado será salvo em uma variável definida pelo campo \'Nome variável\'. Esse valor podera ser acessado utilizando o nome entre chaves. Ex: {{ '{{nome_variavel}}'}}"></i>' +
								'</h5>' +
							'</div>' +
							
							/*'<div class="row mt-3">' +
								'<div class="justify-content-center">' +
									'<div id="nova_condicao" class="btn b-dashed b-2 border-dark text-center text-dark w-200 p-2" style="cursor: pointer; text-decoration: none;"><h6 class="mb-0"><i class="fa fa-plus-circle"></i> Nova condição</h6></div>' +
								'</div>' +
							'</div>' +*/
							
							'<div class="card px-2 py-1">' +
								'<div class="row mb-3">' +
									'<div class="col-6 mt-1 text-start">' +
										'<h6 class="mb-0 fw-bold text-purple"><i class="fa-solid fa-clipboard-list me-1"></i>Se</h6>' +
										'<input id="nomeInformacaoDigitar" placeholder="Nome variável" class="form-control form-control-sm bg-manager-gray border-0" />' +
									'</div>' +
									'<div class="col-6 mt-1 text-start">' +
										'<h6 class="mb-0 fw-bold text-purple"><i class="fa-solid fa-signs-post me-1"></i>Condição</h6>' +
										'<select id="condicaoInformacaoDigitar" class="selectpicker form-control form-control-sm" title="Selecionar condição" data-container="body">' +
											'<option value="qualquer_valor" class="" style="letter-spacing: 1px !important;">Qualquer valor</option>' +
											'<option value="igual" class="" style="letter-spacing: 1px !important;">Igual a</option>' +
											'<option value="diferente" class="" style="letter-spacing: 1px !important;">Diferente de</option>' +
											'<option value="contem" class="" style="letter-spacing: 1px !important;">Contém</option>' +
											'<option value="maior" class="" style="letter-spacing: 1px !important;">Maior que</option>' +
											'<option value="menor" class="" style="letter-spacing: 1px !important;">Menor que</option>' +
											'<option value="regex" class="" style="letter-spacing: 1px !important;">Corresponde à Regex</option>' +
										'</select>' +
									'</div>' +
								'</div>' +
								'<div class="col-12 mb-2">' +
									'<div class="row g-1">' +
										'<div class="col-11 text-start">' +
											'<h6 class="mb-0 fw-bold text-purple"><i class="fa-solid fa-equals me-1"></i>Valor condição</h6>' +
											'<input id="valorInformacaoDigitar" placeholder="Valor" class="form-control form-control-sm" data-role="tagsinput" style="height: 30px;"/>' +
										'</div>' +
										'<div class="col-1 d-flex align-items-end flex-column" style="">' +
											'<a id="addCondicao" class="btn btn-xs btn-green-manager2 btn-circle text-white shadow mt-auto" style="cursor: pointer;" ><i class="fa fa-check"></i></a>' +
											'<a id="editarCondicao" class="btn btn-xs btn-warning btn-circle text-white shadow mt-auto d-none" style="cursor: pointer;" ><i class="fa fa-pencil"></i></a>' +
										'</div>' +
									'</div>' +
								'</div>' +
							'</div>' +
							
							'<h6 class="mb-1 mt-3 fw-bold text-purple">Condições</h6>' +
							'<div id="condicoes" class="p-3 fw-bold text-purple" style="overflow-y: auto;">' +
								'Nenhuma condição adicionada' +
							'</div>' +
						'</div>' +
						
						
						'<div id="novaMensagemInvalidoAction" class="pb-4">' +
							'<div id="novaMensagemOpcoesInvalido" class="col-12 text-start">' +
								'<hr class="mb-3 mt-3">' +
								'<h5 class="fw-bold text-purple" for="selectValidaOpcoes"><i class="fa-solid fa-triangle-exclamation me-1"></i>Ação caso opção/condição inválida</h5>' +
								'<select id="selectValidaOpcoes" class="selectpicker col-12" style="">' +
									'<option value="padrao" class="" style="letter-spacing: 1px !important;">Repetir mensagem (Encerrar chamado após 3 tentativas)</option>' +
									'<option value="encaminhar_mensagem" class="" style="letter-spacing: 1px !important;">Encaminha para mensagem</option>' +
								'</select>' +
							'</div>' +
							'<div id="selectMensagemEncaminhaDiv" class="col-12 text-left mt-3">' +
								'<label class="" for="selectMensagemEncaminha">Encaminhar para:</label>' +
								'<select id="selectMensagemEncaminha" class="selectpicker col-12" title="Selecione uma mensagem" style="">' +
									mensagensEncaminhar +
								'</select>' +
							'</div>' +
						'</div>' +
					'</div>' +
				'</div>' +
				'<div id="classificar" class="tab-pane">' +
					'<div class="row">' +
						'<div class="col-12 text-start mt-3">' +
							'<label class="mb-2 fw-bold text-purple" for="selectTags"><i class="fa-solid fa-tags me-1"></i>Classificar conversa com uma Tag</label>' +
							'<select id="selectTags" class="selectpicker col-12" title="Selecione uma tag" data-live-search="true" multiple data-selected-text-format="count > 2" data-count-selected-text= "{0} tags selecionadas" multiple>' +
								{% for t in tags %}
								'<option value="{{t.idTags}}" class="text-dark" style="letter-spacing: 1px !important;" data-content=\'<i class="fa-solid fa-tag" style="color: {{t.cor}}"></i> {{t.nome}}\'>{{t.nome}}</option>' +
								{% endfor %}
							'</select>' +
						'</div>'+
						'<div class="col-12 text-start mt-3">' +
							'<label class="mb-1 fw-bold text-purple"><i class="fa-solid fa-users me-1"></i>Adicionar contato ao grupo</label>' +
							'<select id="selectGrupo" class="selectpicker col-12" title="Selecionar grupo">' +
								{% for g in grupos %}
								'<option value="{{g.idGrupos}}" class="" style="letter-spacing: 1px !important;">{{g.nome}}</option>' +
								{% endfor %}
							'</select>' +
						'</div>'+
					'</div>' +
				'</div>' +
			'</div>' +
			'' +
			'' +
		'</div>' +
		'<div id="" class="d-flex justify-content-start py-2" style="z-index:1;">' +
			'<a id="novaMensagemOk" href="javascript:void(0)" class="btn btn-green-manager2 fw-bold w-100"><i class="fa-solid fa-floppy-disk me-1"></i>Salvar</a>' +
			'<span id="erroNovaMensagem" style="font-size: 13px; font-weight: 500;" class="ms-4 text-danger my-auto"></span>' +
		'</div>' +
		'',
	  showCloseButton: true,
	  showCancelButton: false,
	  showConfirmButton: false,
	  focusConfirm: false,
	  confirmButtonText: 'Adicionar',
	  cancelButtonText: 'Cancelar',
	  //scrollbarPadding: false,
	  allowOutsideClick: false,
	  confirmButtonColor: 'var(--bs-info)',
	  willOpen: () => {
			(node != null ? editor.focusNode(id, true, true) : '');
		  
			$('.swal2-container').addClass('p-0');
		  
			replaceSpaceByUnderscore = {
			  onKeyPress: function(val, e, field, options) {
				  $('#id_mensagem').val(val.replaceAll(' ', '_'));
				},
				translation: {'Z':{pattern: /[a-z0-9_ ]/, optional: true}}
			};
			$('#id_mensagem').mask('ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ', replaceSpaceByUnderscore);
			
			alfanumericUnderline = {
							onKeyPress: function(val, e, field, options) { $(field).val(val.replace(' ', '_')); },
							translation: {'Z': {pattern: /[a-z0-9_ -]/, optional: true}}
						};
			$('#nomeInformacaoDigitar').mask('ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ', alfanumericUnderline);
			$('#valorInformacaoDigitar').tagsinput({
											tagClass: function(item) {
												switch (true) {
													case true   : return 'label label-primary';
												}
											}
										});
			
			$('#selectTags').selectpicker({actionsBox:true, deselectAllText: 'Desmarcar todos'});
			$('#selectTags').on('show.bs.select', function () {
				$('.swal2-actions').css('z-index', '0');
				$(this).parent().find('.bs-select-all').addClass('d-none');
				$(this).parent().find('.bs-deselect-all').css('font-size', '14px');
			});
			$('#selectTags').on('hidden.bs.select', function () {
				$('.swal2-actions').css('z-index', '');
			});
			$('#selectGrupo').on('hidden.bs.select', function () {
				$('.swal2-actions').css('z-index', '');
			});
			
			
			/*CARREGA INFORMAÇÕES EDITAR NODE*/
			if(node != null){
				/*LISTA MENSAGENS PARA EDITAR*/
				if(typeof(node.data.mensagem) == "object"){
					$(node.data.mensagem).each(function(i,msg){
						addMensagem(msg);
					})
				}else{
					addMensagem(node.data.mensagem);
				}
				/*LISTA MENSAGENS PARA EDITAR*/
				
				if(tipoOpcao == "tipoOpcaoEscolher" || !tipoOpcao){
					$('#showOpcoes').empty();
					$(opcoes).each(function(i,e){
						(opcoesTermos == null ? opcoesTermos = [] : '');
						addOpcaoMensagem((opcoesTermos.length == 0 ? '' : opcoesTermos[i]), e); //LISTA OPÇÕES ESCOLHER 
					})
				}
				
				if(tipoOpcao == "tipoOpcaoDigitar"){
					$('#condicoes').empty();
					$(opcoes).each(function(i,e){
						addCondicao(null, e, opcoesCondicoes[i], opcoesTextCondicoes[i], opcoesValores[i]);
					})
				}
				
				$('#selectTags').selectpicker('val', node.data.selectedTags);
				$('#selectGrupo').selectpicker('val', node.data.selectedGrupo);
				
				initilizeTooltips();
			}
			/*CARREGA INFORMAÇÕES EDITAR NODE*/
			
			
			/*MENSAGENS*/
			$('#novaMensagemAddMsg').on('click', function(){
				$('#novaRespostaMensagens .mensagemInput').each(function(i,e) {
					if(!$(e).hasClass('d-none')){
						$(e).parent().find('.mensagemInputConfirmar').trigger('click');
					}
				})
				addMensagem(null);						
			})
			
			$('#novaRespostaMensagens').on('click', '.mensagemDelete', function(){
				var img = $(this).parent().parent().find('.mensagemImg');
				if($(img).attr('src') != ''){
					elem = $(this).parent().parent().find('.mensagemImgDelete');
					deletaImagemMensagem(elem);
				}
				
				$(this).parent().parent().remove();
			})
				
			$('#novaRespostaMensagens').on('click', '.mensagemText', function(){
				$(this).addClass('d-none');
				$(this).parent().find('.mensagemInput').removeClass('d-none');
				$(this).parent().find('.mensagemInputButtons').removeClass('d-none');
				$(this).parent().find('.mensagemInput').val($(this).text())
				$(this).parent().find('.mensagemInput').focus();
			})
			
			$('#novaRespostaMensagens').on('click', '.mensagemInputConfirmar', function(){
				$(this).parent().parent().find('.mensagemText').removeClass('d-none');
				$(this).parent().parent().find('.mensagemInput').addClass('d-none');
				$(this).parent().addClass('d-none');
				$(this).parent().parent().find('.mensagemText').text($(this).parent().parent().find('.mensagemInput').val());
			})
			
			$('#novaRespostaMensagens').on('click', '.mensagemInputCancel', function(){
				$(this).parent().parent().find('.mensagemText').removeClass('d-none');
				$(this).parent().parent().find('.mensagemInput').addClass('d-none');
				$(this).parent().addClass('d-none');
			})
			
			$('#novaRespostaMensagens').on('click', '.mensagemAddImg', function(){
				var elem = $(this);
				var input = $('<input/>').attr('type', 'file').attr('id', 'uploadMensagemImg').attr('class', 'd-none');
				$(this).parent().append(input);
				$('#uploadMensagemImg').trigger('click');
				
				jQuery(input).on('change', function(){
					var files = jQuery(input).prop("files");

					for (i = 0; i < files.length; i++) {
						Swal.showLoading();
						
						let reader = new FileReader();
						reader.onload = function(event) {
						}
						let filename = this.files[i].name;
						if(this.files[i]['type'].includes('image')){
							if(!filename.split('.')[1]){
								showNovaMsgErro('Imagem inválida, não foi possível processar a imagem');
								Swal.hideLoading();
								$(input).remove();
								return;
							}else{
								reader.readAsDataURL(this.files[i]);
								reader.onloadend = function(event) {
									loadImage(event, filename);
								}
							}
						}else{
							reader.readAsDataURL(this.files[i]);
							reader.onloadend = function(event) {
								loadFile(event, filename);
							}
						}
					}
				});
				
				function loadImage(event, name){
					var input = document.getElementById("uploadMensagemImg");
					var image = new Image();
					image.src = event.target.result;
					image.name = name;
					
					let mimeType = image.src.match(/[^:]\w+\/[\w-+\d.]+(?=;|,)/)[0];
					image.type = mimeType;
					
					if(event.loaded > 10485760){
						showNovaMsgErro('Imagem não pode ter mais que 10MB');
						Swal.hideLoading();
						$(input).remove();
						return;
					}
					
					image.onload = function(e){
						let formData = new FormData();
						formData.append('image', input.files[0]);
						
						fetch('enviaImagemMensagem', {
							method: 'POST',
							//headers: {'Content-Type': 'application/x-www-form-urlencoded'},
							body: formData
						})
						.then(function(res){ return res.json(); })
						.then(function(res){
							if(res.Success){
								$(elem).parent().parent().find('.mensagemImg').attr('src', res.Success);
								$(elem).parent().parent().find('.mensagemImg').removeClass('d-none');
								$(elem).parent().parent().find('.mensagemImgDelete').removeClass('d-none');
								
								$(elem).parent().parent().find('.mensagemInputButtons .mensagemAddImg').attr('disabled', true);
								
								Swal.hideLoading();
							}else{
								showNovaMsgErro(res.Erro);
							}
							
							$(input).remove();
						})
					}
					image.onerror = function(e) {
						$(input).remove();
						showNovaMsgErro('Imagem inválida, verifique o arquivo e tente novamente');
						Swal.hideLoading();
						return;
					}
				}
				
				function loadFile(event, name){
					var input = document.getElementById("uploadMensagemImg");
					
					var file = new File([""], name);
					file.src = event.target.result;
					file.name = name;
					
					let mimeType = file.src.match(/[^:]\w+\/[\w-+\d.]+(?=;|,)/)[0];
					file.type = mimeType;
					
					if(event.loaded > 10485760){
						showNovaMsgErro('Arquivo não pode ter mais que 10MB');
						Swal.hideLoading();
						$(input).remove();
						return;
					}
					
					let formData = new FormData();
					formData.append('file', input.files[0]);
					
					fetch('enviaFileMensagem', {
						method: 'POST',
						//headers: {'Content-Type': 'application/x-www-form-urlencoded'},
						body: formData
					})
					.then(function(res){ return res.json(); })
					.then(function(res){
						if(res.Success){
							$(elem).parent().parent().find('.mensagemFile').attr('data-src', res.Success);
							$(elem).parent().parent().find('.mensagemFile').removeClass('d-none');
							$(elem).parent().parent().find('.mensagemFileName').text(name);
							$(elem).parent().parent().find('.mensagemFileDelete').removeClass('d-none');
							
							$(elem).parent().parent().find('.mensagemInputButtons .mensagemAddImg').attr('disabled', true);
							
							Swal.hideLoading();
						}else{
							showNovaMsgErro(res.Erro);
						}
						
						$(input).remove();
					})					
				}
			})
			
			$('#novaRespostaMensagens').on('click', '.mensagemImgDelete', function(){
				var elem = $(this);
				deletaImagemMensagem(elem);
			})
			
			function deletaImagemMensagem(elem){
				$(elem).parent().parent().find('.mensagemImg').attr('src', '');
				$(elem).parent().parent().find('.mensagemImg').addClass('d-none');
				$(elem).parent().parent().find('.mensagemImgDelete').addClass('d-none');
				
				$(elem).parent().parent().parent().parent().find('.mensagemInputButtons .mensagemAddImg').attr('disabled', false);
				Swal.hideLoading();
			}
			
			$('#novaRespostaMensagens').on('click', '.mensagemFileDelete', function(){
				var elem = $(this);
				deletaFileMensagem(elem);
			})
			
			function deletaFileMensagem(elem){
				$(elem).parent().parent().find('.mensagemFile').attr('src', '');
				$(elem).parent().parent().find('.mensagemFile').addClass('d-none');
				$(elem).parent().parent().find('.mensagemFileName').text('');
				$(elem).parent().parent().find('.mensagemFileDelete').addClass('d-none');
				
				$(elem).parent().parent().parent().parent().find('.mensagemInputButtons .mensagemAddImg').attr('disabled', false);
				Swal.hideLoading();
			}
			
			
			function showNovaMsgErro(erro){
				$('#erroNovaMensagem').html('<i class="fa fa-exclamation-circle"></i>&nbsp;' + erro);
				$('#erroNovaMensagem').addClass('animated shakeX').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
					$('#erroNovaMensagem').removeClass('animated shakeX');
				});
			}
			
			/*MENSAGENS END*/
	  },
	  didOpen: () => {
		//$('.swal2-html-container').css('position', 'fixed');
		//$('.swal2-html-container').css('height', $('.swal2-popup').height());
		//$('.swal2-popup').css('overflow-y', 'auto');
		//$('#novaRespostaMensagens').css('height', $('.swal2-popup').height() - $('#novaMensagemOk').parent().height() - $('#novaRespostaMensagens').position().top - $('#novaMensagemContainer').position().top);
		
		$('.swal2-popup').css('height', '100vh');
		$('.swal2-html-container').css('height', $('.swal2-popup').height());
			
		$('#novaRespostaMensagens').css('height', $('.swal2-popup').height() - $('#novaMensagemOk').parent().height() - $('#novaRespostaMensagens').position().top);
			
		
		
		$('#nome_mensagem').on('keyup', function(){
			$('#id_mensagem').val($('#nome_mensagem').val().toLowerCase().replaceAll(' ', '_'))
		})
		
		$('#novaMensagemSaidasTab').on('click', function(){
			//$('#novaMensagemOpcoes').css('height', $('.swal2-popup').height() - $('#novaMensagemOk').height() - $('#novaMensagemOpcoes').position().top -  $('#novaMensagemContainer').position().top - $('#novaMensagemOpcoesRadios').height() - $('#novaMensagemInvalidoAction').height());
			$('#showOpcoes').css('height', $('.swal2-popup').height() - $('#showOpcoes').offset().top - parseInt($("#novaMensagemInvalidoAction").css("height"),10) - parseInt($("#novaMensagemOk").parent().css("height"),10));
			$('#condicoes').css('height', $('.swal2-popup').height() - $('#condicoes').offset().top - parseInt($("#novaMensagemInvalidoAction").css("height"),10) - parseInt($("#novaMensagemOk").parent().css("height"),10));
			
			if($('input[type=radio][name=radiosTipoOpcao][id=tipoOpcaoDigitar]').is(':checked')){
				//$('.bootstrap-tagsinput').css('max-width', $('.bootstrap-tagsinput').parent().find('h6').width() );
			}
		})
		
		initilizeTooltips();
		$('.swal2-close').blur()
		
		
		$('input[type=radio][name=radiosTipoOpcao]').on('change', function() {
			var tipoOpcao = $(this).attr('id');
			if($(this).attr('id') == 'tipoOpcaoDigitar'){
				$('#novaMensagemOpcoes').hide();
				$('#novaMensagemDigitar').show();
				
				if($('input[type=radio][name=radiosTipoOpcao][id=tipoOpcaoDigitar]').is(':checked')){
					//$('.bootstrap-tagsinput').css('max-width', $('.bootstrap-tagsinput').parent().find('h6').width());
				}
			}else{
				$('#novaMensagemOpcoes').show();
				$('#novaMensagemDigitar').hide();
			}
			
			$('#novaMensagemSaidasTab').trigger('click');
			
			if(node != null){
				var data = node.data;
				data.tipoOpcao = tipoOpcao
				
				editor.updateNodeDataFromId(node.id, data);
				
				$('#node-' + node.id + ' .opcoes').empty();
				$('#node-' + node.id + ' .opcoes').html(generateOutputs(data));
				editor.updateConnectionNodes('node-' + node.id);
				
				if($('input[type=radio][name=radioBotData]:checked').attr('id') == 'botDataTest'){
					$('#salvarBot').trigger('click');
				}
			}
		})
		
		if(node != null){
			switch(true){
				case tipoOpcao == 'tipoOpcaoEscolher' || !tipoOpcao:
					$($('input[type=radio][name=radiosTipoOpcao]')[0]).trigger('click')
					$('#novaMensagemOpcoes').show();
					$('#novaMensagemDigitar').hide();
					break;
				case tipoOpcao == 'tipoOpcaoDigitar':
					$($('input[type=radio][name=radiosTipoOpcao]')[1]).trigger('click')
					$('#novaMensagemOpcoes').hide();
					$('#novaMensagemDigitar').show();
					break;
			}
			if(node.data.sendListMessage){
				$('#enviaListaOpcao').prop('checked', true); 
			}
			
		}else{
			$('#novaMensagemOpcoes').show();
			$('#novaMensagemDigitar').hide();
		}
		
		$('.selectpicker').selectpicker();
		$('#selectValidaOpcoes').selectpicker();
		if(node != null){
			$('#selectValidaOpcoes').selectpicker('val',node.data.validaOpcaoEscolher);
		}
		
		$('#selectValidaOpcoes').on('change', function(){
			switch(true){
				case $('#selectValidaOpcoes').val() == 'padrao':
					$('#selectMensagemEncaminhaDiv').hide();
					$('#selectMensagemEncaminha').selectpicker("val", "");
					break;
				case $('#selectValidaOpcoes').val() == 'encaminhar_mensagem':
					$('#selectMensagemEncaminhaDiv').show();
					break;
			}
			
			$('#novaMensagemSaidasTab').trigger('click');
		})

		if(node != null){
			if(node.data.validaOpcaoEscolher == 'padrao' || !node.data.validaOpcaoEscolher){
				$('#selectMensagemEncaminhaDiv').hide();
			}
		}else{
			$('#selectMensagemEncaminhaDiv').hide();
		}
		
		$('#selectMensagemEncaminha').selectpicker();
		if(node != null){
			if(node.data.validaOpcaoEscolher == 'encaminhar_mensagem'){
				if(isNaN(node.data.mensagemEncaminhar)){
					var value = $('#selectMensagemEncaminha option[data-id='+ node.data.mensagemEncaminhar +']').prop('value');
					$('#selectMensagemEncaminha').selectpicker('val', value);
				}else{
					$('#selectMensagemEncaminha').selectpicker('val', node.data.mensagemEncaminhar);
				}
			}
		}
		
		
		
		/*EVENTOS OPÇÃO ESCOLHER*/
		$('#termos_opcao').tagsinput({tagClass: function(item) {
			switch (true) {
				case true   : return 'label label-primary';
			}
		}});
		
		$('#adicionar_opcao').on('click', function(){
			if($('#nova_opcao').val() == ''){
				return;
			}
			
			if($('#showOpcoes').text() == 'Nenhuma opção adicionada'){
				$('#showOpcoes').empty();
			}
			
			addOpcaoMensagem($('#termos_opcao').val(), $('#nova_opcao').val());
			if(node != null){
				addOpcaoMensagemNode(node, this);
			}
			
			$('#nova_opcao').val('');
			$('#termos_opcao').tagsinput('removeAll');
			initilizeTooltips();
		});
		

		
		$('#editar_opcao').on('click', function(){
			if($(this).data('index') == -1){return;}
			
			editarOpcaoMensagem(node, $(this).data('index'));
			$('#editar_opcao').data('index', -1);
		});
		
		$('#showOpcoes').on('click', '.excluir_opcao', function(e){
			excluirOpcaoMensagem(node, this);
		});
		/*EVENTOS OPÇÃO ESCOLHER*/
		
		
		/*EVENTOS OPÇÃO DIGITAR*/
		$('#addCondicao').on('click', function(){
			if($('#nomeInformacaoDigitar').val() == ''){return;}
			if($('#condicaoInformacaoDigitar').val() == ''){return;}
			if($('#valorInformacaoDigitar').val() == '' && $('#condicaoInformacaoDigitar').val() != 'qualquer_valor'){return;}

			if($('#condicoes').text() == 'Nenhuma condição adicionada'){
				$('#condicoes').empty();
			}

			addCondicao(node, $('#nomeInformacaoDigitar').val(), $('#condicaoInformacaoDigitar').val(), $('#condicaoInformacaoDigitar :selected').text(), $('#valorInformacaoDigitar').val());
		
			$('#nomeInformacaoDigitar').val('');
			$('#condicaoInformacaoDigitar').selectpicker('val', '');
			$('#valorInformacaoDigitar').tagsinput('removeAll');
		})
		
		$('#editarCondicao').on('click', function(){
			if($(this).data('index') == -1){return;}
			
			editarCondicao(node, $('#nomeInformacaoDigitar').val(), $('#condicaoInformacaoDigitar').val(), $('#condicaoInformacaoDigitar :selected').text(), $('#valorInformacaoDigitar').val(), $(this).data('index'));
			$('#editarCondicao').data('index', -1);
			
			$('#nomeInformacaoDigitar').val('');
			$('#condicaoInformacaoDigitar').selectpicker('val', '');
			$('#valorInformacaoDigitar').tagsinput('removeAll');
		});
		
		$('#condicoes').on('click', '.excluir_condicao', function(e){
			excluirCondicao(node, this);
		});
		/*EVENTOS OPÇÃO DIGITAR*/
		
		
		
		$('#novaMensagemOk').on('click', function(){
			salvarNovaMensagemAutomatica(node);
			if(node != null){
				editor.updateConnectionNodes('node-' + node.id);
			}
		})
	  },
	  preConfirm: (value) => {}
	}).then((result) => {
		if(result.isConfirmed){}
	})
}


$('#adicionar_acao').on('click', function(){
	adicionarEditarNodeAction(null)
})

function adicionarEditarNodeAction(id){
	var node = null;
	if(id != null){
		id = id.replace('node-', '');
		node = editor.getNodeFromId(id);
	}
	
	Swal.fire({
	  title:'<span class="text-purple">' + (node != null ? 'Editar Ação' : 'Nova Ação') + '</span>',
	  html:
			'<div id="novaMensagemContainer" class="" style="">' +
				'<ul id="" class="nav nav-pills mb-0">' +
					'<li class=""> <a id="novaAcaoTab" href="#acao" class="fw-bold text-purple nav-link active" data-bs-toggle="tab" aria-expanded="false" style="font-size: 14px !important;">Ação</a> </li>' +
					'<li class=""> <a id="novaAcaoClassificarTab" href="#classificar" class="fw-bold text-purple nav-link" data-bs-toggle="tab" aria-expanded="false" style="font-size: 14px !important;">Classificar</a> </li>' +
				'</ul>' +
				'<hr class="mt-1 mb-1">'+
				'<div class="tab-content" style="height: 95%;">' +
					'<div id="acao" class="tab-pane active" style="">' +
						'<div class="p-1 mt-3 text-start" style="overflow: visible;">' +
							'<h6 class="mb-1 fw-bold text-purple"><i class="fa-solid fa-triangle-exclamation me-1"></i>Selecione uma ação</h6>' +
							'<select id="selectAcoes" class="selectpicker col-12" title="Selecione uma ação">' +
								'<option value="encerrar_chamado" class="" style="letter-spacing: 1px !important;">Encerrar chamado</option>' +
								'<option value="conversar_com_atendente" class="" style="letter-spacing: 1px !important;">Conversar com atendente</option>' +
								'<option value="encaminhar_departamento" class="" style="letter-spacing: 1px !important;">Encaminhar para departamento</option>' +
								'<option value="voltar" class="" style="letter-spacing: 1px !important;">Menu anterior</option>' +
							'</select>' +
						'</div>' +
						'<div id="divAcoesDepartamento" class="col-12 text-start mt-3 d-none">' +
							'<h6 class="mb-1 fw-bold text-purple"><i class="fa-solid fa-sitemap me-1"></i>Selecione uma departamento</h6>' +
							'<select id="acoesDepartamento" class="selectpicker col-12" title="Selecione um departamento">' +
								{% for d in departamentos %}
								'<option value="{{d.getIdDepartamentos}}" class="" style="letter-spacing: 1px !important;">{{d.getNomeDepartamento}}</option>' +
								{% endfor %}
							'</select>' +
						'</div>' +
						'<div id="divAcoesAtendente" class="col-12 text-start mt-3 d-none">' +
							'<h6 class="mb-1 fw-bold text-purple"><i class="fa-solid fa-headset me-1"></i>Encaminhar para atendente</h6>' +
							'<select id="acoesAtendente" class="selectpicker col-12" title="Selecione um atendente">' +
								'<option value="-1" class="" style="letter-spacing: 1px !important;">Todos</option>' +
								{% for a in atendentes %}
								'<option value="{{a.getIdAtendentes}}" class="" style="letter-spacing: 1px !important;">{{a.getNomeAtendente}}</option>' +
								{% endfor %}
							'</select>' +
						'</div>' +
						'<div class="col-12 text-start mt-3">' +
							'<h6 class="mb-1 fw-bold text-purple"><i class="fa-solid fa-message me-1"></i>Mensagem</h6>' +
							'<textarea id="mensagem" placeholder="Mensagem" class="form-control bg-manager-gray border-0">'+(node != null ? node.data.mensagem : '')+'</textarea>' +
						'</div>' +
					'</div>' +
					'<div id="classificar" class="tab-pane">' +
						'<div class="row">' +
							'<div class="col-12 text-start mt-3">' +
								'<label class="mb-2 fw-bold text-purple" for="selectTags"><i class="fa-solid fa-tags me-1"></i>Classificar conversa com uma Tag</label>' +
								'<select id="selectTags" class="selectpicker col-12" title="Selecione uma tag" data-live-search="true" multiple data-selected-text-format="count > 2" data-count-selected-text= "{0} tags selecionadas" multiple>' +
									{% for t in tags %}
									'<option value="{{t.idTags}}" class="text-dark" style="letter-spacing: 1px !important;" data-content=\'<i class="fa-solid fa-tag" style="color: {{t.cor}}"></i> {{t.nome}}\'>{{t.nome}}</option>' +
									{% endfor %}
								'</select>' +
							'</div>'+
							'<div class="col-12 text-start mt-3">' +
								'<label class="mb-1 fw-bold text-purple"><i class="fa-solid fa-users me-1"></i>Adicionar contato ao grupo</label>' +
								'<select id="selectGrupo" class="selectpicker col-12" title="Selecionar grupo">' +
									{% for g in grupos %}
									'<option value="{{g.idGrupos}}" class="" style="letter-spacing: 1px !important;">{{g.nome}}</option>' +
									{% endfor %}
								'</select>' +
							'</div>'+
						'</div>' +
					'</div>' +
				'</div>' +
			'</div>' +
		'',
	  showCloseButton: true,
	  showCancelButton: true,
	  focusConfirm: false,
	  confirmButtonText: (node != null ? 'Alterar' : 'Salvar'),
	  cancelButtonText: 'Cancelar',
	  //scrollbarPadding: false,
	  allowOutsideClick: false,
	  confirmButtonColor: '#60b86c',
	  willOpen: () => {

	  },
	  didOpen: () => {
		
		$('#mensagem').focus();
		
		if(node != null){
			if(node.data.idDepartamento){
				$('#acoesDepartamento').selectpicker('val', node.data.idDepartamento);
			}
			if(node.data.idAtendente){
				$('#acoesAtendente').selectpicker('val', node.data.idAtendente);
			}
			
			$('#selectAcoes').selectpicker('val', node.data.action);
		}
		
		$('.selectpicker').selectpicker();
		$('.selectpicker').on('show.bs.select', function () {
			$('.swal2-actions').css('z-index', '0');
		});
		$('.selectpicker').on('hidden.bs.select', function () {
			$('.swal2-actions').css('z-index', '');
		});
		
		$('#selectAcoes').on('change', function(){
			switch(true){
				case $('#selectAcoes').val() == 'voltar':
					$('#mensagem').prop('disabled', true);
					$('#divAcoesDepartamento').addClass('d-none');
					$('#divAcoesAtendente').addClass('d-none');
					break;
				case $('#selectAcoes').val() == 'encaminhar_departamento':
					$('#divAcoesDepartamento').removeClass('d-none');
					$('#divAcoesAtendente').addClass('d-none');
					break;
				case $('#selectAcoes').val() == 'conversar_com_atendente':
					$('#divAcoesAtendente').removeClass('d-none');
					$('#divAcoesDepartamento').addClass('d-none');
					break;
				case true:
					$('#mensagem').prop('disabled', false);
					$('#divAcoesDepartamento').addClass('d-none');
					$('#divAcoesAtendente').addClass('d-none');
					break;
			}
		})
		$('#selectAcoes').trigger('change');
		
		$('#selectTags').selectpicker('val', node.data.selectedTags);
		$('#selectGrupo').selectpicker('val', node.data.selectedGrupo);
	  },
	  preConfirm: (value) => {
		let mensagem = $('#mensagem').val();
		let acao = $('#selectAcoes').val();
		let departamento = $('#acoesDepartamento').val();
		let atendente = $('#acoesAtendente').val();

		switch(true){
			case acao == '':
				Swal.showValidationMessage('Selecione uma ação')
				break;
			case acao == 'encaminhar_departamento' && departamento == '':
				Swal.showValidationMessage('Selecione um departamento')
				break;
			case acao == 'conversar_com_atendente' && atendente == '':
				Swal.showValidationMessage('Selecione um atendente')
				break;
			case mensagem == '' && acao == 'encerrar_chamado':
				Swal.showValidationMessage('Mensagem não pode ser vazia')
				break;
		}
	  }
	  
	}).then((result) => {
		if(result.isConfirmed){
			var mensagem = $('#mensagem').val();
			var acao = $('#selectAcoes').val();
			var idDepartamento = $('#acoesDepartamento').val();
			var departamento = $('#acoesDepartamento :selected').text();
			var idAtendente = $('#acoesAtendente').val();
			var atendente = $('#acoesAtendente :selected').text();
			var selectedTags = $('#selectTags').val();
			var selectedGrupo = $('#selectGrupo').val();
			
			var title = $('#selectAcoes :selected').text();
			switch(true){
				case acao == 'encaminhar_departamento':
					title = title + ': ' + departamento;
					break;
				case acao == 'conversar_com_atendente':
					title = title + ': ' + atendente;
					break;
			}
			
			let dataNode = {};
			dataNode.name = title;
			dataNode.mensagem = mensagem;
			dataNode.action = acao;
			dataNode.id = acao;
			dataNode.idDepartamento = idDepartamento;
			dataNode.idAtendente = idAtendente;
			dataNode.selectedTags = selectedTags;
			dataNode.selectedGrupo = selectedGrupo;

			if(node == null){
				editor.addNode(String(acao), 1,  0, ((editor.canvas_x/editor.zoom)*-1)+(300*editor.zoom), ((editor.canvas_y/editor.zoom)*-1)+(200*editor.zoom), acao, dataNode, '' );
			}else{ 
				$('#node-' + node.id + ' .drawflow_content_node').html(geraNodeHtml({id:node.id,data:dataNode}, false));
				editor.updateNodeDataFromId(node.id, dataNode);
			}
			
			if($('input[type=radio][name=radioBotData]:checked').attr('id') == 'botDataTest'){
				$('#salvarBot').trigger('click');
			}else{
				$('#salvarBot').attr('disabled', false);
			}
			
		}
	})
}

$('#adicionar_api').on('click', function(){
	adicionarNodeApi(null)
})

function adicionarNodeApi(id){
	if(editor == null){
		Swal.fire({
			title: 'Nenhum número cadastrado',
			text: 'Cadastre um número para poder usar as mensagens automáticas',
			icon: 'warning',
			confirmButtonColor: 'var(--bs-info)',
		});
		return;
	}
	
	let width = '100vw';
	if($(window).width() > 900){width = '60vw';}
	
	let node = null;
	let opcoes = null;
	let requisicao = null;
	let tipoOpcao = null;
	if(id != null){
		id = id.replace('node-', '');
		node = editor.getNodeFromId(id);
		
		opcoes = node.data.opcoes;
		requisicao = node.data.requisicao;
		tipoOpcao = (node.data.tipoOpcao ? node.data.tipoOpcao : null);
	}
	
	
	/*LISTA SELECT MENSAGENS*/
	let mensagensEncaminhar = '';
	$.each(editor.drawflow.drawflow[editor.module].data, function(i,e) { 
		if(e.name != 'nova_mensagem' && !e.data.action && !e.data.regras){
			mensagensEncaminhar = mensagensEncaminhar + 
			'<option value="'+ e.data.id +'" class="" style="letter-spacing: 1px !important;">'+ e.data.nome +'('+ e.data.id +')</option>';
		}
	})
	/*LISTA SELECT MENSAGENS*/
	
	Swal.fire({
	  width:width,
	  title: '<span class="text-purple">Nova Requisição</span>',
	  html: 
			'<ul class="nav nav-pills mb-0">' +
				'<li class=""><a href="#requisicao" class="nav-link fw-bold text-purple active" data-bs-toggle="tab" aria-expanded="false" style="font-size: 14px !important;">Requisição</a> </li>' +
				'<li class=""><a href="#saida" class="nav-link fw-bold text-purple" data-bs-toggle="tab" aria-expanded="false" style="font-size: 14px !important;">Saída</a> </li>' +
				'<li class=""><a href="#testar" class="nav-link fw-bold text-purple" data-bs-toggle="tab" aria-expanded="false" style="font-size: 14px !important;">Testar</a> </li>' +
			'</ul>' +
			'<hr class="mt-1 mb-1">'+
			'<div class="tab-content">' +
				/*INFORMAÇÕES REQUISIÇÃO*/
				'<div id="requisicao" class="tab-pane active">' +
					'<div class="row">' +
						'<div class="col-md-3 col-12 text-start mt-2">' +
							'<h6 class="mb-1 fw-bold text-purple"><i class="fa-solid fa-gears me-1"></i>Método</h6>' +
							'<select id="metodo" class="selectpicker col-12" title="Método">' +
								'<option value="GET" class="" style="letter-spacing: 1px !important;">GET</option>' +
								'<option value="POST" class="" style="letter-spacing: 1px !important;">POST</option>' +
								'<option value="PUT" class="" style="letter-spacing: 1px !important;">PUT</option>' +
								'<option value="DELETE" class="" style="letter-spacing: 1px !important;">DELETE</option>' +
							'</select>' +
						'</div>' +
						'<div class="col-md-9 text-start col-12 mt-2" style="overflow: visible;">' +
							'<h6 class="mb-1 fw-bold text-purple"><i class="fa-solid fa-link me-1"></i>URL</h6>' +
							'<input id="url" placeholder="https://www.exemplo.com.br" class="form-control bg-manager-gray border-0" />' +
						'</div>' +
						'<div class="mt-3 mb-3 b-1 b-dashed"></div>' +
						'<div class="col-12">' +
							'<h6 class="mb-1 fw-bold text-purple">Headers</h6>' +
							'<div class="d-flex align-items-center">' +
								'<input id="header_key" class="form-control me-2 bg-manager-gray border-0" placeholder="Header Key" value=""/>' +
								'<input id="header_value" class="form-control ml-2 bg-manager-gray border-0" placeholder="Header Value" value=""/>' +
								'<a id="add_header" href="javascript:void(0)" class="ms-2 me-2 text-green-manager2 pull-right"><i class="fa fa-plus-circle" style="font-size:22px;"></i></a>' +
							'</div>'+
							'<div id="headers" class="mt-2" style="max-height: 150px; overflow-y: auto;">' +
							'</div>'+
						'</div>'+
						'<div class="mt-3 mb-3 b-1 b-dashed"></div>' +
						'<div class="col-12">' +
							'<h6 class="mb-1 fw-bold text-purple">Body</h6>' +
							'<div class="d-flex align-items-center">' +
								'<input id="field_key" class="form-control me-2 bg-manager-gray border-0" placeholder="Key" value=""/>' +
								'<input id="field_value" class="form-control ml-2 bg-manager-gray border-0" placeholder="Value" value=""/>' +
								'<a id="add_field" href="javascript:void(0)" class="ms-2 me-2 text-green-manager2 pull-right"><i class="fa fa-plus-circle" style="font-size:22px;"></i></a>' +
							'</div>'+
							'<div id="fields" class="mt-2" style="max-height: 150px; overflow-y: auto;">' +
							'</div>'+
						'</div>'+
						'' +
					'</div>' +
				'</div>' +
				'<div id="saida" class="tab-pane">' +
					'<div class="row">' +
						'<div class="col-12 col-lg-6 text-start mt-2">' +
							'<h6 class="mb-1 fw-bold text-purple">Nome Mensagem</h6>' +
							'<input id="nome_mensagem" placeholder="Nome mensagem" class="form-control bg-manager-gray border-0" value=""/>' +
						'</div>' +
						'<div class="col-12 col-lg-6 text-start mt-2">' +
							'<h6 class="mb-1 fw-bold text-purple">ID Mensagem</h6>' +
							'<input type="text" id="id_mensagem" placeholder="Gerado automaticamente" class="form-control bg-manager-gray border-0" value="" readonly/>' +
						'</div>' +
						
						"<h6 class=\"mb-1 fw-bold mt-3\"><i class='fa-solid fa-circle-exclamation text-purple me-1'></i>Para utilizar uma variável utilize chaves duplas: {{ '{{id_mensagem.variavel}}'}}</h6>" +
						'<div class="col-12 text-start mt-2">' +
							'<h6 class="mb-1 fw-bold text-purple">Mensagem</h6>' +
							'<textarea id="texto_mensagem" placeholder="Mensagem" class="form-control bg-manager-gray border-0"></textarea>' +
						'</div>' +
						'<hr class="mb-3 mt-3">' +
						'<div class="col-12 text-left">' +
							'<h5 class="" for="selectValidaOpcoes">Ação caso opção/condição inválida</h5>' +
							'<select id="selectValidaOpcoes" class="selectpicker col-12" style="">' +
								'<option value="padrao" class="" style="letter-spacing: 1px !important;">Repetir mensagem (Encerrar chamado após 3 tentativas)</option>' +
								'<option value="encaminhar_mensagem" class="" style="letter-spacing: 1px !important;">Encaminha para mensagem</option>' +
							'</select>' +
						'</div>' +
						'<div id="selectMensagemEncaminhaDiv" class="col-12 text-left mt-3">' +
							'<label class="" for="selectMensagemEncaminha">Encaminhar para:</label>' +
							'<select id="selectMensagemEncaminha" class="selectpicker col-12" title="Selecione uma mensagem" style="">' +
								mensagensEncaminhar +
							'</select>' +
						'</div>' +
					'</div>' +
				'</div>' +
				'<div id="testar" class="tab-pane">' +
					'<div class="row">' +
						'<div class="col-12 text-center mt-2">' +
							'<button id="testar_requisicao" href="javascript:void(0)" class="btn btn-green-manager"><i class="fa fa-paper-plane me-1"></i>Testar requisição</button>' +
						'</div>' +
						'<div class="col-12 text-start mt-2">' +
							'<h6 class="mb-1 fw-bold text-purple"><i class="fa-solid fa-equals me-1"></i>Resultado</h6>' +
							'<textarea id="teste_resultado" placeholder="Resultado" class="form-control bg-manager-gray border-0 text-dark" style="font-size: 12px; height: 161px;" readonly></textarea>' +
						'</div>' +
						'<div class="col-12 text-start mt-3">' +
							'<h6 class="mb-1 fw-bold text-purple"><i class="fa-solid fa-message me-1"></i>Mensagem</h6>' +
							'<textarea id="teste_mensagem" placeholder="Mensagem" class="form-control bg-manager-gray border-0 text-dark" style="font-size: 12px; height: 100px;" readonly></textarea>' +
						'</div>' +
					'</div>' +
				'</div>' +
			'</div>' +
		'',
	  showCloseButton: true,
	  showCancelButton: true,
	  focusConfirm: false,
	  confirmButtonText: 'Adicionar',
	  cancelButtonText: 'Cancelar',
	  //scrollbarPadding: false,
	  allowOutsideClick: false,
	  confirmButtonColor: '#60b86c',
	  willOpen: () => {

	  },
	  didOpen: () => {
		$('.swal2-close').blur()
		$('.selectpicker').selectpicker();
		$('.selectpicker').on('show.bs.select', function () {
			$('.swal2-actions').css('z-index', '0');
		});
		$('.selectpicker').on('hidden.bs.select', function () {
			$('.swal2-actions').css('z-index', '');
		});
		
		
		/*CASO EDITAR ADICIONA VALORES AOS CAMPOS*/
		$('#selectMensagemEncaminhaDiv').hide();
		if(node != null){
			$('#metodo').selectpicker('val', requisicao.metodo);
			$('#url').val(requisicao.url);
			
			$.each(requisicao.headers, function(i,e){
				addHeader(i, e)
			})
			$.each(requisicao.fields, function(i,e){
				addField(i,e)
			})
			
			$('#nome_mensagem').val(node.data.nome);
			$('#id_mensagem').val(node.data.id);
			$('#texto_mensagem').val(node.data.mensagem);
			
			$('#selectValidaOpcoes').selectpicker('val', node.data.validaOpcaoEscolher);
			if(node.data.validaOpcaoEscolher == 'padrao'){
				$('#selectMensagemEncaminhaDiv').hide();
			}else{
				$('#selectMensagemEncaminha').selectpicker('val', node.data.mensagemEncaminhar);
			}
		}
		/*CASO EDITAR ADICIONA VALORES AOS CAMPOS*/
		
		replaceSpaceByUnderscore = {
		  onKeyPress: function(val, e, field, options) {
			  $('#id_mensagem').val(val.replace(' ', '_'));
			},
			translation: {
			  'Z': {
				pattern: /[a-z0-9_ ]/, optional: true
			  }
			}
		};
		
		$('#id_mensagem').mask('ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ', replaceSpaceByUnderscore);
		$('#nome_mensagem').on('keyup', function(){
			$('#id_mensagem').val($('#nome_mensagem').val().toLowerCase().replaceAll(' ', '_'))
		})
		
		$('#add_header').on('click', function(){
			if($('#header_key').val() != '' && $('#header_value').val() != ''){
				addHeader($('#header_key').val(), $('#header_value').val())
				$('#header_key').val('')
				$('#header_value').val('')
			}
		})
		
		function addHeader(key, value){
			$('#headers').append(
				'<div class="col-12 p-2 b-1 rounded">' +
					'<div class="header d-flex align-items-center">' +
						'<input class="key form-control form-control-sm me-1" value="'+key+'" readonly/>' +
						'<input class="value form-control form-control-sm ml-1" value="'+value+'" readonly/>' +
						'<a href="javascript:void(0)" class="ms-2 me-2 text-danger pull-right remove_header"><i class="fa fa-close"></i></a>' +
					'</div>' +
				'</div>'
			)
		}
		
		$('#headers').on('click', '.remove_header', function(){
			$(this).parent().parent().remove();
		})
		
		
		$('#add_field').on('click', function(){
			if($('#field_key').val() != '' && $('#field_value').val() != ''){
				addField($('#field_key').val(), $('#field_value').val());
				$('#field_key').val('')
				$('#field_value').val('')
			}
		})
		
		function addField(key, value){
			$('#fields').append(
				'<div class="col-12 p-2 b-1 rounded">' +
					'<div class="field d-flex align-items-center">' +
						'<input class="key form-control form-control-sm me-1" value="'+key+'" readonly/>' +
						'<input class="value form-control form-control-sm ml-1" value="'+value+'" readonly/>' +
						'<a href="javascript:void(0)" class="ms-2 me-2 text-danger pull-right remove_field"><i class="fa fa-close"></i></a>' +
					'</div>' +
				'</div>'
			)
		}
		
		$('#fields').on('click', '.remove_field', function(){
			$(this).parent().parent().remove();
		})
		
		
		$('#selectValidaOpcoes').on('change', function(){
			switch(true){
				case $('#selectValidaOpcoes').val() == 'padrao':
					$('#selectMensagemEncaminhaDiv').hide();
					$('#selectMensagemEncaminha').selectpicker("val", "");
					break;
				case $('#selectValidaOpcoes').val() == 'encaminhar_mensagem':
					$('#selectMensagemEncaminhaDiv').show();
					break;
			}
		})

		
		$('#testar_requisicao').on('click', function(){
			
			switch(true){
				case $('#metodo').val() == '':
					Swal.showValidationMessage('Selecione um método');
					return;
					break;
				case $('#url').val() == '':
					Swal.showValidationMessage('Informe uma URL');
					return;
					break;
				case !isValidHttpUrl($('#url').val()):
					Swal.showValidationMessage('Url inválida');
					return;
					break;
			}
			
			$('#testar_requisicao').prop("disabled",true);
			Swal.showLoading();
			
			$('#teste_resultado').val('');
			$('#teste_mensagem').val('');
			
			var headers = {}
			$($('#headers .header')).each(function(i,e){
				headers[$(e).find('.key').val()] = $(e).find('.value').val();
			})
			var fields = {}
			$($('#fields .field')).each(function(i,e){
				fields[$(e).find('.key').val()] = $(e).find('.value').val();
			})
			

			
			fetch('testeRequisicao', {
				method: 'POST',
				headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				body: 'method=' + $('#metodo').val() +
						'&url=' + $('#url').val() +
						'&headers=' + JSON.stringify(headers) +
						'&fields=' + JSON.stringify(fields) +
						'&id_mensagem=' + $('#id_mensagem').val() +
						'&template=' + $('#texto_mensagem').val()
			})
			.then(function(res){ return res.json(); })
			.then(function(res){
				$('#testar_requisicao').prop("disabled",false);
				Swal.hideLoading();
				
				if(res.Success){
					
					let response = JSON.parse(res.response)
					$('#teste_resultado').val(res.response);
					//let variaveis = $('#texto_mensagem').val().match(/[^{\}]+(?=})/g);
					$('#teste_mensagem').val(res.rendered);
					
					/*$.each(variaveis, function(j, v){
						if(v.includes('.')){
							variaveis[j] = v.split('.'); 
						}
					})
					
					$.each(variaveis, function(j, v){
						if(typeof(v) == 'string'){
							$.each(response, function(i, e){
								if(v.indexOf(i) != -1){
									$('#teste_mensagem').val($('#teste_mensagem').val().replaceAll('{'+ i +'}', e));
									//resposta = resposta.replaceAll('{'+ i +'}', e);
								}
							})
						}
						
						if(typeof(v) == 'object'){
							var lastNode = null;
							$.each(v, function(k, v2){
								if(lastNode == null){
									lastNode = response[v2];
								}else{
									lastNode = lastNode[v2]
								}
							})
							$('#teste_mensagem').val($('#teste_mensagem').val().replaceAll('{'+ v.join('.') +'}', lastNode));
							//resposta = resposta.replaceAll('{'+ v.join('.') +'}', lastNode);
						}
					})*/
					
					
				}else{
					Swal.fire({
						//title: 'Número não cadastrado',
						text: res.Erro,
						scrollbarPadding: false,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						//location.reload();
					})
				}
			})
			
		})
	  },
	  preConfirm: (value) => {
		let nomeMensagem = $('#nome_mensagem').val();
		let idMensagem = $('#id_mensagem').val();
		let mensagem = $('#texto_mensagem').val();
		let metodo =  $('#metodo').val();
		let url = $('#url').val();
		
		var idExiste = false;
		$.each(editor.drawflow.drawflow[editor.module].data, function(i,e) { 
			if(e.data.id == idMensagem && e.id != id){
				idExiste = true;
			}
		})
		
		switch(true){
			case metodo == '':
				Swal.showValidationMessage('Selecione um método');
				return;
				break;
			case url == '':
				Swal.showValidationMessage('Informe uma URL');
				return;
				break;
			case !isValidHttpUrl(url):
				Swal.showValidationMessage('Url inválida');
				return;
				break;
			case nomeMensagem == '':
				Swal.showValidationMessage('Nome mensagem não pode ser vazia')
				break;
			case mensagem == '':
				Swal.showValidationMessage('Mensagem não pode ser vazia')
				break;
			case idExiste:
				Swal.showValidationMessage('Já exista uma mensagem com o ID \''+ idMensagem +'\'.<br> Altere o campo NOME MENSAGEM para gerar um novo ID;')
				break;
		}
	  }
	  
	}).then((result) => {
		if(result.isConfirmed){
			let nomeMensagem = $('#nome_mensagem').val();
			let idMensagem = $('#id_mensagem').val();
			let mensagem = $('#texto_mensagem').val();
			let metodo =  $('#metodo').val();
			let url = $('#url').val();
			let validaOpcaoEscolher = $('#selectValidaOpcoes').val();
			let mensagemEncaminhar = $('#selectMensagemEncaminha').val();
			
			var headers = {}
			$($('#headers .header')).each(function(i,e){
				headers[$(e).find('.key').val()] = $(e).find('.value').val();
			})
			var fields = {}
			$($('#fields .field')).each(function(i,e){
				fields[$(e).find('.key').val()] = $(e).find('.value').val();
			})
			
			let mensagemData = {
									id:idMensagem,
									nome:nomeMensagem, 
									mensagem:mensagem,
									requisicao:{metodo:metodo,url:url,headers:headers,fields:fields},
									validaOpcaoEscolher:validaOpcaoEscolher,
									mensagemEncaminhar:mensagemEncaminhar
								};
					
			if(node == null){
				editor.addNode(idMensagem, 1,  2, ((editor.canvas_x/editor.zoom)*-1)+(300*editor.zoom), ((editor.canvas_y/editor.zoom)*-1)+(200*editor.zoom), '', mensagemData, '' );
			}else{
				editor.removeNodeId('node-' + id, true);
				editor.addNode(idMensagem, 1,  2, node.pos_x, node.pos_y, '', mensagemData, '' );
			}
			$('#salvarBot').attr('disabled', false);
			initilizeTooltips();
		}
	})
}




function isValidHttpUrl(string) {
  let url;
  try {
    url = new URL(string);
  } catch (_) {
    return false;
  }
  return url.protocol === "http:" || url.protocol === "https:";
}


$('#salvarBot').on('click', function(){
	if($('input[type=radio][name=radioBotData]:checked').attr('id') == 'botData'){
		Swal.fire({
		  title: 'Salvar produção ?',
		  text: 'Você está alterando as mensagens automáticas em PRODUÇÃO. Deseja salvar ?',
		  icon: 'question',
		  showCloseButton: true,
		  showCancelButton: true,
		  focusConfirm: false,
		  confirmButtonText: 'Salvar',
		  cancelButtonText: 'Cancelar',
		  scrollbarPadding: false,
		  allowOutsideClick: false,
		  confirmButtonColor: 'var(--bs-success)',
		  scrollbarPadding: false,
		  didOpen: () => {
			$('.swal2-close').blur()
		  },
		   preConfirm: (value) => {
			
		  }
		}).then((result) => {
			if(result.isConfirmed){
				Swal.fire({title : 'Salvando respostas automáticas...', allowOutsideClick: false, scrollbarPadding: false});
				Swal.showLoading();
				
				salvarBot();
			}else{
				return;
			}
		})
	}else{
		salvarBot();
	}
})

function salvarBot(){
	var formData = new FormData();
	var dataExport = editor.export();
	
	$.each(dataExport.drawflow, function(key, dataBotNum) {
		$.each(dataBotNum.data, function(key2, nodeMsg) {
			dataExport.drawflow[key].data[key2].html = '';
		})
	})
	
	formData.append($('input[type=radio][name=radioBotData]:checked').attr('id'), JSON.stringify(dataExport));
	if(loadingBotData){return;}
	
	fetch('salvarMensagensAutomaticas', {
		method: 'POST',
		//headers: {'Content-Type': 'application/x-www-form-urlencoded'},
		body: formData
		//body: 'botData=' + botData
	})
	.then(function(res){ return res.json(); })
	.then(function(res){
		if(res.Success){
			if($('input[type=radio][name=radioBotData]:checked').attr('id') == 'botData'){
				Swal.fire({
					text: res.Success,
					scrollbarPadding: false,
					icon: 'success',
					confirmButtonColor: 'var(--bs-info)',
					scrollbarPadding: false
				}).then(() =>{
					$('#salvarBot').attr('disabled', true);
				})
			}else{
				$('#salvarBot').attr('disabled', true);
				if($('input[type=radio][name=radioBotData]:checked').attr('id') == 'botData'){
					Swal.close();
				}
			}
		}else{
			Swal.fire({
				//title: 'Número não cadastrado',
				text: res.Erro,
				scrollbarPadding: false,
				icon: 'error',
				confirmButtonColor: 'var(--bs-info)',
				scrollbarPadding: false
			}).then(() =>{
				//location.reload();
			})
		}
	})
}

$('#enviarParaProducao').on('click', function(){
	Swal.fire({
	  title: 'Enviar para produção ?',
	  text: 'Deseja atualizar as informações para produção ?',
	  icon: 'question',
	  showCloseButton: true,
	  showCancelButton: true,
	  focusConfirm: false,
	  confirmButtonText: 'Sim',
	  cancelButtonText: 'Cancelar',
	  scrollbarPadding: false,
	  allowOutsideClick: false,
	  confirmButtonColor: 'var(--bs-success)',
	  scrollbarPadding: false,
	  didOpen: () => {
		$('.swal2-close').blur()
	  },
	   preConfirm: (value) => {
		
	  }
	}).then((result) => {
		if(result.isConfirmed){
			Swal.fire({title : 'Salvando respostas automáticas...', allowOutsideClick: false, scrollbarPadding: false});
			Swal.showLoading();
			
			var dataExport = editor.export();
			$.each(dataExport.drawflow, function(key, dataBotNum) {
				$.each(dataBotNum.data, function(key2, nodeMsg) {
					dataExport.drawflow[key].data[key2].html = '';
				})
			})
			
			let formData = new FormData();
			formData.append('botData', JSON.stringify(dataExport));
			
			fetch('salvarMensagensAutomaticas', {
				method: 'POST',
				body: formData
			})
			.then(function(res){ return res.json(); })
			.then(function(res){
				if(res.Success){
					if($('input[type=radio][name=radioBotData]:checked').attr('id') == 'botData'){
						Swal.fire({
							text: res.Success,
							scrollbarPadding: false,
							icon: 'success',
							confirmButtonColor: 'var(--bs-info)',
							scrollbarPadding: false
						}).then(() =>{
							$('#salvarBot').attr('disabled', true);
						})
					}else{
						botData = JSON.stringify(dataExport);
						$('#salvarBot').attr('disabled', true);
						Swal.close();
					}
				}else{
					Swal.fire({
						//title: 'Número não cadastrado',
						text: res.Erro,
						scrollbarPadding: false,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						//location.reload();
					})
				}
			})
		}
	})
})



/*NOVA MENSAGEM MENSAGENS*/
function addMensagem(mensagem){
	var msg = {};
	if(typeof(mensagem) != "object" || mensagem == null){
		msg.mensagem = mensagem;
		msg.imagem = "";
		msg.file = "";
	}else{
		msg = mensagem;
		if(!msg.file){
			msg.file = "";
		}
	}
	
	$('#novaRespostaMensagens').append(
		'<div class="card text-start p-1 bg-manager-gray mensagem p-2 font-weight-normal" style="font-size: 0.85em !important; border: 2px solid #fff !important; ">' +
			'<span class="text-end" style="position:absolute; right: -10px; top: -10px;">' +
				'<a class="btn btn-xs btn-danger rounded-circle mensagemDelete text-white pull-right shadow" style="cursor: pointer;" ><i class="fa fa-times "></i></a>' +
			'</span>' +
			
			'<div class="d-flex justify-content-center" style="">' +
				'<div class="" style="max-width: 250px; position: relative;">' +
					'<span class="text-end" style="position:absolute;right:-5px;top:0px;">' +
						'<a class="btn btn-xs btn-danger rounded-circle mensagemImgDelete text-white shadow '+((msg.imagem != "") ? "" : "d-none")+'" style=""><i class="fa fa-close "></i></a>' +
					'</span>' +
					'<img src="'+((msg.imagem != "") ? msg.imagem : "")+'" class="mensagemImg mt-2 mb-2 rounded '+((msg.imagem != "") ? "" : "d-none")+'" style="cursor:pointer; max-width: 250px;"></img>' +
					
					'<span class="text-end" style="position:absolute;right:-5px;top:-5px;">' +
						'<a class="btn btn-xs btn-danger rounded-circle mensagemFileDelete text-white shadow '+((msg.file != "") ? "" : "d-none")+'" style=""><i class="fa fa-close "></i></a>' +
					'</span>' +
					'<div class="mensagemFile b-1 bg-success-light rounded10 mb-2 p-2 text-center '+((msg.file != "") ? "" : "d-none")+'">' +
						'<i data-src="'+((msg.file != "") ? msg.file : "")+'" class="fa fa-file mt-2 mb-2 rounded" style="cursor:pointer; max-width: 250px; font-size: 38px;"></i>' +
						'<p class="mensagemFileName mb-0" style="font-size: 10px;">'+((msg.file != "") ? msg.file.split('/').pop() : "")+'</p>' +
					'</div>' +
					
				'</div>' +
			'</div>' +
			
			'<text class="mensagemText rounded p-1 '+ (mensagem == null ? 'd-none' : '') +'" style="margin-bottom: 5px !important;cursor: pointer; white-space: pre-line;min-height:25px;">'+ (msg.mensagem != null ? msg.mensagem : '') +'</text>'+
			'<textarea class="mensagemInput '+ (mensagem == null ? '' : 'd-none') +' form-control form-control-sm bg-manager-gray" placeholder="Digite sua Mensagem" style="font-size: 1em !important; white-space: pre-line; border-radius: 0 !important; border-bottom: 2px solid #5255CC !important; margin-bottom: 10px !important; border: none;"></textarea>' +
			'<div class="mensagemInputButtons mt-1 '+ (mensagem == null ? '' : 'd-none') +'">' +
				'<button class="btn btn-xs btn-purple-manager mensagemAddImg float-start fw-bold" style="cursor: pointer;" ><i class="mdi mdi-image mdi-16px"></i> Enviar imagem/arquivo</button>' +
				'<button class="btn btn-xs btn-danger ms-2 mensagemInputCancel text-white float-end" style="cursor: pointer;" ><i class="mdi mdi-close mdi-16px"></i></button>' +
				'<button class="btn btn-xs btn-green-manager b-1 mensagemInputConfirmar text-white float-end" style="cursor: pointer;" ><i class="mdi mdi-check mdi-16px"></i></button>' +
			'</div>' +
		'</div>'
	);
}
/*NOVA MENSAGEM MENSAGENS*/




/*NOVA MENSAGEM OPÇÃO ESCOLHER*/
function addOpcaoMensagem(termos, texto){
	$('#showOpcoes').append(
		"<div class='card p-2 bg-manager-gray border-0' style='margin-bottom: 15px !important;'>" +
			"<div class='opcao d-flex align-items-center justify-content-left'>" +
				(termos == '' ? '' : "<i class='fa fa-info-circle text-purple ms-1 opcaoTermos' style='cursor: pointer' data-bs-toggle='tooltip' data-bs-original-title='Termos: "+ termos +"'></i>") + 
				"<span class='ms-2' data-termos='"+ termos +"'>" + texto + '</span>' + 
			"</div>" +
			'<span class="text-end" style="position:absolute; right: 12px; top: -13px;">' +
				'<a class="btn btn-xs btn-warning rounded-circle editar_opcao text-white shadow" style="cursor: pointer;" ><i class="fa fa-pencil "></i></a>' +
			'</span>' +
			'<span class="text-end" style="position:absolute; right: -11px; top: -13px;">' +
				'<a class="btn btn-xs btn-danger rounded-circle excluir_opcao text-white shadow" style="cursor: pointer;" ><i class="fa fa-times "></i></a>' +
			'</span>' +
		"</div>"
	);
	
	$($('#showOpcoes .card')[$('#showOpcoes .card').length-1]).addClass('animated fadeIn').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
		$('#showOpcoes .card').removeClass('animated fadeIn');
	});
	
	$('#showOpcoes .editar_opcao').on('click', function(e){
		var target = e.target;
		
		var opcaoIndex = -1;
		$($('#showOpcoes .editar_opcao')).each(function(i,el) {
			if(el == target || el == $(target).parent()[0]){
				opcaoIndex = i;
			}
		})
		
		$('#termos_opcao').tagsinput('removeAll');
		var termos = $('#showOpcoes .card').eq(opcaoIndex).find('.opcao .opcaoTermos').attr('data-bs-original-title');
		if(termos){
			$('#termos_opcao').tagsinput('add', termos.replace('Termos: ', '')); 
		}
		$('#nova_opcao').val($('#showOpcoes .card').eq(opcaoIndex).find('.opcao span').text());
		$('#adicionar_opcao').addClass('d-none');
		$('#editar_opcao').removeClass('d-none');
		$('#editar_opcao').data('index', opcaoIndex);
	});
	
	$('#tipoOpcaoDigitar').attr('disabled', true);
}

function addOpcaoMensagemNode(node, elem){
	var data = node.data;
	var outputs = node.outputs;
	
	data.opcoes.push($("#nova_opcao").val());
	if(typeof data.opcoesTermos !== 'undefined'){
		data.opcoesTermos.push($('#termos_opcao').val());
	}else{
		data.opcoesTermos = [$('#termos_opcao').val()];
	}
	
	editor.updateNodeDataFromId(node.id, data);
	
	$('#node-' + node.id + ' .opcoes').empty();
	$('#node-' + node.id + ' .opcoes').html(generateOutputs(data));
	
	editor.addNodeOutput(node.id);
	editor.updateConnectionNodes('node-' + node.id);
	
	if($('input[type=radio][name=radioBotData]:checked').attr('id') == 'botDataTest'){
		$('#salvarBot').trigger('click');
	}
}

function editarOpcaoMensagem(node, opcaoIndex){
	$('#showOpcoes .card').eq(opcaoIndex).find('.opcao span').text($("#nova_opcao").val());
	$('#showOpcoes .card').eq(opcaoIndex).find('.opcao .opcaoTermos').attr('data-bs-original-title', "Termos: " + $("#termos_opcao").val());
	$('#showOpcoes .card').eq(opcaoIndex).find('.opcao .opcaoTermos').tooltip();
	
	if(node != null){
		var data = node.data;
		var outputs = node.outputs;
		
		data.opcoes[opcaoIndex] = $("#nova_opcao").val();
		data.opcoesTermos[opcaoIndex] = $('#termos_opcao').val();
		
		editor.updateNodeDataFromId(node.id, data);
		
		$('#node-' + node.id + ' .opcoes').empty();
		$('#node-' + node.id + ' .opcoes').html(generateOutputs(data));
		editor.updateConnectionNodes('node-' + node.id);
		
		if($('input[type=radio][name=radioBotData]:checked').attr('id') == 'botDataTest'){
			$('#salvarBot').trigger('click');
		}
	}
	
	$('#termos_opcao').tagsinput('removeAll');
	$('#nova_opcao').val('');
	$('#adicionar_opcao').removeClass('d-none');
	$('#editar_opcao').addClass('d-none');
}

function excluirOpcaoMensagem(node, elem){
	var target = elem;
	var opcaoIndex = -1;
	$($('#showOpcoes .excluir_opcao')).each(function(i,el) {
		if(el == target){
			opcaoIndex = i + 1;
		}
	})
	
	$(target).parent().parent().remove();
	if($('#showOpcoes').text() == ''){
		$('#showOpcoes').text('Nenhuma opção adicionada');
		$('#tipoOpcaoDigitar').attr('disabled', false);
	}
	
	if(node != null){
		var data = node.data;
		var outputs = node.outputs;
		var output = node.outputs['output_' + opcaoIndex];
		/*if(output.connections[0]){
			editor.removeSingleConnection(node.id,output.connections[0].node,'output_' + opcaoIndex,output.connections[0].output);
		}*/
		editor.removeNodeOutput(node.id, 'output_' + opcaoIndex);
		$('#node-' + node.id + ' .opcoes .card.opcao_' + opcaoIndex).remove();
		
		data.opcoes.splice(opcaoIndex-1,1);
		delete outputs['output_' + opcaoIndex];
		data.outputs = outputs;
		
		if(data.tipoOpcao){
			if(data.tipoOpcao == 'tipoOpcaoEscolher'){
				data.opcoesTermos.splice(opcaoIndex-1,1);
			}else{
				data.opcoesCondicoes.splice(opcaoIndex-1,1);
				data.opcoesValores.splice(opcaoIndex-1,1);
			}
		}else{
			if(typeof data.opcoesTermos !== 'undefined'){
				data.opcoesTermos.splice(opcaoIndex-1,1);
			}
		}
		editor.updateNodeDataFromId(node.id, data);
		
		$('#node-' + node.id + ' .opcoes').empty();
		$('#node-' + node.id + ' .opcoes').html(generateOutputs(data));
		editor.updateConnectionNodes('node-' + node.id);
		
		if($('input[type=radio][name=radioBotData]:checked').attr('id') == 'botDataTest'){
			$('#salvarBot').trigger('click');
		}
	}
}
/*NOVA MENSAGEM OPÇÃO ESCOLHER*/


/*NOVA MENSAGEM OPÇÃO DIGITAR*/
function addCondicao(node, nome, condicao, condicaoText, valor){
	index = $('#condicoes .condicao').length;
	
	$('#condicoes').append(
		"<div class='card condicao mb-1 p-2 bg-manager-gray border-0' style='margin-bottom: 15px !important;' data-condicao='"+ condicao +"'>" +
			"<div class='d-flex align-items-center justify-content-left'>" +
				'<span>Se "<span class="nomeCondicao">' + nome + '</span>" <span class="condicaoText">' + condicaoText.toLowerCase() + '</span> ' + 
					(condicao == 'qualquer_valor' ? '' : '<span class="badge badge-pill badge-md badge-dark text-white px-2 py-1" style="cursor: pointer;" data-bs-toggle="tooltip" data-bs-original-title="'+ valor +'"> valores</span>') +
				'</span>' +
			"</div>" +
			'<span class="text-end" style="position:absolute; right: 12px; top: -13px;">' +
				'<a class="btn btn-xs btn-warning rounded-circle editar_condicao text-white shadow" style="cursor: pointer;" ><i class="fa fa-pencil "></i></a>' +
			'</span>' +
			'<span class="text-end" style="position:absolute; right: -11px; top: -13px;">' +
				'<a class="btn btn-xs btn-danger rounded-circle excluir_condicao text-white shadow" style="cursor: pointer;" ><i class="fa fa-times "></i></a>' +
			'</span>' +
		'</div>'
	);
	
	$($('#condicoes .condicao')[index]).addClass('animated fadeIn').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
		$('#condicoes .condicao').removeClass('animated fadeIn');
	});
	
	$('#addCondicao').removeClass("d-none");
	$('#editarCondicao').addClass("d-none");
	
	initilizeTooltips();
	
	$('#condicoes .editar_condicao').on('click', function(e){
		var target = e.target;
		
		var opcaoIndex = -1;
		$($('#condicoes .editar_condicao')).each(function(i,el) {
			if(el == target || el == $(target).parent()[0]){
				opcaoIndex = i;
			}
		})
		
		$('#nomeInformacaoDigitar').val($('#condicoes .card').eq(opcaoIndex).find('.nomeCondicao').text());
		$('#condicaoInformacaoDigitar').selectpicker('val', $('#condicoes .card').eq(opcaoIndex).data('condicao'));
		$('#valorInformacaoDigitar').tagsinput('removeAll');
		
		if($('#condicoes .card').eq(opcaoIndex).find('.badge')){
			var valores = $('#condicoes .card').eq(opcaoIndex).find('.badge').attr('data-bs-original-title');
			$('#valorInformacaoDigitar').tagsinput('add', valores); 
		}
		
		$('#addCondicao').addClass('d-none');
		$('#editarCondicao').removeClass('d-none');
		
		$('#editarCondicao').data('index', opcaoIndex);
		
		$('#addCondicao').addClass("d-none");
		$('#editarCondicao').removeClass("d-none");
	});
	
	if(node != null){
		var data = node.data;
		var outputs = node.outputs;
		
		data.opcoes.push(nome);
		data.opcoesCondicoes.push(condicao);
		data.opcoesTextCondicoes.push(condicaoText);
		data.opcoesValores.push(valor.split(','));
		
		editor.updateNodeDataFromId(node.id, data);
		
		$('#node-' + node.id + ' .opcoes').empty();
		$('#node-' + node.id + ' .opcoes').html(generateOutputs(data));
		
		editor.addNodeOutput(node.id);
		editor.updateConnectionNodes('node-' + node.id);
		
		if($('input[type=radio][name=radioBotData]:checked').attr('id') == 'botDataTest'){
			$('#salvarBot').trigger('click');
		}
	}
	
	
	$('#tipoOpcaoEscolher').attr('disabled', true);
}

function editarCondicao(node, nome, condicao, condicaoText, valor, index){
	$('#condicoes .card').eq(index).find('.nomeCondicao').text(nome);
	$('#condicoes .card').eq(index).data('condicao', $('#condicaoInformacaoDigitar').val());
	$('#condicoes .card').eq(index).find('.condicaoText').text(condicaoText.toLowerCase());
	
	if($('#condicoes .card').eq(index).find('.badge').length > 0){
		if(condicaoText.toLowerCase() == 'qualquer valor'){
			$('#condicoes .card').eq(index).find('.badge').remove();
		}else{
			$('#condicoes .card').eq(index).find('.badge').attr('data-bs-original-title', valor);
		}
	}else{
		$('#condicoes .card').eq(index).find('div').html(
			$('#condicoes .card').eq(index).find('div').html() + ' ' +
			' <span class="badge badge-pill badge-md badge-dark text-white px-2 py-1" style="cursor: pointer;" data-bs-toggle="tooltip" data-bs-original-title="'+ valor +'"> valores</span>'
		);
		initilizeTooltips();
	}
	
	$('#addCondicao').removeClass('d-none');
	$('#editarCondicao').addClass('d-none');
	
	if(node != null){
		var data = node.data;
		var outputs = node.outputs;
		
		data.opcoes[index] = nome;
		data.opcoesCondicoes[index] = condicao;
		data.opcoesTextCondicoes[index] = condicaoText;
		data.opcoesValores[index] = valor.split(',');
		
		editor.updateNodeDataFromId(node.id, data);
		
		$('#node-' + node.id + ' .opcoes').empty();
		$('#node-' + node.id + ' .opcoes').html(generateOutputs(data));
		editor.updateConnectionNodes('node-' + node.id);
		
		initilizeTooltips();
		if($('input[type=radio][name=radioBotData]:checked').attr('id') == 'botDataTest'){
			$('#salvarBot').trigger('click');
		}
	}
}

function excluirCondicao(node, elem){
	var target = elem;
	var opcaoIndex = -1;
	$($('#condicoes .excluir_condicao')).each(function(i,el) {
		if(el == target){
			opcaoIndex = i;
		}
	})
	
	$('#condicoes .card').eq(opcaoIndex).remove();
	if($('#condicoes').text() == ''){
		$('#condicoes').text('Nenhuma opção adicionada');
		$('#tipoOpcaoEscolher').attr('disabled', false);
	}
	
	if(node != null){
		var data = node.data;
		var outputs = node.outputs;
		var output = node.outputs['output_' + (opcaoIndex+1)];
		/*if(output.connections[0]){
			editor.removeSingleConnection(node.id,output.connections[0].node,'output_' + opcaoIndex,output.connections[0].output);
		}*/
		editor.removeNodeOutput(node.id, 'output_' + (opcaoIndex +1));
		$('#node-' + node.id + ' .opcoes .card.opcao_' + (opcaoIndex +1)).remove();
		
		data.opcoes.splice(opcaoIndex,1);
		delete outputs['output_' + opcaoIndex];
		data.outputs = outputs;
		
		if(data.tipoOpcao){
			if(data.tipoOpcao == 'tipoOpcaoEscolher'){
				data.opcoesTermos.splice(opcaoIndex,1);
			}else{
				data.opcoesCondicoes.splice(opcaoIndex,1);
				data.opcoesTextCondicoes.splice(opcaoIndex,1);
				data.opcoesValores.splice(opcaoIndex,1);
			}
		}else{
			data.opcoesTermos.splice(opcaoIndex,1);
		}
		editor.updateNodeDataFromId(node.id, data);
		
		$('#node-' + node.id + ' .opcoes').empty();
		$('#node-' + node.id + ' .opcoes').html(generateOutputs(data));
		editor.updateConnectionNodes('node-' + node.id);
		
		if($('input[type=radio][name=radioBotData]:checked').attr('id') == 'botDataTest'){
			$('#salvarBot').trigger('click');
		}
	}
}
/*NOVA MENSAGEM OPÇÃO DIGITAR*/




/*VALIDA E SALVA NOVA MENSAGEM AUTOMATICA*/
function salvarNovaMensagemAutomatica(node){
	let nomeMensagem = $('#nome_mensagem').val();
	let idMensagem = $('#id_mensagem').val();
	let opcoes = '';
	let opcoesArr = [];
	let opcoesTermos = []; //JSON.stringify($('#termos_opcao').val().split(","));
	let opcoesCondicoes = []; //JSON.stringify($('#termos_opcao').val().split(","));
	let opcoesTextCondicoes = []; //JSON.stringify($('#termos_opcao').val().split(","));
	let opcoesValores = []; //JSON.stringify($('#termos_opcao').val().split(","));
	let tipoOpcao = $('input[type=radio][name=radiosTipoOpcao]:checked').attr('id');
	let validaOpcaoEscolher = $('#selectValidaOpcoes').val();
	let mensagemEncaminhar = $('#selectMensagemEncaminha').val();
	let selectedTags = $('#selectTags').val();
	let selectedGrupo = $('#selectGrupo').val();
	let sendListMessage = $('#enviaListaOpcao').is(':checked');
	
	var idExiste = false;
	$.each(editor.drawflow.drawflow[editor.module].data, function(i,e) {
		var id = (node == null ? null : node.id);
		if(e.data.id == idMensagem && e.id != id){
			idExiste = true;
		}
	})
	/*$("#showOpcoes .opcao").each(function(i,e) {
		let op = '<div class="card mt-1 bg-primary p-1 text-white opcao_' + (i+1) +'">' +
					(i+1) + ' - ' + $(e).text().trim() + 
				'</div>';
		opcoes = opcoes + op;
		opcoesArr.push($(e).text().trim());
	})*/
	

	let erro = null;
	switch(true){
		case nomeMensagem == '':
			erro = 'Nome não pode ser vazio';
			break;
		case idMensagem == '':
			erro = 'ID não pode ser vazio';
			break;
		case idMensagem == 'nova_mensagem':
			erro = 'ID inválido';
			break;
		case idExiste:
			erro = 'Nome/Id \''+idMensagem+'\' já existe, informe outro nome';
			break;
		case $('#novaRespostaMensagens .mensagemText').length == 0:
			erro = 'Inclua pelo menos uma mensagem';
			break;
		case tipoOpcao == 'tipoOpcaoEscolher' && $("#showOpcoes .opcao").length == 0:
			erro = 'Inclua pelo menos uma opção';
			break;
		case tipoOpcao == 'tipoOpcaoEscolher' && $('#selectValidaOpcoes').val() == 'encaminhar_mensagem' && $('#selectMensagemEncaminha').val() == '':
			erro = 'Selecione uma mensagem para ser encaminhada, caso opção inválida';
			break;
		case tipoOpcao == 'tipoOpcaoDigitar' && $('#condicoes .condicao').length == 0:
			erro = 'Nenhuma condição adicionada';
			break;
	}
	
	$('#novaRespostaMensagens .mensagemText').each(function(i,e) {
		if($(e).text() == ''){
			erro = 'Existe mensagens sem texto. Exclua ou preencha algum texto na mensagem para continuar.';
		}
	})
	
	if(erro != null){
		$('#erroNovaMensagem').html('<i class="fa fa-exclamation-circle"></i>&nbsp;' + erro);
		$('#erroNovaMensagem').addClass('animated shakeX').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
			$('#erroNovaMensagem').removeClass('animated shakeX');
		});
		return;
	}
	
	
	if(tipoOpcao == 'tipoOpcaoEscolher'){
		$("#showOpcoes .opcao").each(function(i,e) {
			/*let op = '<div class="card mt-1 bg-primary p-1 text-white opcao_' + (i+1) +'" style="margin-bottom: 0px !important;border-radius: 5px;">' +
						'<span>' + (i+1) + ' - ' + $(e).text().trim() + '</span>' +
					'</div>';
			opcoes = opcoes + op;*/
			opcoesArr.push($(e).text().trim());
			opcoesTermos.push($(e).find('span').data('termos'));
		})
		
	}
	
	if(tipoOpcao == 'tipoOpcaoDigitar'){initilizeTooltips();
		$('#condicoes .card').each(function(i,e) {
			let nomeCondicao = $(e).find('.nomeCondicao').text();
			let tipoCondicao = $(e).data('condicao');
			let textCondicao = $(e).find('.condicaoText').text();
			var valores = ($(e).find('.badge').attr('data-bs-original-title') ? $(e).find('.badge').attr('data-bs-original-title').split(',') : '');
			
			opcoesArr.push(nomeCondicao);
			opcoesCondicoes.push(tipoCondicao);
			opcoesTextCondicoes.push(textCondicao);
			//$.each(valores, function(i,e){
				
				opcoesValores.push(valores);
			//})
		})
	}
	
	let mensagens = [];
	$('#novaRespostaMensagens .mensagem').each(function(i,e) {
		mensagens.push({mensagem:$(e).find('.mensagemText').text(),imagem:$(e).find('.mensagemImg').attr('src'),file:$(e).find('.mensagemFile').attr('data-src')});
	})
	
			
	if(node == null){
		var mensagemData = {
							id:idMensagem,
							nome:nomeMensagem, 
							mensagem:mensagens, 
							opcoes:opcoesArr, 
							opcoesTermos:opcoesTermos, 
							opcoesCondicoes:opcoesCondicoes, 
							opcoesValores:opcoesValores,
							opcoesTextCondicoes:opcoesTextCondicoes,
							tipoOpcao:tipoOpcao,
							validaOpcaoEscolher:validaOpcaoEscolher,
							mensagemEncaminhar:mensagemEncaminhar,
							selectedTags:selectedTags,
							selectedGrupo:selectedGrupo,
							sendListMessage:sendListMessage,
						};
		
		editor.addNode(idMensagem, 1,  opcoesArr.length, ((editor.canvas_x/editor.zoom)*-1)+(300*editor.zoom), ((editor.canvas_y/editor.zoom)*-1)+(200*editor.zoom), '', mensagemData, '' );
	}else{
		
		/*if(typeof(editor.getNodeFromId(id).data.mensagem) == "object"){
			var msgsDeletar = editor.getNodeFromId(id).data.mensagem;
			$(msgsDeletar).each(function(i,msg){
				var deletar = true;
				$(mensagens).each(function(i, m){
					if(msg.imagem == m.imagem){
						deletar = false;
					}
				})
				
				if(msg.imagem != '' && deletar){
					fetch('deletaImagemMensagem', {
						method: 'POST',
						headers: {'Content-Type': 'application/x-www-form-urlencoded'},
						body: 'image=' + msg.imagem
					})
					.then(function(res){ return res.json(); })
					.then(function(res){})
				}
			})
		}*/
		
		var data = node.data;
		data.id = idMensagem
		data.nome = nomeMensagem
		data.mensagem = mensagens
		data.validaOpcaoEscolher = validaOpcaoEscolher
		data.mensagemEncaminhar = mensagemEncaminhar
		data.selectedTags = selectedTags
		data.selectedGrupo = selectedGrupo
		data.sendListMessage = sendListMessage
		
		
		$('#node-' + node.id + ' .drawflow_content_node').html(geraNodeHtml({data: data}, false));
		editor.updateNodeDataFromId(node.id, data);
	}
	$('#salvarBot').attr('disabled', false);
	if(tipoOpcao == 'tipoOpcaoDigitar'){initilizeTooltips();}
	
	if($('input[type=radio][name=radioBotData]:checked').attr('id') == 'botDataTest'){
		$('#salvarBot').trigger('click');
	}
	
	Swal.close();
}
/*VALIDA E SALVA NOVA MENSAGEM AUTOMATICA*/



/*GERA HTML NODES*/
function geraNodeHtml(n, isImport = true){
	var data = n.data;
	switch(true){
		case typeof(data.elements) != 'undefined': //GRUPO
			var html_mensagem = '<h6 class="p-2 d-flex justify-content-center bb-1 bg-secondary" style="">'+ data.name +'</h6>';
			break;
		case typeof(data.action) != 'undefined':
			var html_mensagem = 
									'<div class="" style="max-width: 250px;min-width: 250px;">' +
										'<div class="' + (data.action == 'voltar' ? 'mb-0' : 'mb-2') + '">' +
											'<div class="node-header p-2" style="">' +
												n.id + ' - ' + data.name +
											'</div>' +
										'</div>' +
										(data.action == 'voltar' ? '' : '<div class="m-2 drawflow-node-divider"></div>') +
										(data.action == 'voltar' ? '' : '<div style="max-height: 250px; overflow-y: auto;">' +
																			'<div class="p-2 font-weight-normal" style="font-size: 0.85em !important;">' +
																				'<div class="card text-start p-2 bg-success mensagem" style="margin-bottom: 5px !important;">' + (data.mensagem == '' ? 'Sem mensagem' : data.mensagem)+ '</div>'+
																			'</div>' +
																		'</div>') +
									'</div>'
									;
			break;
		case typeof(data.requisicao) != 'undefined':
			var html_mensagem = 
								'<div class="mensagem_automatica" style="max-width: 250px;min-width: 250px;">' +
									'<div class="node-header p-2" style="">' +
										'<i class="fa fa-link" style="cursor: pointer" data-bs-toggle="tooltip" data-bs-original-title="'+ data.requisicao.url +'"></i> ' + data.nome + 
									'</div>' +
									'<div style="max-height: 250px; overflow-y: auto;">' +
										'<div class="p-2 font-weight-normal" style="font-size: 0.85em !important;">' +
											'<div class="card text-start p-2 bg-success mensagem" style="margin-bottom: 5px !important;">' + data.mensagem + '</div>'+
										'</div>' +
									'</div>' +
									'<div class="m-2 drawflow-node-divider"></div>' +
									'<div class="mb-2 font-weight-normal row opcoes ps-15 pe-15">' +
										'<div class="card d-flex mt-1 bg-primary p-1 text-white opcao" style="margin-bottom: 0px !important; border-radius: 5px;">' +
											'<span><i class="fa fa-check text-white"></i> Sucesso</span>' +
										'</div>' +
										'<div class="card d-flex mt-1 bg-primary p-1 text-white opcao" style="margin-bottom: 0px !important; border-radius: 5px;">' +
											'<span><i class="fa fa-close text-white"></i> Erro</span>' +
										'</div>' +
									'</div>' +
								'</div>'
								;
			break;
		case typeof(data.regras) != 'undefined':
			var opcoes = '';
			$(data.regras).each(function(iRegra,regra) {
				var op = '<div class="card d-flex mt-1 bg-primary p-1 text-white opcao_' + (iRegra+1) +'" style="margin-bottom: 0px !important; border-radius: 5px;">';
				$(regra.condicoes).each(function(iCond,cond) {
					switch(cond.tipo){
						case 'mensagem':
								op +='<span class="mb-1">Se "' + cond.nome + '" ' + cond.condicao + ' ' + 
											'<span class="badge badge-pill badge-sm badge-dark text-white" style="cursor: pointer" data-bs-toggle="tooltip" data-bs-original-title="'+ cond.valores +'"> valores</span>' +
										'</span>' +
										//(!isImport ? '<div class="output output_'+ (iCond+1) +' opcao" style="position: absolute; margin-right: -10px;"></div>' : '') +
									'';
							break;
						case 'canal':
								op += '<span class="mb-1">Se "' + cond.nome + '": ' + 
											cond.valores +
										'</span>' +
										//(!isImport ? '<div class="output output_'+ (iCond+1) +' opcao" style="position: absolute; margin-right: -10px;"></div>' : '') +
									'';
							break;
						case 'novo_contato':
								op += '<span class="mb-1">Se "' + cond.nome + '": ' + 
											cond.condicaoTexto +
										'</span>' +
										//(!isImport ? '<div class="output output_'+ (iCond+1) +' opcao" style="position: absolute; margin-right: -10px;"></div>' : '') +
									'';
							break;
						case 'grupo_contato':
								op += '<span class="mb-1">Se "' + cond.nome + '": ' + 
											cond.condicaoTexto +
										'</span>' +
										//(!isImport ? '<div class="output output_'+ (iCond+1) +' opcao" style="position: absolute; margin-right: -10px;"></div>' : '') +
									'';
								break;
							
					}
				})
				
				op += (!isImport ? '<div class="output output_'+ (iRegra+1) +' opcao" style="position: absolute; margin-right: -10px;"></div>' : '');
				op += '</div>';
				opcoes += op;
			})
			opcoes += '<div class="card d-flex mt-1 bg-primary p-1 text-white opcao_' + (data.regras.length+1) +'" style="margin-bottom: 0px !important; border-radius: 5px;">'+
							'<span class="mb-1">Padrão</span>' +
							(!isImport ? '<div class="output output_'+ (data.regras.length+1) +' opcao" style="position: absolute; margin-right: -10px;"></div>' : '') +
						'</div>';
			
			var html_mensagem = 
								'<div class="mensagem_automatica p-0" style="max-width: 250px;min-width: 250px;">' +
									'<div class="node-header p-2" style="">' + data.nome + '</div>' +
									'<div style="max-height: 250px; overflow-y: auto;">' +
										
									'</div>' +
									//'<div class="m-2 drawflow-node-divider"></div>' +
									'<div class="mb-2 font-weight-normal row opcoes ps-15 pe-15">' +opcoes +'</div>' +
								'</div>'
								;
			break;
		case typeof(data.tipoOpcao) == 'undefined' || data.tipoOpcao == 'tipoOpcaoEscolher' || data.tipoOpcao == 'tipoOpcaoDigitar' :
			var opcoes = '';
			if(data.tipoOpcao == 'tipoOpcaoEscolher' || typeof(data.tipoOpcao) == 'undefined'){
				$(data.opcoes).each(function(i,e) {
					/*let op = '<div class="card mt-1 bg-primary p-1 text-white opcao_' + (i+1) +'" style="margin-bottom: 0px !important;border-radius: 5px;">' +
								'<span>' + (i+1) + ' - ' + e + '</span>' +
							'</div>';*/
					var op = '<div class="card mt-1 bg-primary p-1 text-white opcao_' + (i+1) +'" style="margin-bottom: 0px !important;border-radius: 5px;">' +
								'<span>' + (i+1) + ' - ' + e + '</span>' +
								(!isImport ? '<div class="output output_'+ (i+1) +' opcao" style="position: absolute; margin-right: -10px;"></div>' : '') +
							'</div>';
					opcoes = opcoes + op;
				})
			}
			if(data.tipoOpcao == 'tipoOpcaoDigitar'){
				$(data.opcoes).each(function(i,e) {
					var nomeCondicao = e;
					var tipoCondicao = data.opcoesCondicoes[i];
					var textCondicao = data.opcoesTextCondicoes[i];
					var valorCondicao = (tipoCondicao != 'qualquer_valor' ? data.opcoesValores[i].join(',') : '');
					var op = '<div class="card d-flex mt-1 bg-primary p-1 text-white opcao_' + (i+1) +'" style="margin-bottom: 0px !important; border-radius: 5px;">' +
								'<span class="">Se "' + nomeCondicao + '" ' + textCondicao.toLowerCase() + ' ' + 
									(tipoCondicao == 'qualquer_valor' ? '' : '<span class="badge badge-pill badge-sm badge-dark text-white" style="cursor: pointer" data-bs-toggle="tooltip" data-bs-original-title="'+ valorCondicao +'"> valores</span>') +
								'</span>' +
								(!isImport ? '<div class="output output_'+ (i+1) +' opcao" style="position: absolute; margin-right: -10px;"></div>' : '') +
							'</div>';
					opcoes = opcoes + op;
				})
			}
			
			var mensagem = '';
			if(typeof(data.mensagem) == "object"){
				$(data.mensagem).each(function(i,msg){
					var img = '';
					if(msg.imagem != ''){
						img = '<img src="'+msg.imagem+'" class="mb-2 rounded" style="" draggable="false" style=""></img>';
					}
					var file = '';
					if(!msg.file){msg.file = "";}
					if(msg.file != ''){
						file = '<div class="mensagemFile b-1 bg-success-light rounded10 mb-2 p-2 text-center ">' +
									'<i class="fa fa-file mt-2 mb-2 rounded" style="cursor:pointer; max-width: 250px; font-size: 28px;"></i>' +
									'<p class="mensagemFileName mb-0" style="font-size: 10px;">'+ msg.file.split('/').pop() +'</p>' +
								'</div>';
					}
					
					mensagem = mensagem + '<div class="ps-2 pe-2 pt-1 font-weight-normal" style="font-size: 0.85em !important;">' + 
											'<div class="card text-start p-2 bg-success mensagem" style="margin-bottom: 3px !important;">' + 
												img +
												file +
												msg.mensagem + 
											'</div>'+
										'</div>';
					
				})
				
				
				
			}else{
				mensagem = '<div class="p-2 font-weight-normal" style="font-size: 0.85em !important;">' +
								'<div class="card text-start p-2 bg-success mensagem" style="margin-bottom: 5px !important;">' + data.mensagem + '</div>'+
							'</div>';
			}
			
			var html_mensagem = 
								'<div class="mensagem_automatica p-0" style="max-width: 250px;min-width: 250px;">' +
									'<div class="node-header p-2" style="">' + data.nome + '</div>' +
									//'<div class="m-2 drawflow-node-divider"></div>' +
									'<div style="max-height: 250px; overflow-y: auto;">' +
										mensagem +
									'</div>' +
									'<div class="m-2 drawflow-node-divider"></div>' +
									'<div class="mb-2 font-weight-normal row opcoes ps-15 pe-15">' +opcoes +'</div>' +
								'</div>'
								;
								
			break;
	}

	return html_mensagem;
}


function generateOutputs(data){
	var opcoes = '';
	switch(true){
		case typeof(data.action) != 'undefined':
			break;
		case typeof(data.requisicao) != 'undefined':
			break;
		case typeof(data.regras) != 'undefined':
			var opcoes = '';
			$(data.regras).each(function(iRegra,regra) {
				var op = '<div class="card d-flex mt-1 bg-primary p-1 text-white opcao_' + (iRegra+1) +'" style="margin-bottom: 0px !important; border-radius: 5px;">';
				$(regra.condicoes).each(function(iCond,cond) {
					switch(cond.tipo){
						case 'mensagem':
								op +='<span class="mb-1">Se "' + cond.nome + '" ' + cond.condicao + ' ' + 
											'<span class="badge badge-pill badge-sm badge-dark text-white" style="cursor: pointer" data-bs-toggle="tooltip" data-bs-original-title="'+ cond.valores +'"> valores</span>' +
										'</span>' +
										//(!isImport ? '<div class="output output_'+ (iCond+1) +' opcao" style="position: absolute; margin-right: -10px;"></div>' : '') +
									'';
							break;
						case 'canal':
								op += '<span class="mb-1">Se "' + cond.nome + '": ' + 
											cond.valores +
										'</span>' +
										//(!isImport ? '<div class="output output_'+ (iCond+1) +' opcao" style="position: absolute; margin-right: -10px;"></div>' : '') +
									'';
							break;
						case 'novo_contato':
								op += '<span class="mb-1">Se "' + cond.nome + '": ' + 
											cond.condicaoTexto +
										'</span>' +
										//(!isImport ? '<div class="output output_'+ (iCond+1) +' opcao" style="position: absolute; margin-right: -10px;"></div>' : '') +
									'';
							break;
						case 'grupo_contato':
								op += '<span class="mb-1">Se "' + cond.nome + '": ' + 
											cond.condicaoTexto +
										'</span>' +
										//(!isImport ? '<div class="output output_'+ (iCond+1) +' opcao" style="position: absolute; margin-right: -10px;"></div>' : '') +
									'';
								break;
					}
				})
				
				op += '<div class="output output_'+ (iRegra+1) +' opcao" style="position: absolute; margin-right: -10px;"></div>';
				op += '</div>';
				opcoes += op;
			})
			opcoes += '<div class="card d-flex mt-1 bg-primary p-1 text-white opcao_' + (data.regras.length+1) +'" style="margin-bottom: 0px !important; border-radius: 5px;">'+
							'<span class="mb-1">Padrão</span>' +
							'<div class="output output_'+ (data.regras.length+1) +' opcao" style="position: absolute; margin-right: -10px;"></div>'
						'</div>';
			break;
		case typeof(data.tipoOpcao) == 'undefined' || data.tipoOpcao == 'tipoOpcaoEscolher' || data.tipoOpcao == 'tipoOpcaoDigitar' :
			if(data.tipoOpcao == 'tipoOpcaoEscolher' || typeof(data.tipoOpcao) == 'undefined'){
				$(data.opcoes).each(function(i,e) {
					let op = '<div class="card mt-1 bg-primary p-1 text-white opcao_' + (i+1) +'" style="margin-bottom: 0px !important;border-radius: 5px;">' +
								'<span>' + (i+1) + ' - ' + e + '</span>' +
								'<div class="output output_'+ (i+1) +' opcao" style="position: absolute; margin-right: -10px;"></div>' +
							'</div>';
					opcoes = opcoes + op;
				})
			}	
			
			if(data.tipoOpcao == 'tipoOpcaoDigitar'){
				$(data.opcoes).each(function(i,e) {
					
					let nomeCondicao = e;
					let tipoCondicao = data.opcoesCondicoes[i];
					let textCondicao = data.opcoesTextCondicoes[i];
					let valorCondicao = (tipoCondicao != 'qualquer_valor' ? data.opcoesValores[i].join(',') : '');
					let op = '<div class="card d-flex mt-1 bg-primary p-1 text-white opcao_' + (i+1) +'" style="margin-bottom: 0px !important; border-radius: 5px;">' +
								'<span class="">Se "' + nomeCondicao + '" ' + textCondicao.toLowerCase() + ' ' + 
									(tipoCondicao == 'qualquer_valor' ? '' : '<span class="badge badge-pill badge-sm badge-dark text-white" style="cursor: pointer" data-bs-toggle="tooltip" data-bs-original-title="'+ valorCondicao +'"> valores</span>') +
								'</span>' +
								'<div class="output output_'+ (i+1) +' opcao" style="position: absolute; margin-right: -10px;"></div>' +
							'</div>';
					opcoes = opcoes + op;
					
					
				})
				
			}
			
			break;
	}
	return opcoes;
}
/*GERA HTML NODES*/




/*TESTAR CHATBOT*/
var testeBotLastMsg = null;
var testeBotVariaveis = null;
$('#testar_bot').on('click', function(){
	if(editor == null){
		Swal.fire({
			title: 'Nenhum número cadastrado',
			text: 'Cadastre um número para poder usar as mensagens automáticas',
			icon: 'warning',
			confirmButtonColor: 'var(--bs-info)',
		});
		return;
	}
	
	let width = '100vw';
	if($(window).width() > 990){width = ($(window).width()/2.5);}
	
	testeBotVariaveis = null;
	
	Swal.fire({
		position: 'top-end',
		width: width,
		showClass: {
			popup: 'animated fadeInRight faster'
		},
		hideClass: {
			popup: 'animated fadeOutRight faster'
		},
		grow: 'column',
		//title: 'Testar ChatBot',
		html:
			'<h4 id="testarChatbotTitle" class="fw-bold text-purple">Testar ChatBot</h4>' +
			'<div id="" class="" style="">' +
				'<div id="testarChatbotContainer" class="" style="">' +
					'<div id="testeBotRespostaMensagens" class="bg-secondary p-3 rounded" ' +
						'style="overflow-y: auto; overflow-x: hidden;'+
							'background-image:url(assets/images/pattern.svg); ' +
							'backface-visibility: hidden;' +
							'-webkit-backface-visibility: hidden;' +
							 ' -webkit-transform: translateZ(0) scale(1.0, 1.0);' +
							  'transform: translateZ(0); ' +
							 ' max-height: 100vh; overflow-y: auto;' +
						'">' +
						
					'</div>' +
				'</div>' +
				'<div class="d-flex justify-content-between align-items-end mt-3" style="">' +
					'<textarea id="testarChatbotMensagem" class="form-control bg-manager-gray border-0 me-20" type="text" placeholder="Mensagem" style="resize: none; height: 42px; overflow-y:hidden; max-height: 126px;"></textarea>' +
					'<div class="d-flex justify-content-between">' +
						'<button id="testarChatbotEnviarMensagem" type="button" class="waves-effect waves-circle btn btn-sm btn-circle btn-green-manager" style="">' +
							'<i class="fa fa-paper-plane"></i>' +
						'</button>' +
					'</div>' +
				'</div>' +
				
				'<div id="testarChatBotButtons" class="d-flex justify-content-between pt-1 mt-3 bt-1" style="z-index:1;">' +
					'<a id="testarChatBotSair" href="javascript:void(0)" class="btn btn-sm btn-green-manager2 fw-bold my-2"><i class="fa-solid fa-right-from-bracket me-1"></i>Sair</a>' +
					'<a id="testarChatBotLimpar" href="javascript:void(0)" class="btn btn-sm btn-warning my-2 fw-bold"><i class="fa-solid fa-arrow-rotate-left me-1"></i>Reiniciar conversa</a>' +
				'</div>' +
			'</div>' +
			'',
		showCloseButton: true,
		showCancelButton: false,
		showConfirmButton: false,
		focusConfirm: false,
		confirmButtonText: 'Adicionar',
		cancelButtonText: 'Cancelar',
		//scrollbarPadding: false,
		allowOutsideClick: false,
		confirmButtonColor: 'var(--bs-info)',
		willOpen: () => {
			$('.swal2-container').addClass('p-0');
		},
		didOpen: () => {
			$(editor.precanvas).addClass('transition-animated'); //ADICIONA ANIMAÇÃO PARA CENTRALIZAR O NODE
			$('#testarChatbotMensagem').focus();
			
			$('.swal2-popup').css('height', '100vh');
			$('.swal2-html-container').css('height', $('.swal2-popup').height());
			
			$('#testeBotRespostaMensagens').css('height', $('.swal2-popup').height() - $('#testarChatBotButtons').height() - $('#testarChatbotContainer').position().top - $('#testarChatbotTitle').height() - $('#testarChatbotMensagem').parent().height());
			
			$('.swal2-close').blur();
			
			$('#testarChatBotSair').on('click', function(){
				Swal.close();
			})
			
			$('#testarChatBotLimpar').on('click', function(){
				testeBotLastMsg = null;
				$('#testeBotRespostaMensagens').empty();
				$.each(editor.drawflow.drawflow[editor.module].data, function(i,e){
					if(e.data.name == 'nova_mensagem'){
						editor.focusNode(e.id, true, true);
					}
				})
			})
			
			$('#testarChatbotEnviarMensagem').on('click', function(){
				enviaMsgTeste();
				
			})
			
			$('#testarChatbotMensagem').on('keydown', function (event) {
				if(event.which === 13 && !event.shiftKey) {
					event.preventDefault();
					$('#testarChatbotEnviarMensagem').trigger('click');
				}
			})
			
			function enviaMsgTeste(){
				var msg = $('#testarChatbotMensagem').val();
				if(msg == ''){return;}
				if(testeBotLastMsg == null && $('#testeBotRespostaMensagens .box').length > 0){
					$('#testeBotRespostaMensagens').empty();
					testeBotVariaveis = null;
				}
				
				$('#testarChatbotMensagem').val('');
				$('#testarChatbotMensagem').attr('disabled', true);
				$('#testarChatbotEnviarMensagem').attr('disabled', true);
				
				var type = ($('input[type=radio][name=radioBotData]:checked').attr('id') == 'botDataTest' ? 'test' : 'production');
				
				var data;
				data = {message:msg,testInfo:{lastSentMsg:testeBotLastMsg,type:type,variaveis:testeBotVariaveis}}
				addMensagemTeste({mensagem:msg,imagem:"",file:""}, true)
				
				fetch('{{host}}api/testChatbot/' + $('#meusNumeros :selected').data('numero'), {
					method: 'POST',
					headers: {'Content-Type': 'application/json'},
					body: JSON.stringify(data)
				})
				.then(function(res){ return res.json(); })
				.then(function(res){
					if(res.Success){
						var mensagem = res.mensagem;
						testeBotLastMsg = res.lastSentMsg;
						testeBotVariaveis = JSON.parse(res.variaveis);
						//console.log(testeBotVariaveis);
						
						if(testeBotLastMsg != null){
							editor.focusNode(testeBotLastMsg, true, true);
						}
						var time = 300;
						$(mensagem).each(function(i,m) {
							setTimeout( function(){ addMensagemTeste(m, false); }, time)
							time += 300;
						});
						setTimeout( function(){ 
							
							if(res.action){
								if(res.action == 'encerrar_chamado'){
									testeBotLastMsg = null;
									$('#testeBotRespostaMensagens').append(
										'<div class="box shadow mb-2 text-start p-1 mensagem font-weight-normal animated fast fadeIn mx-auto bg-secondary" style="font-size: 0.85em !important; max-width: 80%;">' +
											'<text class="mensagemText rounded text-center" style="margin-bottom: 2px !important;white-space: pre-line;"><b>Chamado encerrado!</b><br>Envie uma mensagem para iniciar um novo chamado.</text>'+
										'</div>'
									);
								}
								
								if(res.action == 'conversar_com_atendente'){
									testeBotLastMsg = null;
									$('#testeBotRespostaMensagens').append(
										'<div class="box shadow mb-2 text-start p-1 mensagem font-weight-normal animated fast fadeIn mx-auto bg-secondary" style="font-size: 0.85em !important; max-width: 80%;">' +
											'<text class="mensagemText rounded text-center" style="margin-bottom: 2px !important;white-space: pre-line;"><b>Encaminhado para um atendente!</b><br>Envie uma mensagem para iniciar um novo chamado.</text>'+
										'</div>'
									);
								}
								
								if(res.action == 'encaminhar_departamento'){
									testeBotLastMsg = null;
									$('#testeBotRespostaMensagens').append(
										'<div class="box shadow mb-2 text-start p-1 mensagem font-weight-normal animated fast fadeIn mx-auto bg-secondary" style="font-size: 0.85em !important; max-width: 80%;">' +
											'<text class="mensagemText rounded text-center" style="margin-bottom: 2px !important;white-space: pre-line;"><b>Encaminhado para um departamento!</b><br>Envie uma mensagem para iniciar um novo chamado.</text>'+
										'</div>'
									);
								}
							}
							
							$('#testarChatbotMensagem').attr('disabled', false);
							$('#testarChatbotEnviarMensagem').attr('disabled', false);
							$('#testarChatbotMensagem').focus();
						}, time);
						
						
					}else{
						$('#testarChatbotMensagem').val(msg);
						
						Swal.fire({
							text: res.Erro,
							scrollbarPadding: false,
							icon: 'error',
							confirmButtonColor: 'var(--bs-info)',
							scrollbarPadding: false
						}).then(() =>{

						})
					}
				})
				
			}
			
			function addMensagemTeste(msg, fromMe){
				if(!msg.file){msg.file = "";}
				
				$('#testeBotRespostaMensagens').append(
					'<div class="box shadow mb-2 text-start p-1 mensagem font-weight-normal animated fast '+(fromMe ? 'ms-auto bg-success fadeInRight' : 'bg-light fadeInLeft')+'" style="font-size: 0.85em !important; max-width: 65%;">' +
						'<div class="d-flex justify-content-center" style="">' +
							'<div class="" style="max-width: 250px; position: relative;">' +
								(msg.imagem ? '<img src="'+((msg.imagem != "") ? msg.imagem : "")+'" class="mensagemImg mt-2 mb-2 rounded '+((msg.imagem != "") ? "" : "d-none")+'" style="max-width: 250px;"></img>' : '') +
							
								'<div class="mensagemFile b-1 bg-secondary-light rounded10 mb-2 p-2 text-center '+((msg.file != "") ? "" : "d-none")+'">' +
									'<i data-src="'+((msg.file != "") ? msg.file : "")+'" class="fa fa-file mt-2 mb-2 rounded" style="cursor:pointer; max-width: 250px; font-size: 38px;"></i>' +
									'<p class="mensagemFileName mb-0" style="font-size: 10px;">'+((msg.file != "") ? msg.file.split('/').pop() : "")+'</p>' +
								'</div>' +
							
							'</div>' +
						'</div>' +
						'<text class="mensagemText rounded p-1 '+(fromMe ? 'text-right' : '')+'" style="margin-bottom: 2px !important;white-space: pre-line;">'+ (msg.mensagem != null ? msg.mensagem : '') +'</text>'+
					'</div>'
				);
				
				
				
				
				$("#testeBotRespostaMensagens").animate({ scrollTop: $('#testeBotRespostaMensagens').get(0).scrollHeight}, 500);
			}
		},
		preConfirm: (value) => {
			
		}
	}).then((result) => {
		testeBotLastMsg = null;
		$(editor.precanvas).removeClass('transition-animated'); //REMOVE ANIMAÇÃO PARA CENTRALIZAR O NODE
		if(result.isConfirmed){
			
		}
	})
})
/*TESTAR CHATBOT*/





/*COPIAR COLAR MENSAGEM*/
var ctrlDown = false,ctrlKey = 17,cmdKey = 91,vKey = 86,cKey = 67;
var nodeCopiado = null;
$(document).keydown(function(e) {
	if (e.keyCode == ctrlKey || e.keyCode == cmdKey) ctrlDown = true;
}).keyup(function(e) {
	if (e.keyCode == ctrlKey || e.keyCode == cmdKey) ctrlDown = false;
});
$(document).keydown(function(e) {
	if (ctrlDown && (e.keyCode == cKey)){
		if(editor.node_selected != null){
			var id = editor.node_selected.id.replace('node-', '');
			var node = editor.getNodeFromId(id);
			if(node.data.name != "nova_mensagem"){
				nodeCopiado = node;
				
				const Toast = Swal.mixin({
					toast: true,
					position: 'top-end',
					showConfirmButton: false,
					timer: 2000,
					timerProgressBar: true,
						didOpen: (toast) => {
						toast.addEventListener('mouseenter', Swal.stopTimer)
						toast.addEventListener('mouseleave', Swal.resumeTimer)
					}
				})

				Toast.fire({
					icon: 'success',
					html: 'Resposta copiada !<br>Digite CTRL+V para duplicar.'
				})
			}
		}
	}
	
	if (ctrlDown && (e.keyCode == vKey)){
		if(nodeCopiado != null){
			Swal.fire({
				  title: 'Copiar resposta',
				  html:
					'<div class="container">' +
						'<div class="col-12 text-left mt-4">' +
							'<h6 class="mb-1 font-weight-bold">Nome mensagem*</h6>' +
							'<input id="copiarRespostaNome" placeholder="Nome" class="form-control"/>' +
							'<input id="copiarRespostaId" type="hidden" placeholder="Id" class="form-control"/>' +
						'</div>' +
						'' +
					'</div>' +
					'',
				  showCloseButton: true,
				  showCancelButton: true,
				  focusConfirm: false,
				  confirmButtonText: 'Adicionar',
				  cancelButtonText: 'Cancelar',
				  allowOutsideClick: false,
				  confirmButtonColor: 'var(--bs-info)',
				  scrollbarPadding: false,
				  willOpen: () => {
				  },
				  didOpen: () => {
					$('#copiarRespostaNome').focus();
					  
					replaceSpaceByUnderscore = {
					  onKeyPress: function(val, e, field, options) {
						  $('#copiarRespostaId').val(val.replace(' ', '_'));
						},
						translation: {
						  'Z': {
							pattern: /[a-z0-9_ ]/, optional: true
						  }
						}
					};
					
					$('#copiarRespostaId').mask('ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ', replaceSpaceByUnderscore);
					$('#copiarRespostaNome').on('keyup', function(){
						$('#copiarRespostaId').val($('#copiarRespostaNome').val().toLowerCase().replaceAll(' ', '_'))
					})
								  
				  },
				  preConfirm: (value) => {
					var copiarRespostaNome = $('#copiarRespostaNome').val();
					var copiarRespostaId = $('#copiarRespostaId').val();
					
					var existeId = false;
					$.each(editor.drawflow.drawflow[editor.module].data, function(i,e) {
						if(e.data.id == copiarRespostaId){
							existeId = true;
						}
					})
					
					switch(true){
						case copiarRespostaNome == '':
							Swal.showValidationMessage('Nome não pode ser vazio')
							break;
						case existeId:
							Swal.showValidationMessage('Nome já existe, informe um nome diferente')
							break;
					}
				  }
				  
				}).then((result) => {
					var copiarRespostaNome = $('#copiarRespostaNome').val();
					var copiarRespostaId = $('#copiarRespostaId').val();
					
					if(result.isConfirmed){
						var data = nodeCopiado.data;
						data.id = copiarRespostaId;
						data.nome = copiarRespostaNome;
						editor.addNode(data.id, 1,  (data.opcoes ? data.opcoes.length : 0), ((editor.canvas_x/editor.zoom)*-1)+(300*editor.zoom), ((editor.canvas_y/editor.zoom)*-1)+(200*editor.zoom), '', nodeCopiado.data, '' );
					}
					
					nodeCopiado = null;
				})
			
			
		}
	}
});
/*COPIAR COLAR MENSAGEM*/
</script>
{%endblock%}