{% extends "cliente/base.php" %}
{% block body %}
<!-- LOADING ANIMATION -->
<style>
.rotate {
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}






.fab-container {
  bottom: 50px;
  right: 50px;
  z-index: 999;
  cursor: pointer;
}

.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: 70px;
  transition: all 0.3s ease;
  opacity: 0;
  transform: scale(0);
  transform-origin: 65% bottom;
  margin-left: -31px;
  padding-bottom: 20px;
}

.fab:hover+.fab-options,
.fab-options:hover {
  opacity: 1;
  transform: scale(1);
}

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

</style>
<div class="bg-lightest" style="height:100%; display: block;min-width: 800px;">
	<div class="mt-4 d-md-none d-block">&nbsp;</div>
	<div class="mt-4">&nbsp;</div>
	<div class="mt-4">&nbsp;</div>
	
	
	
	<div class="row mt-4 ms-2 me-2" style="min-width: 800px;">
		<div class="col-lg-3 col-5">
			<div class="box d-flex bs-3 border-primary shadow" style="height: 98%;" >
				<div class="bg-primary" style="border-top-left-radius: 6px; border-top-right-radius: 10px;">
					<div class="p-3 py-2">
						<a type="button" class="text-white bg-none" style="font-size:20px;">&nbsp;</a>
					</div>
				</div>
				
				
				
				
				<div id="containerConversas" class="box-body p-0 bg-white" style="position: absolute; width: 100%; border-bottom-left-radius: 6px; border-bottom-right-radius: 10px;">
					<!--h4 class="text-center m-3 mb-0">Selecionar número</h4-->
					<!--select id="meusNumeros" class="selectpicker col-12" title="Nenhum número cadastrado">
							{% for n in numeros %}
							<option value="{{n.getIdNumeros}}" class="" style="letter-spacing: 1px !important;">{{n.getDescricao}} ({{n.getNumero}})</option>
							{% endfor %}
						</select-->
					
					<div class="bg-primary" style="border-top-left-radius: 6px;border-top-right-radius: 10px;">
						<div class="p-3 py-2">
							<!--a class="btn btn-outline-light btn-circle border-0 btn-sm" data-bs-toggle="tooltip" data-bs-original-title="Ativar sons"><i class="mdi mdi-music-box" style="font-size: 20px;"></i></a>
							<a class="btn btn-outline-light btn-circle border-0 btn-sm " data-bs-toggle="tooltip" data-bs-original-title="Ativar notificações"><i class="mdi mdi-comment-alert" style="font-size: 20px;"></i></a-->
							<a id="novaConversa" type="button" class="text-white bg-none" data-bs-toggle="tooltip" data-bs-original-title="Nova conversa"><i class="mdi mdi-message-text" style="font-size: 20px;"></i></a>
							<span class="text-center mt-1" style="position:absolute; width: 100%; left: 0; pointer-events: none;">
								Conversas
							</span>
							<span class="dropdown pull-right mt-auto mb-auto">
								<a class="text-white bg-none" type="button" data-bs-toggle="dropdown" aria-expanded="true"><i class="mdi mdi-dots-vertical" style="font-size: 20px;"></i></a>
								<div class="dropdown-menu" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate(0px, 43px);" data-popper-placement="bottom-start">
									<a id="ativarSons" class="dropdown-item" href="javascript:void(0)"><i class="mdi mdi-music-box mdi-18px"></i> Desativar sons</a>
									<a id="ativarNotificacoes" class="dropdown-item" href="javascript:void(0)"><i class="mdi mdi-comment-alert mdi-18px"></i> Ativar notificações</a>
								</div>
							</span>
						</div>
					</div>
					<div class="p-2">
						<div class="col-12 text-left lookup lookup-sm lookup-right">
							<input id="buscarConversa" type="text" placeholder="Buscar por nome ou número" class="form-control w-p100" value=""/>
						</div>
					</div>
					
					<!--h4 class="text-center m-3">Conversas</h4>								
					<div class="lookup lookup-sm lookup-right d-none d-lg-block my-20">
						<input type="text" name="s" placeholder="Search" class="w-p100">
					</div-->
					<div class="chat-box-one-side">
						<div id="conversas" class="media-list media-list-hover sortable">
						</div>
					</div>
				</div>
				
				
				
				
				<div id="containerContatos" class="box-body p-0 bg-white" style="position: absolute; width: 100%; border-bottom-left-radius: 6px; border-bottom-right-radius: 10px;">
					<div class="bg-primary" style="border-top-left-radius: 6px; border-top-right-radius: 10px;">
						<div class="p-3 py-2">
							<a id="fechaContatos" type="button" class="text-white bg-none"><i class="mdi mdi-arrow-left" style="font-size: 20px;"></i></a>
							<span class="text-center mt-1" style="position:absolute; width: 100%; left: 0; pointer-events: none;">
								Contatos
							</span>
							
							<a id="novoContato" type="button" class="text-white bg-none pull-right" data-bs-toggle="tooltip" data-bs-original-title="Novo contato"><i class="mdi mdi-account-plus" style="font-size: 20px;"></i></a>
						</div>
					</div>
					<div class="p-0 py-2">
						<div class="p-2">
							<div class="col-12 text-left lookup lookup-sm lookup-right">
								<input id="buscarContato" type="text" placeholder="Buscar por nome ou número" class="form-control w-p100" value=""/>
							</div>
						</div>
						<!--div class="lookup lookup-sm lookup-right d-none d-lg-block my-20">
							<input type="text" name="s" placeholder="Search" class="w-p100">
						</div-->
						<span class="d-flex justify-content-center">
							<i id="contatosLoading" class="fa fa-fw fa-circle-o-notch rotate mt-4 d-none" style="font-size: 28px;"></i>
						</span>
						
						
						<div class="chat-box-one-side">
							<div id="contatos" class="p-0 media-list media-list-hover" style="">
								
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-9 col-7" style="">
			<div class="box box-solid bs-3 border-primary bg-light shadow" style="height: 98%;">
			  <div class="box-header" style="">
				<div id="chatHeader" class="media align-items-center p-0" data-animation="fadeIn">
				  <a class="avatar avatar-lg mx-0" href="#">
					<img id="imgChat" src="{{host}}assets/images/svg-icon/image.svg" class="rounded-circle" alt="..." style="filter: invert(0.50);">
				  </a>
				  <div class="media-body">
					<p class="fs-16 text-dark">
					  <span class="" href="#"><strong id="nomeChat">Nenhuma conversa selecionada</strong></span>
					</p>
					  <text class="text-dark" id="ultimaMsgChat"></text>
				  </div>
					<div class="list-icons-item dropdown me-0">
						<button id="dropDownChat" href="javascript:void(0)" class="btn btn-circle btn-white text-dark" data-bs-toggle="dropdown" disabled><i class="fa fa-ellipsis-v fa-lg"></i></button>
						<div class="dropdown-menu dropdown-menu-en" style="">
							<a id="encerrarAtendimento" href="javascript:void(0)" class="dropdown-item"><i class="fa fa-close"></i> Encerrar atendimento</a>
							<a id="transfAtendimento" href="javascript:void(0)" class="dropdown-item"> 
								<i class="fa fa-arrow-right"></i>
								Transferir atendimento
							</a>
							<!--div class="dropdown-divider"></div-->
						</div>
					</div>
				</div>             
			  </div>

			  <div class=" p-0 mb-0 bg-lightest rounded-0" >
				  <div id="mensagens" class="chat-box-one p-0 me-0 bg-lightest bg-bubbles-white text-center" data-animation="fadeIn">
						
					  <!--div class="card d-inline-block m-3 float-start me-5 no-shadow bg-lighter max-w-p80">
						<div class="position-absolute pt-1 pe-5 r-0">
							<span class="text-muted">09:25</span>
						</div>
						<div class="card-body">
							<div class="d-flex flex-row pb-2">
								<a class="d-flex" href="#">
									<img alt="Profile" src="{{host}}assets/images/avatar/1.jpg" class="avatar me-10">
								</a>
								<div class="d-flex flex-grow-1">
									<div class="m-2 ps-0 align-self-center d-flex flex-column flex-lg-row justify-content-between">
										<div>
											<p class="mb-0 fs-16 text-dark">Sarah Kortney</p>
										</div>
									</div>
								</div>
							</div>
							<div class="chat-text-left ps-55">
								<p class="mb-0">What do you think about our plans for this product launch?</p>
							</div>
						</div>
					  </div>
					  <div class="clearfix"></div-->
					  

				  </div>
				</div>
				<div class="box-footer ">
					<div class="d-flex justify-content-between align-items-center">
						<textarea id="chatMensagem" class="form-control bg-secondary me-20 b-0" type="text" placeholder="Mensagem..." style="resize: none;" disabled></textarea>
						<div class="d-flex justify-content-between align-items-center">
							<div class="fab-container me-2">
								<button id="enviarAnexo" type="button" class="fab waves-effect waves-circle btn btn-circle btn-info" disabled>
									<i class="mdi mdi-link" style=""></i>
								</button>
								
								<ul class="fab-options">
									<li>
										<div id="selecionarArquivo" class="fab-icon-holder bg-warning">
											<i class="mdi mdi-file-document"></i>
										</div>
									</li>
									<li>
										<div id="selecionarImagem" class="fab-icon-holder bg-danger">
											<i class="mdi mdi-image-area"></i>
										</div>
									</li>
								</ul>
								
								<div class="">
									<input type="file" accept="" id="uploadArquivo" class="d-none">
									<input type="file" accept="image/*" id="uploadImagem" class="d-none">
								</div>
							</div>
							
							
							<button id="enviarMensagem" type="button" class="waves-effect waves-circle btn btn-circle btn-success" style="width: 45px;height: 45px;" disabled>
								<i class="mdi mdi-send"></i>
							</button>
							
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	
	<div id="chatAudio" class="d-none"></div>
