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

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
.bootstrap-select .dropdown-toggle{
	max-height: 30px;
}
.fc-day{
	background: transparent;
}
.fc-scrollgrid{
	border-radius: 5px;
	overflow: hidden;
}
.fc-highlight {
	background: color-mix(in srgb,var(--bs-warning),#fff 90%) !important;
}
.fc-event{
	border-radius: 5px;
	cursor: pointer;
	#display: flex;
}
.fc-daygrid-event-dot{
	display: none;
}
.fc .fc-daygrid-day.fc-day-today {
	background-color: color-mix(in srgb,var(--bs-primary),#fff 90%) !important;
}
.fc .fc-timegrid-col.fc-day-today {
	background-color: color-mix(in srgb,var(--bs-primary),#fff 90%) !important;
}
.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number{
	color: var(--bs-primary);
}
.fc-daygrid-day-number{
	font-weight: 600;
}
.fc a[data-navlink]:hover {
	text-decoration: none;
}

.input-group-addon {
	border: none !important;
}
.btn-light {
	background-color: #e3e3e3;
	border: none;
	color: #000000;
}
.wrapper .border-light {
	border: none;
}

.fc-daygrid-day {
    background-color: #f0f0f0;
}

.fc-event-title {
    font-weight: bold;
    font-size: 14px;
}

.fc-toolbar {
    background-color: #343a40;
    color: white;
}

.fc-toolbar button {
    color: white;
    border: none;
    background-color: #007bff;
    border-radius: 3px;
}

.fc-col-header-cell {
    background-color: #585EA8;
	text-transform: capitalize;
}

.fc-scrollgrid-sync-inner > a{
	color: #ffffff!important;
}

.fc .fc-daygrid-day.fc-day-today {
    background-color: #c2efcb!important;
	color: #60b86c!important;
}

.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
    color: #60b86c!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">
	<div class="container-full ">
		<!-- Content Header (Page header) -->
		<div class="content-header">
			<div class="d-flex flex-lg-nowrap flex-wrap">
				<div class="">
					<h4 class="page-title d-flex align-items-center pe-0 ">
						<div class="text-start" style="min-width: 200px;">
							<h6 for="selectFunilClientes" class="mb-1 fw-bold text-purple" style="">Selecionar Funil</h6>
							<select id="selectFunilClientes" class="form-control form-control-sm b-1" title="Todos" autocomplete="off" data-live-search="true" data-selected-text-format="count > 2" data-count-selected-text= "{0} funis selecionados" data-actions-box="true" multiple>
								{%for key,fc in funilClientes%}
									<option value="{{fc.idFunilClientes}}" data-departamento="{{fc.idDepartamento.idDepartamentos}}" data-atendente="{{fc.idAtendente.idAtendentes}}">{{fc.nome}}</option>
								{%endfor%}
							</select>
						</div>
						
						<!--div class="text-start ms-2">
							<a id="atualizarFunis" class="btn btn-primary btn-sm mt-4"><i class="fa fa-rotate"></i></a>
						</div-->
					</h4>
				</div>
				<div id="calendarTitle" class="row ms-lg-2 mt-lg-0 mt-2 w-p100 ">
					<div class="col-lg-3 col-5">
						<div class="text-start" style="">
							<h6 for="" class="mb-1 fw-bold text-purple" style="">Navegar</h6>
							<a class="btn btn-green-manager btn-sm" onclick="calendar.prev()" data-bs-toggle="tooltip" data-bs-original-title="Anterior"><i class="fa fa-chevron-left"></i></a>
							<a class="btn btn-green-manager fw-bold btn-sm" onclick="calendar.today()">Hoje</a>
							<a class="btn btn-green-manager btn-sm" onclick="calendar.next()" data-bs-toggle="tooltip" data-bs-original-title="Próximo"><i class="fa fa-chevron-right"></i></a>
						</div>
					</div>
					<div class="col-lg-5 col-7 d-flex align-items-end justify-content-lg-center justify-content-end">
						<h3 id="calendarCurrentDate" class="m-0 text-capitalize text-purple fw-bold" style=""></h3>
					</div>
					<div class="col-lg-4 col-12 ">
						<div class="text-end" style="">
							<h6 for="" class="mb-1 fw-bold text-purple" style="">Exibir</h6>
							<a id="btnChangeViewDay" class="btn btn-secondary btn-sm btnChangeView" onclick="calendar.changeView('timeGridOneDay')"><i class="fa fa-calendar-day me-2"></i>Dia</a>
							<a id="btnChangeViewWeek" class="btn btn-secondary btn-sm btnChangeView" onclick="calendar.changeView('timeGridWeek')"><i class="fa fa-calendar-week me-2"></i>Semana</a>
							<a id="btnChangeViewMonth" class="btn btn-purple-manager btn-sm btnChangeView" onclick="calendar.changeView('dayGridMonth')"> <i class="fa fa-calendar-days me-2"></i>Mês</a>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- Main content -->
		<section class="content pt-2">
			<div class="row">
				<div class="col-12">
					<div id="calendar" class="bg-white noselect" style="border-radius: 5px; overflow: hidden; width: 100%;"></div>
				</div>
			</div>
		</section>
		<!-- /.content -->
	</div>
</div>



<style>
</style>
{% endblock %}
{% block scripts %}

<script>

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

$('.btnChangeView').on('click', function(){
	$('.btnChangeView').removeClass('btn-purple-manager');
	$('.btnChangeView').addClass('btn-secondary');
	
	$(this).addClass('btn-purple-manager')
	$(this).removeClass('btn-secondary')
})


var calendar;
$(document).ready(function() {
	$('body').addClass('sidebar-collapse');
	
	$('.main-sidebar').on('transitionend webkitTransitionEnd oTransitionEnd', function () {
		if(calendar){
			calendar.render();
		}
	});
	
	
	$('#selectFunilClientes').selectpicker({deselectAllText: 'Desmarcar todos'});
	$('#selectFunilClientes').parent().find('button').removeClass('btn-light');
	$('#selectFunilClientes').parent().find('button').addClass('bg-white text-dark');
	$('#selectFunilClientes').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');
	});
	
	
	var calendarEl = document.getElementById('calendar');
	calendar = new FullCalendar.Calendar(calendarEl, {
		/*headerToolbar: {
			left: 'prev,next today',
			center: 'title',
			right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
		},*/
		datesSet: function (info) {
			
			$('#calendarCurrentDate').text(calendar.getCurrentData().viewTitle);
		},
		dayHeaderFormat: {
			weekday: 'long'
		},
		 views: {
			timeGridOneDay: {
				type: 'timeGrid',
				dayCount: 1
			}
		},
		//themeSystem: 'bootstrap',
		locale: 'pt-BR',
		displayEventTime: true,
		buttonIcons: true, // show the prev/next text
		weekNumbers: false,
		navLinks: true, // can click day/week names to navigate views
		editable: false,
		dayMaxEvents: true, // allow "more" link when too many events
		selectable: false,
		longPressDelay: 0,
		headerToolbar: false,
		eventsSet: function (events) {
			/*$(events).each(function(i, e){
				var el = $('.fc-event[data-id='+ e.id +']');
				$(el).find('.fc-event-title').empty();
				$(el).find('.fc-event-title').html('<i class="fa fa-plus"></i>' + e.title);
			})*/
		},
		eventDidMount: function(info, a){
			$(info.el).css('background', info.event.extendedProps.cor);
			$(info.el).attr('data-id', info.event.id);
			$(info.el).attr('data-idcontato', info.event.extendedProps.idContato);
			
			var el = $('.fc-event[data-id='+ info.event.id +']');
			$(el).find('.fc-event-title').empty();
			$(el).find('.fc-event-title').html(info.event.extendedProps.htmltitle);
			$(el).find('.fc-event-title').addClass('ms-1');
		},
		eventTimeFormat: { // like '14:30:00'
			hour: '2-digit',
			minute: '2-digit',
			//second: '2-digit',
			meridiem: false
		},
		navLinkDayClick: function(date, jsEvent) {
			$('.btnChangeView').removeClass('btn-primary');
			$('.btnChangeView').addClass('btn-secondary');
			$('#btnChangeViewDay').addClass('btn-primary');
			$('#btnChangeViewDay').removeClass('btn-secondary');
			calendar.changeView('timeGridOneDay', date);
		},
		eventClick: function(info){
			var idFunilContatos = $(info.el).data('id');
			var idContato = $(info.el).data('idcontato');
			
			showModalFunilContato(idFunilContatos, idContato);
		},
		eventChange: function(info){
			console.log(info);
		}
		//events: 'https://fullcalendar.io/api/demo-feeds/events.json?overload-day&start=2023-07-30T00%3A00%3A00-03%3A00&end=2023-09-10T00%3A00%3A00-03%3A00'
    });

    
	
	buscarContatosEstagios();
	resizeBox();
})

$('#selectFunilClientes').on('change', function(){
	calendar.removeAllEvents() 
	buscarContatosEstagios();
})

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

function resizeBox(){
	var height = $(window).height() -($('.content-header').position().top +$('.content-header').height() +$('.main-header').height() -40) + 'px';
	calendar.setOption('height', height);
}







function buscarContatosEstagios(idEstagio = null, init = 0){
	Swal.fire({title : 'Buscando contatos...', allowOutsideClick: false, scrollbarPadding: false});
	Swal.showLoading();
	
	var formData = new FormData();
	(idEstagio == null ? '' : formData.append('idEstagio', idEstagio));
	formData.append('idFunilClientes', $('#selectFunilClientes').selectpicker('val'));
	formData.append('ordem', 'PRIORIDADE:DESC');
	formData.append('init', init);
	
	fetch('buscarContatosEstagios', {
		method: 'POST',
		//headers: {'Content-Type': 'application/x-www-form-urlencoded'},
		body: formData
	})
	.then(function(res){ return res.json(); })
	.then(function(res){
		if(res.Success){
			var estagioContatos = res.estagioContatos;
			$(estagioContatos).each(function(iEc, estagio){
				var contatos = estagio.contatos;
				$(contatos).each(function(iC, c){
					let nome = (c.idContatos.nomeExibir == null ? c.idContatos.nome : c.idContatos.nomeExibir);
					if(nome == null){
						nome = c.idContatos.numero;
					}
					
					var senderIcon = '';
					switch(c.idContatos.sender){
						case 'venom':
						case 'whatsapp':
						case null:
							senderIcon = '<i class="fa-brands fa-whatsapp fa-sm ms-1"></i>';
							break;
						case 'facebook':
							senderIcon = '<i class="fa-brands fa-facebook-messenger fa-sm ms-1"></i>';
							break;
						case 'instagram':
							senderIcon = '<i class="fa-brands fa-instagram fa-sm ms-1"></i>';
							break;
					}
					
					var prioridadeIcon = '';
					var prioridadeColor = '';
					switch(c.prioridade){
						case 0:
							//prioridadeColor = 'border-dark';
							//prioridadeIcon = '<i class="fa fa-circle-exclamation text-dark fa-sm me-1" data-bs-toggle="tooltip" data-bs-original-title="Sem Prioridade"></i>';
							break;
						case 1:
							prioridadeColor = 'border-primary';
							prioridadeIcon = '<i class="fa fa-circle-exclamation text-white fa-sm me-1" data-bs-toggle="tooltip" data-bs-original-title="Prioridade Baixa"></i>';
							break;
						case 2:
							prioridadeColor = 'border-info';
							prioridadeIcon = '<i class="fa fa-circle-exclamation text-white fa-sm me-1" data-bs-toggle="tooltip" data-bs-original-title="Prioridade Normal"></i>';
							break;
						case 3:
							prioridadeColor = 'border-warning';
							prioridadeIcon = '<i class="fa fa-circle-exclamation text-white fa-sm me-1" data-bs-toggle="tooltip" data-bs-original-title="Prioridade Moderada"></i>';
							break;
						case 4:
							prioridadeColor = 'border-danger';
							prioridadeIcon = '<i class="fa fa-circle-exclamation text-white fa-sm me-1" data-bs-toggle="tooltip" data-bs-original-title="Prioridade Alta"></i>';
							break;
					}
					
					if(calendar.getEventById(c.idFunilContatos) != null){
						calendar.getEventById(c.idFunilContatos).remove();
					}
					if(c.dataProximaInteracao != null){
						var res = calendar.addEvent({
											title: '',
											start:moment(c.dataProximaInteracao.date).format("YYYY-MM-DD HH:mm"),
											backgroundColor:'transparent',
											id:c.idFunilContatos,
											classNames: [prioridadeColor, 'text-start'],
											cor: estagio.cor,
											htmltitle: prioridadeIcon + nome,
											idContato: c.idContatos.idContatos,
										});
						
					}
				})
				
				
			})
			calendar.render();
			
			
			buscarMaisContatos = false;
			initializeTooltips();
			Swal.close();
		}else{
			Swal.fire({
				title: 'Erro ao buscar contatos',
				text: res.Erro,
				icon: 'error',
				confirmButtonColor: 'var(--bs-info)',
				scrollbarPadding: false
			})
			buscarMaisContatos = false;
		}
	})
}






/***************************************** FUNIL CONTATOS ******************************************/
{% include 'cliente/funil.js' %}
{% include 'cliente/agendamento.js' %}
/***************************************** FUNIL CONTATOS ******************************************/





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

function arrSort(key) {
	return function(a,b){
		return moment(b[key].date) - moment(a[key].date);
	}
}
</script>
<script src="assets/vendor_components/fullcalendar/fullcalendar.min.js"></script>
<script src="assets/vendor_components/fullcalendar/locales-all.min.js"></script>
{% endblock %}