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

.swal2-html-container{
	overflow: visible !important;
}
.table-responsive>table .dropdown{position:static;}


.arrow {
    border-style: dashed;
    border-color: transparent;
    border-width: 0.20em;
    display: -moz-inline-box;
    display: inline-block;
    /* Use font-size to control the size of the arrow. */
    font-size: 70px;
	#min-hegth: 37px;
    height: 0;
    line-height: 0;
    position: relative;
    vertical-align: middle;
    width: 0;
    #background-color:#fff; /* change background color acc to bg color */ 
    border-left-width: 0.15em;
    border-left-style: solid;
    #border-left-color: #ff0000;
    #left:0.25em;
}
    
.timeline-event-custom:before {
	border-left-color: inherit !important;
	border-right-color: inherit !important;
}
.timeline-event-custom:after {
	border-left-color: inherit !important;
	border-right-color: inherit !important;
}

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

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

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

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

.daterangepicker .ranges li.active {
	background-color: #60b86c !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: #60b86c !important;
}
.daterangepicker td.in-range {
	background-color: #c2efcb;
	border-color: transparent;
	color: #000;
	border-radius: 0;
}

.theme-primary .btn-primary {
	background-color: #60b86c;
	border-color: #60b86c;
	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;
}
</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 text-purple fw-bold">Histórico Funil</div>
				</h4>
			</div>
		</div>

		<!-- Main content -->
		<section class="content">
			<div class="row">
				<div class="col-12">
					<div class="box">
						<div id="filtros" class="box-header with-border p-3 pb-0" style="animation-duration: 0.05s;">
							<div class="row p-0 mb-2">
								<div class="col-lg-3 col-12">
									<label for="funilFiltro" class="fw-bold text-purple"><i class="fa-solid fa-filter me-1"></i>Funil</label>
									<div class="form-group">
										<select id="funilFiltro" class="col-12 form-control form-control-sm" 
											title="Selecionar funil" 
											data-live-search="true" 
											data-selected-text-format="count > 2" 
											data-count-selected-text= "{0} estagios selecionados" 
											data-actions-box="true" 
											data-deselect-all-text="Desmarcar" autocomplete="off">
											{% for key,fc in funilClientes %}
												<option value="{{fc.idFunilClientes}}" class="" style="letter-spacing: 1px !important;">{{fc.nome}}</option>
											{% endfor %}
										</select>
									</div>
								</div>
								<!--div class="col-lg-3 col-12">
									<label for="estagiosFiltro" class="">Estágio</label>
									<div class="form-group">
										<select id="estagiosFiltro" class="col-12 form-control form-control-sm" 
											title="Estágio" 
											data-live-search="true" 
											data-selected-text-format="count > 2" 
											data-count-selected-text= "{0} estagios selecionados" 
											data-actions-box="true" data-select-all-text="Marcar Todos" 
											data-deselect-all-text="Desmarcar" autocomplete="off" multiple>
											{% for e in estagios %}
												<option value="{{e.idFunilEstagios}}" class="" style="letter-spacing: 1px !important;" data-cor="{{e.cor}}" data-funil="{{e.idFunilClientes.idFunilClientes}}" data-content="<i class='fa fa-circle' style='color: {{e.cor}}'></i> {{e.nome}}">{{e.nome}}</option>
											{%endfor%}
										</select>
									</div>
								</div-->
								<div class="col-lg-3 col-12">
									<label for="statusFiltro" class="fw-bold text-purple"><i class="fa-solid fa-chart-simple me-1"></i>Status</label>
									<div class="form-group">
										<select id="statusFiltro" class="selectpicker col-12 form-control form-control-sm" title="Status" autocomplete="off" multiple>
											<option value="0" class="" style="letter-spacing: 1px !important;">Aberto</option>
											<option value="1" class="" style="letter-spacing: 1px !important;">Concluído</option>
											<option value="2" class="" style="letter-spacing: 1px !important;">Sem conclusão</option>
										</select>
									</div>
								</div>
								
								<div class="col-lg-3 col-12">
									<div class="form-group mb-0">
										<label for="periodoFiltro" class="text-purple fw-bold">Data Inclusão</label>
										<div class="input-group mb-0" style="">
											<div class="input-group-addon bg-manager-gray text-purple 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 bg-manager-gray border-0 form-control-sm pull-right" id="periodoFiltro" style="height: 26.5px;" autocomplete="off">
										</div>
									</div>
								</div>
								
								<div class="col-lg-2 col-12">
									<div class="form-group">
										<label for="contatoFiltro" class="fw-bold text-purple"><i class="fa-solid fa-user me-1"></i>Contato</label>
										<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-lg-1 mb-3 d-flex ">
									<a id="buscarContatos" class="btn btn-circle btn-green-manager2 btn-xs mt-auto"><i class="fa fa-search"></i></a>
								</div>
							</div>
						</div>
						
						
						<div class="box-body no-padding">
							<div class="table-responsive" style="max-height: 66vh; overflow: auto; border-radius: 10px 10px 0 0;">
								<table id="tabelaContatos" class="table table-hover" >
									<thead class="bg-purple sticky-top" style="z-index: 99;">
										<tr>
											<th>#</th>
											<th><i class="fa-solid fa-calendar-days me-1"></i>Data</th>
											<th><i class="fa-solid fa-user me-1"></i>Contato</th>
											<th><i class="fa-solid fa-clock-rotate-left me-1"></i>Histórico</th>
										</tr>
									</thead>
									<tbody>
									</tbody>
								</table>
							</div>
						</div>
					</div>

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