</div>


{% endblock %}
{% block footer %}

{%endblock%}
{% block scripts %}
<style>
	.swal2-html-container{
		overflow: visible;
	}
</style>
<script>
$('body').addClass('bg-lightest');
$('body').addClass('sidebar-collapse');
$('body').removeClass('sidebar-mini');

let numeros = [];
{% for n in numeros%}numeros.push('{{n.getNumero}}');{%endfor%};



$(document).ready(function() {

	
	
	$('html').css({'height':'', 'min-height':''})
	$('body').css({'height':'', 'min-height':''})
	$('.wrapper').css({'height':'', 'min-height':'', 'overflow-x':'auto'})
	
	getConversas(true);
	conversaIntervalId = setInterval(function() {getConversas(false); },2000);
	
	resizeChat();
	
	$('#ativarSons').trigger('click');
	//$.playSound('{{host}}assets/sounds/ding.mp3');
	
	//$('').appendTo('body');
	// play sound
	
})

$(window).on('resize', function(){
	resizeChat();
})

function resizeChat(){
	let calcHeight ;
	calcHeight = $('.main-header').height() + 40 + $('.box-header').offset().top + $('.box-header').height() + $('.box-footer').height();
	calcHeight = $(window).height() - calcHeight;
	
	if(calcHeight <= 150){
		calcHeight = 150;
	}
	$($('.slimScrollDiv')[0]).css('height', calcHeight + 120);
	$($('.chat-box-one-side')[0]).css('height', calcHeight + 120);
	
	$($('.slimScrollDiv')[1]).css('height', calcHeight + 120);
	$($('.chat-box-one-side')[1]).css('height', calcHeight + 120);
	//$($('.chat-box-one')[0]).slimScroll({height: 'auto'})
	//$('#contatos').css('height', calcHeight + 120);
	
	$($('.slimScrollDiv')[2]).css('height', calcHeight );
	$($('.chat-box-one')[2]).css('height', calcHeight );
	$('#mensagens').css('height', calcHeight);
	
	if($('#iniciarAtendimentoDiv').length > 0){
		$('#iniciarAtendimentoDiv').css('height', calcHeight);
	}
}

let buscandoConversas = false;
function getConversas(firsTime){
	if(buscandoConversas == true){return;}
	buscandoConversas = true;
	fetch('chatConversas', {
		method: 'POST',
		headers: {'Content-Type': 'application/x-www-form-urlencoded'},
		body: ''
	})
	.then(function(res){ return res.json(); })
	.then(function(res){
		if(res.Success){
			let conversas = res.conversas;
			let reorder = false;
			$(conversas).each(function(index, c) {
				let profileData = JSON.parse(c.profileData);
				if(profileData.previewEurl){
					let u = new URL(profileData.previewEurl);
					let oe = u.searchParams.get('oe');
					let hex='0x'+oe, profileImgTs=+hex;
					if(moment.unix((profileImgTs)) < moment()){
						profileData.previewEurl = null;
					}
				}
				
				if($('#conversa_'+ c.idConversas).length == 0){
					reorder = true;
					$('#conversas').append(
						'<div id="conversa_'+ c.idConversas +'" data-id="'+ c.idConversas +'" ' +
							'data-idConversas="'+ c.idConversas +'"' +
							'data-nome="'+ c.nome +'"' +
							'data-numero="'+ c.numero +'"' +
							'data-status="'+ c.status +'"' +
							'data-departamento="'+ c.nomeDepartamento +'"' +
							'data-iddepartamento="'+ c.idDepartamentos +'"' +
							'data-atendente="'+ c.nomeAtendente +'"' +
							'data-idatendente="'+ c.idAtendentes +'"' +
							'data-index="'+ index +'"' +
							'class="media py-10 px-0 align-items-center border-top conversa" style="cursor: pointer;">' +
							'<a class="avatar avatar-lg" href="#">' +
								'<img class="" src="'+ (profileData.previewEurl == null ? '{{host}}assets/images/svg-icon/image.svg' : profileData.previewEurl) +'" alt="" style="'+(profileData.previewEurl == null ? 'filter: invert(0.50);' : '')+'">' +
							'</a>' +
							'<span class="media-body">' +
								'<p class="fs-16">' +
									'<text class="text-dark" style="font-weight: 500;">'+ c.nome +'</text>' +
								'</p>' +
								'<p class="fs-16">' +
									'<span id="horarioUltMsg_'+ c.idConversas +'" class="" style="font-size: 12px;">'+ moment.unix(c.ultimaMensagem).format("DD/MM/YYYY HH:mm").replace(moment().format("DD/MM/YYYY"), 'Hoje') +'</span>' +
								'</p>' +
							'</span>' +
							'<span id="novasMensagens_'+ c.idConversas +'" class="media-right d-none">' +
								'<span class="badge badge-success badge-pill"></span>' +
							'</span>' +
						'</div>'
					);
					
					
					if(!arrConversas[c.idConversas]){
						arrConversas[c.idConversas] = {};
						arrConversas[c.idConversas]['mensagens'] = [];
						arrConversas[c.idConversas]['historicoBot'] = JSON.parse(c.historicoBot);
						arrConversas[c.idConversas]['status'] = c.status;
						arrConversas[c.idConversas]['profile'] = {nome:c.nome,numero:c.numero,img:(profileData.previewEurl == null ? '{{host}}assets/images/svg-icon/image.svg' : profileData.previewEurl)};
					}
					
				}else{
					if(parseInt($('#conversa_'+ c.idConversas).attr("data-index")) !== index){
						reorder = true;
					}
					
					if(currentIdConversa == c.idConversas){
						if($('#conversa_'+ c.idConversas).data('status') == 'AGUARDANDO ATENDENTE' && c.status == 'ATENDIMENTO INICIADO'){
							$('#mensagens').empty();

							getChatMensagens(c.idConversas, true);

							$('#dropDownChat').attr('disabled', false);
							$('#chatMensagem').attr('disabled', false);
							$('#enviarAnexo').attr('disabled',  false);
							$('#enviarMensagem').attr('disabled', false);
							$('#chatMensagem').focus();
						}
					}
					
					$('#conversa_'+ c.idConversas).attr("data-index", index);
					$('#conversa_'+ c.idConversas).data('status', c.status);
					$('#conversa_'+ c.idConversas).data('departamento', c.nomeDepartamento);
					$('#conversa_'+ c.idConversas).data('iddepartamento', c.idDepartamentos);
					$('#conversa_'+ c.idConversas).data('atendente', c.nomeAtendente);
					$('#conversa_'+ c.idConversas).data('idatendente', c.idAtendentes);
					
					$('#horarioUltMsg_'+ c.idConversas).text(moment.unix(c.ultimaMensagem).format("DD/MM/YYYY HH:mm").replace(moment().format("DD/MM/YYYY"), 'Hoje'));
					
					if(!arrConversas[c.idConversas]){
						arrConversas[c.idConversas] = {};
						arrConversas[c.idConversas]['mensagens'] = [];
						arrConversas[c.idConversas]['historicoBot'] = JSON.parse(c.historicoBot);
					}
					arrConversas[c.idConversas]['status'] = c.status;
					arrConversas[c.idConversas]['profile'] = {nome:c.nome,numero:c.numero,img:(profileData.previewEurl == null ? '{{host}}assets/images/svg-icon/image.svg' : profileData.previewEurl)};
					arrConversas[c.idConversas]['buscando'] = false;
					
					if(c.mensagens > 0 ){
						if(c.idConversas != currentIdConversa){
							if(c.mensagens > $('#novasMensagens_'+ c.idConversas + ' > span').text()){
								DesktopNotification('Nova mensagem',c.nome, (profileData.previewEurl == null ? '{{host}}assets/images/svg-icon/image.svg' : profileData.previewEurl));
								
								if(soundNotification != null){
									soundNotification.playPause();
								}
								
							}
						}
						
						$('#novasMensagens_'+ c.idConversas + ' > span').text(c.mensagens);
						$('#novasMensagens_'+ c.idConversas).removeClass('d-none');
					}else{
						$('#novasMensagens_'+ c.idConversas + ' > span').text('0')
						$('#novasMensagens_'+ c.idConversas).addClass('d-none');
					}
				}
			})
			
			
			$('.conversa').each(function(index, c1) {
				let excluir = true;
				$(conversas).each(function(index, c2) {
					if($(c1).data('idconversas') == c2.idConversas){
						excluir = false;
					}
				})
				
				if(excluir == true){
					reorder = true;
					
					if(arrConversas[$(c1).data('idconversas')]){
						arrConversas[$(c1).data('idconversas')]['status'] = 'ENCERRADO';
						delete arrConversas[$(c1).data('idconversas')];
						
						$('#conversa_' + $(c1).data('idconversas')).remove();
						if(currentIdConversa == $(c1).data('idconversas')){
							$('#dropDownChat').attr('disabled', true);
							$('#chatMensagem').attr('disabled', true);
							$('#enviarAnexo').attr('disabled',  true);
							$('#enviarMensagem').attr('disabled', true);
							$('#nomeChat').text('Nenhuma conversa selecionada');
							$('#imgChat').attr('src', '');
							$('#ultimaMsgChat').text('');
							$('#mensagens').empty();
							
							currentIdConversa = null;
							clearInterval(chatIntervalId);
						}
					}
					
				}
			})
			
			if(reorder){
				animateSort($('#conversas'), $('.conversa'), 'data-index');
			}
		}else{
			Swal.fire({
				title: res.Erro,
				scrollbarPadding: false,
				icon: 'error',
				confirmButtonColor: 'var(--bs-info)',
				scrollbarPadding: false
			}).then(() =>{
				//location.reload();
			})
		}
		buscandoConversas = false;
	})
}


