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

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

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

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

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

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

.box-header {
    border-bottom: none!important;
}

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

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

.daterangepicker .ranges li.active {
	background-color: #2FB649 !important;
	color: #fff;
}
.theme-primary .ranges li:hover,
.theme-primary .ranges li:active,
.theme-primary .ranges li.active {
	border: none;
}
.theme-primary .daterangepicker td.active {
	background-color: #2FB649 !important;
}
.daterangepicker td.in-range {
	background-color: #c2efcb;
	border-color: transparent;
	color: #000;
	border-radius: 0;
}
.theme-primary .btn-primary {
	background-color: #2FB649;
	border-color: #2FB649;
	color: #ffffff;
}
.theme-primary .btn-primary:hover,
.theme-primary .btn-primary:active,
.theme-primary .btn-primary:focus,
.theme-primary .btn-primary.active {
	background-color: #1b9c35 !important;
	border-color: #1b9c35 !important;
	color: #ffffff !important;
}

.selecionar-numero .btn-light{
	background-color: #fff!important;
	border: none;
}

.table-responsive tbody tr {
    transition: visibility 0.2s ease, opacity 0.2s ease;
    opacity: 1;
}

.table-responsive tbody tr[style*="hidden"] {
    opacity: 0;
}
</style>


<div class="content-wrapper bg-light text-start">
	<div class="container-full ">
		
		<!-- Content Header (Page header) -->
		<div class="content-header">
			<div class="d-flex align-items-center">
				<div class="me-auto">
					<h4 class="page-title fw-bold text-purple">Conversas</h4>
				</div>
				
				{%if numeros|length > 1 %}
				<div class="col-lg-4 col-12 selecionar-numero">
					<select id="meusNumeros" class="selectpicker shadow-sm col-12 form-control form-control-sm b-1" title="Filtrar número" autocomplete="off">
						<option value="TODOS" class="" style="letter-spacing: 1px !important;" selected>Selecionar número</option>
						{% for n in numeros %}
						<option value="{{n.getIdNumeros}}" data-numero="{{n.getNumero}}" class="" style="letter-spacing: 1px !important;">{{n.getDescricao}} ({{n.getNumero}})</option>
						{% endfor %}
					</select>
				</div>
				{% endif %}
			</div>
		</div>

		<!-- Main content -->
		<section class="content">
			<div class="row">
				<div class="col-12">
					<div class="box">
						
						<div class="box-header with-border p-3 pb-0">
							<div class="row gy-3 p-0">
								<!--h4 class="box-title">Últimas Conversas</h4-->
								<div class="col-xl-3 col-lg-4">
									<div class="form-group mb-0">
										<h6  class="mb-1 fw-bold text-purple"><i class="fa fa-calendar me-1"></i>Data Início:</h6>
										<div class="input-group mb-0" style="">
											<div class="input-group-addon bg-purple border-0 py-0 d-flex align-items-center" style="">
												<i class="fa fa-calendar" style="font-size: 14px !important;"></i>
											</div>
											<input type="text" class="form-control border-0 bg-manager-gray form-control-sm pull-right" id="periodoFiltro" style="height: 26.5px;">
										</div>
									</div>
								</div>
								
								<div class="col-xl-2 col-lg-2">
									<h6 for="statusFiltro" class="mb-1 fw-bold text-purple"><i class="fa-solid fa-chart-simple me-1"></i>Status</h6>
									<select id="statusFiltro" class="selectpicker col-12 form-control form-control-sm" title="Filtrar status" data-selected-text-format="count > 2" data-count-selected-text= "{0} status selecionados" data-actions-box="true" data-select-all-text="Marcar Todos" data-deselect-all-text="Desmarcar" multiple>
										<option value="ATENDIMENTO CHATBOT" class="" style="letter-spacing: 1px !important;">Atendimento Chatbot</option>
										<option value="AGUARDANDO ATENDENTE" class="" style="letter-spacing: 1px !important;">Aguardando Atendente</option>
										<option value="ATENDIMENTO INICIADO" class="" style="letter-spacing: 1px !important;">Atendimento Iniciado</option>
										<option value="ENCERRADO" class="" style="letter-spacing: 1px !important;">	Encerrado</option>
									</select>
								</div>
								
								<div class="col-xl-2 col-lg-3">
									<h6 for="atendenteFiltro" class="mb-1 fw-bold text-purple"><i class="fa fa-headset me-1"></i>Atendente</h6>
									<select id="atendenteFiltro" class="selectpicker col-12 form-control form-control-sm" title="Filtrar atendente">
										{%if userLogged.tipo == 'ATENDENTE'%}
											<option value="0" class="" style="letter-spacing: 1px !important;" selected>Todos</option>
											{% if userLogged.departamentos|length == 0 %}
												{% for a in atendentes %}
													<option value="{{a.getIdAtendentes}}" class="" style="letter-spacing: 1px !important;" {%if a.getIdAtendentes == userLogged.idAtendentes%}selected{%endif%}>{{a.getNomeAtendente}}</option>
												{%endfor%}
											{%else%}
												{% for a in atendentes %}
													{%if a.getIdAtendentes == userLogged.idAtendentes%}
														<option value="{{a.getIdAtendentes}}" class="" style="letter-spacing: 1px !important;">{{a.getNomeAtendente}}</option>
													{%endif%}
												{%endfor%}
												
											{%endif%}
										{%else%}
											<option value="0" class="" style="letter-spacing: 1px !important;" selected>Todos</option>
											{% for a in atendentes %}
											<option value="{{a.getIdAtendentes}}" class="" style="letter-spacing: 1px !important;">{{a.getNomeAtendente}}</option>
											{%endfor%}
										{%endif%}
									</select>
								</div>
								
								<div class="col-xl-2 col-lg-3">
									<h6 for="departamentoFiltro" class="mb-1 text-purple fw-bold"><i class="fa-solid fa-sitemap me-1"></i>Departamento</h6>
									<select id="departamentoFiltro" class="selectpicker col-12 form-control form-control-sm" title="Filtrar departamento" multiple>
										{%if userLogged.tipo == 'ATENDENTE'%}
											{% if userLogged.departamentos|length == 0 %}
											<!--option value="0" class="" style="letter-spacing: 1px !important;" selected>Todos</option-->
											{%endif%}
											{% for d in departamentos %}
											<option value="{{d.getIdDepartamentos}}" class="" style="letter-spacing: 1px !important;" {%if d|length == 1 and userLogged.idDepartamento != NULL %}selected{%endif%}>{{d.getNomeDepartamento}}</option>
											{%endfor%}
										{%else%}
											<!--option value="0" class="" style="letter-spacing: 1px !important;" selected>Todos</option-->
											{% for d in departamentos %}
											<option value="{{d.getIdDepartamentos}}" class="" style="letter-spacing: 1px !important;">{{d.getNomeDepartamento}}</option>
											{%endfor%}
										{%endif%}
									</select>
								</div>
								
								<div class="col-xl-3 col-lg-4">
									<h6 for="tagsFiltro" class="mb-1 fw-bold text-purple"><i class="fa-solid fa-tags me-1"></i>Tags</h6>
									<select id="tagsFiltro" class="selectpicker col-12 form-control form-control-sm" title="Filtrar tags" data-live-search="true" multiple data-selected-text-format="count > 2" data-count-selected-text= "{0} tags selecionadas" data-actions-box="true" data-select-all-text="Marcar Todas" data-deselect-all-text="Desmarcar" multiple>
										{% for t in tags %}
										<option value="{{t.getIdTags}}" class="" style="letter-spacing: 1px !important;" data-content="<i class='fa-solid fa-tag' style='color: {{t.getCor}}'></i> {{t.getNome}}">{{t.getNome}}</option>
										{% endfor %}
									</select>
								</div>
								
								<div class="col-xl-3 col-lg-4">
									<div class="form-group">
										<h6 for="contatoFiltro" class="mb-1 fw-bold text-purple"><i class="fa fa-address-book me-1"></i>Contato</h6>
										<input type="text" class="form-control form-control bg-manager-gray border-0 form-control-sm pull-right" placeholder="Nome ou número" id="contatoFiltro" autocomplete="off">
									</div>
								</div>
								
								<div class="col-xl-2 col-lg-2">
									<h6 for="avaliacaoFiltro" class="mb-1 fw-bold text-purple"><i class="fa fa-star me-1"></i>Avaliação</h6>
									<select id="avaliacaoFiltro" class="selectpicker col-12 form-control form-control-sm" title="Filtrar avaliação" data-select-all-text="" data-deselect-all-text="Desmarcar" data-actions-box="true" multiple>
										<option value="COM_AVALIACAO" class="" style="letter-spacing: 1px !important;">Avaliados</option>
										<option value="NAO_AVALIADOS" class="" style="letter-spacing: 1px !important;">Não Avaliados</option>
										<option value="COM_FEEDBACK" class="" style="letter-spacing: 1px !important;">Com Feedback</option>
										<option value="SEM_FEEDBACK" class="" style="letter-spacing: 1px !important;">Sem Feedback</option>
										<option value="1" class="" style="letter-spacing: 1px !important;">1 Estrela</option>
										<option value="2" class="" style="letter-spacing: 1px !important;">2 Estrelas</option>
										<option value="3" class="" style="letter-spacing: 1px !important;">3 Estrelas</option>
										<option value="4" class="" style="letter-spacing: 1px !important;">4 Estrelas</option>
										<option value="5" class="" style="letter-spacing: 1px !important;">5 Estrelas</option>
									</select>
								</div>
								
								<div class="col-xl-2 col-lg-2">
									<h6 for="ociososFiltro" class="mb-1 fw-bold text-purple"><i class="fa fa-clock me-1"></i>Ociosos</h6>
									<select id="ociososFiltro" class="selectpicker col-12 form-control form-control-sm" title="Filtrar ociosos" autocomplete="off">
										<option value="TODOS" class="" style="letter-spacing: 1px !important;" selected>Todos</option>
										<option value="OCIOSOS" class="" style="letter-spacing: 1px !important;">Ociosos</option>
									</select>
								</div>
								
								<div class="col-xl-2 col-lg-2">
									<h6 for="canaisFiltro" class="mb-1 fw-bold text-purple"><i class="fa fa-comments me-1"></i>Canais</h6>
									<select id="canaisFiltro" class="selectpicker col-12 form-control form-control-sm" title="Filtrar canal" data-selected-text-format="count > 2" data-count-selected-text= "{0} canais selecionados" data-actions-box="true" data-select-all-text="Todos" data-deselect-all-text="Desmarcar" multiple>
										<option value="whatsapp" class="" style="letter-spacing: 1px !important;">Whatsapp</option>
										<option value="instagram" class="" style="letter-spacing: 1px !important;">Instagram</option>
										<option value="facebook" class="" style="letter-spacing: 1px !important;">Facebook</option>
										<option value="telegram" class="" style="letter-spacing: 1px !important;">Telegram</option>
									</select>
								</div>
								
								<div class="col-xl-1 col-lg-1 mb-sm-3 mb-xs-15 text-end">
									<h6 for="" class="mb-1">&nbsp;</h6>
									<a href="javascript:void(0)" id="buscarConversas" class="btn btn-circle btn-green-manager2 btn-xs"><i class="fa fa-search" style="font-size: 14px;"></i></a>
								</div>
								
							</div>
						</div>
						<div class="box-body no-padding">
							<div class="table-responsive" style="max-height: 70vh; overflow: auto; border-radius: 10px 10px 0 0;">
								<table id="tabelaConversas" class="table table-hover" >
									<thead class="bg-purple sticky-top text-center" style="z-index: 99;">
										<tr>
											<th>#</th>
											<th></th>
											<th><i class="fa-solid fa-tags me-1"></i>Tag</th>
											<th><i class="fa-solid fa-calendar me-1"></i>Data</th>
											<th><i class="fa-solid fa-user me-1"></i>Nome</th>
											<th><i class="fa-solid fa-mobile-button me-1"></i>Número</th>
											<th><i class="fa-solid fa-chart-simple me-1"></i>Status</th>
											<th><i class="fa-solid fa-headset me-1"></i>Atendente</th>
											<th><i class="fa-solid fa-sitemap me-1"></i>Departamento</th>
											<th id="totalListagem" colspan="2" class="text-end"></th>
										</tr>
									</thead>
									<tbody class="text-center">
										
									</tbody>
								</table>
							</div>
						</div>
					</div>

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

