{% 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); }
}

.box-header {
    border: none;
}

.box-header.with-border {
    border: none;
}

.input-group-addon {
		border: none !important;
	}

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

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

.mensagemInput{
	border-radius: 0!important;
	border-bottom: 2px solid #5255CC!important;
	margin-bottom: 10px!important;
}

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

.fixed .content-wrapper {
    margin-top: 0px;
}
</style>

<div class="content-wrapper bg-light text-start">
	<div class="container-full ">
		
		<!-- Content Header (Page header) -->
		<div class="content-header">
			<div class="">
				<h4 class="page-title d-flex align-items-center pe-0">
					<div class="col fw-bold text-purple">Transmissões</div>
				</h4>
				<span><i class="fa-solid fa-triangle-exclamation text-purple me-1"></i>As mensagens enviadas via lista de transmissão serão descontadas do seu saldo de crédito</span>
			</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 p-0">
								<!--h4 class="box-title">Últimas Conversas</h4-->
								<div class="col-lg-5">
									<h6 for="" class="fw-bold text-purple"><i class="fa-solid fa-users-rectangle"></i> Grupo</h6>
									<select id="filtroGrupo" class="selectpicker" title="Filtrar grupo">
										<option value="TODOS" class="" style="letter-spacing: 1px !important;" selected>Todos</option>
										{% for g in grupos %}
										<option value="{{g.idGrupos}}" class="" style="letter-spacing: 1px !important;">{{g.nome}}</option>
										{% endfor %}
									</select>
								</div>
								
								<div class="col-lg-3">
									<h6 for="" class="fw-bold text-purple"><i class="fa-solid fa-chart-simple"></i> Status</h6>
									<select id="filtroStatus" class="selectpicker" title="Filtrar status">
										<option value="TODOS" class="" style="letter-spacing: 1px !important;" selected>Todos</option>
										<option value="NÃO INICIADA" class="" style="letter-spacing: 1px !important;">Não Iniciada</option>
										<option value="EM ANDAMENTO" class="" style="letter-spacing: 1px !important;">Em Andamento</option>
										<option value="COMPLETA" class="" style="letter-spacing: 1px !important;">Completa</option>
									</select>
								</div>

								<div class="col-lg-2 mb-sm-15 mb-xs-15">
									<h6 for="">&nbsp;</h6>
									<button id="buscarTransmissoes" type="button" class="waves-effect waves-circle btn btn-circle btn-green-manager2 btn-sm mb-5"><i class="fa fa-search"></i></button>
								</div>
							</div>
						</div>
					</div>
					<div class="d-flex justify-content-end mb-3">
						<div class="">
							<a id="novaTransmissao" class="btn btn-green-manager2 fw-bold btn-sm pull-right"><i class="fa-solid fa-plus me-2"></i>Criar Nova Transmissão</a>
						</div>
					</div>
					<div class="box">
							<div class="table-responsive" style="max-height: 68vh; overflow: auto; border-radius: 10px 10px 0 0;">
								<table id="tabelaTransmissoes" class="table table-hover" >
									<thead class="bg-purple sticky-top" style="z-index: 99;">
										<tr>
											<th>#</th>
											<th><i class="fa-solid fa-mobile-screen-button"></i> Número</th>
											<th><i class="fa-solid fa-comment-dots"></i> Descrição</th>
											<th><i class="fa-solid fa-envelope-circle-check"></i> Enviados</th>
											<th><i class="fa-solid fa-chart-simple"></i> Status</th>
											<th><i class="fa-solid fa-calendar-check"></i> Últ.Execução</th>
											<th><i class="fa-solid fa-people-group"></i> Começar Em/Até</th>
											<th></th>
										</tr>
									</thead>
									<tbody>
										
									</tbody>
								</table>
							</div>
						</div>

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

</div>


<style>
	.swal2-html-container{
		overflow: visible;
	}
	.table-responsive>table .dropdown{position:static;}
	
</style>
{% endblock %}
{% block scripts %}
<script>
$('body').addClass('sidebar-collapse');

$(document).ready(function() {
	initilizeTooltips();
	getTransmissoes();
})

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

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


$('#buscarTransmissoes').on('click', function(){
	getTransmissoes();
})

function getTransmissoes(){
	Swal.fire({title : 'Buscando transmissões...', allowOutsideClick: false, scrollbarPadding: false});
	Swal.showLoading();
	
	let idGrupos = $('#filtroGrupo').val()
	let status = $('#filtroStatus').val()
	
	fetch('buscarTransmissoes', {
		method: 'POST',
		headers: {'Content-Type': 'application/x-www-form-urlencoded'},
		body: 'idGrupos=' + idGrupos + '&status=' + status
	})
	.then(function(res){ return res.json(); })
	.then(function(res){
		if(res.Success){
			$('#tabelaTransmissoes > tbody').empty();
			let transmissoes = res.transmissoes;
			
			$(transmissoes).each(function(index,t){
				let status = '';
				switch (t.status) {
				    case 'NÃO INICIADA':
				        status = '<div class="d-flex align-items-center">' +
				                    '<div><span class="badge bg-warning fw-bold">' + t.status + '</span></div>' +
				                    '<div class="ms-1"><a href="javascript:void(0)" data-id="' + t.idTransmissoes + '" data-enviados="' + t.enviados + '" data-total="' + t.total + '" class="text-success iniciaTransmissao ms-2" data-bs-toggle="tooltip" data-bs-original-title="Iniciar transmissão">' +
				                        '<i class="far fa-play-circle text-green-manager" style="font-size: 20px;"></i></a>' +
				                    '</div>' +
				                '</div>';
				        break;
				    case 'EM ANDAMENTO':
				        status = '<div class="d-flex align-items-center">' +
				                    '<div><span class="badge bg-purple fw-bold">' + t.status + '</span></div>' +
				                    '<div class="ms-1"><a href="javascript:void(0)" data-id="' + t.idTransmissoes + '" data-enviados="' + t.enviados + '" data-total="' + t.total + '" class="text-danger encerrarTransmissao ms-2" data-bs-toggle="tooltip" data-bs-original-title="Encerrar transmissão">' +
				                        '<i class="fa fa-close" style="font-size: 20px;"></i></a>' +
				                    '</div>' +
				                '</div>';
				        break;
				    case 'ENCERRADA':
				        status = '<div class="d-flex align-items-center">' +
				                    '<div><span class="badge bg-green-manager fw-bold">' + t.status + '</span></div>' +
				                    '<div class="ms-1"><a href="javascript:void(0)" data-id="' + t.idTransmissoes + '" data-enviados="' + t.enviados + '" data-total="' + t.total + '" class="text-success reiniciarTransmissao ms-2" data-bs-toggle="tooltip" data-bs-original-title="Reiniciar transmissão">' +
				                        '<i class="fa fa-repeat text-green-manager" style="font-size: 20px;"></i></a>' +
				                    '</div>' +
				                '</div>';
				        break;
				}
				
				$('#tabelaTransmissoes > tbody').append(
					'<tr class="text-muted">' +
						'<td>'+ t.idTransmissoes +'</td>' +
						'<td>'+ t.idNumeros.numero +'</td>' +
						'<td>'+ t.descricao +'</td>' +
						'<td>'+ t.enviados + '/' + t.total + '</td>' +
						'<td>'+ status + '</td>' +
						'<td>'+ (t.ultimaExecucao != null ? moment(t.ultimaExecucao.date).format("DD/MM/YYYY HH:mm") : 'Não executado')+ '</td>' +
						'<td>'+ (t.iniciarEm ? (t.iniciarEm+1): 1) + '/' + (t.enviarAte ? (t.enviarAte) : t.total) + '</td>' +
						'<td>' +
							'<div class="dropdown float-end">' +
								'<a class="px-10 pt-5" href="#" data-bs-toggle="dropdown" aria-expanded="false"><i class="ti-more-alt"></i></a>' +
								'<div class="dropdown-menu dropdown-menu-end" style="position:static;">' +
									'<a data-id="'+ t.idTransmissoes +'" class="dropdown-item editarTransmissao" href="javascript:void(0)"><i class="mdi mdi-pencil"></i> Editar transmissão</a>' +
									'<a data-id="'+ t.idTransmissoes +'" data-numero="'+ t.idNumeros.idNumeros +'" class="dropdown-item excluirTransmissao" href="javascript:void(0)"><i class="mdi mdi-close"></i> Excluir transmissão</a>' +
								'</div>' +
							'</div>' +
						'</td>' +
					'</tr>'
				)
			})
			
			initilizeTooltips();
			Swal.close();
		}else{
			Swal.fire({
				title: res.Erro,
				scrollbarPadding: false,
				icon: 'error',
				confirmButtonColor: 'var(--bs-info)',
				scrollbarPadding: false
			}).then(() =>{
				//location.reload();
			})
		}
	})
}