/*FILTRO CONVERSAS*/
$("#buscarConversa").on("keyup", function() {
	var value = $(this).val().toLowerCase();
	$("#conversas div").filter(function() {
		$(this).toggle($(this).data('nome').toLowerCase().indexOf(value) > -1 || $(this).data('numero').toString().toLowerCase().indexOf(value) > -1)
		//$(this).toggle($(this).data('numero').toString().toLowerCase().indexOf(value) > -1)
	});
});

let currentIdConversa = null;
let loadingConversa = false;
let chatIntervalId = null;
$('#conversas').on('click', function(e){
	let idConversa = $(e.target).closest('.media').data('id');
	
	if(currentIdConversa == idConversa || !idConversa || loadingConversa){return;}
	loadingConversa = true;
	currentIdConversa = idConversa;
	$('#conversas > div').removeClass('bg-light');
	$(e.target).closest('.media').addClass('bg-light');
	let img = $(e.target).closest('.media').find('img').attr('src');
	let nome = $(e.target).closest('.media').data('nome');
	let numero = $(e.target).closest('.media').data('numero');
	let status = $(e.target).closest('.media').data('status');
	
	Object.keys(arrAudios).forEach((audioId) => {
		arrAudios[audioId].destroy();
		delete(arrAudios[audioId]);
	})
	
	
	/*animação*/
	var animation = $('#chatHeader').data('animation');
	$('#chatHeader').addClass('animated ' + animation).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
		$('#chatHeader').removeClass('animated ' + animation);
	});
	
	if(status == 'ATENDIMENTO INICIADO'){
		$('#dropDownChat').attr('disabled', false);
		$('#chatMensagem').attr('disabled', false);
		$('#enviarAnexo').attr('disabled',  false);
		$('#enviarMensagem').attr('disabled', false);
		$('#chatMensagem').focus();
	}
	
	$('#nomeChat').text(nome);
	$('#imgChat').attr('src', img);
	if(img.includes('image.svg')){
		$('#imgChat').css('filter', 'invert(0.50)');
	}else{
		$('#imgChat').css('filter', 'invert(0)');
	}
	$('#imgChat').attr('src', img);
	
	$('#ultimaMsgChat').text('');
	
	if(!arrConversas[idConversa]){
		arrConversas[idConversa] = {};
		arrConversas[idConversa]['status'] = status;
		arrConversas[idConversa]['profile'] = {nome:nome,numero:numero,img:img};
		arrConversas[idConversa]['mensagens'] = [];
		arrConversas[idConversa]['buscando'] = false;
	}
	
	if(arrConversas[idConversa]['status'] == 'AGUARDANDO ATENDENTE'){
		displayMessages(idConversa, arrConversas[idConversa]['mensagens'], false, true);
		$('#mensagens').empty();
		$('#mensagens').append('<div id="iniciarAtendimentoDiv" class="d-flex" style="height: '+ $($('.slimScrollDiv')[1]).css('height') +';"><div class="m-auto"><button id="iniciarAtendimento" class="btn btn-primary">INICIAR ATENDIMENTO</button></div></div>');
		clearInterval(chatIntervalId);
		return;
	}
	
	$('#mensagens').empty();
	$('#mensagens').append('<div id="chatLoader" class="d-flex" style="height: '+ $($('.slimScrollDiv')[1]).css('height') +';"><div class="m-auto"><i class="fa fa-spin fa-circle-o-notch fa-4x"></i></div></div>');
	
	//if(arrConversas[idConversa]['mensagens'].length > 0){
		displayMessages(idConversa, arrConversas[idConversa]['mensagens'], true, true);
	/*}else{
		getChatMensagens(idConversa, true);
	}*/
	
	if(chatIntervalId != null){
		clearInterval(chatIntervalId);
	}
	chatIntervalId = setInterval(function() {getChatMensagens(idConversa, false); },1000);
})

let arrConversas = {};
function getChatMensagens(idConversa, runAnimation){
	if(arrConversas[idConversa]['buscando'] == true){return;}
	
	arrConversas[idConversa]['buscando'] = true;
	fetch('chatMessages', {
		method: 'POST',
		headers: {'Content-Type': 'application/x-www-form-urlencoded'},
		body: 'id_conversa=' + idConversa + '&init=' + $('#mensagens').children('.card').length 
	})
	.then(function(res){ return res.json(); })
	.then(function(res){
		if(res.Success){
			let mensagens = res.mensagens;
			let conversa = res.conversa;
			
			if(currentIdConversa != conversa){return;}
			
			let arrLido = [];
			$(mensagens).each(function(index, m) {
				let msgExiste = false;
				$(mensagens).each(function(index, msg) {
					if(msg.idMensagens == m.idmensagens){
						msgExiste = true;
					}
				})
				
				if(!msgExiste){
					arrConversas[idConversa]['mensagens'].push(m);
				}
				
				if(m.lidoChat == 0){
					arrLido.push(m.idMensagens);
				}
			})
			
			if(arrLido.length > 0 && arrConversas[idConversa]['status'] == 'ATENDIMENTO INICIADO'){
				updateMsgLidas(arrLido);
			}
			
			if(mensagens.length > 0 && arrConversas[idConversa]['status'] == 'ATENDIMENTO INICIADO'){
				displayMessages(idConversa, mensagens, false, runAnimation);
			}else{
				//nenhuma mensagem no chat
				$('#chatLoader').addClass('d-none');
			}
			
			if(arrConversas[idConversa]){arrConversas[idConversa]['buscando'] = false;}
		}else{
			Swal.fire({
				title: res.Erro,
				scrollbarPadding: false,
				icon: 'error',
				confirmButtonColor: 'var(--bs-info)',
				scrollbarPadding: false
			}).then(() =>{
				//location.reload();
			})
		}
		loadingConversa = false;
	})
}

function updateMsgLidas(arrLido){
	fetch('chatMessagesLidas', {
		method: 'POST',
		headers: {'Content-Type': 'application/x-www-form-urlencoded'},
		body: 'mensagens=' + JSON.stringify(arrLido)
	})
	.then(function(res){ return res.json(); })
	.then(function(res){
	})
}