<!-- Modal Mensagens -->
<div id="modalMensagens" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" style="display: none;">
	<div class="modal-dialog modal-xl">
		<div class="modal-content rounded" style="min-height: 75vh;">
			<div class="modal-header">
				<h4 class="modal-title" id="modalMensagensTitle"></h4>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body p-0" >
				<div id="modalListaMensagens" class="p-0 me-0 text-center bg-secondary " 
					style="max-height: 75vh; min-height: 75vh; overflow-y: auto;
						background-image:url(assets/images/pattern-min.svg); 
							backface-visibility: hidden;
							-webkit-backface-visibility: hidden;
							 -webkit-transform: translateZ(0) scale(1.0, 1.0);
							  transform: translateZ(0);"
				>
				
				</div>
			</div>
			<div class="modal-footer text-end">
				<button type="button" class="btn btn-primary text-start" data-bs-dismiss="modal">Ok</button>
			</div>
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<style>
	.swal2-html-container{
		overflow: visible !important;
	}
	.table-responsive>table .dropdown{position:static;}
	#.table-responsive>table .dropdown>.dropdown-menu{left:0 !important;top:0 !important;}
</style>
{% endblock %}
{% block scripts %}
<script src="assets/vendor_plugins/jsPDF/jspdf.umd.min.js"></script>
<script src="assets/vendor_plugins/jsPDF/html2canvas.js"></script>

<script src="https://unpkg.com/freezeframe/dist/freezeframe.min.js"></script>
<script src="assets/vendor_plugins/vcard-parser/vcard-parser.js"></script>
<script>
$('body').addClass('sidebar-collapse');

//Funçao para ajustar a ultima linha da tabela para que nao fique cortada.
document.addEventListener("DOMContentLoaded", function () {
    const tableContainers = document.querySelectorAll(".table-responsive");
    if (tableContainers.length > 0) {
        const checkRowsVisibility = (container) => {
            const rows = container.querySelectorAll("tbody tr");
            const containerRect = container.getBoundingClientRect();
            rows.forEach((row) => {
                const rowRect = row.getBoundingClientRect();
                // Verifica se a linha está completamente visível
                const isFullyVisible = 
                    rowRect.top >= containerRect.top &&
                    rowRect.bottom <= containerRect.bottom;
                row.style.visibility = isFullyVisible ? "visible" : "hidden";
            });
        };
        tableContainers.forEach((container) => {
            checkRowsVisibility(container);
            container.addEventListener("scroll", () => checkRowsVisibility(container));
        });
    }
});

var isMobile = false; //initiate as false
// device detection
if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) 
    || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) { 
    isMobile = true;
}


$(document).ready(function() {
	initilizeTooltips();
	moment.locale('pt-br');
	$('#periodoFiltro').daterangepicker({ 
		locale: { 
					cancelLabel: 'Limpar',
					applyLabel: 'Aplicar',
					customRangeLabel : 'Escolher período',
				},
		ranges: {
			'Hoje': [moment(), moment()],
			'Ontem': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
			'Últimos 7 dias': [moment().subtract(6, 'days'), moment()],
			'Últimos 30 dias': [moment().subtract(29, 'days'), moment()],
			'Esse Mês': [moment().startOf('month'), moment().endOf('month')],
			'Último Mês': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
			'Todo período': [moment(),moment()]
		},
		"maxSpan": {
			"months": 3
		}
	});
	
	$('#periodoFiltro').on('apply.daterangepicker', function (e, picker) {
		if($('#periodoFiltro').data('daterangepicker').chosenLabel  == 'Todo período'){
			$('#periodoFiltro').val('Todo Período');
			$('#contatoFiltro').attr('readonly', true);
			$('#contatoFiltro').attr('placeholder', 'Clique para buscar um contato');
			$('#contatoFiltro').css('cursor', 'pointer');
			$('#contatoFiltro').data('id', '');
			
			buscarContatos();
		}else{
			$('#contatoFiltro').val('');
			$('#contatoFiltro').attr('placeholder', 'Nome ou número');
			$('#contatoFiltro').css('cursor', '');
			$('#contatoFiltro').data('id', '');
			$('#contatoFiltro').attr('readonly', false);
		}
	})
	
	getConversas();
	
	$('#tagsFiltro, #statusFiltro').on('show.bs.select', function () {
		$(this).parent().find('.bs-deselect-all').parent().css('width', '100%');
	})
	
	$('#avaliacaoFiltro').on('show.bs.select', function () {
		$(this).parent().find('.bs-deselect-all').parent().css('width', '100%');
		$(this).parent().find('.bs-select-all').addClass('d-none');
	})
})

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

function initilizePopovers(){
	var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
	var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
	  return new bootstrap.Popover(popoverTriggerEl)
	})

}

$('#buscarConversas').on('click', function(){
	getConversas();
})

var buscarMaisConversas = false;
$('#tabelaConversas').parent().scroll(function(e){
	if(buscarMaisConversas){return;}
		
	if($('#tabelaConversas').parent().scrollTop() + $('#tabelaConversas').parent().height() +1 >= $("#tabelaConversas").parent().get(0).scrollHeight) {
		if(parseInt($('#totalListagem').text().split('/')[0]) < parseInt($('#totalListagem').text().split('/')[1])){
			buscarMaisConversas = true;
			getConversas($('#tabelaConversas > tbody > tr').length);
		}
	}
})


