@extends('BaseSistemaWeb')

@section('CSS')
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.min.css">
<style>
	.webui-popover{
		background-color: #fff;
		color: #000;
	}
	.webui-popover-title{
		background-color: #555 !important;
		color: #fff;
		border-bottom: unset;
	}
	.mdAvatar .modal-dialog .modal-content .modal-header {
		background-color: #363B3F;
	}
	.webui-popover.top>.webui-arrow:after{
		border-top-color: #fff;
	}
	.fc-bgevent{
		cursor: pointer;
		opacity: unset;
	}
	.fc-day-grid-event{
		background-color: #5bc0de;
		height: 65px;
		max-height: 65px;
		display: flex;
		align-items: center;
		color: #fff;
		font-weight: bold;
		padding-left: 5px;
	}
	.fc-event-container a:hover, a:focus:not(a.tooltips:focus){
		color: #fff !important;
	}
	.fc-title{
		text-wrap: balance;
	}
	#calendario {
		padding: 15px;
	}
	h3{
		font-size: 18px;
	}
	#calendly-embed{
		display: flex;
		align-items: center;
	}
	.porlets-content.col-12 {
		background: #fff;
		border-radius: 5px;
		min-width:320px;
	}
	@media screen and (max-width: 1924px){
		.porlets-content.col-12{
			height: 681px;
		}
	}
	@media screen and (max-width: 1561px){
		.porlets-content.col-12{
			height: 659px;
		}
	}
	@media screen and (max-width: 450px){
		.fc-day-grid-event{
			font-size: 9px;
		}
	}
</style>
@stop

@section('Contenido')
<div class="row">
	<div class="col-md-12">
		<h2><i class="fa fa-question-circle"></i> Soporte Plus (Videollamadas de soporte)</h2>
	</div>
</div>
<div class="row main-container">
	<div class="col-md-5">
		<div class="block-web">
			<div class="header load">
				<h3>
					Fechas disponibles
					<div class="button-group pull-right" data-toggle="buttons">
						<a class="refresh tooltips" data-toggle="tooltip" href="#" data-original-title="Recargar" onclick="cargarIframe(); actualizarEventos();" style="color: rgba(0, 0, 0, 0.3);"> <i class="fa fa-repeat"></i></a>
					</div>
				</h3>
			</div>
			<div class="porlets-content col-12" style="">
				<div id="calendly-embed" style="min-width:320px;height:660px;"></div>
			</div>
		</div>
	</div>
	<div class="col-md-7">
		<div class="block-web">
			<div class="header">
				<h3>
					Videollamadas de soporte agendadas
					<div class="button-group pull-right" data-toggle="buttons">
						<a class="refresh tooltips" data-toggle="tooltip" href="#" data-original-title="Recargar" onclick="actualizarEventos();" style="color: rgba(0, 0, 0, 0.3);"> <i class="fa fa-repeat"></i></a>
					</div>
				</h3>
			</div>
			<div>
				<div id="calendario" style="border-radius: 8px"></div>
			</div>
		</div>
	</div>
</div>
<div class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content mdAvatar">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h4 class="modal-title alert alert-warning">Modal title</h4>
			</div>
			<div class="modal-body">
				<h2>Contenido Modal</h2>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Btn modal</button>
				<button type="button" class="btn btn-primary">Btn modal 2</button>
			</div>
		</div>
	</div>
</div>
<form id="eliminarEvento" style="display: none;">\
	<button type="submit" class="btn btn-block btn-danger">Eliminar evento</button>\
	<input type="hidden" name="idEvento" id="id_hidden">\
</form>
@stop