function displayMessages(idConversa, mensagens, getChat, runAnimation){
	if($('#mensagens > .card').length == 0 && $('#mensagens > .box').length == 0){
		if(arrConversas[currentIdConversa]['historicoBot']){
			let histMsg = '' +
			'<div class="box text-start d-inline-block ms-3 me-15 my-1 no-shadow max-w-p70 min-w-lg-p20 min-w-md-p40 min-w-p30 bg-secondary" style="margin-bottom: 5px !important;">' +
				'<div class="box-header with-border ui-sortable-handle p-2">' +
				  '<h6 class="box-title">Histórico chatbot</h6>' +
				  '<ul class="box-controls pull-right" style="top: 8px; right: 8px;">' +
					'<li><a class="box-btn-slide text-dark" href="#"></a></li>' +
				  '</ul>' +
				'</div>' + 
				'<div class="box-body p-2">';
				//'<div class="text-center">Histórico chatbot: </div>';
			$(arrConversas[currentIdConversa]['historicoBot']).each(function(index, h) {
				if(h.nome == 'Atendimento iniciado pelo ChatManager'){
					histMsg = histMsg +
						'<div class="pt-1 ps-1 pb-0 pe-0">' +
							'<div class="chat-text-left ps-1 mb-3">' +
								'<p class="m-0" style="font-size: 15px;white-space: pre-wrap;">'+ (h.nome).replace(/(\r\n|\n|\r)/gm, "") +'</p>' +
							'</div>' +
						'</div>';
				}else{
					histMsg = histMsg +
						'<div class="pt-1 ps-1 pb-0 pe-0">' +
							'<div class="chat-text-left ps-1 mb-3">' +
								'<p class="m-0" style="font-size: 15px;white-space: pre-wrap;">'+ (h.nome +': ' + h.mensagem).replace(/(\r\n|\n|\r)/gm, "") +'</p>' +
								'<p class="m-0" style="font-size: 15px;white-space: pre-wrap;">Opção: '+ h.opcaoSelecionada +'</p>' +
							'</div>' +
						'</div>';
				}
			})
			
			histMsg = histMsg.replaceAll(/(?:\*)([^*]*)(?:\*)/g, '<strong>$1</strong>')
			histMsg = histMsg.replaceAll(/(?:_)([^_]*)(?:_)/g, '<i>$1</i>')
			histMsg = histMsg.replaceAll(/(?:~)([^~]*)(?:~)/g, '<strike>$1</strike>')
			$('#mensagens').append(histMsg + '</div></div><div class="clearfix"></div>');
		}
	}
	
	$(mensagens).each(function(index, m) {
		let fromMe = false;
		if(typeof m.fromMe == 'undefined' || m.fromMe == null){
			let from = m.msgFrom.replace('@c.us', '');
			if(from.length == 12){
				from = from.substring(0,4) + '9' + from.substring(4,12);
			}
			fromMe = (numeros.includes(from) ? true : false)
		}else{
			fromMe = (m.fromMe == true ? true : false);
		}

		$('#ultimaMsgChat').text(moment.unix(m.t).format("DD/MM/YYYY HH:mm").replace(moment().format("DD/MM/YYYY"), 'Hoje'));
		let message = (m.body == null ? '' : m.body);
		message = message.replaceAll(/(?:\*)([^*]*)(?:\*)/g, '<strong>$1</strong>')
		message = message.replaceAll(/(?:_)([^_]*)(?:_)/g, '<i>$1</i>')
		message = message.replaceAll(/(?:~)([^~]*)(?:~)/g, '<strike>$1</strike>')
		

		
		let msgContent = '';
		switch(m.type){
			case 'chat':
			case 'sendText':
				msgContent = '<div class="chat-text-left ps-1">' +
								'<p class="m-0 text-start" style="font-size: 15px;white-space: pre-wrap;">'+ message +'</p>' +
							'</div>';
				break;
			case 'image':
				if(m.fileUrl == null || m.fileExists == false){
					msgContent = '<div class="chat-text-left ps-0 pe-1 ">' +
									'<a href="javascript:void(0)" data-type="image" data-msg_id="'+m.idMensagens +'" class="m-auto downloadFile" href="javascript:void(0)">' +
									'<span class="glyphicon glyphicon-download" style="font-size: 50px; top: 50%;left: 50%;position: absolute;transform: translate(-50%, -50%);"></span>' +
									'<img id="image_'+ m.idMensagens + '" class="rounded mb-2" src="data:image/png;base64, '+ m.base64Preview +'" alt="" style="width: 25vw;"/></a>' +
									'<p class="m-0 text-start" style="font-size: 15px;white-space: pre-wrap;">'+ message +'</p>' +
								'</div>';
				}else{
					
					msgContent = '<div class="chat-text-left ps-0 pe-1 ">' +
									'<a href="'+ m.fileUrl +'" data-msg_id="'+m.idMensagens +'" data-effect="mfp-zoom-in" class="m-auto showImg" href="javascript:void(0)"></span>' +
									'<img id="image_'+ m.idMensagens + '" class="rounded mb-2" src="'+ m.fileUrl +'" alt="" style="width: 25vw;"/></a>' +
									'<p class="m-0 text-start" style="font-size: 15px;white-space: pre-wrap;">'+ message +'</p>' +
								'</div>';
				}
							
				break;
			case 'ptt':
			case 'audio':
				if(m.fileUrl == null || m.fileExists == false){
					msgContent = '<div class="chat-text-left ps-1 d-flex align-items-center" style="width: 20vw;">' +
									'<a href="javascript:void(0)" data-type="audio" data-msg_id="'+m.idMensagens +'" class="m-auto downloadFile" href="javascript:void(0)">' +
									'<span class="glyphicon glyphicon-download" style="font-size: 40px; top: 50%;left: 10%;position: absolute;transform: translate(-50%, -50%);"></span>' +
									'<p class="m-0 text-start" style="font-size: 15px;white-space: pre-wrap;">Mensagem de áudio</p></a>' +
								'</div>';
				}else{
					msgContent = '<div class="chat-text-left ps-1 d-flex align-items-center" style="width: 20vw;">' +
									'<a id="playAudio_'+ m.idMensagens +'" data-msg_id="'+ m.idMensagens +'" href="javascript:void(0)" class="playAudio"><i class="mdi mdi-play mdi-36px"></i></a>' +
									'<div class="p-1" id="audio_'+ m.idMensagens +'" style="margin-left: 0px; max-width: 20vw; width: 15vw;"></div>' +
								'</div>';
				}
				break;
			case 'document':
				if(m.fileUrl == null || m.fileExists == false){
					msgContent = '<div class="chat-text-left ps-1 m-auto text-center" style="width: 15vw;">' +
									'<a href="javascript:void(0)" data-type="document" data-fromme="'+(fromMe ? "true" : "false")+'" data-msg_id="'+m.idMensagens +'" class="m-auto downloadFile '+(fromMe ? "text-white text-center " : " ")+'" href="javascript:void(0)">' +
									'<span class="glyphicon glyphicon-download" style="font-size: 40px;"></span>' +
									'<p class="m-0 text-center " style="font-size: 15px;white-space: pre-wrap;">Documento</p></a>' +
								'</div>' +
								'<div class="chat-text-left ps-1">' +
									'<p class="m-0 text-start" style="font-size: 15px;white-space: pre-wrap;">'+ message +'</p>' +
								'</div>' ;
				}else{
					msgContent = '<div class="chat-text-left ps-1 m-auto '+(fromMe ? "text-center " : " ")+'" style="width: 15vw;">' +
									'<a href="'+ m.fileUrl +'" target="_blank" data-msg_id="'+ m.idMensagens +'" class="openFile '+(fromMe ? "text-white text-center " : " ")+'" style=""><i class="mdi mdi-file-document mdi-36px"></i>' +
									'<span class="m-0 text-center" style="font-size: 15px;white-space: pre-wrap;">Abrir arquivo</span></a>' +
								'</div>' +
								'<div class="chat-text-left ps-1">' +
									'<p class="m-0 text-start" style="font-size: 15px;white-space: pre-wrap;">'+ message +'</p>' +
								'</div>' ;
				}
				break;
			case 'video':
				if(m.fileUrl == null || m.fileExists == false){
					msgContent = '<div class="chat-text-left ps-1 m-auto '+(fromMe ? "text-center " : " ")+'" style="width: 15vw;">' +
									'<a href="javascript:void(0)" data-type="video" data-fromme="'+(fromMe ? "true" : "false")+'" data-msg_id="'+m.idMensagens +'" class="m-auto downloadFile '+(fromMe ? "text-white text-center " : " ")+'" href="javascript:void(0)">' +
									'<span class="glyphicon glyphicon-download" style="font-size: 40px;"></span>' +
									'<p class="m-0 text-center '+(fromMe ? "text-white text-center " : " ")+'" style="font-size: 15px;white-space: pre-wrap;">Vídeo</p></a>' +
								'</div>' +
								'<div class="chat-text-left ps-1">' +
									'<p class="m-0 text-start" style="font-size: 15px;white-space: pre-wrap;">'+ message +'</p>' +
								'</div>' ;
				}else{
					msgContent = '<div class="chat-text-left ps-1 m-auto '+(fromMe ? "text-center " : " ")+'" style="width: 15vw; ">' +
									'<a href="'+ m.fileUrl +'" target="_blank" data-msg_id="'+ m.idMensagens +'" class="openFile '+(fromMe ? "text-white text-center " : " ")+'" style=""><i class="mdi mdi-file-document mdi-36px"></i>' +
									'<span class="m-0 text-center " style="font-size: 15px;white-space: pre-wrap;">Abrir vídeo</span></a>' +
								'</div>' +
								'<div class="chat-text-left ps-1">' +
									'<p class="m-0 text-start" style="font-size: 15px;white-space: pre-wrap;">'+ message +'</p>' +
								'</div>' ;
				}
				break;
			default:
				msgContent = '<div class="chat-text-left ps-1 ">' +
								'<p class="m-0 text-start" style="font-size: 15px;white-space: pre-wrap;">'+ m.type +'</p>' +
							'</div>';
		}
		
		$('#mensagens').append(
			'<div class="card border-lightest d-inline-block ms-3 me-15 my-1 no-shadow max-w-p70 min-w-lg-p20 min-w-md-p40 min-w-p30 '+(fromMe ? "float-end text-start bg-success " : "float-start bg-lighter ")+'" style="margin-bottom: 5px !important;" data-idmensagens="'+m.idMensagens+'">' +
				'<div class="pt-1 ps-1 pb-0 pe-1 ">' +
					/*'<div class="d-flex flex-row pb-2">' +
						'<a class="d-flex" href="#">' +
							'<img alt="Profile" src="{{host}}assets/images/avatar/1.jpg" class="avatar me-10">' +
						'</a>' +
						'<div class="d-flex flex-grow-1">' +
							'<div class="m-2 ps-0 align-self-center d-flex flex-column flex-lg-row justify-content-between">' +
								'<div>' +
									'<p class="mb-0 fs-16 text-dark">'+ arrConversas[idConversa]['profile']['nome'] +'</p>' +
								'</div>' +
							'</div>' +
						'</div>' +
					'</div>' +*/
					msgContent +
					
				'</div>' +
				'<div class="pull-right pe-1 pb-1 py-0">' +
					'<span class="text-lightest '+(fromMe ? "text-white" : "")+'" style="font-size: 10px;">'+ moment.unix(m.t).format("DD/MM/YYYY HH:mm").replace(moment().format("DD/MM/YYYY"), 'Hoje') +'</span>' +
				'</div>' +
			'</div>' +
			'<div class="clearfix"></div>'
		);
		
		if(m.type == 'ptt' || m.type == 'audio'){

		if(!(m.fileUrl == null || m.fileExists == false)){
				initAudio(m.idMensagens, m.fileUrl);
			}
		}
		
		
	})
	$('#chatLoader').addClass('d-none');
	
	/*animação*/
	if(runAnimation){
		var animation = $('#mensagens').data('animation');
		$('#mensagens').addClass('animated ' + animation).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
			$('#mensagens').removeClass('animated ' + animation);
		});
	}
	
	
	loadingConversa = false;
	
	if(getChat){
		getChatMensagens(idConversa);
	}else{
		$(".chat-box-one").animate({ scrollTop: $('.chat-box-one').prop("scrollHeight")}, 500);
	$('.chat-box-one').slimScroll({scrollTo: $('.chat-box-one').prop("scrollHeight")});
	}
}