let tags = {};
{% for t in tags%}
	tags[{{t.getIdTags}}] = JSON.parse('{"nome":"{{t.getNome}}","cor":"{{t.getCor}}"}');
{%endfor%};
function getConversas(init = 0){
	// Swal.fire({title : 'Buscando conversas', allowOutsideClick: false, scrollbarPadding: false});
	// Swal.showLoading();
	
	let dataInicio = moment($('#periodoFiltro').data('daterangepicker').startDate._d).format('YYYY-MM-DD');
	let dataFinal = moment($('#periodoFiltro').data('daterangepicker').endDate._d).format('YYYY-MM-DD');
	let status = $('#statusFiltro').val()
	let atendente = $('#atendenteFiltro').val()
	let departamento = JSON.stringify($('#departamentoFiltro').val())
	let tagsFiltro = $('#tagsFiltro').val()
	let contatoFiltro = $('#contatoFiltro').val()
	let avaliacaoFiltro = $('#avaliacaoFiltro').val()
	let ociosos = $('#ociososFiltro').val()
	let canais = $('#canaisFiltro').val()
	
	var formData = new FormData();
	formData.append('inicio', dataInicio);
	formData.append('final', dataFinal);
	if($('#periodoFiltro').data('daterangepicker').chosenLabel  == 'Todo período'){
		formData.append('todo_periodo', true);
		if($('#contatoFiltro').data('id') == ''){
			buscarContatos()
			return;
		}
		formData.append('contato', $('#contatoFiltro').data('id'));
	}else{
		formData.append('contato', contatoFiltro);
	}
	
	formData.append('status', JSON.stringify(status));
	formData.append('atendente', atendente);
	formData.append('departamento', departamento);
	formData.append('tags', JSON.stringify(tagsFiltro));
	
	formData.append('avaliacao', JSON.stringify(avaliacaoFiltro));
	formData.append('ociosos', ociosos);
	formData.append('canais', JSON.stringify(canais));
	
	
	formData.append('init', init);
	if($('#meusNumeros').val()){
		formData.append('numero', $('#meusNumeros').val());
	}
	
	fetch('buscarConversas', {
		method: 'POST',
		body: formData
	})
	.then(function(res){ return res.json(); })
	.then(function(res){
		if(res.Success){
			if(init == 0){
				$('#tabelaConversas').parent().scrollTop(0);
				$('#tabelaConversas > tbody').empty();
			}
			var conversas = res.conversas; 

			
			$(conversas).each(function(index,c){
				var tagColor = '';
				if(c.tags != null){
					//red 0%, red 33%, green 33%, green 66%, blue 66%, blue 100%
					jsTags = JSON.parse('[' + c.tags + ']');
					var percTags = 100/jsTags.length;
					$(jsTags).each(function(index,t){
						(index > 0 ? tagColor = tagColor + ',' : '');
						tagColor = tagColor + tags[t].cor + ' ' + (percTags*index) + '%, ' + tags[t].cor + ' ' + (percTags*(index+1)) + '%';
					})
					tagColor = 'background: linear-gradient(to right, '+ tagColor +');-webkit-background-clip: text;-webkit-text-fill-color: transparent;';
				}
				
				var avaliacao = '';
				for (var i = 0; i < c.avaliacao; i++) {
					avaliacao = avaliacao + '<i class="fa fa-star" style="color:yellow;-webkit-text-stroke:0.5px #959595;"></i>';
				}
				
				for (var i = 0; i < (5-c.avaliacao); i++) {
					avaliacao = avaliacao + '<i class="far fa-star"></i>';
				}
				
				var senderIcon = '';
				//console.log(c)
				switch(c.sender){
					case 'venom':
					case 'whatsapp':
					case null:
						senderIcon = '<i class="fa-brands fa-whatsapp fa-lg me-2"></i>';
						break;
					case 'facebook':
						senderIcon = '<i class="fa-brands fa-facebook-messenger fa-lg me-2"></i>';
						break;
					case 'instagram':
						senderIcon = '<i class="fa-brands fa-instagram fa-lg me-2"></i>';
						break;
					case 'telegram':
						senderIcon = '<i class="fa-brands fa-telegram fa-lg me-2"></i>';
						break;
				}

				let statusClass = '';
    			switch (c.status) {
    			    case 'ENCERRADO':
    			        statusClass = 'bg-green-manager';
    			        break;
    			    case 'ATENDIMENTO CHATBOT':
    			        statusClass = 'bg-dark';
    			        break;
    			    case 'ATENDIMENTO INICIADO':
    			        statusClass = 'bg-purple';
    			        break;
					case 'AGUARDANDO ATENDENTE':
    			    	statusClass = 'bg-warning';
    			        break;
    			}
				
				$('#tabelaConversas > tbody').append(
					'<tr class="text-muted text-nowrap">' +
						'<td>'+ c.idConversas +'</td>' +
						'<td class="">'+ senderIcon +'</td>' +
						'<td class="text-center p-0">' +
							'<i data-id="'+ c.idConversas +'" data-tags="'+ (c.tags == null ? '[]' : '['+c.tags+']') +'" class="'+ (c.tags == null ? 'fa-solid fa-tag' : 'fa-solid fa-tags') +' tagConversa" data-bs-trigger="hover focus" data-bs-toggle="popover" title="" style="font-size: 20px;'+ tagColor +'cursor:pointer;"></i>' +
						'</td>' +
						'<td>'+ moment(c.data.date).format("DD/MM/YYYY HH:mm") +'</td>' +
						'<td>'+ (c.nomeExibir == null ? (c.nome == null ? c.numero : c.nome) : c.nomeExibir) +'</td>' +
						'<td>'+ c.numero +'</td>' +
						'<td><span class="badge '+statusClass+' text-white fw-bold">'+c.status+'</span></h6></td>' +
						'<td>'+ (c.nomeAtendente == null ? '' : c.nomeAtendente) +'</td>' +
						'<td>'+ (c.nomeDepartamento == null ? '' : c.nomeDepartamento) +'</td>' +
						'<td style="white-space: nowrap;font-size:10px;text-align:center;" '+ 'data-bs-toggle="tooltip" data-bs-original-title="'+ (c.avaliacao == null ? 'Não Avaliado' : (c.feedback==null?'': c.feedback)) +'"' +'>'+ 
							avaliacao +
						'</td>' +
						'<td>' +
							/*
							'<a id="" data-id="'+ c.idConversas +'" class="verMensagens waves-effect waves-circle btn btn-xs btn-social-icon btn-circle btn-primary me-1" data-bs-toggle="tooltip" data-bs-original-title="Ver mensagens"><i class="mdi mdi-message-bulleted mdi-16px"></i></a>' + 
							(c.status != 'ENCERRADO'  ? '<a id="" data-id="'+ c.idConversas +'" class="encerrarAtendimento waves-effect waves-circle btn btn-xs btn-social-icon btn-circle btn-primary me-1" data-bs-toggle="tooltip" data-bs-original-title="Encerrar atendimento"><i class="mdi mdi-close mdi-16px"></i></a>' :'') + 
							(c.status == 'ENCERRADO'  ? '<a id="" data-id="'+ c.idConversas +'" class="reiniciarAtendimento waves-effect waves-circle btn btn-xs btn-social-icon btn-circle btn-primary me-1" data-bs-toggle="tooltip" data-bs-original-title="Reiniciar atendimento"><i class="mdi mdi-restart mdi-16px"></i></a>' :'') + 
							*/
							'<div class="dropdown float-end">' +
								'<a class="px-10 pt-5" href="#" data-bs-toggle="dropdown" aria-expanded="false"><i class="ti-more-alt"></i></a>' +
								'<div class="dropdown-menu dropdown-menu-end" style="position:static;">' +
									'<a id="" data-id="'+ c.idConversas +'" class="verMensagens dropdown-item" href="javascript:void(0)"><i class="fa fa-comments"></i> Ver mensagens</a>' + 
									'<a id="" data-id="'+ c.idConversas +'" class="exportarConversa dropdown-item" href="javascript:void(0)"><i class="fa fa-file-pdf"></i> Exportar conversa</a>' + 
									(c.status != 'ENCERRADO'  ? '<a id="" data-id="'+ c.idConversas +'" data-sourcenumber="'+ c.idNumeros+'" data-nome="'+ (c.nomeExibir == null ? c.nome : c.nomeExibir) +'" data-numero="'+ c.numero +'" class="encerrarAtendimento dropdown-item" href="javascript:void(0)"><i class="fa fa-close"></i> Encerrar atendimento</a>' :'') + 
									(c.status == 'ENCERRADO'  ? '<a id="" data-id="'+ c.idConversas +'" data-sourcenumber="'+ c.idNumeros+'" data-nome="'+ (c.nomeExibir == null ? c.nome : c.nomeExibir) +'" data-numero="'+ c.numero +'" class="reiniciarAtendimento dropdown-item" href="javascript:void(0)"><i class="fa fa-rotate-right"></i> Reiniciar atendimento</a>' :'') + 
									(c.status == 'ATENDIMENTO CHATBOT'  ? '<a id="" data-id="'+ c.idConversas +'" data-sourcenumber="'+ c.idNumeros+'" data-nome="'+ (c.nomeExibir == null ? c.nome : c.nomeExibir) +'" data-numero="'+ c.numero +'" class="iniciarAtendimento dropdown-item" href="javascript:void(0)"><i class="fa fa-comment-dots"></i> Iniciar atendimento</a>' :'') + 
								'</div>' +
							'</div>' +
						'</td>' +
					'</tr>'
				);

			})
			
			$('.tagConversa').each(function () {
				let tagContent = '';
				let title = 'Tags';
				if($(this).data('tags').length > 0){
					$($(this).data('tags')).each(function(index,t){
						tagContent = tagContent + '<i class="fa fa-bookmark tagPopover_'+t+'" style="color: '+ tags[t].cor +';font-size: 16px;"></i> <text style="font-size: 16px;">'+ tags[t].nome +'</text><br>';
					})
				}else{
					tagContent = 'Nenhuma tag selecionada';
				}
				$(this).popover({
					html: true, 
					sanitize: false,
					content: tagContent
				})
			});
			
			
			$('#totalListagem').html($('#tabelaConversas > tbody > tr').length + '/' + res.totalRecords);
			buscarMaisConversas = false;
			initilizeTooltips();
			//initilizePopovers();
			Swal.close();
		}else{
			Swal.fire({
				title: res.Erro,
				scrollbarPadding: false,
				icon: 'error',
				confirmButtonColor: 'var(--bs-info)',
				scrollbarPadding: false
			}).then(() =>{
				//location.reload();
			})
		}
	})
}


$('#contatoFiltro').on('click', function(){
	if($('#periodoFiltro').data('daterangepicker').chosenLabel  == 'Todo período'){
		buscarContatos();
	}
})

function buscarContatos(){
	Swal.fire({
	  //title: nomeEstagio + ' - Adicionar Contato',
	  html:
		'<div class="container">' +
			'<h4>Filtro Todo Período selecionado é necessário informar um contato</h4>' +
			'<div class="col-12 text-left mt-4">' +
				'<h6 class="mb-1 font-weight-bold">Pesquisar Contato</h6>' +
				'<input id="pesquisaContato" placeholder="Nome/Número" class="form-control" value=""/>' +
			'</div>' +
			'<div id="listaContatosPesquisa" class="my-4 px-2 rounded10 bg-light" style="min-height: 250px; max-height: 250px; overflow-y: auto;">' +
				'<h6 class="mt-25">Nenhum contato encontrado</h6>' +
			'</div>' +
			'' +
		'</div>' +
		'',
	  showCloseButton: true,
	  showCancelButton: false,
	  focusConfirm: false,
	  showConfirmButton: false,
	  cancelButtonText: 'Cancelar',
	  allowOutsideClick: false,
	  scrollbarPadding: false,
	  willOpen: () => {
		
	  },
	  didOpen: () => {
		$('#pesquisaContato').focus();
		
		$("#pesquisaContato").on("keyup", function() {
			var value = $(this).val().toLowerCase();
			if(value.length >= 3 || value.length == 0){
				listarContatos();
			}
		});
		
		$('#listaContatosPesquisa').scroll(function(e){
			if($('#listaContatosPesquisa').scrollTop() + $('#listaContatosPesquisa').height() == $("#listaContatosPesquisa").get(0).scrollHeight) {
				if($('#carregandoMaisContatos').length == 0 && buscandoContatos == false){
					listarContatos($('#listaContatosPesquisa .contato').length , 30);
					$('#listaContatosPesquisa').append('<div id="carregandoMaisContatos" class="p-2 d-flex justify-content-center align-items-center mt-auto">Buscando contatos...</div>');
				}
			}
		})
		
		$('#listaContatosPesquisa').on('click', '.contato', function(){
			var numero = $(this).data('numero');
			var nome = $(this).data('nome');
			var idcontatos = $(this).data('idcontatos');
			$('#contatoFiltro').val(nome + '('+numero+')');
			$('#contatoFiltro').data('id', idcontatos);
			
			Swal.close();
		})
	  },
	  preConfirm: (value) => {
		
	  }
	  
	}).then((result) => {
		
	})
}

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

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

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




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