$('#tabelaTransmissoes > tbody').on('click', '.editarTransmissao', function(){
	let id = ($(this).data('id') ? $(this).data('id') : '');
	
	Swal.fire({title : 'Buscando dados da transmissão...', allowOutsideClick: false, scrollbarPadding: false});
	Swal.showLoading();
	
	fetch('buscarTransmissao', {
		method: 'POST',
		headers: {'Content-Type': 'application/x-www-form-urlencoded'},
		body: 'id=' + id
	})
	.then(function(res){ return res.json(); })
	.then(function(res){
		if(res.Success){
			let transmissao = res.transmissao;
			if(transmissao != null){
				criarEditarTransmissao(transmissao);
			}else{
				Swal.fire({
					title: 'Erro',
					scrollbarPadding: 'Não foi possível buscar os dados da transmissão, tente novamente(1)',
					icon: 'error',
					confirmButtonColor: 'var(--bs-info)',
					scrollbarPadding: false
				}).then(() =>{
					//location.reload();
				})
			}
		}else{
			Swal.fire({
				title: 'Erro',
				scrollbarPadding: 'Não foi possível buscar os dados da transmissão, tente novamente(2)',
				icon: 'error',
				confirmButtonColor: 'var(--bs-info)',
				scrollbarPadding: false
			}).then(() =>{
				//location.reload();
			})
		}
	})
})
$('#novaTransmissao').on('click', function(){
	let id = ($(this).data('id') ? $(this).data('id') : '');
	
	criarEditarTransmissao(null);
})

var numeros = [];
{% for n in numeros%}
	numeros.push({numero:'{{n.getNumero}}',businessApi:{{n.getBusinessApi}}});
{%endfor%};
var templateBusiness = null;
async function getTemplates(numero){
	Swal.showLoading();
	
	await fetch('listarTemplateBusiness', {
		method: 'POST',
		headers: {'Content-Type': 'application/x-www-form-urlencoded'},
		body: 'id_numeros=' + numero
	})
	.then(async function(res){ return res.json(); })
	.then(async function(res){
		if(res.Success){
			templateBusiness = res.modelosTemplate;
			$('#selectTemplates').empty();
			
			$(templateBusiness).each(function(index, t) {
				$('#selectTemplates').append('<option value="'+ t.id +'" class="" style="letter-spacing: 1px !important;">'+ t.name +'('+ t.language +')</option>');
			});
			$('#selectTemplates').selectpicker('destroy');
			$('#selectTemplates').selectpicker();
			Swal.hideLoading();
		}else{
			Swal.fire({
				title: 'Não foi possível buscar modelo/template de mensagens',
				text: res.Erro,
				icon: 'error',
				confirmButtonColor: 'var(--bs-info)',
				scrollbarPadding: false,
				allowOutsideClick: false
			}).then(() =>{
				deselectConversa();
			})
		}
	})
}