let arrAudios = {};
function initAudio(m, fileUrl){
	arrAudios['#audio_' + m] = WaveSurfer.create({
		container: '#audio_' + m,
		height: 45,
		barWidth: 2,
		barHeight: 1,
		barMinHeight: 0.1,
		barRadius: 1,
		cursorColor: 'var(--bs-light)',
		hideScrollbar: true,
		barGap: null 
	});
	
	arrAudios['#audio_' + m].load(fileUrl);
	arrAudios['#audio_' + m].on('ready', function () {
		$('#audio_' + m + ' wave').css('width', '15vw');
	});
	
	arrAudios['#audio_' + m].on('play', function () {
		$('#playAudio_' + m + ' i').removeClass('mdi-play');
		$('#playAudio_' + m + ' i').addClass('mdi-pause');
	})
	
	arrAudios['#audio_' + m].on('pause', function () {
		$('#playAudio_' + m + ' i').addClass('mdi-play');
		$('#playAudio_' + m + ' i').removeClass('mdi-pause');
	})
}

$('#mensagens').on('click', '.playAudio', function(){
	let msgId = $(this).data('msg_id');
	Object.keys(arrAudios).forEach((audioId) => {
		if('#audio_' + msgId != audioId){
			if(arrAudios[audioId].isPlaying()){
				arrAudios[audioId].pause();
			}
		}
	})
	
	arrAudios['#audio_' + msgId].playPause();
})

$('#mensagens').on('click', '.downloadFile', function(){
	let msgId = $(this).data('msg_id');
	let type = $(this).data('type');
	let fromme = $(this).data('fromme');
	let elem = $(this);
	$(elem).removeClass('downloadFile');
	
	switch(type){
		case 'audio':
		case 'document':
		case 'video':
			$(elem).find('.glyphicon').css('top', '8%');
			$(elem).find('.glyphicon').css('left', '3%');
			break;
		case 'image':
			$(elem).find('.glyphicon').css('top', '43%');
			$(elem).find('.glyphicon').css('left', '44%');
			break;
	}
	
	$(elem).find('.glyphicon').removeClass('glyphicon-download');
	$(elem).find('.glyphicon').addClass('glyphicon-refresh');
	$(elem).find('.glyphicon').addClass('rotate');
	//$(elem).find('.glyphicon').addClass('d-none');
	//$(elem).append('<div class="lds-spinner" style="top: 50%;left: 50%;position: absolute;transform: translate(-50%, -50%);"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>');
	//$(elem).append('<div class="loader"></div>');
	
	fetch('getFile', {
		method: 'POST',
		headers: {'Content-Type': 'application/x-www-form-urlencoded'},
		body:  'msgId=' + msgId
	})
	.then(function(res){ return res.json(); })
	.then(function(res){
		if(res.Success){
			$('#image_' + msgId).attr('src', res.url);
			$('#image_' + msgId).addClass('');
			$(elem).find('.glyphicon').addClass('d-none');
			
			switch(type){
				case 'image':
					$(elem).attr('data-effect', 'mfp-zoom-in');
					$(elem).attr('href', res.url);
					$(elem).addClass('showImg');
					break;
				case 'audio':
					var parent = $(elem).parent();
					$(elem).remove();
					$(parent).append('<a id="playAudio_'+ msgId +'" data-msg_id="'+ msgId +'" href="javascript:void(0)" class="playAudio"><i class="mdi mdi-play mdi-36px"></i></a>' +'<div class="p-1" id="audio_'+ msgId +'" style="margin-left: 0px; max-width: 20vw; width: 15vw;"></div>');
					initAudio(msgId, res.url);
					
					//$(".chat-box-one").animate({ scrollTop: $(parent).prop("top")+ $(parent).prop("height")}, 500);
					//$('.chat-box-one').slimScroll({scrollTo: $(parent).prop("top")+ $(parent).prop("height")});
					break;
				case 'document':
					var parent = $(elem).parent();
					$(elem).remove();
					$(parent).append(
						'<a href="'+ res.url +'" target="_blank" data-msg_id="'+ msgId +'" class="openFile '+(fromme ? "text-white text-center " : " ")+'" style=""><i class="mdi mdi-file-document mdi-36px"></i>' +
						'<span class="m-0 text-center" style="font-size: 15px;white-space: pre-wrap;">Abrir arquivo</span></a>'
					);
					break;
				case 'video':
					var parent = $(elem).parent();
					$(elem).remove();
					$(parent).append(
						'<a href="'+ res.url +'" target="_blank" data-msg_id="'+ msgId +'" class="openFile '+(fromme ? "text-white text-center " : " ")+'" style=""><i class="mdi mdi-file-document mdi-36px"></i>' +
						'<span class="m-0 text-center" style="font-size: 15px;white-space: pre-wrap;">Abrir vídeo</span></a>'
					);
					break;
			}
			
		}else{
			$(elem).find('.glyphicon').removeClass('d-none');
			Swal.fire({
				title: res.Erro,
				scrollbarPadding: false,
				icon: 'error',
				confirmButtonColor: 'var(--bs-info)',
				scrollbarPadding: false
			}).then(() =>{
				//location.reload();
			})
			$(elem).find('.glyphicon').removeClass('glyphicon-refresh');
			$(elem).find('.glyphicon').addClass('glyphicon-download');
		}
		
		switch(type){
			case 'audio':
			case 'document':
			case 'video':
				$(elem).find('.glyphicon').css('top', '50%');
				$(elem).find('.glyphicon').css('left', '10%');
				break;
			case 'image':
				$(elem).find('.glyphicon').css('top', '50%');
				$(elem).find('.glyphicon').css('left', '50%');
				break;
		}
		$(elem).find('.glyphicon').removeClass('rotate');
	})
})

$('#mensagens').magnificPopup({
	  delegate: '.showImg',
	  type: 'image',
	  removalDelay: 500, //delay removal by X to allow out-animation
	  callbacks: {
		beforeOpen: function() {
		  // just a hack that adds mfp-anim class to markup 
		   this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure mfp-with-anim');
		   this.st.mainClass = this.st.el.attr('data-effect');
		}
	  },
	  closeOnContentClick: true,
	  midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});


$('#enviarMensagem').on('click', function(){
	let msg = $('#chatMensagem').val();
	if(msg == ''){return;}
	if(!arrConversas[currentIdConversa]){return;}
	$('#chatMensagem').val('');
	$('#chatMensagem').focus();
	
	fetch('chatSendMessage', {
		method: 'POST',
		headers: {'Content-Type': 'application/x-www-form-urlencoded'},
		body:  'number=' + arrConversas[currentIdConversa]['profile']['numero'] +
				'&message=' + msg +
				'&idConversa=' + currentIdConversa
				//'&sourceNumber=' + $('#meusNumeros').val() + 
	})
	.then(function(res){ return res.json(); })
	.then(function(res){
		if(res.Success){
			if(arrConversas[currentIdConversa]['buscando'] == false){
				getChatMensagens(currentIdConversa, false);
			}
		}else{
			Swal.fire({
				title: res.Erro,
				scrollbarPadding: false,
				icon: 'error',
				confirmButtonColor: 'var(--bs-info)',
				scrollbarPadding: false
			}).then(() =>{
				//location.reload();
			})
		}
	})
})

$('#mensagens').on('click', '#iniciarAtendimento', function(){
	Swal.fire({
	  title: 'Iniciar Atendimento ?',
	   html: 'Deseja iniciar o atendimento ?<br>' +
			'<div class="form-group mt-3 text-start">' +
				'<label for="iniciarAtendimentoMsg" class="form-label">Mensagem de início:</label>' +
				'<textarea id="iniciarAtendimentoMsg" class="form-control " placeholder="Mensagem de início"></textarea>' +
			'</div>',
	  icon: 'question',
	  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()
		{%if userLogged.tipo == 'ATENDENTE'%}
			$('#iniciarAtendimentoMsg').val('O atendente {{userLogged.nomeAtendente}} entrou na conversa');
		{%else%}
			$('#iniciarAtendimentoMsg').val('Atendimento iniciado');
		{%endif%}
	  },
	   preConfirm: (value) => {
		let iniciarAtendimentoMsg = $('#iniciarAtendimentoMsg').val().trim();
		if(iniciarAtendimentoMsg == ''){
			Swal.showValidationMessage('Digite uma mensagem');
		}
	  }
	}).then((result) => {
		if(result.isConfirmed){
			let iniciarAtendimentoMsg = $('#iniciarAtendimentoMsg').val();
			
			Swal.fire({title : 'Iniciando Atendimento', allowOutsideClick: false, scrollbarPadding: false});
			Swal.showLoading();
			
			fetch('chatIniciaAtendimento', {
				method: 'POST',
				headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				body: 'idConversa=' + currentIdConversa +
						//'&sourceNumber=' + $('#meusNumeros').val() + 
						'&mensagem=' + iniciarAtendimentoMsg
			})
			.then(function(res){ return res.json(); })
			.then(function(res){
				if(res.Success){
					Swal.close();
					
					arrConversas[currentIdConversa]['status'] = 'ATENDIMENTO INICIADO';
					$('#mensagens').empty();
					if(arrConversas[currentIdConversa]['buscando'] == false){
						getChatMensagens(currentIdConversa, false);
					}
					chatIntervalId = setInterval(function() {getChatMensagens(currentIdConversa, false); },1000);
					
					$('#dropDownChat').attr('disabled', false);
					$('#chatMensagem').attr('disabled', false);
					$('#enviarAnexo').attr('disabled',  false);
					$('#enviarMensagem').attr('disabled', false);
					$('#chatMensagem').focus();
				}else{
					Swal.fire({
						title: res.Erro,
						scrollbarPadding: false,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						//location.reload();
					})
				}
			})
		}
	})
})