{% for n in numeros%}
	preferencias['{{n.getIdNumeros}}'] = {
										tipoEnvioAvaliacao:'{{n.getPreferencias.getTipoEnvioAvaliacao}}',
										mensagemInicio:`{{n.getPreferencias.getMensagemInicio}}`,
										mensagemEncerrar:`{{n.getPreferencias.getMensagemEncerrar}}`,
										msgIniciaObrigatoria:{{n.getPreferencias.getMsgIniciaObrigatoria}},
										msgEncerraObrigatoria:{{n.getPreferencias.getMsgEncerraObrigatoria}}
										};
{%endfor%};
var modalConversa = null;
$('#tabelaConversas > tbody').on('click', '.verMensagens', function(){
	let id = $(this).data('id');

	Swal.fire({title : 'Buscando mensagens', allowOutsideClick: false, scrollbarPadding: false});
	Swal.showLoading();
	
	fetch('buscarMensagens', {
		method: 'POST',
		headers: {'Content-Type': 'application/x-www-form-urlencoded'},
		body: 'id_conversa=' + id 
	})
	.then(function(res){ return res.json(); })
	.then(function(res){
		if(res.Success){
			let conversa = res.conversa;
			modalConversa = conversa;
			let mensagens = res.mensagens;
			
			var nome = (conversa.idContato.nomeExibir == null ? conversa.idContato.nome : conversa.idContato.nomeExibir);
			if(nome == null){
				nome = conversa.idContato.numero;
			}
			
			$('#modalMensagensTitle').text(nome + ' - ' + conversa.status + ' - ' + moment(conversa.data.date).format("DD/MM/YYYY HH:mm"));
			$('#modalListaMensagens').empty();
			
			$(mensagens).each(function(index, m) {
				var fromMe = false;
				if(typeof m.fromMe == 'undefined' || m.fromMe == null){
					var from = m.msgFrom.toString().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);
				}
				
				senderIcon = '';
				switch(conversa.idContato.sender){
					case 'venom':
						senderIcon = '<i class="fa-brands fa-whatsapp me-2"></i>';
						break;
					case 'facebook':
						senderIcon = '<i class="fa-brands fa-facebook-messenger me-2"></i>';
						break;
					case 'instagram':
						senderIcon = '<i class="fa-brands fa-instagram me-2"></i>';
						break;
					case 'ATENDENTE':
						senderIcon = '<i class="fa fa-headset me-2"></i>';
						tag = '';
						break;
				}
				
				if(m.t){
					$('#ultimaMsgChat').text(moment.unix(m.t).format("DD/MM/YYYY HH:mm").replace(moment().format("DD/MM/YYYY"), 'Hoje'));
				}
				
				var message = formataTexto((m.body == null ? '' : m.body));

				if(m.t == null){
					var msgTime = '<i class="fa fa-clock-o"></i>';
				}else{
					var msgTime = moment.unix(m.t).format("DD/MM/YYYY HH:mm").replace(moment().format("DD/MM/YYYY"), 'Hoje');
				}
				
				let msgContent = '';
				let type = (m.type == 'reply' ? m.subtype : m.type);
				switch(type){
					case 'historico':
						msgContent = message;
						break;
					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; word-break:break-word; pointer-events: auto;" >'+ message +'</p>' +
									'</div>';
						break;
					case 'image':
						if(m.fileUrl == null || m.fileExists == false || m.subtype == 'sticker' || (m.fileUrl != null && m.mediaId != null)){
							if(m.mediaId == null && m.subtype != 'sticker'){
								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 d-flex align-items-center justify-content-center '+ (typeof m.base64Preview  == 'undefined' ? 'd-none' : '') +'" href="javascript:void(0)" style="pointer-events: auto; position: relative;">' +
												'<span class="fas fa-download '+(fromMe ? 'text-white' : 'text-dark')+'" style="font-size: 50px;position: absolute;"></span>' +
												'<img id="image_'+ m.idMensagens + '" class="rounded mb-2" src="data:image/png;base64, '+  m.base64Preview +'" alt="" style="width: 20vw;"/></a>' +
												'<p class="m-0 text-start" style="font-size: 15px;white-space: pre-wrap; word-break:break-word; pointer-events: auto;">'+ message +'</p>' +
											'</div>';
							}else{
								var fileUrl = (m.fileUrl == null ? '' : m.fileUrl);
								if(fileUrl.includes('previewImage')){
									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 d-flex align-items-center justify-content-center '+ (typeof m.base64Preview  == 'undefined' ? 'd-none' : '') +'" href="javascript:void(0)" style="pointer-events: auto;position: relative; ">' +
													'<span class="fas fa-download '+(fromMe ? 'text-white' : 'text-dark')+'" style="font-size: 50px; position: absolute;"></span>' +
													'<img id="image_'+ m.idMensagens + '" class="rounded mb-2" src="'+ m.fileUrl +'" alt="" style="width: 20vw;"/></a>' +
													'<p class="m-0 text-start" style="font-size: 15px;white-space: pre-wrap; word-break:break-word; pointer-events: auto;">'+ message +'</p>' +
												'</div>';
								}else{
									if(m.subtype == 'sticker'){
										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)" style="pointer-events: auto;"></span>' +
														'<img id="image_'+ m.idMensagens + '" class="rounded mb-2" src="'+ m.fileUrl +'" alt="" style="width: 20vw;"/></a>' +
														'<p class="m-0 text-start" style="font-size: 15px;white-space: pre-wrap; word-break:break-word; pointer-events: auto;">'+ 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)" style="pointer-events: auto;"></span>' +
														'<img id="image_'+ m.idMensagens + '" class="rounded mb-2" src="'+ m.fileUrl +'" alt="" style="width: 20vw;"/></a>' +
														'<p class="m-0 text-start" style="font-size: 15px;white-space: pre-wrap; word-break:break-word; pointer-events: auto;">'+ 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)" style="pointer-events: auto;"></span>' +
											'<img id="image_'+ m.idMensagens + '" class="rounded mb-2" src="'+ m.fileUrl +'" alt="" style="max-width: 20vw;"/></a>' +
											'<p class="m-0 text-start" style="font-size: 15px;white-space: pre-wrap; word-break:break-word; pointer-events: auto;">'+ 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: 21vw; pointer-events: auto;">' +
											'<a href="javascript:void(0)" data-type="audio" data-msg_id="'+m.idMensagens +'" data-fromme="'+ fromMe +'" class="m-auto downloadFile" href="javascript:void(0)">' +
											'<span class="fas fa-download d-flex position-absolute '+(fromMe ? 'text-white' : '')+'" style="font-size: 30px; left: 5px;"></span>' +
											'<p class="m-0 text-start '+(fromMe ? 'text-white' : '')+'" 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: 21vw; pointer-events: auto;">' +
											'<a id="playAudio_'+ m.idMensagens +'" data-msg_id="'+ m.idMensagens +'" href="javascript:void(0)" class="playAudio" style="width: 3vw;"><i class="fa fa-play '+(fromMe ? 'text-white' : '')+'"></i></a>' +
											'<div class="p-1" id="audio_'+ m.idMensagens +'" style="margin-left: 0px; max-width: 21vw; width: 15vw;"></div>' +
											'<a id="speedAudio_'+ m.idMensagens +'" data-msg_id="'+ m.idMensagens +'" href="javascript:void(0)" class="speedAudio badge badge-secondary badge-sm badge-pill mx-2 p-1" style="width: 3vw;"><b>'+ playbackRate.toFixed(1) +'x</b></a>' +
										'</div>';
						}
						break;
					case 'document':
						if(m.fileUrl == null || m.fileExists == false){
							msgContent = '<div class="chat-text-left ps-1 m-auto text-center mb-2" style="width: 15vw; pointer-events: auto;">' +
											'<a href="javascript:void(0)" data-type="document" data-fromme="'+(fromMe ? "true" : "false")+'" data-msg_id="'+m.idMensagens +'" class="m-auto '+(fromMe ? "text-white text-center " : " ") + (typeof m.fileUrl == 'undefined' ? '' : 'downloadFile') +'" href="javascript:void(0)">' +
											'<span class="fas fa-download position-absolute '+(fromMe ? 'text-white' : '')+'" style="font-size: 30px; left: 5px"></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; word-break:break-word; pointer-events: auto;">'+ message +'</p>' +
										'</div>' ;
						}else{
							msgContent = '<div class="chat-text-left ps-1 m-auto '+(fromMe ? "text-center " : " ")+'" style="width: 15vw; pointer-events: auto;">' +
											'<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 '+(fromMe ? 'text-white' : '')+'" 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; word-break:break-word; pointer-events: auto;">'+ 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; pointer-events: auto;">' +
											'<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="fas fa-download  d-flex position-absolute '+(fromMe ? 'text-white' : '')+'" style="font-size: 30px;"></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; word-break:break-word; pointer-events: auto;">'+ message +'</p>' +
										'</div>' ;
						}else{
							msgContent = '<div class="chat-text-left ps-1 m-auto '+(fromMe ? "text-center " : " ")+'" style="width: 15vw; pointer-events: auto;">' +
											'<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; word-break:break-word; pointer-events: auto;">'+ message +'</p>' +
										'</div>' ;
						}
						break;
					case 'order':
						msgContent = '<div class="chat-text-left ps-1 text-start">' +
										//'<p class="m-0 text-start" style="font-size: 15px;white-space: pre-wrap;">' +
											'<h6 class="py-1 b-0 bb-2 b-dashed">Pedido feito via catálogo</h6>' +
											'<a href="javascript:void(0)" class="verPedido" style="pointer-events: auto; font-weight: 600;" >' +
												'<i class="fa fa-cart-shopping"></i> Ver pedido' +
											'</a>' +
										//'</p>' +
									'</div>';
						break;
					case 'list_response':
						msgContent = '<div class="chat-text-left ps-1 ">' +
										'<p class="m-0 text-start" style="font-size: 15px;white-space: pre-wrap;">'+ m.body +'</p>' +
									'</div>';
						break;
					case 'list':
						var listMessage = JSON.parse(m.body);
						var listOpcoes = '';
						if(listMessage.sections){
							
							$(listMessage.sections).each(function(index, section){
								$(section.rows).each(function(index, row){
									listOpcoes = listOpcoes + (index+1) + ' - ' + row.title + '<br>';
								})
							})
						}
						
						msgContent = '<div class="chat-text-left ps-1 text-start">' +
										'<p class="m-0 text-start" style="font-size: 15px;white-space: pre-wrap;">'+ listMessage.description +'</p>' +
										'<p class="m-0 text-start" style="font-size: 15px;white-space: pre-wrap;">'+ listOpcoes +'</p>' +
									'</div>';
						break;
					case 'vcard':
						try {
							var JSvCard = vCardParser.parse(m.body.replace(/[\n\r] /g, "\r\n"));

							var vCardName = JSvCard[0].name;
							var vCardTelephone = JSvCard[0].telephone;
							var vCardNome = vCardName.name + ' ' + vCardName.surname;
							
							var vCardNumeros = '';
							var vCardWaId = [];
									
							if(vCardTelephone){
								$(vCardTelephone).each(function(index, t){
									if(t.valueInfo){
										vCardWaId.push(t.valueInfo.waid);
										var countryNumber = t.value.split(' ')[0].toString();
										var waid = t.value.toString().replace(countryNumber, '').replaceAll('-', '').replaceAll(' ', '');
										vCardNumeros = vCardNumeros + (t.value ? t.value : 'Número não informado') +'<a href="javascript:void(0)" class="'+ (fromMe ? "text-white" : "") +'" style="pointer-events: auto;" onclick="copyToClipboard(\''+ waid +'\')"> <i class="fa fa-copy"></i></a><br>';
									}
									if(t.value){
										var waid = t.value.toString().replaceAll('-', '').replaceAll(' ', '');
										vCardNumeros = vCardNumeros + (t.value ? t.value : 'Número não informado') +'<a href="javascript:void(0)" class="'+ (fromMe ? "text-white" : "") +'" style="pointer-events: auto;" onclick="copyToClipboard(\''+ t.value +'\')"> <i class="fa fa-copy"></i></a><br>';
									}
								})
								
								if(vCardTelephone.length == 1){
									vCardNumeros = '<div class="mb-1 "><b>Número: </b>'+ vCardNumeros + '</div><br>';
								}else{
									vCardNumeros = '<div class="mb-1 "><b>Números:</b><br>'+ vCardNumeros + '</div><br>';
								}
							}
							
							msgContent = '<div class="vCardInfo" data-id="'+ vCardWaId +'" style="">' +
									'<div class="box bg-transparent text-start p-2 mb-1">'+
										'<div class="mb-1 "><b>Nome: </b>'+ vCardNome +'</div>' +
										vCardNumeros +
										(JSvCard[0]['wa-biz-description'] ? '<div class="mt-1 " style="font-size: 12px;"><b>Descrição: </b>'+ JSvCard[0]['wa-biz-description'] +'</div>' : '') +
										'<span class="float-end p-0 text-end" style="line-height: 12px;">' +
											'<text id="msgTime_'+ m.idMensagens +'" class="text-lightest" style="font-size: 11px;">'+ msgTime +'</text>' +
										'</span>' +
									'</div>'+
								'</div>';
							
						} catch(err) {
						  vCardNumeros = '<div class="mb-1 ">vCard inválido</div><br>';
						  msgContent = '<div class="vCardInfo" data-id="" style="">' +
										'<div class="box bg-transparent text-start p-2 mb-1">'+
											'<div class="mb-1 "><b>Nome: </b>'+ vCardNome +'</div>' +
											vCardNumeros +
											'<span class="float-end p-0 text-end" style="line-height: 12px;">' +
												'<text id="msgTime_'+ m.idMensagens +'" class="text-lightest" style="font-size: 11px;">'+ msgTime +'</text>' +
											'</span>' +
										'</div>'+
									'</div>';
						}
						break;
					case 'template':
						var selectedTemplate = JSON.parse(m.body).template;
						var payload = JSON.parse(m.body).payload;
						var payloadComponents = payload.template.components;
						var components = JSON.parse(selectedTemplate.components);
						var header = components.filter(x => x.type === 'HEADER')[0];
						var body = components.filter(x => x.type === 'BODY')[0];
						var footer = components.filter(x => x.type === 'FOOTER')[0];
						var buttons = components.filter(x => x.type === 'BUTTONS')[0];
						
						/*HEADER*/
						var headerHtml = '';
						if(header){
							switch(header.format){
								case 'TEXT':
									var headerParameters = header.text.match(/{{ '{{' }}(.*?){{ '}}' }}/g);
									
									if(headerParameters){
										if(headerParameters.length > 0){
										}
									}else{
										headerHtml = '<div class="mb-1 rounded10" style="font-weight: 600">'+ header.text +'</div>';
									}
									
									
									break;
								case 'IMAGE':
									headerHtml = '<div class="mb-1 rounded10" style="font-weight: 600">' +
													'<i class="fa fa-image py-4 bg-success-light b-1 rounded10 d-flex justify-content-center" style="font-size: 48px"></i>' +
												'</div>';
									
									break;
								case 'VIDEO':
									headerHtml = '<div class="mb-1 rounded10" style="font-weight: 600">' +
													'<i class="fa fa-film py-4 bg-success-light b-1 rounded10 d-flex justify-content-center" style="font-size: 48px"></i>' +
												'</div>';
									break;
								case 'DOCUMENT':
									headerHtml = '<div class="mb-1 rounded10" style="font-weight: 600">' +
													'<i class="fa fa-file-arrow-down py-4 bg-success-light b-1 rounded10 d-flex justify-content-center" style="font-size: 48px"></i>' +
												'</div>';
									break;
							}
						}else{
							//MENSAGEM SEM HEADER
						}
						/*HEADER*/
						
						
						/*BODY*/
						var bodyHtml = '';
						var bodyParameters = body.text.match(/{{ '{{' }}(.*?){{ '}}' }}/g);
						if(bodyParameters){
							if(bodyParameters.length > 0){
								$(bodyParameters).each(function(index, param){
									arrParam = payloadComponents.filter(x => x.type === 'body')[index].parameters;
									bodyHtml = body.text.replace(param, arrParam[0].text);
								})
							}else{
								//BODY SEM PARAMETROS
							}
						}else{
							//BODY SEM PARAMETROS
						}
						/*BODY*/
					
						/*FOOTER*/
						var htmlFooter = (footer ? footer.text : '');
						/*FOOTER*/
						
						/*BUTTONS*/
						var htmlButtons = '';
						if(buttons){
							if(buttons.buttons){
								var btnCount = buttons.buttons.length;
								$(buttons.buttons).each(function(index, btn){
									switch(btnCount){
										case 1:
											var col = 'col-12';
											break;
										case 2:
											var col = 'col-6';
											break;
										case 3:
											if(btnCount == (index+1)){
												var col = 'col-12';
											}else{
												var col = 'col-6';
											}
											break;
									}
									
									if(btn.type == 'QUICK_REPLY'){
										htmlButtons = htmlButtons + 
														'<span class="'+col+' d-flex" data-index="'+ index +'">' +
															'<a class="btn btn-sm bg-white b-1 text-primary rounded10 w-p100 d-flex align-items-center justify-content-center">'+ btn.text +'</a>' +
														'</span>';
									}
									
									if(btn.type == 'URL'){
										htmlButtons = htmlButtons + '<span class="col-12 align-items-center" data-index="'+ index +'"><a class="btn btn-sm bg-white b-1 text-primary rounded10 w-p100">'+ btn.text +'</a></span>'
									}
								})
							}
						}else{
							//MENSAGEM SEM BOTÕES
						}
						/*BUTTONS*/
					
					
						msgContent = '<div class="">' +
										'<div class="box bg-success text-start p-2 mb-1">'+
											headerHtml +
											'<div class="mb-1 ">'+ bodyHtml +'</div>' +
											'<div class="mt-1 " style="font-size: 12px;">' + htmlFooter + '</div>' +
											'<span class="float-end p-0 text-end" style="line-height: 12px;">' +
												'<text id="msgTime_'+ m.idMensagens +'" class="text-lightest" style="font-size: 11px;">'+ msgTime +'</text>' +
											'</span>' +
										'</div>'+
										'<div class="row g-1">'+ htmlButtons +'</div>' +
									'</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>';
				}
				
				m.msgId = m.msgId.toString().replaceAll('true_','').replaceAll('false_','').replaceAll(m.msgFrom, '').replaceAll(m.msgTo, '').replaceAll('_', '').replaceAll('=', '').replaceAll('wamid.', '');
				
				var quotedMsg = '';
				if(m.type == 'reply'){
					var replyMsg = mensagens.filter(x =>  x.msgId.includes(m.quotedStanzaId))[0];
					var replyMsgMedia = '';
					if(typeof replyMsg != 'undefined'){
						if(replyMsg['fileExists']){
							switch(replyMsg['type']){
								case 'image':
									replyMsgMedia = '<div><img class="img-responsive rounded5 p-1" src="' + '{{host}}' + replyMsg['fileUrl'] +'" alt="" style="max-height: 80px;"></div>';
									break;
								case 'document':
									replyMsgMedia = '<div><i class="fa fa-file p-1" style="font-size: 22px;"></i></div>';
									break;
								case 'ptt':
								case 'audio':
									replyMsgMedia = '<div><i class="fa fa-play p-1" style="font-size: 22px;"></i></div>';
									break;
								case 'video':
									replyMsgMedia = '<div><i class="fa fa-video p-1" style="font-size: 22px;"></i></div>';
									break;
							}
						}else{
							switch(replyMsg['type']){
								case 'image':
									replyMsgMedia = '<div><i class="fa fa-image p-1" style="font-size: 22px;"></i></div>';
									break;
								case 'document':
									replyMsgMedia = '<div><i class="fa fa-file p-1" style="font-size: 22px;"></i></div>';
									break;
								case 'ptt':
								case 'audio':
									replyMsgMedia = '<div><i class="fa fa-play p-1" style="font-size: 22px;"></i></div>';
									break;
								case 'video':
									replyMsgMedia = '<div><i class="fa fa-video p-1" style="font-size: 22px;"></i></div>';
									break;
							}
						}
						
						
						if($('#' + m.quotedStanzaId).length > 0){
							replyMsgBody = (replyMsg['body'] != null ? replyMsg['body'].replace(/\n/g, '<br/>') : '');
							switch(replyMsg['type']){
								case 'image':
									replyMsgMedia = '<div><i class="fa fa-image p-1" style="font-size: 22px;"></i></div>';
									if(replyMsgBody == '0'){replyMsgBody = 'Imagem respondida';}
									break;
								case 'document':
									replyMsgMedia = '<div><i class="fa fa-file p-1" style="font-size: 22px;"></i></div>';
									if(replyMsgBody == '0'){replyMsgBody = 'Arquivo respondido';}
									break;
								case 'ptt':
								case 'audio':
									replyMsgMedia = '<div><i class="fa fa-play p-1" style="font-size: 22px;"></i></div>';
									if(replyMsgBody == '0'){replyMsgBody = 'Áudio respondido';}
									break;
								case 'video':
									replyMsgMedia = '<div><i class="fa fa-video p-1" style="font-size: 22px;"></i></div>';
									if(replyMsgBody == '0'){replyMsgBody = 'Vídeo respondido';}
									break;
							}
							
							
							if(replyMsg['type'] == 'list'){
								var listMessage = JSON.parse(replyMsg['body']);
								var listOpcoes = '';
								if(listMessage.sections){
									
									$(listMessage.sections).each(function(index, section){
										$(section.rows).each(function(index, row){
											listOpcoes = listOpcoes + (index+1) + ' - ' + row.title + '<br>';
										})
									})
								}
								
								replyMsgBody = '<div class="chat-text-left ps-1 text-start">' +
													'<p class="m-0 text-start" style="font-size: 15px;white-space: pre-wrap;">'+ listMessage.description +'</p>' +
													'<p class="m-0 text-start" style="font-size: 15px;white-space: pre-wrap;">'+ listOpcoes +'</p>' +
												'</div>';
							}
							quotedMsg =
										'<div class="bs-3 border-primary m-1 bg-lighter text-dark quotedMsg text-start px-2 p-1 rounded" data-msgid="'+ m.quotedStanzaId +'" style="max-height: 150px; cursor: pointer; pointer-events: all; overflow: hidden">' +
											replyMsgMedia +
											'<span>' + (replyMsgBody == '' ? '<i>Mensagem respondida</i>' : '<i>' + replyMsgBody + '</i>') + '</span>'+
											//($('#' + m.quotedStanzaId).length > 0 ? $('#' + m.quotedStanzaId).html().replace(m.quotedStanzaId,'') : '')+
										'</div>';
						}
					}
				}
				
				switch(m.type){
					case 'historico':
						var appendMsg = '<span class="mensagem"><div id="'+m.msgId+'" class="box shadow d-inline-block ms-3 me-15 my-1 min-w-lg-p40 min-w-md-p50 min-w-p30 max-w-lg-p20 max-w-p70 float-center p-1 ps-3 pe-3 b-dashed b-2 text-dark border-primary bg-primary-light" style="margin-bottom: 5px !important; border-radius: 7px;" data-idmensagens="'+m.idMensagens+'">' +
										'<div class="d-flex align-items-center justify-content-center">' +
											'<span class="text-muted" style="font-size: 12px;"><i class="far fa-clock"></i> '+ msgTime + ' - ' + msgContent +'</span>' + 
										'</div>' +
									'</div>' +
									'<div class="clearfix"></div></span>';
						break;
					case 'template':
					case 'vcard':
						//var msgAlign = 'float-end ' + (m.msgExcluida || m.msgNaoEnviada ? 'bg-danger' : (fromMe ? 'bg-transparent' : ''));
						var msgAlign = 'faster ' + (fromMe ? "float-end" : "float-start bg-lighter") + ' ' + (m.msgExcluida || m.msgNaoEnviada ? 'bg-danger' : (fromMe ? 'bg-success' : ''));
						var appendMsg = '<span class="mensagem"><div id="'+m.msgId+'" class="box d-inline-block ms-3 me-15 my-1 max-w-p40 max-w-lg-p30 min-w-lg-p20 min-w-md-p30 min-w-p30 '+ msgAlign +'" style="margin-bottom: 5px !important; pointer-events: none;" data-idmensagens="'+m.idMensagens+'">' +
											msgContent +
										'</div>' +
										'<div class="clearfix"></div></span>';
						break;
					default:
						var msgAlign = 'faster ' + (fromMe ? "float-end" : "float-start bg-lighter") + ' ' + (m.msgExcluida || m.msgNaoEnviada ? 'bg-danger' : (fromMe ? 'bg-success' : ''));
						var appendMsg = '<span class="mensagem"><div id="'+m.msgId+'" class="box shadow d-inline-block ms-3 me-15 my-1  '+ msgAlign +'" style="margin-bottom: 5px !important; pointer-events: none; ' + (isMobile ? 'max-width: 80%; min-width: 50%;' : 'max-width: 40%; min-width: 25%;') + 'width: auto;" data-idmensagens="'+m.idMensagens+'">' +
											//(fromMe && !m.msgExcluida && !(m.t==null) && !m.msgNaoEnviada ? deleteMensagem : '')+
											//(!m.msgExcluida && !(m.t==null) && (arrConversas[idConversa]['sender'] == 'venom' || arrConversas[idConversa]['sender'] == 'whatsapp')? respondeMensagem : '')+
											quotedMsg +
											'<div class="pt-1 ps-1 pb-0 pe-1 ">' +
												msgContent +
											'</div>' +
											'<span class="float-end pe-1 py-1 text-end mt-2" style="line-height: 12px;">' +
												'<text id="msgTime_'+ m.idMensagens +'" class="text-lightest" style="font-size: 11px;">'+ msgTime +'</text>' +
											'</span>' +
										'</div>' +
										'<div class="clearfix"></div></span>';
				}
						

				
				$('#modalListaMensagens').append(appendMsg);
				
				
				if(m.type == 'ptt' || m.type == 'audio'){
					if(!(m.fileUrl == null || m.fileExists == false)){
						initAudio(m.idMensagens, m.fileUrl, fromMe, conversa);
					}
				}
				
				if(m.type == 'image' && m.subtype == 'sticker'){
					if(!m.fileUrl.includes('previewImage')){
						loadSticker('#image_'+ m.idMensagens);
					}
				}
			})

			$('#modalMensagens').modal('toggle');
			Swal.close();
			
		}else{
			Swal.fire({
				title: res.Erro,
				scrollbarPadding: false,
				icon: 'error',
				confirmButtonColor: 'var(--bs-info)',
				scrollbarPadding: false
			}).then(() =>{
				//location.reload();
			})
		}
	})
})