let removeImagem = 'false';
async function criarEditarTransmissao(t){
	let width = '100vw';
	if($(window).width() > 900){
		width = '600px';
	}
	
	Swal.fire({
	  width: width,
	  title:'<span class="text-purple">' + (t != null ? 'Nova transmissão' : 'Editar transmissão') + '</span>',
	  html:
		'<div class="row m-1">' +
			'<input id="idTransmissoes" type="hidden" class="form-control" value="'+ (t != null ? t.idTransmissoes : '') +'"/>' +
			'<div class="col-md-6 col-12 text-start mt-3">' +
				'<h6 class="mb-1 fw-bold text-purple"><i class="fa-solid fa-mobile-screen-button"></i> Número de envio</h6>' +
				'<select id="novaTransmissaoNumero" class="selectpicker col-12" title="Nenhum número cadastrado" data-container="body">' +
					{% 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>' +
			'<div class="col-md-6 col-12 text-start mt-3">' +
				'<h6 class="mb-1 fw-bold text-purple"><i class="fa-solid fa-users-rectangle"></i> Grupo de transmissão</h6>' +
				'<select id="novaTransmissaoGrupo" class="selectpicker col-12" title="Selecionar grupo" data-container="body">' +
					{% for g in grupos %}
					'<option value="{{g.idGrupos}}" class="" style="letter-spacing: 1px !important;">{{g.nome}}</option>' +
					{% endfor %}
				'</select>' +
			'</div>' +
			'<div class="col-md-6 col-12 text-start mt-3">' +
				'<h6 class="mb-1 fw-bold text-purple"><i class="fa-solid fa-headset"></i> Atendente</h6>' +
				'<select id="novaTransmissaoAtendente" class="selectpicker col-12" title="Selecione um atendente" data-container="body">' +
					{% for a in atendentes %}
					'<option value="{{a.getIdAtendentes}}" data-nome="{{a.getNomeAtendente}}" class="" style="letter-spacing: 1px !important;">{{a.getNomeAtendente}}</option>' +
					{% endfor %}
				'</select>' +
			'</div>' +
			'<div class="col-12 text-start mt-3">' +
				'<h6 class="mb-1 fw-bold text-purple"><i class="fa-solid fa-comment-dots"></i> Descrição</h6>' +
				'<input id="novaTransmissaoDescricao" placeholder="Descrição" class="form-control border-0 bg-manager-gray" value="'+ (t != null ? t.descricao : '') +'" maxlength="100"/>' +
			'</div>' +
			/*'<div id="transmissaoVenom" class="d-none">' +
				'<h6 class="mb-1 mt-3 pt-2 font-weight-bold">Mensagem</h6>' +
				'<div class="col-12 mt-3">' +
					'<input type="file" accept="image/*" id="novaTransmissaoInput" class="d-none">' +
					'<div id="novaTransmissaoShowImage" class="d-none" >' +
						'<img id="novaTransmissaoImage" src="" class="rounded image-responsive" alt="" style="max-height: 120px;">' +
					'</div>' +
					'<button id="novaTransmissaoEnviarImagem" type="button" class="waves-effect waves-light btn btn-sm btn-rounded btn-success mb-5 mt-1">Enviar imagem</button>' +
					'<button id="novaTransmissaoRemoverImagem" type="button" class="waves-effect waves-light btn btn-sm btn-rounded btn-danger mb-5 mt-1 d-none">Remover imagem</button>' +
				'</div>' +
				'<div class="form-group mt-3 text-start">' +
					'<textarea id="novaTransmissaoMensagem" class="form-control " placeholder="Mensagem" style="min-height: 150px;">'+ (t != null ? t.mensagem : '') +'</textarea>' +
				'</div>'+
			'</div>'+*/
			'<div id="transmissaoVenom" class="d-none">' +
				'<div class="form-group mt-3 text-center">' +
					'<div class="col-12 mt-2" style="">' +
						'<button id="transmissaoAddMsg" type="button" class="waves-effect waves-light btn btn-sm btn-rounded btn-green-manager fw-bold mb-5 mt-1"><i class="fa-solid fa-message"></i> Adicionar mensagem</button>' +
						'<div id="transmissaoMensagens" class="bg-manager-gray p-3 rounded col-12" style="overflow-y: auto; max-height: 330px;">' +
							
						'</div>' +
					'</div>' +
				'</div>'+
			'</div>'+
			'<div id="transmissaoBusiness" class="d-none">' +
				'<div class="col-12 text-left mt-4">' +
					'<h6 class="mb-1 font-weight-bold">Modelo de mensagem:</h6>' +
					'<select id="selectTemplates" class="selectpicker" data-live-search="true" title="Selecione uma template" data-container="body">' +
					'</select>' +
				'</div>' +
				
				'<div id="configMensagens" class="d-none b-1 rounded10 mt-2 p-2">' +
					'<ul id="" class="nav nav-pills mb-0">' +
						'<li class=""> <a id="headerTab" href="#headerTemplate" class="nav-link active" data-bs-toggle="tab" aria-expanded="false" style="font-size: 14px !important;">Cabeçalho</a> </li>' +
						'<li class=""> <a id="textTab" href="#textTemplate" class="nav-link" data-bs-toggle="tab" aria-expanded="false" style="font-size: 14px !important;">Mensagem</a> </li>' +
						//'<li class=""> <a id="buttonsTab" href="#buttonsTemplate" class="nav-link" data-bs-toggle="tab" aria-expanded="false" style="font-size: 14px !important;">Botões</a> </li>' +
					'</ul>' +
					'<hr class="mt-1 mb-1">'+
					'<div class="tab-content" style="">' +
						'<div id="headerTemplate" class="tab-pane active" style="">' +
							'<div id="parametrosHeader" class="text-center row p-2">' +
							'</div>' +
						'</div>' +
						
						'<div id="textTemplate" class="tab-pane" style="">' +
							'<div id="parametrosBody" class="text-center row p-2">' +
							'</div>' +
						'</div>' +
						
						'<div id="buttonsTemplate" class="tab-pane" style="">' +
							'<div id="parametrosButtons" class="text-center row p-2">' +
							'</div>' +
						'</div>' +
					'</div>' +
				'</div>' +
				'<div class="py-3"' +
					'style="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 id="previewTemplate" class="col-lg-8 offset-lg-2">' +
						'<div class="box bg-success text-start p-2 mb-1">'+
							'<div id="previewHeader" class="mb-1 rounded10" style="font-weight: 600">Cabeçalho</div>' +
							'<div id="previewBody" class="mb-1 rounded10">Mensagem</div>' +
							'<div id="previewFooter" class="mt-1 rounded10" style="font-size: 12px;">Rodapé</div>' +
						'</div>'+
						'<div id="previewButtons" class="row g-1"></div>' +
					'</div>'+
				'</div>'+
				'' +
			'</div>' +
			'' +
		'</div>' +
		'',
	  showCloseButton: true,
	  showCancelButton: true,
	  focusConfirm: false,
	  confirmButtonText: '<i class="fa-solid fa-floppy-disk me-1"></i>Salvar',
	  cancelButtonText: 'Cancelar',
	  scrollbarPadding: false,
	  allowOutsideClick: false,
	  confirmButtonColor: '#60b86c',
	  scrollbarPadding: false,
	  willOpen: async () => {
			$('#selectTemplates').empty();
			
			$('#selectTemplates').selectpicker();
			$('#selectTemplates').on('show.bs.select', function () {
			$('.swal2-actions').css('z-index', '0');
			});
			$('#selectTemplates').on('hidden.bs.select', function () {
				$('.swal2-actions').css('z-index', '');
			});
			
			
			$('#selectTemplates').on('change', function(){
				$('#configMensagens').removeClass('d-none');
				
				var selectedTemplate = templateBusiness.filter(x => x.id === $('#selectTemplates').val())[0];
				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*/
				$('#parametrosHeader').empty();
				if(header){
					switch(header.format){
						case 'TEXT':
							var headerParameters = header.text.match(/{{ '{{' }}(.*?){{ '}}' }}/g);
							
							if(headerParameters){
								if(headerParameters.length > 0){
									//$('#parametrosHeader').append('<h6 class="mt-1">Informe os parametros do cabeçalho</h6>');
								}
							}else{
								$('#parametrosHeader').append('<h6 class="my-4">Cabeçalho definido como texto sem parametros, nenhuma configuração disponível</h6>');
							}
							
							$(headerParameters).each(function(index, p){
								$('#parametrosHeader').append(
									'<div class="form-group text-start col-6 mt-0">' +
										'<h6 for="parametroHeader_'+(index+1)+'" class="mb-1">Parametro '+ (index+1) +':</h6>' +
										'<input id="parametroHeader_'+(index+1)+'" data-index="'+(index+1)+'" placeholder="'+ p +'" class="form-control" value=""/>' +
									'</div>'
								);
							})
							
							/*ALTERA PREVIEW AO EDITAR PARAMETRO CABEÇALHO*/
							var originalCabecalho = header.text;
							$('#parametrosHeader input').on('keyup', function (event) {
								var text = originalCabecalho;
								
								$($('#parametrosHeader input')).each(function(index, input){
									if($(input).val() == ''){
										$('#previewHeader').text(text);
									}else{
										text = text.replace('{{'{{'}}'+ $(input).data('index') +'{{'}}'}}', $(input).val());
										$('#previewHeader').text(text);
									}
								})
							})
							/*ALTERA PREVIEW AO EDITAR PARAMETRO CABEÇALHO*/
							
							$('#previewHeader').text(header.text);
							break;
						case 'IMAGE':
							$('#previewHeader').html('<i class="fa fa-image py-4 bg-success-light b-1 rounded10 d-flex justify-content-center" style="font-size: 48px"></i>');
							//$('#parametrosHeader').append('<h6 class="my-4">Cabeçalho definido como Imagem, nenhuma configuração disponível</h6>');
							$('#parametrosHeader').append(
								'<div class="col-12 mt-3">' +
									'<input type="file" data-tipo="image" accept="image/*" id="inputHeader" class="d-none">' +
									'<div id="headerShowFile" class="d-none" >' +
										
									'</div>' +
									'<button id="headerEnviarFile" type="button" class="waves-effect waves-light btn btn-sm btn-rounded btn-success mb-5 mt-1">Enviar imagem</button>' +
									'<button id="headerRemoverFile" type="button" class="waves-effect waves-light btn btn-sm btn-rounded btn-danger mb-5 mt-1 d-none">Remover imagem</button>' +
								'</div>' 
							);
							
							break;
						case 'VIDEO':
							$('#previewHeader').html('<i class="fa fa-film py-4 bg-success-light b-1 rounded10 d-flex justify-content-center" style="font-size: 48px"></i>');
							//$('#parametrosHeader').append('<h6 class="my-4">Cabeçalho definido como Vídeo, nenhuma configuração disponível</h6>');
							$('#parametrosHeader').append(
								'<div class="col-12 mt-3">' +
									'<input type="file" data-tipo="video" accept="video/*" id="inputHeader" class="d-none">' +
									'<div id="headerShowFile" class="d-none" >' +
										
									'</div>' +
									'<button id="headerEnviarFile" type="button" class="waves-effect waves-light btn btn-sm btn-rounded btn-success mb-5 mt-1">Enviar vídeo</button>' +
									'<button id="headerRemoverFile" type="button" class="waves-effect waves-light btn btn-sm btn-rounded btn-danger mb-5 mt-1 d-none">Remover vídeo</button>' +
								'</div>' 
							);
							
							break;
						case 'DOCUMENT':
							$('#previewHeader').html('<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>');
							//$('#parametrosHeader').append('<h6 class="my-4">Cabeçalho definido como Arquivo, nenhuma configuração disponível</h6>');
							$('#parametrosHeader').append(
								'<div class="col-12 mt-3">' +
									'<input type="file" data-tipo="document" accept="*" id="inputHeader" class="d-none">' +
									'<div id="headerShowFile" class="d-none" >' +
										
									'</div>' +
									'<button id="headerEnviarFile" type="button" class="waves-effect waves-light btn btn-sm btn-rounded btn-success mb-5 mt-1">Enviar documento</button>' +
									'<button id="headerRemoverFile" type="button" class="waves-effect waves-light btn btn-sm btn-rounded btn-danger mb-5 mt-1 d-none">Remover documento</button>' +
								'</div>' 
							);
							break;
					}
				}else{
					$('#parametrosHeader').append('<h6 class="my-4">Mensagem sem cabeçalho</h6>');
					$('#previewHeader').text('');
				}
				
				
				var input = document.getElementById("inputHeader");
				$('#headerRemoverFile').on('click', function(){
					$('#headerShowFile').empty();
					$('#headerShowFile').addClass('d-none');
					$('#headerShowFile').addClass('d-none');
					$('#headerRemoverFile').addClass('d-none');
					$('#headerEnviarFile').removeClass('d-none');
					
					$('previewHeader').empty();
					$('#previewHeader').removeClass('h-100 w-p100');
					$('#previewHeader').css('background-image', '');
					switch(header.format){
						case 'IMAGE':
							$('#previewHeader').html('<i class="fa fa-image py-4 bg-success-light b-1 rounded10 d-flex justify-content-center" style="font-size: 48px"></i>');
							break;
						case 'VIDEO':
							$('#previewHeader').html('<i class="fa fa-film py-4 bg-success-light b-1 rounded10 d-flex justify-content-center" style="font-size: 48px"></i>');
							break;
						case 'DOCUMENT':
							$('#previewHeader').html('<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>');
							break;
					}
					
					jQuery(input).val('');
				})
				
				$('#headerEnviarFile').on('click', function(){
					$('#inputHeader').trigger('click'); 
				})
				
				jQuery(input).on('change', function(){
					var files = jQuery(input).prop("files");
					
					for (i = 0; i < files.length; i++) {
						Swal.showLoading();
						
						let reader = new FileReader();
						reader.onload = function(event) {
						}
						
						let filename = this.files[i].name;
						switch($(input).attr('data-tipo')){
							case 'image':
								if(!filename.split('.')[1]){
									showNovaMsgErro('Imagem inválida, não foi possível processar a imagem');
									Swal.hideLoading();
									$(input).remove();
									return;
								}else{
									reader.readAsDataURL(this.files[i]);
									reader.onloadend = function(event) {
										var image = new Image();
										image.src = event.target.result;
										image.name = filename;
										
										let mimeType = image.src.match(/[^:]\w+\/[\w-+\d.]+(?=;|,)/)[0];
										image.type = mimeType;
										
										if(event.loaded > 10485760){
											Swal.showValidationMessage('Imagem não pode ter mais que 10MB');
											Swal.hideLoading();
											return;
										}
										
										image.onload = function(e){
											$('#headerShowFile').append(filename);
											$('#headerShowFile').removeClass('d-none');
											$('#headerRemoverFile').removeClass('d-none');
											$('#headerEnviarFile').addClass('d-none');
											
											$('#previewHeader').empty();
											$('#previewHeader').addClass('h-100 w-p100');
											$('#previewHeader').css('background-image', 'url(\''+ image.src +'\')');
											$('#previewHeader').css('background-repeat', 'no-repeat');
											$('#previewHeader').css('background-position', 'center, center');
											
											$('.swal2-validation-message').hide();
											Swal.hideLoading();
										}
										image.onerror = function(e) {
											Swal.showValidationMessage('Imagem inválida, verifique o arquivo e tente novamente');
											Swal.hideLoading();
											return;
										}
									}
								}
								break;
							case 'video':
							case 'document':
								reader.readAsDataURL(this.files[i]);
								reader.onloadend = function(event) {
									if(event.loaded > 10485760){
										Swal.showValidationMessage('Arquivo não pode ter mais que 10MB');
										Swal.hideLoading();
										return;
									}
											
									$('#headerShowFile').append(filename);
									$('#headerShowFile').removeClass('d-none');
									$('#headerRemoverFile').removeClass('d-none');
									$('#headerEnviarFile').addClass('d-none');
									
									$('.swal2-validation-message').hide();
									Swal.hideLoading();
									
								}
								break;
						}
						
					}
				});
				/*HEADER*/
				
				
				/*BODY*/
				var bodyParameters = body.text.match(/{{ '{{' }}(.*?){{ '}}' }}/g);
				$('#parametrosBody').empty();
				
				if(bodyParameters){
					if(bodyParameters.length > 0){
						//$('#parametrosBody').append('<h6 class="mt-1">Informe os parametros da mensagem</h6>');
					}else{
						$('#parametrosBody').append('<h6 class="my-4">Mensagem definida como texto sem parametros, nenhuma configuração disponível</h6>');
					}
				}else{
					$('#parametrosBody').append('<h6 class="my-4">Mensagem definida como texto sem parametros, nenhuma configuração disponível</h6>');
				}
				
				$(bodyParameters).each(function(index, p){
					$('#parametrosBody').append(
						'<div class="form-group text-start col-6 mt-0">' +
							'<h6 for="parametroBody_'+(index+1)+'" class="mb-1">Parametro '+ (index+1) +':</h6>' +
							'<input id="parametroBody_'+(index+1)+'" placeholder="'+ p +'" data-index="'+(index+1)+'" class="form-control" value=""/>' +
						'</div>'
					);
				})
				
				/*ALTERA PREVIEW AO EDITAR PARAMETRO MENSAGENS*/
				var originalMensagem = body.text;
				$('#parametrosBody input').on('keyup', function (event) {
					var text = originalMensagem;
					
					$($('#parametrosBody input')).each(function(index, input){
						if($(input).val() == ''){
							$('#previewBody').text(text);
						}else{
							text = text.replace('{{'{{'}}'+ $(input).data('index') +'{{'}}'}}', $(input).val());
							$('#previewBody').text(text);
						}
					})
				})
				/*ALTERA PREVIEW AO EDITAR PARAMETRO MENSAGENS*/
				
				$('#previewBody').text((body ? body.text : ''));
				/*BODY*/
				
				
				/*FOOTER*/
				$('#previewFooter').text((footer ? footer.text : ''));
				/*FOOTER*/
				
				
				/*BUTTONS*/
				$('#parametrosButtons').empty();
				$('#previewButtons').empty();
				if(buttons){
					var htmlButtons = '';
					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>'
							}
						})
					}
					
					$('#previewButtons').html(htmlButtons);
				}else{
					$('#parametrosButtons').append('<h6 class="my-4">Nenhum botão definido para esse modelo</h6>');
				}
				/*BUTTONS*/
				
			})
			
	  },
	  didOpen: async () => {
		$('.swal2-close').blur();
		
		$('#novaTransmissaoGrupo').selectpicker();
		
		
		if('{{userLogged.tipo}}' == 'ATENDENTE'){
			$('#novaTransmissaoAtendente').attr('disabled', true);
			$('#novaTransmissaoAtendente').selectpicker('val', '{{userLogged.idAtendentes}}');
		}else{
			if(t != null){
				if(t.idAtendente != null){
					$('#novaTransmissaoAtendente').selectpicker('val', t.idAtendente.idAtendentes.toString());
				}else{
					$('#novaTransmissaoAtendente').selectpicker();
				}
			}else{
				$('#novaTransmissaoAtendente').selectpicker();
			}
		}
		
		if(t != null){
			$('#novaTransmissaoGrupo').selectpicker('val', t.idGrupos.idGrupos.toString());
		}
		
		$('#novaTransmissaoNumero, #novaTransmissaoGrupo').on('show.bs.select', function () {
			$('.swal2-actions').css('z-index', '0');
		});
		$('#novaTransmissaoNumero, #novaTransmissaoGrupo').on('hidden.bs.select', function () {
			$('.swal2-actions').css('z-index', '');
		});
		
		$('#novaTransmissaoNumero').on("change", async function(){
			var numero = $('#novaTransmissaoNumero option:selected').data('numero');
			numero = numeros.filter(x =>  x.numero == numero)[0];
			
			if(numero.businessApi == 1){
				await getTemplates($('#novaTransmissaoNumero').selectpicker('val'));
				
				/*SETA PREVIEW AO EDITAR TRANSMISSAO */
				if(t != null){
					if(t.payload != null){
						var template = JSON.parse(t.template);
						var payload = JSON.parse(t.payload);
						var components = payload.template.components;
						
						$('#selectTemplates').selectpicker('val', template.id.toString());
						$('#selectTemplates').trigger('change');
						
						
						if(t.payload != null){
							$(components).each(async function(index, c){
								/*HEADER*/
								if(c.type == 'header'){
									if(c.parameters){
										$(c.parameters).each(async function(index, p){
											switch(p.type){
												case 'image':
												case 'video':
												case 'document':
													const file = await getFileFromUrl(p[p.type].link, (p[p.type].link.substring(p[p.type].link.lastIndexOf('/') + 1)));
													var input = document.getElementById("inputHeader");
													
													let container = new DataTransfer(); 
													container.items.add(file);
													document.getElementById("inputHeader").files = container.files;
													
													$(input).attr('data-tipo', p.type)
													
													$(input).trigger('change');
													break;
											}
										})
									}
								}
								/*HEADER*/
								
								/*BODY*/
								if(c.type == 'body'){
									if(c.parameters){
										$(c.parameters).each(function(index, p){
											$($('#parametrosBody input')[index]).val(p.text)
										})
									}
								}
								/*BODY*/
							})
						}
						
						$('#parametrosBody input').trigger('keyup');
						
						template = null;
						payload = null;
						components = null;
					}
				}
				/*SETA PREVIEW AO EDITAR TRANSMISSAO */
				
				
				if(!$('#transmissaoVenom').hasClass('d-none')){$('#transmissaoVenom').addClass('d-none');}
				if($('#transmissaoBusiness').hasClass('d-none')){$('#transmissaoBusiness').removeClass('d-none');}
			}else{
				if($('#transmissaoVenom').hasClass('d-none')){$('#transmissaoVenom').removeClass('d-none');}
				if(!$('#transmissaoBusiness').hasClass('d-none')){$('#transmissaoBusiness').addClass('d-none');}
			}
		})
		
		/*MENSAGEM VENOM*/
		/*LISTA MENSAGENS PARA EDITAR*/
		if(t != null){
			try{
				var jsonMessage = JSON.parse(t.mensagem);
			}catch(err) {
				var jsonMessage = null;
			}
			if(jsonMessage != null){
				$(jsonMessage).each(function(i,msg){
					addMensagem(msg);
				})
			}else{
				if(t.fileUrl != null){
					addMensagem({mensagem:t.mensagem,imagem:t.fileUrl});
				}else{
					addMensagem(t.mensagem);
				}
			}
		}
		/*LISTA MENSAGENS PARA EDITAR*/
		
		$('#transmissaoAddMsg').on('click', function(){
			$('#transmissaoMensagens .mensagemInput').each(function(i,e) {
				if(!$(e).hasClass('d-none')){
					$(e).parent().find('.mensagemInputConfirmar').trigger('click');
				}
			})
			addMensagem(null);						
		})
		
		$('#transmissaoMensagens').on('click', '.mensagemDelete', function(){
			var img = $(this).parent().parent().find('.mensagemImg');
			if($(img).attr('src') != ''){
				elem = $(this).parent().parent().find('.mensagemImgDelete');
				deletaImagemMensagem(elem);
			}
			
			$(this).parent().parent().remove();
		})
			
		$('#transmissaoMensagens').on('click', '.mensagemText', function(){
			$(this).addClass('d-none');
			$(this).parent().find('.mensagemInput').removeClass('d-none');
			$(this).parent().find('.mensagemInputButtons').removeClass('d-none');
			$(this).parent().find('.mensagemInput').val($(this).text())
			$(this).parent().find('.mensagemInput').focus();
		})
		
		$('#transmissaoMensagens').on('click', '.mensagemInputConfirmar', function(){
			$(this).parent().parent().find('.mensagemText').removeClass('d-none');
			$(this).parent().parent().find('.mensagemInput').addClass('d-none');
			$(this).parent().addClass('d-none');
			$(this).parent().parent().find('.mensagemText').text($(this).parent().parent().find('.mensagemInput').val());
		})
		
		$('#transmissaoMensagens').on('click', '.mensagemInputCancel', function(){
			$(this).parent().parent().find('.mensagemText').removeClass('d-none');
			$(this).parent().parent().find('.mensagemInput').addClass('d-none');
			$(this).parent().addClass('d-none');
		})
		
		$('#transmissaoMensagens').on('click', '.mensagemAddImg', function(){
			var elem = $(this);
			var input = $('<input/>').attr('type', 'file').attr('id', 'uploadMensagemImg').attr('class', 'd-none');
			$(this).parent().append(input);
			$('#uploadMensagemImg').trigger('click');
			
			jQuery(input).on('change', function(){
				var files = jQuery(input).prop("files");

				for (i = 0; i < files.length; i++) {
					Swal.showLoading();
					
					let reader = new FileReader();
					reader.onload = function(event) {
					}
					let filename = this.files[i].name;
					if(this.files[i]['type'].includes('image')){
						if(!filename.split('.')[1]){
							showNovaMsgErro('Imagem inválida, não foi possível processar a imagem');
							Swal.hideLoading();
							$(input).remove();
							return;
						}else{
							reader.readAsDataURL(this.files[i]);
							reader.onloadend = function(event) {
								loadImage(event, filename);
							}
						}
					}else{
						reader.readAsDataURL(this.files[i]);
						reader.onloadend = function(event) {
							loadFile(event, filename);
						}
					}
				}
			});
			
			function loadImage(event, name){
				var input = document.getElementById("uploadMensagemImg");
				var image = new Image();
				image.src = event.target.result;
				image.name = name;
				
				let mimeType = image.src.match(/[^:]\w+\/[\w-+\d.]+(?=;|,)/)[0];
				image.type = mimeType;
				
				if(event.loaded > 10485760){
					showNovaMsgErro('Imagem não pode ter mais que 10MB');
					Swal.hideLoading();
					$(input).remove();
					return;
				}
				
				image.onload = function(e){
					let formData = new FormData();
					formData.append('image', input.files[0]);
					
					fetch('enviaImagemTransmissao', {
						method: 'POST',
						//headers: {'Content-Type': 'application/x-www-form-urlencoded'},
						body: formData
					})
					.then(function(res){ return res.json(); })
					.then(function(res){
						if(res.Success){
							$(elem).parent().parent().find('.mensagemImg').attr('src', res.Success);
							$(elem).parent().parent().find('.mensagemImg').removeClass('d-none');
							$(elem).parent().parent().find('.mensagemImgDelete').removeClass('d-none');
							
							$(elem).parent().parent().find('.mensagemInputButtons .mensagemAddImg').attr('disabled', true);
							
							Swal.hideLoading();
						}else{
							showNovaMsgErro(res.Erro);
						}
						
						$(input).remove();
					})
				}
				image.onerror = function(e) {
					$(input).remove();
					showNovaMsgErro('Imagem inválida, verifique o arquivo e tente novamente');
					Swal.hideLoading();
					return;
				}
			}
			
			function loadFile(event, name){
				var input = document.getElementById("uploadMensagemImg");
				
				var file = new File([""], name);
				file.src = event.target.result;
				file.name = name;
				
				let mimeType = file.src.match(/[^:]\w+\/[\w-+\d.]+(?=;|,)/)[0];
				file.type = mimeType;
				
				if(event.loaded > 10485760){
					showNovaMsgErro('Arquivo não pode ter mais que 10MB');
					Swal.hideLoading();
					$(input).remove();
					return;
				}
				
				let formData = new FormData();
				formData.append('file', input.files[0]);
				
				fetch('enviaFileTransmissao', {
					method: 'POST',
					//headers: {'Content-Type': 'application/x-www-form-urlencoded'},
					body: formData
				})
				.then(function(res){ return res.json(); })
				.then(function(res){
					if(res.Success){
						$(elem).parent().parent().find('.mensagemFile').attr('data-src', res.Success);
						$(elem).parent().parent().find('.mensagemFile').removeClass('d-none');
						$(elem).parent().parent().find('.mensagemFileName').text(name);
						$(elem).parent().parent().find('.mensagemFileDelete').removeClass('d-none');
						
						$(elem).parent().parent().find('.mensagemInputButtons .mensagemAddImg').attr('disabled', true);
						
						Swal.hideLoading();
					}else{
						showNovaMsgErro(res.Erro);
					}
					
					$(input).remove();
				})					
			}
		})
		
		$('#transmissaoMensagens').on('click', '.mensagemImgDelete', function(){
			var elem = $(this);
			deletaImagemMensagem(elem);
		})
		
		function deletaImagemMensagem(elem){
			var src = $(elem).parent().parent().find('.mensagemImg').attr('src');
			fetch('deletaMediaTransmissao', {
				method: 'POST',
				headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				body: 'src=' + src
			})
			.then(function(res){ return res.json(); })
			.then(function(res){
				$(elem).parent().parent().find('.mensagemImg').attr('src', '');
				$(elem).parent().parent().find('.mensagemImg').addClass('d-none');
				$(elem).parent().parent().find('.mensagemImgDelete').addClass('d-none');
			
				$(elem).parent().parent().parent().parent().find('.mensagemInputButtons .mensagemAddImg').attr('disabled', false);
				Swal.hideLoading();
			})
		}
		
		$('#transmissaoMensagens').on('click', '.mensagemFileDelete', function(){
			var elem = $(this);
			deletaFileMensagem(elem);
		})
		
		function deletaFileMensagem(elem){
			Swal.showLoading();
			var src = $(elem).parent().parent().find('.mensagemFile i').attr('data-src');
			
			fetch('deletaMediaTransmissao', {
				method: 'POST',
				headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				body: 'src=' + src
			})
			.then(function(res){ return res.json(); })
			.then(function(res){
				$(elem).parent().parent().find('.mensagemFile i').attr('data-src', '');
				$(elem).parent().parent().find('.mensagemFile').addClass('d-none');
				$(elem).parent().parent().find('.mensagemFileName').text('');
				$(elem).parent().parent().find('.mensagemFileDelete').addClass('d-none');
				
				$(elem).parent().parent().parent().parent().find('.mensagemInputButtons .mensagemAddImg').attr('disabled', false);
				Swal.hideLoading();
			})
		}
		
		
		function showNovaMsgErro(erro){
			Swal.showValidationMessage(erro);
		}
		
		function addMensagem(mensagem){
			var msg = {};
			if(typeof(mensagem) != "object" || mensagem == null){
				msg.mensagem = mensagem;
				msg.imagem = "";
				msg.file = "";
			}else{
				msg = mensagem;
				if(!msg.file){
					msg.file = "";
				}
			}
	
			$('#transmissaoMensagens').append(
				'<div class="card text-start p-1 bg-manager-gray border-0 shadow mensagem p-2 font-weight-normal" style="font-size: 0.85em !important; border: 2px solid #fff !important;">' +
					'<span class="text-end" style="position:absolute; right: -10px; top: -10px;">' +
						'<a class="btn btn-xs btn-danger rounded-circle mensagemDelete text-white pull-right shadow" style="cursor: pointer;" ><i class="fa fa-times "></i></a>' +
					'</span>' +
					
					'<div class="d-flex justify-content-center" style="">' +
						'<div class="" style="max-width: 250px; position: relative;">' +
							'<span class="text-end" style="position:absolute;right:-5px;top:0px;">' +
								'<a class="btn btn-xs btn-danger rounded-circle mensagemImgDelete text-white shadow '+((msg.imagem != "") ? "" : "d-none")+'" style=""><i class="fa fa-close "></i></a>' +
							'</span>' +
							'<img src="'+((msg.imagem != "") ? msg.imagem : "")+'" class="mensagemImg mt-2 mb-2 rounded '+((msg.imagem != "") ? "" : "d-none")+'" style="cursor:pointer; max-width: 250px;"></img>' +
							
							'<span class="text-end" style="position:absolute;right:-5px;top:-5px;">' +
								'<a class="btn btn-xs btn-danger rounded-circle mensagemFileDelete text-white shadow '+((msg.file != "") ? "" : "d-none")+'" style=""><i class="fa fa-close "></i></a>' +
							'</span>' +
							'<div class="mensagemFile b-1 bg-success-light rounded10 mb-2 p-2 text-center '+((msg.file != "") ? "" : "d-none")+'">' +
								'<i data-src="'+((msg.file != "") ? msg.file : "")+'" class="fa fa-file mt-2 mb-2 rounded" style="cursor:pointer; max-width: 250px; font-size: 38px;"></i>' +
								'<p class="mensagemFileName mb-0" style="font-size: 10px;">'+((msg.file != "") ? msg.file.split('/').pop() : "")+'</p>' +
							'</div>' +
							
						'</div>' +
					'</div>' +
					
					'<text class="mensagemText rounded p-1 '+ (mensagem == null ? 'd-none' : '') +'" style="margin-bottom: 5px !important;cursor: pointer; white-space: pre-line;min-height:25px;">'+ (msg.mensagem != null ? msg.mensagem : '') +'</text>'+
					'<textarea class="mensagemInput form-control form-control-sm bg-manager-gray text-black border-0 '+ (mensagem == null ? '' : 'd-none') +'" placeholder="Mensagem" style="font-size: 1em !important; white-space: pre-line;"></textarea>' +
					'<div class="mensagemInputButtons mt-1 '+ (mensagem == null ? '' : 'd-none') +'">' +
						'<button class="btn btn-xs btn-purple-manager mensagemAddImg float-start" style="cursor: pointer;" ><i class="mdi mdi-image mdi-16px"></i> Enviar imagem/arquivo</button>' +
						'<button class="btn btn-xs btn-danger ms-2 mensagemInputCancel text-white float-end" style="cursor: pointer;" ><i class="mdi mdi-close mdi-16px"></i></button>' +
						'<button class="btn btn-xs btn-green-manager b-1 mensagemInputConfirmar text-white float-end" style="cursor: pointer;" ><i class="mdi mdi-check mdi-16px"></i></button>' +
					'</div>' +
				'</div>'
			);
		}
		
		/*MENSAGEM VENOM*/
		
		
		
		async function getFileFromUrl(url, name, defaultType = 'image/jpeg'){
			const response = await fetch(url);
			const data = await response.blob();
			return new File([data], name, {
				type: data.type || defaultType,
			});
		}
		
		if(numeros.length == 1){
			$('#novaTransmissaoNumero').attr('disabled', false);
			$('#novaTransmissaoNumero').selectpicker('val', '{{numeros.0.getIdNumeros}}');
			$('#novaTransmissaoNumero').trigger('change');
		}else{
			if(t != null){
				$('#novaTransmissaoNumero').attr('disabled', true);
				$('#novaTransmissaoNumero').selectpicker('val', t.idNumeros.idNumeros.toString());
				$('#novaTransmissaoNumero').trigger('change');
			}else{
				$('#novaTransmissaoNumero').selectpicker();
			}
		}
		
		/*$('#novaTransmissaoEnviarImagem').on('click', function(){
			$('#novaTransmissaoInput').trigger('click'); 
		})
		
		if(t != null && t.fileUrl != null){
			$('#novaTransmissaoImage').attr('src', t.fileUrl);
			$('#novaTransmissaoShowImage').removeClass('d-none');
			$('#novaTransmissaoRemoverImagem').removeClass('d-none');
			$('#novaTransmissaoEnviarImagem').addClass('d-none');
			
			$('.swal2-validation-message').hide();
			Swal.hideLoading();
		}
		
		var input = document.getElementById("novaTransmissaoInput");
		jQuery(input).on('change', function(){
			var files = jQuery(input).prop("files");

			for (i = 0; i < files.length; i++) {
				Swal.showLoading();
				
				let reader = new FileReader();
				reader.onload = function(event) {
				}
				let filename = input.files[i].name;	
				if(!filename.split('.')[1]){
					Swal.showValidationMessage('Imagem inválida, não foi possível processar a imagem');
					Swal.hideLoading();
					return;
				}else{
					reader.readAsDataURL(input.files[i]);
					reader.onloadend = function(event) {
						loadImage(event, filename);
					}
				}
			}
		});
		
		$('#novaTransmissaoRemoverImagem').on('click', function(){
			$('#novaTransmissaoImage').attr('src', '');
			$('#novaTransmissaoShowImage').addClass('d-none');
			$('#novaTransmissaoRemoverImagem').addClass('d-none');
			$('#novaTransmissaoEnviarImagem').removeClass('d-none');
			
			removeImagem = 'true';
			
			jQuery(input).val('');
		})*/
		
		
	  },
	  preConfirm: (value) => {
		let novaTransmissaoNumero = $('#novaTransmissaoNumero').val();
		let novaTransmissaoGrupo = $('#novaTransmissaoGrupo').val();
		let novaTransmissaoDescricao = $('#novaTransmissaoDescricao').val();
		let novaTransmissaoMensagem = $('#novaTransmissaoMensagem').val();
		
		var numero = $('#novaTransmissaoNumero option:selected').data('numero');
		numero = numeros.filter(x =>  x.numero == numero)[0];
		
		switch(true){
			case novaTransmissaoNumero == '':
				Swal.showValidationMessage('Selecione um número');
				break;
			case novaTransmissaoGrupo == '':
				Swal.showValidationMessage('Selecione um grupo');
				break;
			case novaTransmissaoDescricao == '':
				Swal.showValidationMessage('Descrição não pode ser vazia');
				break;
			case numero.businessApi == 0 && $('#transmissaoMensagens .mensagemText').length == 0:
				Swal.showValidationMessage('Inclua pelo menos uma mensagem')
				break;
			case numero.businessApi == 1 && !templateBusiness.filter(x => x.id === $('#selectTemplates').val())[0]:
				Swal.showValidationMessage('Selecione um modelo de mensagem')
				break;
			case (numero.businessApi == 1 && $('#parametrosHeader input').val() == ''):
				Swal.showValidationMessage('Preencha todos os parametros do cabeçalho')
				break;
			case (numero.businessApi == 1 && $('#parametrosBody input').val() == ''):
				Swal.showValidationMessage('Preencha todos os parametros da mensagem')
				break;
		}
		
		$('#transmissaoMensagens .mensagemText').each(function(i,e){
			console.log(typeof($(e).parent().find('.mensagemFile').data('src')))
			console.log($(e).parent().find('.mensagemFile').data('src'))
			if($(e).text() == '' && 
					$(e).parent().find('.mensagemImg').attr('src') == '' && 
					(typeof($(e).parent().find('.mensagemFile').data('src')) == 'undefined' || $(e).parent().find('.mensagemFile').data('src') == '')
				){
				Swal.showValidationMessage('Existe mensagens sem texto. Exclua ou preencha algum texto na mensagem para continuar.');
			}
		})
		
	  }
	  
	}).then((result) => {
		if(result.isConfirmed){
			var numero = $('#novaTransmissaoNumero option:selected').data('numero');
			numero = numeros.filter(x =>  x.numero == numero)[0];
			
			let idTransmissoes = $('#idTransmissoes').val();
			let novaTransmissaoNumero = $('#novaTransmissaoNumero').val();
			let novaTransmissaoGrupo = $('#novaTransmissaoGrupo').val();
			let novaTransmissaoDescricao = $('#novaTransmissaoDescricao').val();
			let novaTransmissaoMensagem = $('#novaTransmissaoMensagem').val();
			//let novaTransmissaoInput = $('#novaTransmissaoInput');
			//var novaTransmissaoInput = document.getElementById("novaTransmissaoInput");
			
			let formData = new FormData();
			formData.append('id_transmissoes', idTransmissoes);
			formData.append('id_numeros', novaTransmissaoNumero);
			formData.append('id_grupos', novaTransmissaoGrupo);
			formData.append('descricao', novaTransmissaoDescricao);
			//formData.append('mensagem', novaTransmissaoMensagem);

			var mensagens = [];
			$('#transmissaoMensagens .mensagem').each(function(i,e) {
				mensagens.push({mensagem:$(e).find('.mensagemText').text(),imagem:$(e).find('.mensagemImg').attr('src'),file:$(e).find('.mensagemFile').attr('data-src')});
			})
			formData.append('mensagem', JSON.stringify(mensagens));
			
			
			/*if(novaTransmissaoInput.files[0]){
				formData.append('image', novaTransmissaoInput.files[0]);
			}
			formData.append('removeImagem', removeImagem);*/
			
			/*PARAMETROS TEMPLATE*/
			if(numero.businessApi == 1){
				var selectedTemplate = templateBusiness.filter(x => x.id === $('#selectTemplates').val())[0];
				var components = JSON.parse(selectedTemplate.components);
				var buttons = components.filter(x => x.type === 'BUTTONS')[0];
				
				formData.append('template', selectedTemplate.name);
				formData.append('templateJs', JSON.stringify(selectedTemplate));
				formData.append('language', selectedTemplate.language);
				if($('#parametrosHeader input').length > 0){
					if($('#parametrosHeader input').attr('data-tipo')){
						var input = $('#parametrosHeader input')[0] ;
						switch($('#parametrosHeader input').attr('data-tipo')){
							case 'image':
								formData.append('headerImage', input.files[0]);
								break;
							case 'video':
								formData.append('headerVideo', input.files[0]);
								break;
							case 'document':
								formData.append('headerDocument', input.files[0]);
								break;
						}
					}else{
						var arrParamHeader = $('#parametrosHeader input').map(function () {
							return {type:'text',text:this.value}; // $(this).val()
						}).get();
						formData.append('paramHeader', JSON.stringify(arrParamHeader))
					}
				}
				if($('#parametrosBody input').length > 0){
					var arrParamBody = $('#parametrosBody input').map(function () {
						return {type:'text',text:this.value}; // $(this).val()
					}).get(); 
					formData.append('paramBody', JSON.stringify(arrParamBody))
				}
				if($('#parametrosButtons input').length > 0){
					var arrParamButtons = $('#parametrosButtons input').map(function (i) {
						return {
								type:'button',
								sub_type:buttons.buttons[i].type,
								index:i,
								parameters:[{type: "payload", payload: JSON.stringify({text:this.value})}]
							}; // $(this).val()
					}).get(); 
					formData.append('paramButtons', JSON.stringify(arrParamButtons))
				}
			}
			/*PARAMETROS TEMPLATE*/
			
			
			
			
			Swal.fire({title : 'Salvando transmissão...', allowOutsideClick: false, scrollbarPadding: false});
			Swal.showLoading();
			
			fetch('novaTransmissao', {
				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.fire({
						title: (t != null == '' ? 'Nova transmissão' : 'Editar transmissão'),
						text: res.Success,
						scrollbarPadding: false,
						icon: 'success',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						getTransmissoes();
					})
				}else{
					Swal.fire({
						title: (t != null == '' ? 'Transmissão não cadastrada' : 'Erro ao editar transmissão'),
						text: res.Erro,
						scrollbarPadding: false,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						//location.reload();
					})
				}
			})
		}
	})
}