$('#encerrarAtendimento').on('click', function(){
	Swal.fire({
	  title: 'Encerrar Atendimento ?',
	  html: 'Após encerrar não será possível enviar mensagens<br>' +
			'<div class="form-group mt-3 text-start">' +
				'<label for="encerrarAtendimentoMsg" class="form-label">Mensagem encerramento:</label>' +
				'<textarea id="encerrarAtendimentoMsg" class="form-control " placeholder="Mensagem de encerramento"></textarea>' +
			'</div>',
	  icon: 'question',
	  showCloseButton: true,
	  showCancelButton: true,
	  focusConfirm: false,
	  confirmButtonText: 'Encerrar',
	  cancelButtonText: 'Cancelar',
	  scrollbarPadding: false,
	  allowOutsideClick: false,
	  confirmButtonColor: 'var(--bs-danger)',
	  scrollbarPadding: false,
	  didOpen: () => {
		$('.swal2-close').blur()
		$('#encerrarAtendimentoMsg').focus()
		{%if userLogged.tipo == 'ATENDENTE'%}
			$('#encerrarAtendimentoMsg').val('O atendente {{userLogged.nomeAtendente}} encerrou a conversa');
		{%else%}
			$('#encerrarAtendimentoMsg').val('Atendimento encerrado');
		{%endif%}
	  },
	  preConfirm: (value) => {
		let encerrarAtendimentoMsg = $('#encerrarAtendimentoMsg').val().trim();
		if(encerrarAtendimentoMsg == ''){
			Swal.showValidationMessage('Digite uma mensagem');
		}
	  }
	}).then((result) => {
		if(result.isConfirmed){
			let encerrarAtendimentoMsg = $('#encerrarAtendimentoMsg').val();
			
			Swal.fire({title : 'Encerrando Atendimento', allowOutsideClick: false, scrollbarPadding: false});
			Swal.showLoading();
			
			fetch('chatEncerraAtendimento', {
				method: 'POST',
				headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				body: 'idConversa=' + currentIdConversa + 
						//'&sourceNumber=' + $('#meusNumeros').val() + 
						'&mensagem=' + encerrarAtendimentoMsg
			})
			.then(function(res){ return res.json(); })
			.then(function(res){
				if(res.Success){
					Swal.close();
					
					arrConversas[currentIdConversa]['status'] = 'ENCERRADO';
					delete arrConversas[currentIdConversa];

					$('#mensagens').empty();
					$('#conversa_' + currentIdConversa).remove();
					//$($('#conversas > div')[0]).trigger('click');
					
					$('#dropDownChat').attr('disabled', true);
					$('#chatMensagem').attr('disabled', true);
					$('#enviarAnexo').attr('disabled', true);
					$('#enviarMensagem').attr('disabled', true);
					$('#nomeChat').text('Nenhuma conversa selecionada');
					$('#imgChat').attr('src', '');
					$('#ultimaMsgChat').text('');
					$('#mensagens').empty();
					
					currentIdConversa = null;
					clearInterval(chatIntervalId);
					
					Swal.fire({
						title: 'Atendimento encerrado',
						scrollbarPadding: false,
						icon: 'success',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						//location.reload();
					})
				}else{
					Swal.fire({
						title: res.Erro,
						scrollbarPadding: false,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						//location.reload();
					})
				}
			})
		}
	})
})

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

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

  //instead of leaving the items out-of-order and positioned, replace them in sorted order
  $.when.apply($, promises).done(function() {
    originals.each(function(index) {
      $(this).replaceWith(sorted[index]);
    });
  });
}


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

let atendentes = [];
{% for key,a in atendentes %}
	atendentes[{{key}}] = {};
	atendentes[{{key}}]['idAtendentes'] = '{{a.getIdAtendentes}}';
	atendentes[{{key}}]['idDepartamento'] = '{{a.getIdDepartamento.getIdDepartamentos}}';
	atendentes[{{key}}]['nomeAtendente'] = '{{a.getNomeAtendente}}';
{%endfor%};
$('#transfAtendimento').on('click', function(){
	idDepartamentoAtual = $('#conversa_' + currentIdConversa).data('iddepartamento')
	departamentoAtual = $('#conversa_' + currentIdConversa).data('departamento')
	idAtendenteAtual = $('#conversa_' + currentIdConversa).data('idatendente')
	atendenteAtual = $('#conversa_' + currentIdConversa).data('atendente')
	
	Swal.fire({
	  title: 'Transferir atendimento ',
	   html:
		'<div class="container">' +
			'<div class="col-12 text-left mt-4">' +
				'<h6 class="mb-1 font-weight-bold">Transferir '+ (departamentoAtual == null ? '' : 'de <b>'+ departamentoAtual +'</b>') +' para:</h6>' +
				'<select id="transfNovoDepartamento" class="selectpicker" title="Selecione um departamento">' +

				'</select>' +
			'</div>' +
			'</br>' +
			'<div class="col-12 text-left my-15">' +
				'<h6 class="mb-1 font-weight-bold">Transferir '+ (atendenteAtual == null ? '' : 'de <b>'+ atendenteAtual +'</b>') +' para:</h6>' +
				'<select id="transfNovoAtendente" class="selectpicker" title="Selecione um atendente">' +
					
				'</select>' +
			'</div>' +
			'' +
		'</div>' +
		'',
	  showCloseButton: true,
	  showCancelButton: true,
	  focusConfirm: false,
	  confirmButtonText: 'Transferir',
	  cancelButtonText: 'Cancelar',
	  scrollbarPadding: false,
	  allowOutsideClick: false,
	  confirmButtonColor: 'var(--bs-info)',
	  scrollbarPadding: false,
	  willOpen: () => {
		$('#transfNovoDepartamento').empty();
		$(departamentos).each(function(index, d) {
			let selected = '';
			if(d.idDepartamentos == idDepartamentoAtual){selected = 'selected'}
			$('#transfNovoDepartamento').append('<option value="'+ d.idDepartamentos +'" '+selected+' class="" style="letter-spacing: 1px !important;">'+ d.nomeDepartamento +'</option>');
		});
		
		$(atendentes).each(function(index, a) {
			if(a.idDepartamento == $('#transfNovoDepartamento').val() || a.idDepartamento == ''){
				let selected = '';
				if(a.idAtendentes == idAtendenteAtual){selected = 'selected'}
				$('#transfNovoAtendente').append('<option value="'+ a.idAtendentes +'" '+selected+' class="" style="letter-spacing: 1px !important;">'+ a.nomeAtendente +'</option>');
			}
		});
	  },
	  didOpen: () => {
		 $('.swal2-close').blur()
		  
		$('#transfNovoDepartamento').selectpicker();
		$('#transfNovoDepartamento').on('show.bs.select', function () {
			$('.swal2-actions').css('z-index', '0');
		});
		$('#transfNovoDepartamento').on('hidden.bs.select', function () {
			$('.swal2-actions').css('z-index', '');
		});
		
		$('#transfNovoAtendente').selectpicker();
		$('#transfNovoAtendente').on('show.bs.select', function () {
		$('.swal2-actions').css('z-index', '0');
		});
		$('#transfNovoAtendente').on('hidden.bs.select', function () {
			$('.swal2-actions').css('z-index', '');
		});
		
		$('#transfNovoDepartamento').on('change', function(){
			let idDepartamento = $(this).val();
		
			$('#transfNovoAtendente').selectpicker('destroy');
			$('#transfNovoAtendente').empty();
			$(atendentes).each(function(index, a) {
				if(a.idDepartamento == idDepartamento || a.idDepartamento == ''){
					let selected = '';
					if(a.idAtendentes == idAtendenteAtual){selected = 'selected'}
					$('#transfNovoAtendente').append('<option value="'+ a.idAtendentes +'" '+selected+' class="" style="letter-spacing: 1px !important;">'+ a.nomeAtendente +'</option>');
				}
			});
			$('#transfNovoAtendente').selectpicker();
			$('#transfNovoAtendente').on('show.bs.select', function () {
			$('.swal2-actions').css('z-index', '0');
			});
			$('#transfNovoAtendente').on('hidden.bs.select', function () {
				$('.swal2-actions').css('z-index', '');
			});
		})
		
	  },
	  preConfirm: (value) => {
		  switch(true){
			case !$('#transfNovoDepartamento').val():
				Swal.showValidationMessage('Selecione um departamento')
				break;
			case !$('#transfNovoAtendente').val():
				Swal.showValidationMessage('Selecione um atendente')
				break;
			case $('#transfNovoDepartamento').val() == idDepartamentoAtual && $('#transfNovoAtendente').val() == idAtendenteAtual:
				Swal.showValidationMessage('Selecione um departamento/atendente diferente do atual')
				break;
		}
	  }
	  
	}).then((result) => {
		let novoIdDepartamento = $('#transfNovoDepartamento').val();
		let novoDepartamento = $('#transfNovoDepartamento :selected').text();
		let novoIdAtendente = $('#transfNovoAtendente').val();
		let novoAtendente = $('#transfNovoAtendente :selected').text();
		
		if(result.isConfirmed){
			Swal.fire({title : 'Transferindo atendimento...', allowOutsideClick: false, scrollbarPadding: false});
			Swal.showLoading();
			
			fetch('chatTransferirAtendimento', {
				method: 'POST',
				headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				body: 'idDepartamento=' + novoIdDepartamento +
						'&idAtendente=' + novoIdAtendente +
						'&idConversa=' + currentIdConversa
						//'&sourceNumber=' + $('#meusNumeros').val()
			})
			.then(function(res){ return res.json(); })
			.then(function(res){
				if(res.Success){
					$('#conversa_' + currentIdConversa).data('iddepartamento', novoIdDepartamento)
					$('#conversa_' + currentIdConversa).data('departamento', novoDepartamento)
					$('#conversa_' + currentIdConversa).data('idatendente', novoIdAtendente)
					$('#conversa_' + currentIdConversa).data('atendente', novoAtendente)
					
					$('#mensagens').empty();
					$('#conversa_' + currentIdConversa).remove();
					
					$('#dropDownChat').attr('disabled', true);
					$('#chatMensagem').attr('disabled', true);
					$('#enviarAnexo').attr('disabled',  true);
					$('#enviarMensagem').attr('disabled', true);
					$('#nomeChat').text('Nenhuma conversa selecionada');
					$('#imgChat').attr('src', '');
					$('#ultimaMsgChat').text('');
					$('#mensagens').empty();
					
					currentIdConversa = null;
					clearInterval(chatIntervalId);
					
					Swal.fire({
						title: res.Success,
						scrollbarPadding: false,
						icon: 'success',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						
					})
				}else{
					Swal.fire({
						title: res.Erro,
						scrollbarPadding: false,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						//location.reload();
					})
				}
			})
		}
	})
})