{% endblock %}
{% block scripts %}
<script>
$('body').addClass('sidebar-collapse');

$(document).ready(function() {
	$('#tabelaContatos').parent().scrollTop(0) 
	
	moment.locale('pt-br');
	$('#periodoFiltro').daterangepicker({ 
		startDate: moment().subtract(6, 'days'),
		endDate: moment(),
		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')]
		},
		"maxSpan": {
			"months": 6
		}
	});
	
	$('#funilFiltro').selectpicker();
	$('#funilFiltro').on('change', function(){
		$('#estagiosFiltro').selectpicker('val', '');
		if($('#funilFiltro').selectpicker('val') == -1){
			$('#funilFiltro').selectpicker('val', '')
		}else{
			$('#estagiosFiltro option').hide();
			$('#estagiosFiltro option[data-funil="'+ $('#funilFiltro').selectpicker('val') +'"]').show()
			$('#estagiosFiltro').selectpicker('destroy')
			$('#estagiosFiltro').selectpicker()
		}
	})
	
	$('#estagiosFiltro option').hide()
	$('#estagiosFiltro').selectpicker();
	$('#estagiosFiltro').on('change', function(){
	})
	
	
	initilizeTooltips();
	//getContatos();
})

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


$('#buscarContatos').on('click', function(){
	getContatos();
})

var buscarMaisContatos = false;
var oldScrollLeft = 0;
$('#tabelaContatos').parent().scroll(function(e){
	if(oldScrollLeft != $('#tabelaContatos').parent().scrollLeft()){return;}
	if(buscarMaisContatos){return;}
	if($('#tabelaContatos').parent().scrollTop() + $('#tabelaContatos').parent().height() +1 >= $("#tabelaContatos").parent().get(0).scrollHeight) {
		buscarMaisContatos = true;
		getContatos();
	}
})