function loadSticker(id){
	var sticker = new Freezeframe(id, {
	  trigger: false
	});
	
	$('#mensagens').find(id).on('mouseenter', function(){
		sticker.start();
	})
	
	$('#mensagens').find(id).on('mouseleave', function(){
		sticker.stop();
	})
	
}

$('#tabelaConversas > tbody').on('click', '.exportarConversa', function(){
	let id = $(this).data('id');

	Swal.fire({title : 'Exportando mensagens...', allowOutsideClick: false, scrollbarPadding: false});
	Swal.showLoading();
	
	fetch('buscarMensagens', {
		method: 'POST',
		headers: {'Content-Type': 'application/x-www-form-urlencoded'},
		body: 'id_conversa=' + id 
	})
	.then(function(res){ return res.json(); })
	.then(function(res){
		if(res.Success){
			let conversa = res.conversa;
			let mensagens = res.mensagens;
			$('#modalMensagensTitle').text(conversa.idContato.nome + ' - ' + conversa.status + ' - ' + moment(conversa.data.date).format("DD/MM/YYYY HH:mm"));
			$('#modalListaMensagens').empty();
			
			window.jsPDF = window.jspdf.jsPDF;
			window.html2canvas = html2canvas;
			var doc = new jsPDF('p','mm','a4'); // create jsPDF object
			doc.setFontSize(8);
			var lastTextHeight = 10;
			
			
			var line = 10 // Line height to start text at
			var lineHeight = 4
			var leftMargin = 10
			var wrapWidth = 190

			$(mensagens).each(function(index, m) {
				var fromMe = false;
				if(typeof m.fromMe == 'undefined' || m.fromMe == null){
					var from = m.msgFrom.toString().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);
				}
				

				var msgTime = moment.unix(m.t).format("DD/MM/YYYY HH:mm");
				
				let type = (m.type == 'reply' ? m.subtype : m.type);
				switch(type){
					case 'historico':
					case 'chat':
					case 'sendText':
						var text = m.body;
						break;
					case 'image':
						var text = 'Imagem';
						break;
					case 'ptt':
					case 'audio':
						var text = 'Audio';
						break;
					case 'document':
						var text = 'Arquivo';
						break;
					case 'video':
						var text = 'Vídeo';
						break;
					
				}

				line = line + 2;
				if(fromMe){
					text = '['+ msgTime + ' - ' + conversa.idClientes.nome + ']: ' + text;
				}else{
					text = '['+ msgTime + ' - ' + conversa.idContato.nome + ']: ' + text;
				}
				
				var splitText = doc.splitTextToSize(text, wrapWidth)
				for (var i = 0, length = splitText.length; i < length; i++) {
					//if(fromMe){
					//	doc.text(splitText[i], 105, line, {maxWidth: 95});
					//}else{
						doc.text(splitText[i], leftMargin, line, {maxWidth: wrapWidth});
					//}
					line = lineHeight + line
					if(line >= 287){
						line = 10;
						doc.addPage('a4', 'p');
					}
				}
				
			})
			
			doc.save('Chamado_' + conversa.idConversas + '_' + moment(conversa.data.date).format("DD_MM_YYYY"));
			Swal.close();
		}
	})
})