$('#selecionarArquivo').on('click', function(){
	$('#uploadArquivo').trigger('click'); 
})

$('#selecionarImagem').on('click', function(){
	$('#uploadImagem').trigger('click'); 
})

var input = document.getElementById("uploadImagem");
jQuery(input).on('change', function(){
	var files = jQuery(input).prop("files");

	Swal.fire({title : 'Carregando imagem...', allowOutsideClick: false, scrollbarPadding: false});
	Swal.showLoading();

	for (i = 0; i < files.length; i++) {
		let reader = new FileReader();

		reader.onload = function(event) {
		}
		let filename =  input.files[i].name;	
		if(!filename.split('.')[1]){
			Swal.fire({
				title: 'Imagem inválida',
				text: 'Não foi possível processar a imagem, verifique se o arquivo selecionado é uma imagem',
				scrollbarPadding: false,
				icon: 'error',
				confirmButtonColor: 'var(--bs-info)',
				scrollbarPadding: false
			}).then(() =>{
				//location.reload();
			})
		}else{
			reader.readAsDataURL(input.files[i]);
			
			reader.onloadend = function(event) {
				
				loadImage(event.target.result, filename);
			}
		}
	}
	//jQuery(input).val('');
});

function loadImage(src, filename){
	var image = new Image();
	image.src = src;
	image.onload = function(){
		let mimeType = image.src.match(/[^:]\w+\/[\w-+\d.]+(?=;|,)/)[0];
		image.type = mimeType;
		
		Swal.fire({
		  title: 'Enviar imagem',
		   html: '<div class="p-3">' +
					'<img id="uploadImagemInput" src="'+ image.src +'" class="rounded image-responsive" alt="" style="">' +
				'</div>' +
				'<div class="form-group mt-3 text-start">' +
					'<textarea id="imagemLegenda" class="form-control " placeholder="Legenda"></textarea>' +
				'</div>',
		  icon: '',
		  showCloseButton: true,
		  showCancelButton: true,
		  focusConfirm: false,
		  confirmButtonText: 'Enviar',
		  cancelButtonText: 'Cancelar',
		  scrollbarPadding: false,
		  allowOutsideClick: false,
		  confirmButtonColor: 'var(--bs-success)',
		  scrollbarPadding: false,
		  didOpen: () => {
			$('.swal2-close').blur()
		  },
		   preConfirm: (value) => {
			
		  }
		}).then((result) => {
			if(result.isConfirmed){
				let imagemLegenda = $('#imagemLegenda').val();
				
				Swal.fire({title : 'Enviando imagem...', allowOutsideClick: false, scrollbarPadding: false});
				Swal.showLoading();
				let formData = new FormData();
				formData.append('number', arrConversas[currentIdConversa]['profile']['numero']);
				formData.append('message', imagemLegenda)
				formData.append('idConversa', currentIdConversa)
				formData.append('image', input.files[0])
				formData.append('type', filename.split('.')[1])
				
				jQuery(input).val('');
				fetch('chatSendImage', {
					method: 'POST',
					//headers: {'Content-Type': 'application/x-www-form-urlencoded'},
					body:  formData
				})
				.then(function(res){ return res.json(); })
				.then(function(res){
					if(res.Success){
						Swal.close();
						
						
					}else{
						Swal.fire({
							title: res.Erro,
							scrollbarPadding: false,
							icon: 'error',
							confirmButtonColor: 'var(--bs-info)',
							scrollbarPadding: false
						}).then(() =>{
							//location.reload();
						})
					}
				})
			}
		})
	}
	
	image.onerror = function(e) {
		Swal.fire({
			title: 'Imagem inválida',
			text: 'Não foi possível processar a imagem, verifique se o arquivo selecionado é uma imagem',
			scrollbarPadding: false,
			icon: 'error',
			confirmButtonColor: 'var(--bs-info)',
			scrollbarPadding: false
		}).then(() =>{
			//location.reload();
		})
    };

}

var inputFile = document.getElementById("uploadArquivo");
jQuery(inputFile).on('change', function(){
	var files = jQuery(inputFile).prop("files");

	for (i = 0; i < files.length; i++) {
		let reader = new FileReader();
		reader.onload = function(event) {
		}
		let filename =  inputFile.files[i].name;
		if(!filename.split('.')[1]){
			Swal.fire({
				title: 'Arquivo inválido',
				text: 'Não foi possível processar o arquivo',
				scrollbarPadding: false,
				icon: 'error',
				confirmButtonColor: 'var(--bs-info)',
				scrollbarPadding: false
			}).then(() =>{
				//location.reload();
			})
		}else{
			reader.readAsDataURL(inputFile.files[i]);
			
			reader.onloadend = function(event) {
				loadFile(event.target.result, filename);
			}
		}
	}
	//jQuery(inputFile).val('');
});

function loadFile(src, filename){
	Swal.fire({title : 'Carregando arquivo...', allowOutsideClick: false, scrollbarPadding: false});
	Swal.showLoading();
	
	Swal.fire({
	  title: 'Enviar arquivo',
	   html: '<div class="p-1 d-flex justify-content-center">' +
				'<div class="card p-4" style="">' +
					'<i class="mdi mdi-file-document mdi-36px"></i>' +
					'<div class="">'+ filename +'</div>' +
				'</div>' +
			'</div>' +
			'<div class="form-group mt-3 text-start">' +
				'<textarea id="arquivoLegenda" class="form-control " placeholder="Legenda"></textarea>' +
			'</div>',
	  icon: '',
	  showCloseButton: true,
	  showCancelButton: true,
	  focusConfirm: false,
	  confirmButtonText: 'Enviar',
	  cancelButtonText: 'Cancelar',
	  scrollbarPadding: false,
	  allowOutsideClick: false,
	  confirmButtonColor: 'var(--bs-success)',
	  scrollbarPadding: false,
	  didOpen: () => {
		$('.swal2-close').blur()
	  },
	   preConfirm: (value) => {
		
	  }
	}).then((result) => {
		if(result.isConfirmed){
			let arquivoLegenda = $('#arquivoLegenda').val();
			
			Swal.fire({title : 'Enviando arquivo...', allowOutsideClick: false, scrollbarPadding: false});
			Swal.showLoading();
			let formData = new FormData();
			formData.append('number', arrConversas[currentIdConversa]['profile']['numero']);
			formData.append('message', arquivoLegenda)
			formData.append('idConversa', currentIdConversa)
			formData.append('file', inputFile.files[0])
			formData.append('type', filename.split('.')[1])
			
			jQuery(inputFile).val('');
			fetch('chatSendFile', {
				method: 'POST',
				//headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				body:  formData
			})
			.then(function(res){ return res.json(); })
			.then(function(res){
				if(res.Success){
					Swal.close();
					
					
				}else{
					Swal.fire({
						title: res.Erro,
						scrollbarPadding: false,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						//location.reload();
					})
				}
			})
		}
	})

}



/*----------------------------------- CONTATOS --------------------------------------------------------*/


/*FILTRA CONTATOS*/
$("#buscarContato").on("keyup", function() {
	var value = $(this).val().toLowerCase();
	$("#contatos div").filter(function() {
		$(this).toggle($(this).data('nome').toString().toLowerCase().indexOf(value) > -1 || $(this).data('numero').toString().toLowerCase().indexOf(value) > -1)
		//$(this).toggle($(this).data('numero').toString().toLowerCase().indexOf(value) > -1)
	});
});