$('#tabelaTransmissoes > tbody').on('click', '.excluirTransmissao', function(){
	let id = $(this).data('id');
	let idNumero = $(this).data('numero');

	Swal.fire({
	  title: '<span class="text-purple">Excluir ?</span>',
	  html: '<span class="fw-bold">Deseja excluir a transmissão ?</span>',
	  icon: 'question',
	  showCloseButton: true,
	  showCancelButton: true,
	  focusConfirm: false,
	  confirmButtonText: 'Excluir',
	  cancelButtonText: 'Cancelar',
	  scrollbarPadding: false,
	  allowOutsideClick: false,
	  confirmButtonColor: 'var(--bs-danger)',
	  scrollbarPadding: false,
	  didOpen: () => {
		$('.swal2-close').blur()
	  }
	}).then((result) => {
		if(result.isConfirmed){
			Swal.fire({title : 'Excluindo transmissão...', allowOutsideClick: false, scrollbarPadding: false});
			Swal.showLoading();
			
			fetch('excluirTransmissao', {
				method: 'POST',
				headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				body: 'id='+ id + '&id_numeros=' + idNumero
			})
			.then(function(res){ return res.json(); })
			.then(function(res){
				if(res.Success){
					Swal.fire({
						title: res.Success,
						scrollbarPadding: false,
						icon: 'success',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						getTransmissoes();
					})
				}else{
					Swal.fire({
						title: res.Erro,
						scrollbarPadding: false,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						//location.reload();
					})
				}
			})
	
		}
	})
})