$('#modalMensagens').on('hidden.bs.modal', function () {
  arrAudios = {};
})

let arrAudios = {};
function initAudio(m, fileUrl, fromMe, conversa){
	arrAudios['#audio_' + m] = WaveSurfer.create({
		container: '#modalListaMensagens #audio_' + m,
		height: 45,
		barWidth: 2,
		barHeight: 1,
		barMinHeight: 0.1,
		barRadius: 1,
		cursorColor: 'var(--bs-light)',
		hideScrollbar: true,
		barGap: null,
		backend: 'MediaElement',
		progressColor: (fromMe ? '#ffffff' : '#686868'),
		waveColor: (fromMe ? '#00ffffff' : '#00686868'),
		plugins: [
			Hover.create({
			  lineColor: (fromMe ? 'var(--bs-white)' : 'var(--bs-primary)'),
			  lineWidth: 2,
			  labelBackground: '#686868aa',
			  labelColor: '#fff',
			  labelSize: '11px',
			}),
			/*WaveSurfer.cursor.create({
				showTime: true,
				opacity: 0.7,
				customShowTimeStyle: {
					'background-color': '',
					'color': '#000',
					'margin': '',
					'font-size': '10px',
					'display':'flex',
					'padding':'2px',
					'padding-left':'4px',
				}
			})*/
		]
	});
	

	switch(conversa.idContato.sender){
		case 'whatsapp':
		case 'facebook':
		case 'instagram':
		case 'venom':
		case null:
		case 'ATENDENTE':
			if(fileUrl.startsWith('http')){
				fetch('chatGetAudio', {
					method: 'POST',
					headers: {'Content-Type': 'application/x-www-form-urlencoded'},
					body:  'msgId=' + m + '&sender=' + arrConversas[currentIdConversa]['sender']
				})
				.then(function(res){ return res.blob(); })
				.then(function(res){
					const blob = new Blob([res], { type: "audio/wav" });
					arrAudios['#audio_' + m].load(URL.createObjectURL(blob));
				})
			}else{
				arrAudios['#audio_' + m].load(fileUrl);
			}
			break;
		case 'chatGetAudio':
			fetch('saveFile', {
				method: 'POST',
				headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				body:  'msgId=' + m + '&sender=' + arrConversas[currentIdConversa]['sender']
			})
			.then(function(res){ return res.json(); })
			.then(function(res){
				arrAudios['#audio_' + m].load(res.url);
			})
			
			break;
	}
	
	arrAudios['#audio_' + m].on('ready', function () {
		
		//$('#audio_' + m + ' wave').css('z-index', '999');
		$('#audio_' + m + ' wave').css('display', 'block');
		$('#audio_' + m + ' wave').css('width', '100%');
	});
	
	arrAudios['#audio_' + m].on('play', function () {
		$('#playAudio_' + m + ' i').removeClass('fa-play');
		$('#playAudio_' + m + ' i').addClass('fa-pause');
	})
	
	arrAudios['#audio_' + m].on('pause', function () {
		$('#playAudio_' + m + ' i').addClass('fa-play');
		$('#playAudio_' + m + ' i').removeClass('fa-pause');
	})
}