function listarContatos(){
	$('#contatosLoading').removeClass('d-none');
	fetch('chatListarContatos', {
		method: 'POST',
		headers: {'Content-Type': 'application/x-www-form-urlencoded'},
	})
	.then(function(res){ return res.json(); })
	.then(function(res){
		if(res.Success){
			$('#contatos').empty();
			
			let contatos = res.contatos;
			$(contatos).each(function(index, c) {
				let profileData = JSON.parse(c.profileData);
				if(profileData.previewEurl){
					let u = new URL(profileData.previewEurl);
					let oe = u.searchParams.get('oe');
					let hex='0x'+oe, profileImgTs=+hex;
					if(moment.unix((profileImgTs)) < moment()){
						profileData.previewEurl = null;
					}
				}
				
				let nome = c.nome;
				if(nome == null){
					nome = c.numero;
				}
				$('#contatos').append(
					'<div data-idcontatos="'+ c.idContatos +'" data-nome="'+ nome +'" data-numero="'+ c.numero +'" class="media py-10 px-0 align-items-center border-top contato" style="cursor: pointer;">' +
						'<a class="avatar avatar-lg" href="javascript:void(0)">' +
						'<img class="" src="' + (profileData.previewEurl == null ? '{{host}}assets/images/svg-icon/image.svg' : profileData.previewEurl) +'" alt="" style="'+(profileData.previewEurl == null ? 'filter: invert(0.50);' : '')+'"></a>' +
						'<span class="media-body">' +
							'<p class="fs-16">' +
								'<text class="text-dark" style="font-weight: 500;">'+ nome +'</text>' +
							'</p>' +
							'<p class="fs-16">' +
								'<span id="horarioUltMsg_152" class="" style="font-size: 12px;">'+ c.numero +'</span>' +
							'</p>' +
						'</span>' +
					'</div>'
				);
			})
			
			$('#contatosLoading').addClass('d-none');
		}else{
			Swal.fire({
				title: res.Erro,
				scrollbarPadding: false,
				icon: 'error',
				confirmButtonColor: 'var(--bs-info)',
				scrollbarPadding: false
			}).then(() =>{
				//location.reload();
			})
			
			$('#contatosLoading').addClass('d-none');
		}
	})
}

$('#containerContatos').addClass('d-none');
let isAnimating = false;
$('#fechaContatos').on('click', function(){
	if(isAnimating){return;}
	isAnimating = true;
	var animationOut = 'bounceOutLeft';
	// Apply animation once per click
	$('#containerContatos').addClass('animated ' + animationOut).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
		$('#containerContatos').removeClass('animated ' + animationOut);
		$('#containerContatos').addClass('d-none');
	});
	
	var animationIn = 'bounceInLeft';
	$('#containerConversas').removeClass('d-none');
	$('#containerConversas').addClass('animated ' + animationIn).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
		$('#containerConversas').removeClass('animated ' + animationIn);
		isAnimating = false;
		
		if(selectNovaConversa != null){
			$('#conversas #conversa_' + selectNovaConversa).trigger('click');
			selectNovaConversa = null;
		}
	});
})

$('#novaConversa').on('click', function(){
	if($('#contatos div').length == 0){
		listarContatos();
	}
	
	if(isAnimating){return;}
	isAnimating = true;
	var animationOut = 'bounceOutLeft';
	// Apply animation once per click
	$('#containerConversas').addClass('animated ' + animationOut).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
		$('#containerConversas').removeClass('animated ' + animationOut);
		$('#containerConversas').addClass('d-none');
	});
	var animationIn = 'bounceInLeft';
	$('#containerContatos').removeClass('d-none');
	$('#containerContatos').addClass('animated ' + animationIn).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
		$('#containerContatos').removeClass('animated ' + animationIn);
		isAnimating = false;
	});
})

$('#contatos').on('click', '.contato', function(){
	let id = $(this).data('idcontatos');
	let nome = $(this).data('nome');
	let numero = $(this).data('numero');
	Swal.fire({
	  title: 'Nova conversa',
	   html: '<h4 class="mt-2 mb-2">Iniciar nova conversa com <b>'+ nome +'</b> ('+ numero +')</h4>' +
				{%if numeros|length > 1 %}
				'<label for="meusNumeros" class="text-center m-3 mb-0">Enviar de: </label>' +
				
				'<select id="meusNumeros" class="selectpicker col-12 mb-4" title="Nenhum número cadastrado">' +
					{% for n in numeros %}
					'<option value="{{n.getIdNumeros}}" class="" style="letter-spacing: 1px !important;">{{n.getDescricao}} ({{n.getNumero}})</option>' +
					{% endfor %}
				'</select>' +
				{% endif %}
				''
			,
	  showCloseButton: true,
	  showCancelButton: true,
	  focusConfirm: false,
	  confirmButtonText: 'Iniciar conversa',
	  cancelButtonText: 'Cancelar',
	  scrollbarPadding: false,
	  allowOutsideClick: false,
	  confirmButtonColor: 'var(--bs-success)',
	  scrollbarPadding: false,
	  didOpen: () => {
		$('.swal2-close').blur();
		{%if numeros|length > 1 %}
			$('#meusNumeros').selectpicker();
			$('#meusNumeros').selectpicker('val', '{{numeros.0.getIdNumeros}}');
			$('#meusNumeros').on('show.bs.select', function () {
				$('.swal2-actions').css('z-index', '0');
			});
		{% endif %}

	  },
	   preConfirm: (value) => {
	  }
	}).then((result) => {
		if(result.isConfirmed){
			Swal.fire({title : 'Iniciando conversa', allowOutsideClick: false, scrollbarPadding: false});
			Swal.showLoading();
			{%if numeros|length > 1 %}
				let meuNumero = $('#meusNumeros').val()
			{% else %}
				let meuNumero = {{numeros.0.getIdNumeros}}
			{% endif %}
			
			fetch('chatNovaConversa', {
				method: 'POST',
				headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				body: 'idContatos=' + id +
						'&idNumero=' + meuNumero 
			})
			.then(function(res){ return res.json(); })
			.then(function(res){
				if(res.Success){
					let idConversa = res.idConversa;
					novaConversaIntervalId = setInterval(function() {checkNovaConversa(idConversa); },500);
				}else{
					Swal.fire({
						title: res.Erro,
						scrollbarPadding: false,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						//location.reload();
					})
				}
			})
		}
	})
	
})

let novaConversaIntervalId = null;
let selectNovaConversa = null;
function checkNovaConversa(idConversa){
	if($('#conversa_' + idConversa).length > 0){
		selectNovaConversa = idConversa;
		clearInterval(novaConversaIntervalId);
		Swal.close();
		$('#fechaContatos').trigger('click');
	}
}

$('#novoContato').on('click', function(){
	Swal.fire({
	  title: 'Novo contato',
	  html:
		'<h5>Informe o número para adicionar um novo contato</h5>' +
		'<div class="container row">' +
			'<div class="col-3 text-start mt-2">' +
				'<h6 class="mb-1 font-weight-bold">País</h6>' +
				'<input id="novoContatoPais" placeholder="País" class="form-control" value="55"/>' +
			'</div>' +
			
			'<div class="col-9 text-start mt-2">' +
				'<h6 class="mb-1 font-weight-bold">Número</h6>' +
				'<input id="novoContatoNumero" placeholder="Número" class="form-control" />' +
			'</div>' +
			'' +
		'</div>' +
		'',
	  showCloseButton: true,
	  showCancelButton: true,
	  focusConfirm: false,
	  confirmButtonText: 'Adicionar',
	  cancelButtonText: 'Cancelar',
	  scrollbarPadding: false,
	  allowOutsideClick: false,
	  confirmButtonColor: 'var(--bs-info)',
	  scrollbarPadding: false,
	  willOpen: () => {
	  },
	  didOpen: () => {
		  $('.swal2-close').blur();
		  $('#novoContatoNumero').focus();
		  $('#novoContatoNumero').mask('000000000000000000000');
	  },
	  preConfirm: (value) => {
		let novoContatoPais = $('#novoContatoPais').val();
		let novoContatoNumero = $('#novoContatoNumero').val();
		
		switch(true){
			case novoContatoPais == '':
				Swal.showValidationMessage('País não pode ser vazio')
				break;
			case novoContatoNumero == '':
				Swal.showValidationMessage('Número não pode ser vazio')
				break;
		}
	  }
	  
	}).then((result) => {
		if(result.isConfirmed){
			let novoContatoPais = $('#novoContatoPais').val();
			let novoContatoNumero = $('#novoContatoNumero').val();
		
			
			Swal.fire({title : 'Adicionando contato...', allowOutsideClick: false, scrollbarPadding: false});
			Swal.showLoading();
			
			fetch('chatNovoContato', {
				method: 'POST',
				headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				body: 'numero=' + novoContatoPais + novoContatoNumero +
						'&sourceNumber={{numeros.0.getIdNumeros}}'
			})
			.then(function(res){ return res.json(); })
			.then(function(res){
				if(res.Success){
					Swal.close();
					listarContatos();
				}else{
					Swal.fire({
						title: 'Contato não adicionado',
						text: res.Erro,
						scrollbarPadding: false,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						//location.reload();
					})
				}
			})
		}
	})
})
/*----------------------------------- CONTATOS --------------------------------------------------------*/










$('#ativarNotificacoes').on('click', function(){
	Notification.requestPermission();
})

let soundNotification = null;
$('#ativarSons').on('click', function(){
	if(soundNotification == null){
		soundNotification = WaveSurfer.create({
			container: '#chatAudio',
			height: 45,
			barWidth: 2,
			barHeight: 1,
			barMinHeight: 0.1,
			barRadius: 1,
			cursorColor: 'var(--bs-light)',
			hideScrollbar: true,
			barGap: null 
		});
		soundNotification.load('{{host}}assets/sounds/ding.mp3');
		$('#ativarSons').html('<i class="mdi mdi-music-box mdi-18px"></i> Desativar sons');
	}else{
		soundNotification = null;
		$('#ativarSons').html('<i class="mdi mdi-music-box mdi-18px"></i> Ativar sons');
	}
})

function DesktopNotification(title, description, icon) {
        if (icon == undefined) {
            icon = 'https://chatmanager.com.br/assets/images/icon_notify.png';
        }
        
        /*if (!window.Notification) {
            alert('Your browser does not support desktop notifications!');
            return;
        }*/

        if (Notification.permission === "granted"){
			var notification = new Notification(title, {
				icon: icon,
				body: description
			});
		}

		
       //notification.onclick = function() {
            //window.open(url);
        //}
}




</script>
{% endblock %}