$('#tabelaTransmissoes > tbody').on('click', '.encerrarTransmissao', function(){
	let id = $(this).data('id');
	$(this).blur();
	
	Swal.fire({
	  title: '',
	  html: '<span class="text-purple fw-bold">Deseja encerrar a transmissão ?</span>',
	  icon: 'question',
	  showCloseButton: true,
	  showCancelButton: true,
	  cancelButtonText: 'Cancelar',
	  confirmButtonText: 'Encerrar',
	  scrollbarPadding: false,
	  allowOutsideClick: false,
	  confirmButtonColor: '#60b86c',
	  scrollbarPadding: false,
	  didOpen: () => {
		$('.swal2-close').blur()
	  }
	}).then((result) => {
		if(result.isConfirmed){
			Swal.fire({title : 'Encerrando transmissão...', allowOutsideClick: false, scrollbarPadding: false});
			Swal.showLoading();
			
			fetch('encerraTransmissao', {
				method: 'POST',
				headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				body: 'id='+ id
			})
			.then(function(res){ return res.json(); })
			.then(function(res){
				if(res.Success){
					Swal.fire({
						title: res.Success,
						scrollbarPadding: false,
						icon: 'success',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						getTransmissoes();
					})
				}else{
					Swal.fire({
						title: res.Erro,
						scrollbarPadding: false,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						//location.reload();
					})
				}
			})
	
		}
	})
})