$('#modalListaMensagens').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].setPlaybackRate(playbackRate);
	arrAudios['#audio_' + msgId].playPause();
})

var playbackRate = 1.0;
$('#modalListaMensagens').on('click', '.speedAudio', function(){
	let msgId = $(this).data('msg_id');

	switch(playbackRate){
		case 1.0:
			playbackRate = 1.5;
			break;
		case 1.5:
			playbackRate = 2.0;
			break;
		case 2.0:
			playbackRate = 1.0;
			break;
	}
	arrAudios['#audio_' + msgId].setPlaybackRate(playbackRate);
	$('#modalListaMensagens .speedAudio').text(playbackRate.toFixed(1) + 'x')
})


$('#modalListaMensagens').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('.fas').removeClass('fa-download');
	$(elem).find('.fas').addClass('fa-circle-notch');
	$(elem).find('.fas').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('chatGetFile', {
		method: 'POST',
		headers: {'Content-Type': 'application/x-www-form-urlencoded'},
		body:  'msgId=' + msgId + '&sender=' + modalConversa.idContato.sender
	})
	.then(function(res){ return res.json(); })
	.then(function(res){
		if(res.Success){
			$('#image_' + msgId).attr('src', res.url);
			$('#image_' + msgId).addClass('');
			
			$(elem).find('.fas').addClass('d-none');
			
			switch(type){
				case 'image':
					$(elem).attr('data-effect', 'mfp-zoom-in');
					$(elem).attr('href', res.url);
					$(elem).addClass('showImg');
					
					if(res.url.includes('.webp')){
						loadSticker('#image_' + msgId);
					}
					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="fa fa-play"></i></a>' +
										'<div class="p-1" id="audio_'+ msgId +'" style="margin-left: 0px; max-width: 21vw; width: 15vw;"></div>' +
										'<a id="speedAudio_'+ msgId +'" data-msg_id="'+ msgId +'" href="javascript:void(0)" class="speedAudio badge badge-secondary badge-sm badge-pill mx-2 p-1" style="width: 3vw;">'+ playbackRate.toFixed(1) +'x</a>'
									);
					initAudio(msgId, res.url);
					
					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('.fas').removeClass('d-none');
			Swal.fire({
				title: res.Erro,
				scrollbarPadding: false,
				icon: 'error',
				confirmButtonColor: 'var(--bs-info)',
				scrollbarPadding: false
			}).then(() =>{
				//location.reload();
			})
			$(elem).find('.fas').removeClass('fa-circle-notch');
			//$(elem).find('.fas').addClass('fa-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('.fas').removeClass('rotate');
	})
})

$('#modalListaMensagens').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');
		   $('#modalMensagens').addClass('d-none');
		},
		 beforeClose: function() {
			$('#modalMensagens').removeClass('d-none');
		},
	  },
	  closeOnContentClick: true,
	  midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});


$('#tabelaConversas > tbody').on('click', '.iniciarAtendimento', function(){
	let id = $(this).data('id');
	let sourceNumber = $(this).data('sourcenumber');
	let nome = $(this).data('nome');
	let numero = $(this).data('numero');
	
	Swal.fire({
	  title: 'Iniciar Atendimento ?',
	   html: 
			'<h6 class="bg-danger-light rounded p-2"><i class="fas fa-triangle-exclamation"></i> Após iniciar o atendimento, o ChatBot não irá dar continuidade ao fluxo de mensagens.<h6>' +
			'<div class="form-group mt-3 text-start">' +
				'<label for="iniciarAtendimentoMsg" class="form-label">Mensagem:</label>' +
				'<textarea id="iniciarAtendimentoMsg" class="form-control " placeholder="Mensagem de início"></textarea>' +
			'</div>',
	  icon: 'question',
	  showCloseButton: true,
	  showCancelButton: true,
	  focusConfirm: false,
	  confirmButtonText: 'Sim',
	  cancelButtonText: 'Cancelar',
	  allowOutsideClick: false,
	  confirmButtonColor: 'var(--bs-success)',
	  scrollbarPadding: false,
	  didOpen: () => {
		$('.swal2-close').blur()
		
		var iniciarMsg = preferencias[sourceNumber].mensagemInicio;
		var msgIniciaObrigatoria = preferencias[sourceNumber].msgIniciaObrigatoria;
		iniciarMsg = verificaVariaveis(iniciarMsg, nome, numero);
		{%if userLogged.tipo == 'ATENDENTE'%}
			if(iniciarMsg != ''){
				$('#iniciarAtendimentoMsg').val(iniciarMsg);
			}else{
				$('#iniciarAtendimentoMsg').val('O atendente {{userLogged.nomeAtendente}} entrou na conversa');
			}
		{%else%}
			if(iniciarMsg != ''){
				$('#iniciarAtendimentoMsg').val(iniciarMsg);
			}else{
				if(msgIniciaObrigatoria == 1){
					$('#iniciarAtendimentoMsg').val('Atendimento iniciado');
				}
			}
		{%endif%}
	  },
	   preConfirm: (value) => {
		let iniciarAtendimentoMsg = $('#iniciarAtendimentoMsg').val().trim();
		var msgIniciaObrigatoria = preferencias[sourceNumber].msgIniciaObrigatoria;
		
		if(iniciarAtendimentoMsg == '' && msgIniciaObrigatoria == 1){
			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('chatReiniciaAtendimento', {
				method: 'POST',
				headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				body: 'idConversa=' + id +
						//'&sourceNumber=' + $('#meusNumeros').val() + 
						'&mensagem=' + iniciarAtendimentoMsg
			})
			.then(function(res){ return res.json(); })
			.then(function(res){
				if(res.Success){
					Swal.close();
					
					Swal.fire({
						title: 'Atendimento iniciado',
						scrollbarPadding: false,
						icon: 'success',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						getConversas();
					})
				}else{
					Swal.fire({
						title: res.Erro,
						scrollbarPadding: false,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						//location.reload();
					})
				}
			})
		}
	})
})
$('#tabelaConversas > tbody').on('click', '.reiniciarAtendimento', function(){
	let id = $(this).data('id');
	let sourceNumber = $(this).data('sourcenumber');
	let nome = $(this).data('nome');
	let numero = $(this).data('numero');
	Swal.fire({
	  title: 'Reiniciar Atendimento ?',
	   html: 'Deseja reiniciar o atendimento ?<br>' +
			'<div class="form-group mt-3 text-start">' +
				'<label for="reiniciarAtendimentoMsg" class="form-label">Mensagem:</label>' +
				'<textarea id="reiniciarAtendimentoMsg" 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()
		
		var iniciarMsg = preferencias[sourceNumber].mensagemInicio;
		var msgIniciaObrigatoria = preferencias[sourceNumber].msgIniciaObrigatoria;
		iniciarMsg = verificaVariaveis(iniciarMsg, nome, numero);
		{%if userLogged.tipo == 'ATENDENTE'%}
			if(iniciarMsg != ''){
				$('#reiniciarAtendimentoMsg').val(iniciarMsg);
			}else{
				$('#reiniciarAtendimentoMsg').val('O atendente {{userLogged.nomeAtendente}} entrou na conversa');
			}
		{%else%}
			if(iniciarMsg != ''){
				$('#reiniciarAtendimentoMsg').val(iniciarMsg);
			}else{
				if(msgIniciaObrigatoria == 1){
					$('#reiniciarAtendimentoMsg').val('Atendimento iniciado');
				}
			}
		{%endif%}
	  },
	   preConfirm: (value) => {
		let reiniciarAtendimentoMsg = $('#reiniciarAtendimentoMsg').val().trim();
		var msgIniciaObrigatoria = preferencias[sourceNumber].msgIniciaObrigatoria;
		if(reiniciarAtendimentoMsg == '' && msgIniciaObrigatoria == 1){
			Swal.showValidationMessage('Digite uma mensagem');
		}
	  }
	}).then((result) => {
		if(result.isConfirmed){
			let reiniciarAtendimentoMsg = $('#reiniciarAtendimentoMsg').val();
			
			Swal.fire({title : 'Iniciando Atendimento', allowOutsideClick: false, scrollbarPadding: false});
			Swal.showLoading();
			
			fetch('chatReiniciaAtendimento', {
				method: 'POST',
				headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				body: 'idConversa=' + id +
						//'&sourceNumber=' + $('#meusNumeros').val() + 
						'&mensagem=' + reiniciarAtendimentoMsg
			})
			.then(function(res){ return res.json(); })
			.then(function(res){
				if(res.Success){
					Swal.close();
					
					Swal.fire({
						title: 'Atendimento reiniciado',
						scrollbarPadding: false,
						icon: 'success',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						getConversas();
					})
				}else{
					Swal.fire({
						title: res.Erro,
						scrollbarPadding: false,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						//location.reload();
					})
				}
			})
		}
	})
})