var initBuscaContatos = 0;
function getContatos(){
	if($('#funilFiltro').selectpicker('val') == ''){
		Swal.fire({
			title: 'Selecione um funil',
			icon: 'error',
			confirmButtonColor: 'var(--bs-info)',
			scrollbarPadding: false
		})
		return;
	}
	
	let dataInicio = moment($('#periodoFiltro').data('daterangepicker').startDate._d).format('YYYY-MM-DD');
	let dataFinal = moment($('#periodoFiltro').data('daterangepicker').endDate._d).format('YYYY-MM-DD');
	
	Swal.fire({title : 'Buscando histórico...', allowOutsideClick: false, scrollbarPadding: false});
	Swal.showLoading();
	
	initBuscaContatos = (!buscarMaisContatos ? 0 : initBuscaContatos)
	fetch('buscar_funil_historico', {
		method: 'POST',
		headers: {'Content-Type': 'application/x-www-form-urlencoded'},
		body: 'funil=' + $('#funilFiltro').selectpicker('val') +
				'&estagios=' + JSON.stringify($('#estagiosFiltro').selectpicker('val')) +
				'&status=' + JSON.stringify($('#statusFiltro').selectpicker('val')) +
				'&dataInicio=' + dataInicio + '&dataFinal=' + dataFinal +
				'&contato=' + $('#contatoFiltro').val() +
				'&init=' + initBuscaContatos
	})
	.then(function(res){ return res.json(); })
	.then(function(res){
		if(res.Success){
			if(!buscarMaisContatos){$('#tabelaContatos > tbody').empty();}
			let funilContatos = res.funilContatos;
			
			$(funilContatos).each(function(index,fc){
				initBuscaContatos += 1;
				c = fc.idContatos;
				let senderIcon = '<i class="fa-brands fa-whatsapp me-2"></i>';
				switch(c.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;
				}
				
				var historico = fc.historico;
				if(historico.length == 0){
					initBuscaContatos += 1;
				}else{
					initBuscaContatos += historico.length;
				}
				var dataHist = '';
				$(historico).each(function(indexH,h){
					switch(h.estagioAtual){
						case 'Sem conclusão':
							//dataHist = dataHist + '<span class="badge badge-pill badge-danger"><i class="fa fa-xmark"></i></span>';
							dataHist = dataHist + '<div class="d-flex align-items-center justify-content-end histEstagio" style="cursor: pointer;" data-id_funil="'+ fc.idFunilContatos +'" data-id_contato="'+ fc.idContatos.idContatos +'">' +
														'<span class="text-white text-center bg-danger py-1 pe-2 '+ (indexH == 0 ? 'ps-2' : 'ps-15') +'" style="border-radius: 5px; margin-left: '+ (indexH == 0 ? '0px' : '-24px') +';">'+ 
															'<i class="fa fa-xmark" style="text-shadow:1px 1px 2px rgba(0,0,0,0.35);"></i>' +
														'</span>' +
													'</div>';
							break;
						case 'Concluído':
							//dataHist = dataHist + '<span class="badge badge-pill badge-success"><i class="fa fa-circle-check"></i></span>';
							dataHist = dataHist + '<div class="d-flex align-items-center justify-content-end histEstagio" style="cursor: pointer;" data-id_funil="'+ fc.idFunilContatos +'" data-id_contato="'+ fc.idContatos.idContatos +'">' +
														'<span class="text-white text-center bg-success py-1 pe-2 '+ (indexH == 0 ? 'ps-2' : 'ps-15') +'" style="border-radius: 5px; margin-left: '+ (indexH == 0 ? '0px' : '-24px') +';">'+ 
															//'<div class="" style="font-size: 11px;">' + moment(fc.dataConcluido.date).format('DD/MM/YY HH:mm') + '</div>' +
															'<div><i class="fa fa-circle-check" style="text-shadow:1px 1px 2px rgba(0,0,0,0.35);"></i></div>' +
														'</span>' +
													'</div>';
							break;
						default:
							//dataHist = dataHist + '<span class="p-2 text-white" style="background-color:'+ h.estagioCorAtual +';">'+ h.estagioAtual +'</span>';  
							dataHist = dataHist + '<div class="d-flex align-items-center justify-content-end histEstagio" style="cursor: pointer;" data-id_funil="'+ fc.idFunilContatos +'" data-id_contato="'+ fc.idContatos.idContatos +'">' +
														'<span class="text-white text-start py-1 pe-1 '+ (indexH == 0 ? 'ps-2' : 'ps-15') +'" style="border-bottom-left-radius: 5px; border-top-left-radius: 5px; background:'+ h.estagioCorAtual +'; margin-left: '+ (indexH == 0 ? '0px' : '-24px') +'; ">'+ 
															//'<div class="" style="font-size: 11px;">' + moment(h.data.date).format('DD/MM/YY HH:mm') + '</div>' +
															'<div style="text-shadow:1px 1px 2px rgba(0,0,0,0.35);">' + h.estagioAtual + '</div>' +
														'</span>' +
														'<span class="arrow" style="border-left-color:'+ h.estagioCorAtual +'; "></span>' +
													'</div>';
					}
				})
				
				
				$('#tabelaContatos > tbody').append(
					'<tr class="text-muted">' +
						'<td>'+ fc.idFunilContatos +'</td>' +
						'<td>'+ moment(fc.data.date).format('DD/MM/YY') +'</td>' +
						'<td style="white-space: nowrap;">' + senderIcon + (c.nomeExibir == null ? (c.nome == null ? c.numero : c.nome) : c.nomeExibir) +'</td>' +
						'<td class="" style="overflow-x: auto; scrollbar-color: var(--bs-secondary) rgba(0,0,0,0.1);scrollbar-width: thin;">'+ 
							'<div class="d-flex">' + dataHist + '</div>' +
						'</td>' +
					'</tr>'
				)
			})
			
			initilizeTooltips();
			Swal.close();
			
			buscarMaisContatos = false;
		}else{
			Swal.fire({
				title: res.Erro,
				scrollbarPadding: false,
				icon: 'error',
				confirmButtonColor: 'var(--bs-info)',
				scrollbarPadding: false
			}).then(() =>{
				//location.reload();
			})
		}
	})
}