$('#tabelaTransmissoes > tbody').on('click', '.iniciaTransmissao, .retomarTransmissao, .reiniciarTransmissao', function(){
	let id = $(this).data('id');
	let enviados = $(this).data('enviados');
	let total = $(this).data('total');
	$(this).blur();
	
	switch(true){
		case ($(this).hasClass('iniciaTransmissao')):
			var action = 'Iniciar';
			break;
		case ($(this).hasClass('retomarTransmissao')):
			var action = 'Retomar';
			break;
		case ($(this).hasClass('reiniciarTransmissao')):
			var action = 'Reiniciar';
			break;
	}
	
	if(enviados == 0 || (enviados == total)){
		enviados = 1;
	}
	
	Swal.fire({
	  title: '',
	  html: '<div class="text-purple fw-bold">Deseja ' + action.toLowerCase() + ' a transmissão ?</div>' +
			'<div class="row mt-4 mx-2">' +
				'<h6>Insira \'Começar em\' para definir de onde a lista partirar (informe 1(um) para iniciar do primeiro contato)</h6>'+
				'<h6>Para definir até qual contato do grupo será enviado a lista informe o campo \'Enviar até\'. Informe o total para enviar para todos da lista.</h6>'+
				'<div class="col-lg-6 col-12 mt-2">' +
					'<h6 class="m-0 fw-bold text-purple text-start">Começar em</h6>' +
					'<input id="inicio_transmissao" placeholder="Inicio" class="form-control border-0 bg-manager-gray" value="'+ enviados +'"/>' +
				'</div>' +
				'<div class="col-lg-6 col-12 mt-2">' +
					'<h6 class="m-0 fw-bold text-purple text-start">Enviar até</h6>' +
					'<input id="final_transmissao" placeholder="Inicio" class="form-control border-0 bg-manager-gray" value="'+ total +'"/>' +
				'</div>' +
			'</div>' +
			'',
	  icon: 'question',
	  showCloseButton: true,
	  showCancelButton: true,
	  cancelButtonText: 'Cancelar',
	  confirmButtonText: action,
	  scrollbarPadding: false,
	  allowOutsideClick: false,
	  confirmButtonColor: '#60b86c',
	  scrollbarPadding: false,
	  didOpen: () => {
		$('.swal2-close').blur()
		$('#inicio_transmissao').mask('000000000000000000000');
		$('#final_transmissao').mask('000000000000000000000');
	  },
	  preConfirm: () => {
		if(Number($('#inicio_transmissao').val()) <= 0){
			Swal.showValidationMessage('\'Começar em\' deve ser no mínimo 1');
			return;
		}
		if(Number($('#final_transmissao').val()) > total){
			Swal.showValidationMessage('Enviar até não pode ser maior que o total de contatos no grupo');
			return;
		}
		if(Number($('#final_transmissao').val()) <= Number($('#inicio_transmissao').val())){
			Swal.showValidationMessage('\'Enviar até\' deve ser maior que \'Começar em\'');
			return;
		}
	  }
	}).then((result) => {
		if(result.isConfirmed){
			//Swal.fire({title : 'Excluindo transmissão...', allowOutsideClick: false, scrollbarPadding: false});
			//Swal.showLoading();
			
			fetch('iniciaTransmissao', {
				method: 'POST',
				headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				body: 'id='+ id + '&inicio=' + $('#inicio_transmissao').val() + '&fim=' + $('#final_transmissao').val()
			})
			.then(function(res){ return res.json(); })
			.then(function(res){
				if(res.Success){
					showProgressTransmissao(res.transmissao)
					
					
					/*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(() =>{
						getTransmissoes();
					})
				}
			})
	
		}
	})
})

function showProgressTransmissao(t){
	//$('.progress-bar').css('width', valeur+'%').attr('aria-valuenow', valeur).html(valeur+'%');

	Swal.fire({
	  title: 'Enviando mensagens',
	  html: 
		'<div class="">' +
			'<h6 class="mb-1 font-weight-bold">A transmissão foi iniciada e será executada em segundo plano, não é necessário manter essa tela aberta.</h6>' +
			'<div class="progress mt-4 mb-2">' +
			  '<div id="progressEnviarMensagens" class="progress-bar progress-bar-success" role="progressbar" style="width: '+ Math.round(t.enviados*100/t.total) +'%;" aria-valuenow="' + t.enviados + '" aria-valuemin="0" aria-valuemax="100">'+ Math.round(t.enviados*100/t.total) +'%</div>' +
			'</div>' +
		'</div>' +
		'',
	  showConfirmButton: true,
	  showCloseButton: false,
	  confirmButtonText: 'Ok',
	  scrollbarPadding: false,
	  allowOutsideClick: false,
	  confirmButtonColor: 'var(--bs-primary)',
	  scrollbarPadding: false,
	  didOpen: () => {
		//Swal.showLoading();
		//$("#progressEnviarMensagens").text(Math.round(t.enviados*100/t.total) + "%").animate({width: Math.round(t.enviados*100/t.total) + "%"}, {queue: true});
		//cancelarTransmissao = false;
		//enviaMensagensTransmissao(t);
		
		progressInterval = setInterval(function() {getStatusTransmissao(t); }, 10000);
		
	 },
	  willClose: () => {
		
	  }
	}).then((result) => {
		getTransmissoes();
		clearInterval(progressInterval);
	})
}


let progressInterval = -1;
function getStatusTransmissao(t){
	fetch('buscarTransmissao', {
		method: 'POST',
		headers: {'Content-Type': 'application/x-www-form-urlencoded'},
		body: 'id='+ t.idTransmissoes
	})
	.then(function(res){ return res.json(); })
	.then(function(res){
		if(res.Success){
			let transmissao = res.transmissao;
			
			$(".progress-bar").text(Math.round(transmissao.enviados*100/transmissao.total) + "%");
			$(".progress-bar").width(Math.round(transmissao.enviados*100/transmissao.total) + "%");

			if (transmissao.enviados < transmissao.total){
				
			}else{
				$('.swal2-cancel').hide();
				$('.swal2-confirm').show();
				
				clearInterval(progressInterval);
			}
		}else{
			Swal.fire({
				title: res.Erro,
				scrollbarPadding: false,
				icon: 'error',
				confirmButtonColor: 'var(--bs-info)',
				scrollbarPadding: false
			}).then(() =>{
				getTransmissoes();
			})
		}
	})
}



/*function enviaMensagensTransmissao(t){
	fetch('enviarMensagensTransmissao', {
		method: 'POST',
		headers: {'Content-Type': 'application/x-www-form-urlencoded'},
		body: 'id='+ t.idTransmissoes
	})
	.then(function(res){ return res.json(); })
	.then(function(res){
		if(res.Success){
			let transmissao = res.transmissao;
			
			$(".progress-bar").text(Math.round(transmissao.enviados*100/transmissao.total) + "%");
			$(".progress-bar").width(Math.round(transmissao.enviados*100/transmissao.total) + "%");
			if (transmissao.enviados < transmissao.total && cancelarTransmissao == false){
				enviaMensagensTransmissao(transmissao);
			}else{
				$('.swal2-cancel').hide()
				$('.swal2-confirm').show()
			}
		}else{
			cancelarTransmissao = true;
			
			Swal.fire({
				title: res.Erro,
				scrollbarPadding: false,
				icon: 'error',
				confirmButtonColor: 'var(--bs-info)',
				scrollbarPadding: false
			}).then(() =>{
				getTransmissoes();
			})
		}
	})
}*/


</script>
<style>
.progress-bar {
    transition: width 1s;
}
<style>
{% endblock %}