$('#tabelaConversas > tbody').on('click', '.encerrarAtendimento', function(){
	var id = $(this).data('id');
	var sourceNumber = $(this).data('sourcenumber');
	var nome = $(this).data('nome');
	var numero = $(this).data('numero');
	var tipoEnvioAvaliacao = preferencias[sourceNumber].tipoEnvioAvaliacao ;
	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>' +
			'<div class="col-12 form-group mt-30 '+ (tipoEnvioAvaliacao == "ATENDENTE" ? "" : "d-none") +'">' +
				'<input type="checkbox" id="enviarAvaliacao" class="filled-in chk-col-primary">' +
				'<label for="enviarAvaliacao">Enviar mensagem de avaliação</label>' +
			'</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()
		
		var encerrarMsg = preferencias[sourceNumber].mensagemEncerrar;
		var msgEncerraObrigatoria = preferencias[sourceNumber].msgEncerraObrigatoria;
		encerrarMsg = verificaVariaveis(encerrarMsg, nome, numero);
		{%if userLogged.tipo == 'ATENDENTE'%}
			if(encerrarMsg != ''){
				$('#encerrarAtendimentoMsg').val(encerrarMsg);
			}else{
				$('#encerrarAtendimentoMsg').val('O atendente {{userLogged.nomeAtendente}} encerrou a conversa');
			}
		{%else%}
			if(encerrarMsg != ''){
				$('#encerrarAtendimentoMsg').val(encerrarMsg);
			}else{
				if(msgEncerraObrigatoria == 1){
					$('#encerrarAtendimentoMsg').val('Atendimento encerrado');
				}
			}
		{%endif%}
		
	  },
	  preConfirm: (value) => {
		let encerrarAtendimentoMsg = $('#encerrarAtendimentoMsg').val().trim();
		var msgEncerraObrigatoria = preferencias[sourceNumber].msgEncerraObrigatoria;
		if(encerrarAtendimentoMsg == '' && msgEncerraObrigatoria == 1){
			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: 'id_conversa=' + id + 
						//'&sourceNumber=' + $('#meusNumeros').val() + 
						'&mensagem=' + encerrarAtendimentoMsg
			})
			.then(function(res){ return res.json(); })
			.then(function(res){
				if(res.Success){
					Swal.close();
					
					Swal.fire({
						title: 'Atendimento encerrado',
						scrollbarPadding: false,
						icon: 'success',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						getConversas();
					})
				}else{
					Swal.fire({
						title: res.Erro,
						scrollbarPadding: false,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						//location.reload();
					})
				}
			})
		}
	})
})

$('#tabelaConversas > tbody').on('click', '.tagConversa', function(){
	let id = $(this).data('id');
	let selectedTags = $(this).data('tags');
	
	if(Object.keys(tags).length  == 0){
		Swal.fire({
			title: 'Nenhuma Tag Cadastrada',
			text: 'Você não possui nenhuma tag cadastrada, para realizar o cadastro acesse no menu em Conversas -> Tags.',
			scrollbarPadding: false,
			icon: 'warning',
			confirmButtonColor: 'var(--bs-info)',
			scrollbarPadding: false
		})
		return;
	}
	
	Swal.fire({
	  title: 'Selecionar Tags',
	  html: 'Marque a conversa com uma ou mais tags<br>' +
			'<div class="m-2">' +
				'<div id="selectedTags" class="m-4">Nenhuma tag selecionada</div>' +
				'<div class="col-12 text-left mt-3">' +
					'<select id="selectTagsConversa" class="selectpicker col-12" title="Selecione uma tag" data-live-search="true" data-selected-text-format="count > 2" data-count-selected-text= "{0} tags selecionadas" multiple>' +
						{% for t in tags %}
						'<option value="{{t.getIdTags}}" class="" style="letter-spacing: 1px !important;" data-content=\'<i class="fa fa-bookmark" style="color: {{t.getCor}}"></i> {{t.getNome}}\'>{{t.getNome}}</option>' +
						{% endfor %}
					'</select>' +
				'</div>'+
			'</div>',
	  showCloseButton: true,
	  showCancelButton: true,
	  focusConfirm: false,
	  confirmButtonText: 'Salvar',
	  cancelButtonText: 'Cancelar',
	  scrollbarPadding: false,
	  allowOutsideClick: false,
	  confirmButtonColor: 'var(--bs-primary)',
	  scrollbarPadding: false,
	  didOpen: () => {
		$('.swal2-close').blur()
		$('#selectTagsConversa').val(selectedTags);
		$('#selectTagsConversa').selectpicker({actionsBox:true, deselectAllText: 'Desmarcar todos'});
		$('#selectedTags').empty();
		$($('#selectTagsConversa').val()).each(function(index,t){
			$('#selectedTags').append((index > 0 ? ', ' : '') + '<i class="fa fa-bookmark" style="color: '+ tags[t].cor +'"></i> ' + tags[t].nome);
		})
		
		$('#selectTagsConversa').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');
		});
		$('#selectTagsConversa').on('hidden.bs.select', function () {
			$('.swal2-actions').css('z-index', '');
		});
		$('#selectTagsConversa').on('change', function(){
			$('#selectedTags').empty();
			$($('#selectTagsConversa').val()).each(function(index,t){
				$('#selectedTags').append((index > 0 ? ', ' : '') + '<i class="fa fa-bookmark" style="color: '+ tags[t].cor +'"></i> ' + tags[t].nome);
			})
		})
	  },
	  preConfirm: (value) => {
		
	  }
	}).then((result) => {
		if(result.isConfirmed){
			let selectedTags = $('#selectTagsConversa').val();
			
			Swal.fire({title : 'Alterando Tags', allowOutsideClick: false, scrollbarPadding: false});
			Swal.showLoading();
			
			fetch('selecionarTagsConversa', {
				method: 'POST',
				headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				body: 'idConversa=' + id + '&tags=' + JSON.stringify(selectedTags)
			})
			.then(function(res){ return res.json(); })
			.then(function(res){
				if(res.Success){
					Swal.close();
					
					getConversas();
				}else{
					Swal.fire({
						title: res.Erro,
						scrollbarPadding: false,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						//location.reload();
					})
				}
			})
		}
	})
})

function verificaVariaveis(txt, nome, numero){
	var matches = txt.match(/{{'{{'}}(.*?){{'}}'}}/g);
	$(matches).each(function(index, match) {
		switch(true){
			case match.includes('chatmanager.contato.nome'):
				txt = txt.replace(match, nome);
				break;
			case match.includes('chatmanager.contato.numero'):
				txt = txt.replace(match, numero);
				break;
		}
	})
	
	return txt;
}



/*************************************** FN *****************************************/
function formataTexto(message){
	var regex = /(?:(?:https?|ftp|file):\/\/|www\.|ftp\.)(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[-A-Z0-9+&@#\/%=~_|$?!:,.])*(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[A-Z0-9+&@#\/%=~_|$])/igm;
	var str = message;
	var matches = str.match(regex);
	$(matches).each(function(index, m) {
		message = message.replace(m, '##URL'+ index +'##');
	})
	
	message = message.replaceAll(/(?:\*)([^*]*)(?:\*)/g, '<strong>$1</strong>')
	message = message.replaceAll(/(?:_)([^_]*)(?:_)/g, '<i>$1</i>')
	message = message.replaceAll(/(?:~)([^~]*)(?:~)/g, '<strike>$1</strike>')
	
	$(matches).each(function(index, m) {
		message = message.replace('##URL'+ index +'##', '<a href="'+ m +'" target="_blank" class="text-dark">' + m + '</a>');
	})
	
	return message;
}
/*************************************** FN *****************************************/
</script>
{% endblock %}