@section('JS')
{{ HTML::script('DataTables/jquery.dataTables.min.js') }}
{{ HTML::script('DataTables/dataTables.bootstrap.min.js') }}
{{ HTML::script('DataTables/dataTables.responsive.min.js') }}
{{ HTML::script('jquery-browser-plugin/jquery.browser.min.js') }}
<script src="{{ asset('isLoading-jQuery/jquery.isloading.min.js') }}"></script>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.25/moment-timezone.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/gcal.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/locale-all.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsurl/2.2.0/url.min.js"></script>
<script>
	function cargarIframe(){
		$("#calendly-embed").html("");
		Calendly.initInlineWidget({
			url: "https://calendly.com/sumeclientes/soporte-sume?hide_landing_page_details=1&hide_event_type_details=1&hide_gdpr_banner=1",
			parentElement: document.getElementById("calendly-embed"),
			prefill: {
				name: null,
				email: null,
			},
			utm: {},
			resize: false,
		});
	}
	function isCalendlyEvent(e) {
		return e.origin === "https://calendly.com" && e.data.event && e.data.event.indexOf("calendly.") === 0;
	};
	window.addEventListener("message", function(e) {
		let fechaInicio = null;
		let fechaFin = null;
		if(isCalendlyEvent(e)) {
			var mensaje = "<div class='row'> \
					<div class='col-xs-12'> \
						<form> \
							<h4>Por favor, asegurate de: </h4> \
							<ul> \
								<li>No modificar los campos de nombre y correo electrónico</li> \
								<li>No haber seleccionado una fecha en la que ya tenías programada una videollamada</li> \
							</ul> \
							<h4>Si no consideraste esos puntos tu videollamada será cancelada automáticamente</h4> \
						</form> \
					</div> \
				</div>";
			var mensajeValEmail = "<div class='row'> \
				<div class='col-xs-12'> \
					<form> \
						<h4 class='alert alert-warning'>La videollamada fue cancelado porque el correo utilizado no coincide con el correo asociado a tu cuenta, por favor vuelve a agendar tu videollamada sin alterar el correo electronico, puedes agendar otra videollamada y asegurate de no cambiar el correo electrónico.</h4> \
					</form> \
				</div> \
			</div>";
			var mensajeValFecha = "<div class='row'> \
				<div class='col-xs-12'> \
					<form> \
						<h4 class='alert alert-warning'>La videollamada fue cancelada porque solo puedes agendar una videollamada por día, puedes agendar otra videollamada seleccionando una fecha diferente o cancelando la que ya tienes y agendando nuevamente en el horario disponible de tu conveniencia.</h4> \
					</form> \
				</div> \
			</div>";
			var mensajeValFechaPlan = "<div class='row'> \
				<div class='col-xs-12'> \
						<h4>La videollamada ha sido cancelada porque la fecha seleccionada se encuentra fuera del periodo correspondiente al mes actual:</h4> \
						<ul> \
							<li style='font-size: 16px;'>"+formatearFecha(fechaInicio, "UTC", false, "numeric")+" a "+formatearFecha(fechaFin, "UTC", false, "numeric")+"</li> \
						</ul> \
						<h4>Por favor, asegurate de agendar dentro de este periodo.</h4> \
				</div> \
			</div>";
			if(e.data.event == "calendly.date_and_time_selected"){
				BootstrapDialog.show({
					title: "¡Importante!",
					message: mensaje,
					cssClass: "mdAvatar",
					buttons: [{
						label: "Aceptar",
						cssClass: "btn-success btn-block btn-lg",
						action: function(dialogRef){
							dialogRef.close();
						}
					}]
				});
			}
			if(e.data.event == "calendly.event_type_viewed"){
				$.isLoading("hide"); NProgress.done();
				if(isMobileDevice()){
					$(".fc-day-grid-event").css("font-size", "9px");
				}
			}
			if (e.data.event == "calendly.event_scheduled") {
				$.isLoading({ text: "Cargando..." });
				NProgress.start();
				let correoCliente = null;
				$.post(
					"{{route('SysWebSoporteAgendarLlamadaCalendly')}}",
					{
						idEvento: e.data.payload.invitee.uri,
						accion: "datosAgendo"
					},
					function(data) {
						if (data.success) {
							let emailRegistro = data.data.resource.email;
							let codigoEvento = data.data.resource.event.replace("https://api.calendly.com/scheduled_events/", "");
							if (emailRegistro !== correoCliente) {
								setTimeout(cancelarEvento, 1500, codigoEvento);
								setTimeout($.isLoading("hide"), 1500);
								NProgress.done();
								BootstrapDialog.show({
									title: "Llamada Cancelada",
									message: mensajeValEmail,
									cssClass: "ModalEliminar",
									type: BootstrapDialog.TYPE_DANGER,
									buttons: [{
										label: "Aceptar",
										cssClass: "btn-danger btn-block btn-lg",
										action: function(dialogRef) {
											dialogRef.close();
										}
									}]
								});
							}
							else {
								revisarFechas(codigoEvento, function(wasEventDeleted) {
									if (wasEventDeleted) {
										BootstrapDialog.show({
											title: "Llamada Cancelada",
											message: mensajeValFecha,
											cssClass: "ModalEliminar",
											type: BootstrapDialog.TYPE_DANGER,
											buttons: [{
												label: "Aceptar",
												cssClass: "btn-danger btn-block btn-lg",
												action: function(dialogRef) {
													dialogRef.close();
												}
											}]
										});
										return;
									}
									else {
										new PNotify({ title: "Realizado", text: "Llamada agendada con exito", type: "success" });
										actualizarEventos();
									}
								});
							}
						}
						else {
							new PNotify({ title: "Error", text: "Ocurrió un problema obteniendo los datos del evento", type: "error" });
							console.error(data);
						}
					},
					"json"
				);
			}
		}
	});
	function revisarFechas(codigoEvento, callback) {
		$.get(
			"{{route('SysWebSoporteObtenerTodosEventosCalendly')}}",
			function(data) {
				let uniqueDates = new Set();
				let repeatedDates = new Set();
				data.forEach(evento => {
					let dateOnly = evento.fechaYHora.split("T")[0];
					if (uniqueDates.has(dateOnly)) {
						repeatedDates.add(dateOnly);
					} else {
						uniqueDates.add(dateOnly);
					}
				});
				let wasEventDeleted = false;
				if(repeatedDates.size > 0){
					setTimeout(cancelarEvento, 1500, codigoEvento);
					wasEventDeleted = true;
				}
				if (callback) callback(wasEventDeleted);
			},
			"json"
		);
	}
	function formatearFecha(fecha, timeZone = "local", hourMinute = true, year = false){
		const dateString = fecha;
		const date = new Date(dateString);
		const options = {
				year: year === false ? undefined : year,
				weekday: "long",
				day: "numeric",
				month: "long",
				hour: hourMinute === true ? "2-digit" : undefined,
				minute: hourMinute === true ? "2-digit" : undefined,
				hour12: false,
				timeZone: timeZone === "local" ? undefined : timeZone
			};
		const formatter = new Intl.DateTimeFormat("es-ES", options);
		const formattedDate = formatter.format(date);
		return formattedDate;
	}
	function fechaYhoraActual(){
		let now = new Date();
		return now;
	}
	function eliminarEvento(idEvento){
		BootstrapDialog.show({
			title: "Eliminar videollamada",
			message: "¿Estas seguro que deseas eliminar este evento?",
			cssClass: "ModalEliminar",
			type: BootstrapDialog.TYPE_DANGER,
			draggable: true,
			buttons: [{
				label: "Si, eliminar",
				cssClass: "btn-danger btn-block btn-lg",
				action: function(dialogRef){
					$("#btnEliminar").prop("disabled", true).html('<i class="fa fa-spinner fa-spin"></i> Eliminando');
					cancelarEvento(idEvento);
					dialogRef.close();
				}
			}]
		});
	}
	function cancelarEvento(idEvento){
		$.post(
			"{{route('SysWebSoporteAgendarLlamadaCalendly')}}",
			{
				idEvento: idEvento,
				accion: "eliminar"
			},
			function(data){
				$.isLoading({ text: "Cargando..." });
				if(data.success){
					$(".main-container").trigger("click");
					actualizarEventos();
					new PNotify({ title: "Realizado", text: "Se canceló un evento", type: "success" });
				}
				else{
					new PNotify({ title: "Error", text: "ocurrio un problema eliminando el evento", type: "error" });
				}
				$.isLoading("hide"); NProgress.done();
			},
			"json"
		);
	}
	function actualizarEventos(){
		$.get(
			"{{route('SysWebSoporteObtenerEventos')}}",
			function(data){
				eventosDelUsuario = [];
				let fechaInicio = null;
				let fechaFin = null;
				data.forEach(evento => {
					if (evento.fechaYHora >= fechaInicio && evento.fechaYHora <= fechaFin) {
						eventosDelUsuario.push({
							start: evento.fechaYHora,
							overlap: false,
							title: evento.evento,
							allDay: true,
							url: "#",
							color: "#0060d4",
							link: evento.rutaDeAceeso,
							uuid: evento.uuid
						});
					}
				});
				$("#calendario").fullCalendar("removeEvents");
				$("#calendario").fullCalendar("addEventSource", eventosDelUsuario);
				$.isLoading("hide"); NProgress.done();
			},
			"json"
		);
	}
	window.isMobileDevice = function() {
    let check = false;
        (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
        return check;
    };
	function goToVideoCall(link){
		if(isMobileDevice()){
			BootstrapDialog.show({
				title: "Opción no disponible",
				message: "Para poder ingresar a la videollamada debes hacerlo desde una computadora, ya que el objetivo de estas videollamadas es que tu compartas la pantalla para poder solventar tus dudas y reducir tu curva de aprendizaje.",
				cssClass: "mdAvatar",
				draggable: true,
				buttons: [{
					label: "Aceptar",
					cssClass: "btn-success btn-block btn-lg",
					action: function(dialogRef){
						dialogRef.close();
					}
				}]
			});
			$(".modal-header").trigger("click");
		}
		else{
			window.open(link, "_blank");
		}
	}
	function isToday(dateString) {
		const inputDate = new Date(dateString);
		const today = new Date();
		return inputDate.getFullYear() === today.getFullYear() &&
			inputDate.getMonth() === today.getMonth() &&
			inputDate.getDate() === today.getDate();
	}
	function isPast8AMInElSalvador() {
		const now = new Date();
		const options = { timeZone: 'America/El_Salvador', hour: '2-digit', hour12: false };
		const formatter = new Intl.DateTimeFormat('en-US', options);
		const hourInElSalvador = parseInt(formatter.format(now), 10);
		return hourInElSalvador >= 8;
	}
</script>
@stop

@section('JSOr')
let eventosDelUsuario = [] ;
let fechaInicioPlan = null;
let fechaFinPlan = null;
$.isLoading({ text: "Cargando..." });
cargarIframe();
$("#calendario").fullCalendar({
	height: 650,
	width: 550,
	themeSystem: "bootstrap3",
	defaultView: "month",
	locale: "es",
	weekends: false,
	header: {
		left: "prev,next today",
		center: "title",
		right: "month"
	},
	validRange: {
		start: fechaInicioPlan,
		end: fechaFinPlan
	},
	events: eventosDelUsuario,
	timeFormat: "h(:mm)t",
	eventRender: function(eventObj, $el) {
		let eventFinishTime = new Date(eventObj.start._i);
		eventFinishTime.setMinutes(eventFinishTime.getMinutes() + 30);
		let contenido = `<h5 style="color: #000; font-weight: 500;">${formatearFecha(eventObj.start._i)}</h5>\
			<a class="btn btn-block btn-success" style="margin-top: 10px;" onclick="goToVideoCall('${eventObj.link}')" target="_blank">Ir a la llamada</a>\
			<button id="btnEliminar" class="btn btn-block btn-danger" onclick="eliminarEvento('${eventObj.uuid}');">Eliminar llamada</button>`;
		let contenido2 = "<h5 style='color: #000; font-weight: 500;'>Este evento ya finalizó, puedes solicitar la grabación por medio del chat de soporte.</h5>";
		if(isPast8AMInElSalvador() && isToday(eventObj.start._i)){
			contenido = `<h5 style="color: #000; font-weight: 500;">${formatearFecha(eventObj.start._i)}</h5>\
			<a class="btn btn-block btn-info" style="margin-top: 10px;" onclick="goToVideoCall('${eventObj.link}')" target="_blank">Ir a la llamada</a>\
			<button id="btnEliminar" class="btn btn-block btn-danger disabled">Eliminar llamada</button>`;
		}
		$el.webuiPopover({
			title: eventObj.title,
			content: fechaYhoraActual().getTime() < eventFinishTime.getTime() ? contenido : contenido2,
			trigger: "click",
			width: "auto",
			height: "auto",
			placement: "top",
			container: "body",
			closeable: true,
			animation: "pop",
		});
		$(document).on("submit", "#eliminarEvento", function(e) {
			e.preventDefault();
			var formData = $(this).serialize();
			$.post(
				"{{route('SysWebSoporteAgendarLlamadaCalendly')}}",
				{data: formData}
			);
		});
	}
});
@stop