$('#tabelaContatos > tbody').on('click', '.histEstagio', function(){
	let idFunilContatos = $(this).data('id_funil');
	let idContato = $(this).data('id_contato');
	
	Swal.fire({title : 'Buscando histórico...', allowOutsideClick: false, scrollbarPadding: false});
	Swal.showLoading();
	
	var formData = new FormData();
	formData.append('idFunil', idFunilContatos);
	formData.append('idContato', idContato);
	
	fetch('funilContato', {
		method: 'POST',
		body: formData
	})
	.then(function(res){ return res.json(); })
	.then(function(res){
		if(res.Success){
			var funilContato = res.funilContato;
			var arrTimeline = funilContato.interacoes;
			var estagios = funilContato.estagios;
			var atendentes = funilContato.atendentes;
			arrTimeline = arrTimeline.concat(funilContato.historico);
			arrTimeline.sort(arrSort('data'))
			
			var ultimoDia = null;
			var timeline = '';
			$(arrTimeline).each(function(index,hist){
				if(ultimoDia == null){
					ultimoDia = moment(hist.data.date).format('YYYY-MM-DD');
					
					timeline = timeline + '<span class="timeline-label">' +
												'<span class="badge badge-pill badge-primary badge-sm">'+ moment(hist.data.date).format('DD/MM/YYYY') +'</span>' +
											'</span>';
				}else{
					if(ultimoDia != moment(hist.data.date).format('YYYY-MM-DD')){
						ultimoDia = moment(hist.data.date).format('YYYY-MM-DD');
						timeline = timeline + '<span class="timeline-label">' +
												'<span class="badge badge-pill badge-primary badge-sm">'+ moment(hist.data.date).format('DD/MM/YYYY') +'</span>' +
											'</span>';
					}
				}
				
				
				var atendente = 'Administrador';
				if(hist.idAtendente != null){
					$(arrTimeline).each(function(indexA,a){
						if(a.idAtendentes == hist.idAtendente){
							atendente = a.nomeAtendente;
						}
					})
				}
				
				if(hist.idFunilHistorico){
					var estagioCor = '';
					var alteracao = '';
					switch(true){
						case (hist.estagioAnterior == null):
							alteracao = 'Inclusão no funil estágio: '+ hist.estagioAtual;
							estagioCor = hist.estagioCorAtual;
							break;
						case (hist.estagioAnterior != null && hist.estagioAtual != null && hist.estagioAtual != 'Concluído' && hist.estagioAtual != 'Sem conclusão'):	
							alteracao = 'Alterado de \''+ hist.estagioAnterior +'\' para \''+ hist.estagioAtual +'\'';
							estagioCor = hist.estagioCorAtual;
							break;
						case (true):
							alteracao = 'Encerrado com status: ' + hist.estagioAtual;
							if(hist.estagioAtual == 'Concluído'){
								estagioCor = 'var(--bs-success)';
							}else{
								estagioCor = 'var(--bs-danger)';
							}
							break;
					}
					
					timeline = timeline + '<div class="timeline-item" style="border-right-color:'+ estagioCor +';border-left-color:'+ estagioCor +';text-shadow:1px 1px 2px rgba(0,0,0,0.35);">' +
												'<div class="timeline-point d-flex align-items-center justify-content-center shadow" style="color: '+ estagioCor +';">' +
													'<i class="fa fa-circle fa-sm" style="color: '+ estagioCor +';"></i>' +
												'</div>' +
												'<div class="timeline-event timeline-event-custom float-end text-white shadow" style="background:'+ estagioCor +';border-color:'+ estagioCor +';">' +
													'<div class="timeline-heading text-start">' +
														'<h5 class="timeline-title"><i class="fa fa-headset"></i> ' +
															atendente +
														'</h5>' +
													'</div>' +
													'<div class="timeline-body text-start">' +
														alteracao +
													'</div>' +
													'<div class="timeline-footer text-end">' +
														'<text class="" style="font-size: 12px;">'+ moment(hist.data.date).format('DD/MM/YYYY HH:mm') +'</text>' +
													'</div>' +
												'</div>' +
											'</div>';
				}
				if(hist.idFunilInteracoes){
					timeline = timeline + '<div class="timeline-item" style="">' +
												'<div class="timeline-point d-flex align-items-center justify-content-center shadow">' +
													'<i class="fa fa-comment-dots fa-sm"></i>' +
												'</div>' +
												'<div class="timeline-event timeline-event-default shadow">' +
													'<div class="timeline-heading text-start">' +
														'<h5 class="timeline-title"><i class="fa fa-headset"></i> ' +
															atendente +
														'</h5>' +
													'</div>' +
													'<div class="timeline-body text-start">' +
														'<p><b>Canal: </b>'+ hist.canalComunicacao +'</p>' +
														'<p><b>Resumo: </b>'+ hist.resumo +'</p>' +
														'<p><b>Resultado: </b>'+ hist.resultado +'</p>' +
														(hist.Observacao ? '<p><b>Observação: </b>'+ hist.Observacao +'</p>' : '') +
													'</div>' +
													'<div class="timeline-footer text-end">' +
														'<text class="" style="font-size: 12px;">'+ moment(hist.data.date).format('DD/MM/YYYY HH:mm') +'</text>' +
													'</div>' +
												'</div>' +
											'</div>';
					}
			})
			
			
			var lastStatus = '';
			switch(true){
				case funilContato.status == 0:
					lastStatus = '<span class="timeline-label">' +
									'<button class="btn btn-secondary btn-circle shadow"><i class="fa fa-arrow-down"></i></button>' +
								'</span>';
					break;
				case funilContato.status == 1:
					lastStatus = '<span class="timeline-label">' +
									'<button class="btn btn-success btn-circle shadow"><i class="fa fa-check"></i></button>' +
								'</span>';
					break;
				case funilContato.status == 2:
					lastStatus = '<span class="timeline-label">' +
									'<button class="btn btn-danger btn-circle shadow"><i class="fa fa-xmark"></i></button>' +
								'</span>';
					break;
			}
			
			let width = '100vw';
			if($(window).width() > 990){width = ($(window).width()/1.8);}
			
			Swal.fire({
				width: width,
				html: '' +
					'<div class="timeline p-2" style="">' +
						timeline +
						lastStatus +
					'</div>' +
					''
				,
				showConfirmButton: false,
				allowOutsideClick: false,
				showCloseButton: true,
				scrollbarPadding: false,
				didOpen: () => {
					$('.swal2-close').blur();
				},
			})
			
		}else{
			Swal.fire({
				title: res.Erro,
				icon: 'error',
				confirmButtonColor: 'var(--bs-info)',
				scrollbarPadding: false
			}).then(() =>{
				//location.reload();
			})
		}
	})
})


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