<?php include_once UTILS_PATH."components".DIRECTORY_SEPARATOR."multi_select".DIRECTORY_SEPARATOR."script.php"?>

<script type="application/javascript">

	const agentesAyuda = new Map()
	var a = document.getElementById('idioma');
	if (a.value == "es") {
		<?php if (defined("BANDERA_ES")) { ?>
			document.getElementById('banderaPais').innerHTML = '<span class="flag-icon flag-icon-<?php echo BANDERA_ES; ?>"></span>&nbsp;';
		<?php } else { ?>
			document.getElementById('banderaPais').innerHTML = '<span class="flag-icon flag-icon-mx"></span>&nbsp;';
		<?php } ?>

	} else {

		document.getElementById('banderaPais').innerHTML = '<span class="flag-icon flag-icon-um"></span>&nbsp;';

	}

	var gl;
	var regLlam;
	var per;
	var grupoInicial = <?php
						if (isset($_SESSION["Categoria"])) {
							echo $_SESSION["Categoria"] == "" ? "-1" : $_SESSION["Categoria"];
						} else {
							echo "-1";
						}
						?>;
	var url = "<?= $url; ?>";
	$.ajax({
		url: 'GrupoAgentes/getGroupsSelect',
		dataType: "text",
		type: 'GET',
		success: function(res) {
			var resp = JSON.parse(res);
			if (resp.Estado == 'ok') {
				for (var i = 0; i < resp.Registros.length; i++) {
					var opt = document.createElement('option');
					opt.value = resp.Registros[i].id;
					opt.innerHTML = resp.Registros[i].Grupo;
					document.getElementById('grupoSelect').appendChild(opt);
				}
				document.getElementById('grupoSelect').value = grupoInicial;

			} else {
				M.toast({
					html: resp.Descripcion
				});
			}
		},
		error: function(error) {
			console.log(error);
		}
	});

	$(document).ready(function() {
		$('.tooltipped').tooltip();
		$(".tabs").tabs()

		$.ajax({
			url: 'campanas/getCampaignsSelect',
			dataType: "text",
			type: 'GET',
			success: function(res) {
				var resp = JSON.parse(res);
				if (resp.Estado == 'ok') {
					for (var i = 0; i < resp.Campanas.length; i++) {
						$("#campanaAgentes").append("<option value='" + resp.Campanas[i].campaign_id + "'><span>" + resp.Campanas[i]
							.campaign_name + "</span></option>");
					}
					$('.tooltipped').tooltip();
				} else {
					M.toast({
						html: resp.Descripcion
					});
				}
			},
			error: function(error) {
				console.log(error);
			}
		});
		var Arreglo = $('select');
		for (var i = 0; i < Arreglo.length; i++) {
			if (Arreglo[i].id != '') {
				$("#" + Arreglo[i].id).formSelect();
			}
		}
		$('.fixed-action-btn').floatingActionButton();
		var bla;


		function cambiarAOscuro() {

			for (let i = 0; i < bla.length; i++) {
				bla[i].classList.remove('white');
				bla[i].classList.add('grey');
				bla[i].classList.add('lighten-1');
				bla[i].style.filter = 'invert(85%)';
			}
			document.getElementById('barrita').style.filter = "invert(100%)"
		}

		if (localStorage.getItem('background') == "black") {
			bla = document.getElementsByClassName('card-panel')
			bla = Array.prototype.slice.call(bla)
			cambiarAOscuro();
		}

	});

	function myFunction() {
		var x = document.getElementById("myDIV");
		if (x.style.display === "none") {
			$('#myDIV').removeClass('animated')
			$('#myDIV').removeClass('slideOutUp')

			$('#myDIV2').removeClass('animated')
			$('#myDIV2').removeClass('slideInUp')

			$('#myDIV2').addClass('animated slideOutLeft faster')

			$('#myDIV2').removeClass('animated')
			$('#myDIV2').removeClass('slideOutLeft')

			x.style.display = "block";
			$('#myDIV').addClass('animated slideInDown faster')
			$('#myDIV2').addClass('animated slideInDown faster')
			$("#gauge").html("");
			gl = new JustGage({
				id: "gauge",
				value: 0,
				min: 0,
				max: 5,
				title: i18n.gettext("Nivel de Marcado")
			});


		} else {
			$('#myDIV').removeClass('animated')
			$('#myDIV').removeClass('slideInDown')

			$('#myDIV2').removeClass('animated')
			$('#myDIV2').removeClass('slideInDown')


			$('#myDIV').addClass('animated slideOutUp faster')
			x.style.display = "none";
			$('#myDIV2').addClass('animated slideInUp faster')



		}

	}

	function creaGauge(maximo) {
		$("#gauge").html("");
		gl = new JustGage({
			id: "gauge",
			value: 0,
			min: 0,
			max: maximo,
			title: i18n.gettext("Nivel de Marcado")
		});
	}
	$(document).ready(function() {
		creaGauge(5);
		var ctxRegLlam = document.getElementById('regVsLlamCanvas').getContext('2d');
		regLlam = new Chart(ctxRegLlam, {
			type: 'bar',
			data: {
				labels: [i18n.gettext("Registros"), i18n.gettext("Llamadas")],
				datasets: [{
					label: i18n.gettext("Registros vs Llamadas"),
					backgroundColor: myColors,
					borderColor: 'rgb(0,0,0)',
					data: [0, 0],
				}],
			},
			options: {
				tooltips: {
					enabled: false,
					custom: function(tooltipModel) {
						// Tooltip Element
						var tooltipEl = document.getElementById('chartjs-tooltip');

						// Create element on first render
						if (!tooltipEl) {
							tooltipEl = document.createElement('div');
							tooltipEl.id = 'chartjs-tooltip';
							tooltipEl.innerHTML = "<table class='card-panel white black-text'></table>";
							document.body.appendChild(tooltipEl);
						}

						// Hide if no tooltip
						if (tooltipModel.opacity === 0) {
							tooltipEl.style.opacity = 0;
							return;
						}

						// Set caret Position
						tooltipEl.classList.remove('above', 'below', 'no-transform');
						if (tooltipModel.yAlign) {
							tooltipEl.classList.add(tooltipModel.yAlign);
						} else {
							tooltipEl.classList.add('no-transform');
						}

						function getBody(bodyItem) {
							return bodyItem.lines;
						}

						// Set Text
						if (tooltipModel.body) {
							var titleLines = tooltipModel.title || [];
							var bodyLines = tooltipModel.body.map(getBody);

							var innerHtml = '<thead>';

							titleLines.forEach(function(title) {
								innerHtml += '<tr> <th> ' + title + ' </th> </tr>';
							});
							innerHtml += '</thead> <tbody>';

							bodyLines.forEach(function(body, i) {
								var colors = tooltipModel.labelColors[i];
								var style = 'background:' + colors.backgroundColor;
								style += '; border-color:' + colors.borderColor;
								style += '; border-width: 2px';
								var span = '<span style="' + style + '"></span>';
								innerHtml += '<tr> <td> ' + span + body + ' </td> </tr>';
							});
							innerHtml += '</tbody>';

							var tableRoot = tooltipEl.querySelector('table');
							tableRoot.innerHTML = innerHtml;
						}

						// `this` will be the overall tooltip
						var position = this._chart.canvas.getBoundingClientRect();

						// Display, position, and set styles for font
						tooltipEl.style.pointerEvents = 'none';
						tooltipEl.style.opacity = 1;
						tooltipEl.style.position = 'absolute';
						tooltipEl.style.left = position.left + tooltipModel.caretX + 'px';
						tooltipEl.style.top = position.top + tooltipModel.caretY + 'px';
						tooltipEl.style.fontFamily = tooltipModel._bodyFontFamily;
						tooltipEl.style.fontSize = tooltipModel.bodyFontSize + 'px';
						tooltipEl.style.fontStyle = tooltipModel._bodyFontStyle;
						tooltipEl.style.padding = tooltipModel.yPadding + 'px ' + tooltipModel.xPadding + 'px';
					}
				},
				scales: {
					yAxes: [{
						ticks: {
							beginAtZero: true
						}
					}]
				}
			}
		});
		var p = document.getElementById('perdidasCanvas').getContext('2d');
		per = new Chart(p, {
			type: 'pie',
			data: {
				labels: [i18n.gettext("Llamadas abandonadas"), i18n.gettext("Llamadas no abandonadas")],
				datasets: [{
					label: i18n.gettext("Llamadas"),
					backgroundColor: myColors,
					borderColor: 'rgb(0,0,0)',
					data: [50, 50]
				}]
			},
			options: {
				maintainAspectRatio: false,
				tooltips: {
					enabled: false,
					custom: function(tooltipModel) {
						// Tooltip Element
						var tooltipEl = document.getElementById('chartjs-tooltip');

						// Create element on first render
						if (!tooltipEl) {
							tooltipEl = document.createElement('div');
							tooltipEl.id = 'chartjs-tooltip';
							tooltipEl.innerHTML = "<table class='card-panel white black-text'></table>";
							document.body.appendChild(tooltipEl);
						}

						// Hide if no tooltip
						if (tooltipModel.opacity === 0) {
							tooltipEl.style.opacity = 0;
							return;
						}

						// Set caret Position
						tooltipEl.classList.remove('above', 'below', 'no-transform');
						if (tooltipModel.yAlign) {
							tooltipEl.classList.add(tooltipModel.yAlign);
						} else {
							tooltipEl.classList.add('no-transform');
						}

						function getBody(bodyItem) {
							return bodyItem.lines;
						}

						// Set Text
						if (tooltipModel.body) {
							var titleLines = tooltipModel.title || [];
							var bodyLines = tooltipModel.body.map(getBody);

							var innerHtml = '<thead style="background-color:white;">';

							titleLines.forEach(function(title) {
								innerHtml += '<tr> <th> ' + title + ' </th> </tr>';
							});
							innerHtml += '</thead> <tbody>';

							bodyLines.forEach(function(body, i) {
								var colors = tooltipModel.labelColors[i];
								var style = 'background:' + colors.backgroundColor;
								style += '; border-color:' + colors.borderColor;
								style += '; border-width: 2px';
								var span = '<span style="' + style + '"></span>';
								innerHtml += '<tr> <td> ' + span + body + ' </td> </tr>';
							});
							innerHtml += '</tbody>';

							var tableRoot = tooltipEl.querySelector('table');
							tableRoot.innerHTML = innerHtml;
						}

						// `this` will be the overall tooltip
						var position = this._chart.canvas.getBoundingClientRect();

						// Display, position, and set styles for font
						tooltipEl.style.pointerEvents = 'none';
						tooltipEl.style.opacity = 1;
						tooltipEl.style.position = 'absolute';
						tooltipEl.style.left = position.left + tooltipModel.caretX + 'px';
						tooltipEl.style.top = position.top + tooltipModel.caretY + 'px';
						tooltipEl.style.fontFamily = tooltipModel._bodyFontFamily;
						tooltipEl.style.fontSize = tooltipModel.bodyFontSize + 'px';
						tooltipEl.style.fontStyle = tooltipModel._bodyFontStyle;
						tooltipEl.style.padding = tooltipModel.yPadding + 'px ' + tooltipModel.xPadding + 'px';
					},
					callbacks: {
						label: function(tooltipItem, data) {
							//get the concerned dataset
							var dataset = data.datasets[tooltipItem.datasetIndex];
							//calculate the total of this data set
							var total = dataset.data.reduce(function(previousValue, currentValue, currentIndex, array) {
								return Number(previousValue) + Number(currentValue);
							});
							//get the current items value
							var currentValue = dataset.data[tooltipItem.index];
							//calculate the precentage based on the total and current item, also this does a rough rounding to give a whole number
							var percentage = (currentValue / total) * 100;
							return data.labels[tooltipItem.index] + ": " + currentValue + " " + percentage.toPrecision(4) + "%";
						}
					}
				}
			}

		})
	});

	var myColors = [
		"rgba(9, 97, 229, 0.3)",
		"rgba(244, 252, 0, 0.3)",
		"rgba(214, 176, 10, 0.3)",
		"rgba(13, 137, 98, 0.3)",
		"rgba(191, 42, 59, 0.3)",
		"rgba(237, 159, 42, 0.3)",

		"rgba(126, 73, 183, 0.3)",
		"rgba(52, 55, 153, 0.3)",
		"rgba(134, 145, 20, 0.3)",
		"rgba(16, 188, 3, 0.3)",
		"rgba(178, 209, 54, 0.3)",
		"rgba(224, 80, 210, 0.3)",
		"rgba(239, 100, 93, 0.3)",
		"rgba(75, 6, 132, 0.3)",
		"rgba(127, 175, 36, 0.3)",
		"rgba(56, 209, 99, 0.3)",
		"rgba(249, 83, 42, 0.3)",
		"rgba(247, 19, 201, 0.3)",
		"rgba(75, 242, 128, 0.3)",
		"rgba(162, 226, 49, 0.3)",
		"rgba(237, 208, 64, 0.3)",
		"rgba(89, 219, 189, 0.3)",
		"rgba(234, 83, 56, 0.3)",
		"rgba(6, 143, 150, 0.3)"
	]



	function addData(chart, datos) {
		chart.data.datasets[0].data = datos;
		chart.update();
	}


	function sleep(ms) {
		return new Promise(resolve => setTimeout(resolve, ms));
	}
	var sesion_id = "";
	var puedoRecargar = true;

	// Tabs
	let tabIndex = 0
	// Tabs

	const imagenGami_default = '<?=IMG_ADMIN;?>caballo.png';
	var app = new Vue({
		el: '#main',
		data: {
			agentes: [],
			totales: {
				agentes_total: 0,
				agents_paused: 0,
				agents_waiting: 0,
				agents_in_dead_calls: 0,
				agents_in_dispo: 0,
				agents_in_calls: 0,
				llamadasActivas: 0,
				llamadasSonando: 0,
				llamadasEsperandoPorAgentes: 0,
				llamadasEnIVR: 0,
				llamadasSalientes: 0,
			},
			nivel: 0,
			filtro: "NONE",
			volcado: 0,
			registros: 0,
			tiempo: 0,
			llamadas: 0,
			agentesProm: 0,
			metodo: "",
			hopper: 0,
			dejadas: 0,
			dl: 0,
			estados: "",
			registrosHopper: 0,
			porcentaje: 0,
			diff: 0,
			orden: "UP",
			seen: true,
			i18n: i18n,
			ls: localStorage.getItem('background'),
			class: {
				display: 'inline'
			},
			classSeen: {
				display: 'block'
			},
			classHide: {
				display: 'none'
			},
			enIntrusion: false,

			// Variables para la gamificacion

			agentsSelect: [],
			statusesSelect: [],
			campaignsSelect: [],
			metaGami: 100,
			imagenesGami: imagenGami_default,
			estadosGami: [],
			agentesGami: {},
			campanasGami: {},
			updateEstados: 0,
			updateAgentes: 0,
			updateCampanas: 0,
			gamificacionData: [],
			mustLoadGami: false,
			loadingGami: false,
			cancelGami: false,
			fechaGami: "",
			colorsGami: [
				"rgb(211,47,47)",
				"rgb(230,74,25)",
				"rgb(245,124,0)",
				"rgb(255,160,0)",
				"rgb(251,192,45)",
				"#afb42b",
				"#689f38",
				"#388e3c",
				"#00796b",
				"#0097a7",
				"#0288d1"
			],
			filterGami: [],
			activosGami: true,

			// Variables para la gamificacion
			llamadasEntrantes: [],
			agentSessionId: '',
			agentReportAction: '',

			selectValueGami: {},
			selectOptionsGami: [
				{
					value: "1",
					label: "Test 1"
				},
				{
					value: "2",
					label: "Test 2"
				},
			],
			selectGamiCampaignFilter: "",
			selectGamiAgentFilter: "",
		},
		computed: {
			classObject: function() {
				if (this.ls == 'white') {
					return {};
				} else {
					return {
						filter: 'invert(80%)'
					};
				}
			},
			showGami() {
				return (typeof this.gamificacionData.length) == 'undefined' && !this.loadingGami
			},
			showEmpty() {
				return (typeof this.gamificacionData.length) != 'undefined' && !this.loadingGami
			},
			scaleGami() {
				let calc = 1 - 0.05 * Object.keys(this.gamificacionData).length
				return calc <= 0.5 ? 0.5 : calc
			},
			topGami() {
				let calc = 8 * Object.keys(this.gamificacionData).length
				return calc >= 100 ? 100 : calc
			}
		},
		watch: {
			agentesGami() {
				// puedoRecargar = true
				// this.mustLoadGami = true
				// this.loadingGami = true
				// this.cancelGami = true
			}
		},
		updated() {
			if (app.updateEstados < 0) {
				$("#selectStatuses").formSelect()
				app.updateEstados++
			}
			if (app.updateAgentes < 0) {
				$("#selectAgentes").formSelect()
				app.updateAgentes++
			}
			if (app.updateCampanas < 0) {
				$("#selectCampanas").formSelect()
				app.updateCampanas++
			}

			// app.imagenesGami = app.imagenesGami+"?time="+Date.now()
		},
		methods: {
			updateGamiCampaignFilter(val) {
				console.log("updated filter", val)
				this.selectGamiCampaignFilter = val
			},
			updateGamiAgentFilter(val) {
				console.log("updated filter", val)
				this.selectGamiAgentFilter = val
			},
			metaCalc(val) {
				if (this.metaGami <= 0) {
					this.metaGami = 1
				}
				let div = val / this.metaGami
				return div >= 1 ? 1 : div
			},
			colorChange(val) {
				let index = Object.keys(this.gamificacionData).indexOf(val)
				return this.filterGami[index % 50]
			},
			styleGami(val) {
				let iGami = Math.floor(this.metaCalc(val) * 10)
				return {
					width: `${(val/this.metaGami)*100 >= 100 ? 100 : (val/this.metaGami)*100}%`,
					background: `
		    			linear-gradient(
		    				56deg,
		    				rgba(255,255,255,1) 0%,
		    				${this.colorsGami[iGami]} !important`
				}
			},
			selectAgentsAndStatuses() {
				let self = this
				$.post("<?= MODULOS; ?>reporteTiempoReal/selectGami", {
					campanas: Object.keys(this.campanasGami).join("','"),
					activos: `${this.activosGami}`
				}).then(res => {

					if (res.Estado == "ok") {

						const statusesNoDuplicated = []
						res.Estados.forEach(v => {
							if (
								!statusesNoDuplicated.find(
									val => val.value === v.value
								)
							) {
								statusesNoDuplicated.push({
									value: v.value,
									label: `${v.value} - ${v.label}`
								})
							}
						})

						if (
							self.statusesSelect.length !=
							statusesNoDuplicated.length
						) {
							const statusesPrev = [...self.statusesSelect]
							self.statusesSelect = statusesNoDuplicated
							self.estadosGami = statusesNoDuplicated
								.filter(v => {
									return !statusesPrev.find(v => v.value) ||
										self.estadosGami.find(
											val => val === v.value
										)
								}).map(value => value.value)
							self.updateEstados = -3
						}
						if (self.agentsSelect.length != res.Agentes.length) {
							self.agentsSelect = res.Agentes
							const agentesGami = {}
							res.Agentes.forEach(v => agentesGami[v.value] = v.label)
							self.agentesGami = agentesGami // res.Agentes.map(value => value.value)
							self.updateAgentes = -3
						}
						if (self.campaignsSelect.length != res.Campanas.length) {
							self.campaignsSelect = res.Campanas
							const campanasGami = {}
							res.Campanas.forEach(v => campanasGami[v.value] = v.label)
							console.log(campanasGami)
							self.campanasGami = campanasGami
							self.updateCampanas = -3
						}
					} else {
						console.log(res)
					}

				}).catch(err => {
					console.log(err)
				})
			},
			getGami() {
				let self = this
				let rgx = new RegExp("/", "gi")
				let dates = $("#pickDate").val().split(" / ")
				$.post("<?= MODULOS; ?>reporteTiempoReal/gamificacion", {
					users: Object.keys(self.agentesGami).join("','"),
					status: self.estadosGami.join("','"),
					campanas: Object.keys(this.campanasGami).join(","),
					activos: `${this.activosGami}`,
					dateIni: dates[0],
					dateFin: dates[1] || dates[0],
					archived: document.getElementById("archived").checked ? "1" : "0"
				}).then(res => {
					if (!self.cancelGami) {
						console.log(res)
						puedoRecargar = true
						self.gamificacionData = res.Registros
						self.mustLoadGami = false
						self.loadingGami = false
					} else {
						puedoRecargar = true
						self.cancelGami = false
						self.mustLoadGami = false
					}
				}).catch(err => {
					console.log(err)
				})
			},
			finalizaIntrusion() {
				document.getElementById('my_iframe').src = "about:blank";
				app.enIntrusion = false;
				this.agentSessionId = '';
				this.agentReportAction = '';
			},
			async iniciarMonitor(sesion_id2, idusuario) {
				$('.spinner').show();
				this.agentSessionId = idusuario;
				this.agentReportAction = 'monitor';
				document.getElementById('my_iframe').src = "about:blank";
				document.getElementById('my_iframe').src = url;
				sesion_id = sesion_id2;
				setTimeout(() => {
					$.ajax({
						url: "/<?= RUTA_MAESTRA; ?>/index.php/reporteTiempoReal/iniciaMonitor",
						type: "POST",
						dataType: "text",
						data: {
							sesion_id: sesion_id
						},
						success: function(result) {
							var res = JSON.parse(result);
							if (res.Estado === 'ok') {
								app.enIntrusion = true;
								$('.spinner').hide();
							} else {
								salio = true;
							}
						}
					});
				}, 5000);
			},
			async iniciarBarge(sesion_id2, idusuario) {
				this.agentSessionId = idusuario;
				this.agentReportAction = 'barge';
				document.getElementById('my_iframe').src = "about:blank";
				document.getElementById('my_iframe').src = url;
				sesion_id = sesion_id2;
				$('.spinner').show();
				setTimeout(() => {
					$.ajax({
						url: "/<?= RUTA_MAESTRA; ?>/index.php/reporteTiempoReal/iniciaBarge",
						type: "POST",
						dataType: "text",
						data: {
							sesion_id: sesion_id
						},
						success: function(result) {
							var res = JSON.parse(result);
							if (res.Estado === 'ok') {
								app.enIntrusion = true;
								$('.spinner').hide();
							} else {
								salio = true;
							}
						}
					});
				}, 5000);
			},
			iniciarHijack: function(sesion_id2, idusuario) {
				this.agentSessionId = idusuario;
				this.agentReportAction = 'hijack';
				document.getElementById('my_iframe').src = "about:blank";
				document.getElementById('my_iframe').src = url;
				sesion_id = sesion_id2;
				$('.spinner').show();
				setTimeout(() => {
					$.ajax({
						url: "/<?= RUTA_MAESTRA; ?>/index.php/reporteTiempoReal/iniciaHijack",
						type: "POST",
						data: {
							sesion_id: sesion_id
						},
						dataType: "text",
						success: function(result) {
							var res = JSON.parse(result);
							if (res.Estado === 'ok') {
								app.enIntrusion = true;
								$('.spinner').hide();
								//Aqui se debe hacer la peticion ajax para marcar al numero
							} else {
								salio = true;
							}
						}
					});
				}, 5000);
			},
			agentesPromMod: function() {
				return parseFloat(this.agentesProm).toFixed(2);
			},
			nivelMod: function() {
				return parseFloat(this.nivel).toFixed(2);
			},
			hideCharts: function() {
				/* if(this.seen==true){
					this.class= this.classSeen
					this.seen = false;
				}else if(this.seen==false){
					this.class= this.classSeen
					this.seen = false;
				}
 				*/

			},
			stopLoop: function(session, usuario) {
				agentesAyuda.get(session) ? agentesAyuda.get(session).loop = false : ""
				$.post("<?= MODULOS; ?>reporteTiempoReal/eliminarAyuda", {
					usuario: usuario || ""
				}).then(res => {
					console.log(res)
				}).catch(err => {
					console.log(err)
				})
			},
			tabsClicker(tab) {
				tabIndex = tab
				$("#tiemposRecargarGami").val('5')
				$("#tiemposRecargar").val('5')
				cambiaTiempoGami()
			},
			resuelvepausa: function(Usuario, campanaActual, id) {
				$.ajax({
					url: "EstadosPausa/resolvePauseByManager",
					type: "POST",
					data: {
						usuario: Usuario,
						campana: campanaActual,
						codigoPausa: id,
						tiempo: 0
					},
					dataType: "text",
					success: function(response) {
						var res = JSON.parse(response);
						if (res.Estado == "ok") {
							console.log("todo bien :)");
						} else {
							console.log("algo salio mal");
							console.log(res.Descripcion);
						}
						app.recarga();
					},
					error: function(res) {
						console.log(res)
					},
				});
			},
			recarga: function() {
				if (puedoRecargar && tabIndex == 0) {
					puedoRecargar = false;
					$.ajax({
						url: "reporteTiempoReal/realTimeReport",
						type: "GET",
						data: {
							campana: $("#campanaAgentes").val(),
							grupo: grupoInicial
						},
						dataType: "text",
						error: function(data) {
							puedoRecargar = true;
							console.log(data);
						},
						success: function(response) {
							puedoRecargar = true;
							var resp = JSON.parse(response);
							if (resp.Estado == 'ok') {
								resp.agentes = resp.agentes.map(v => ({
									...v,
									Status: v.CausaPausa && v.CausaPausa === "DAUTO" ? "Disponible" : v.Status,
									CausaPausa: v.CausaPausa && v.CausaPausa === "DAUTO" ? "" : v.CausaPausa
								})).sort(function(A, B) {
									if (A.Status === B.Status) {
										return 0;
									} else {
										if (A.Status === "Disponible") {
											return -1;
										} else {
											if (B.Status === "Disponible") {
												return 1;
											} else {
												if (A.Status === "En llamada") {
													return -1;
												} else {
													if (B.Status === "En llamada") {
														return 1;
													} else {
														return A.Status.localeCompare(B.Status);
													}
												}
											}

										}
									}
								})
								for (let k = 0; k < resp.agentes_total; k++) {
									console.log(resp.agentes[k]["id"]);
								}
								app._data.agentes = resp.agentes;
								app.agentes.forEach(val => {
									let tm = +val["ayuda"]
									if (tm != 0 || val["pausa"]) {
										if (!agentesAyuda.get(val["session_id"])) {
											agentesAyuda.set(val["session_id"], new Audio("<?= ROOT_URL; ?>public/audio/" + (val["pausa"] ? 'pausa' : 'open-your-eyes-and-see') + ".mp3"))
											agentesAyuda.get(val["session_id"]).loop = true
											agentesAyuda.get(val["session_id"]).play()
											let options = {
												body: val["pausa"] ? 'Hay un agente que ha superado el tiempo de pausa permitido' : 'Verifica en el reporte en tiempo real he intruyelo para darle apoyo',
											}
											Notification.requestPermission().then(permission => {
												if (permission == 'granted') {
													new Notification(`El agente ${val.Nombre} necesita tu ayuda`, options)
												}
											})
										}
									} else {
										agentesAyuda.get(val["session_id"]) ? agentesAyuda.get(val["session_id"]).loop = false : ''
										agentesAyuda.delete(val["session_id"])
									}
								})
								app.llamadasEntrantes = resp.llamadasEntrantes
								app._data.nivel = resp.nivel;
								app._data.filtro = resp.filtro;
								app._data.volcado = resp.volcado;
								app._data.registros = resp.registros;
								app._data.tiempo = resp.tiempo;
								app._data.llamadas = resp.llamadas;
								app._data.agentesProm = resp.agentesProm;
								app._data.metodo = resp.metodo;
								app._data.hopper = resp.hopper;
								app._data.dejadas = resp.dejadas;
								app._data.dl = resp.dl;
								app._data.estados = resp.estados;
								app._data.registrosHopper = resp.registrosHopper;
								app._data.porcentaje = resp.porcentaje;
								app._data.diff = resp.diff;
								app._data.orden = resp.orden;
								app._data.totales.agentes_total = resp.agentes_total;
								app._data.totales.agents_in_calls = resp.agents_in_calls;
								app._data.totales.agents_in_dispo = resp.agents_in_dispo;
								app._data.totales.agents_in_dead_calls = resp.agents_in_dead_calls;
								app._data.totales.agents_paused = resp.agents_paused;
								app._data.totales.agents_waiting = resp.agents_waiting;

								app._data.totales.llamadasActivas = resp.llamadasActivas;
								app._data.totales.llamadasSonando = resp.llamadasSonando;
								app._data.totales.llamadasEsperandoPorAgentes = resp.llamadasEsperandoPorAgentes;
								app._data.totales.llamadasEnIVR = resp.llamadasEnIVR;
								app.totales.llamadasSalientes = resp.llamadasSalientes;
								gl.refresh(parseFloat(resp.nivel) * 100, parseFloat(resp.maximo) * 100);
								addData(regLlam, [resp.registros, resp.llamadas])
								var comp = 100 - resp.porcentaje
								//addData(per, [resp.porcentaje, comp]);
								addData(per, [resp.dejadasDejadas, resp.dejadasContestadas]);
								var da = {
									agents_logged_in: app.totales.llamadasActivas,
									agents_in_calls: app.totales.llamadasSonando,
									llamadas_activas: app.totales.llamadasEsperandoPorAgentes,
									llamadas_sonando: app.totales.llamadasEnIVR,
									llamadas_salientes: app.totales.llamadasSalientes,
									llamadas_esperando_entrantes: resp.llamadasEntrantes.length,
									llamadas_esperando_salientes: resp.llamadasEsperandoPorAgentes - resp.llamadasEntrantes.length,
								}
								refrescaGrafica0(da);
								$('.barrita').hide();
								//creaGauge(resp.maximo);
							} else {
								M.toast({
									html: resp.Descripcion
								});
							}

						}
					});
				} else if (puedoRecargar && tabIndex == 1) {
					if (this.mustLoadGami) {
						this.loadingGami = true
					}
					puedoRecargar = false
					app.selectAgentsAndStatuses()
					app.getGami()
				}
			},
			// Funciones para el reporte en tiempo real de agentes
			calcularColorBackground(tiempo) {
				const minutos = ((tiempo / (9 * 60)) + 0.12).toFixed(2)
				return minutos < 1 ? minutos : 1
			},
			calcularColorTexto(tiempo) {
				const minutos = ((tiempo / (9 * 60)) + 0.12).toFixed(2)
				if (minutos < 0.6) {
					return 'black';
				} else {
					return 'white';
				}
			},
			calcularTimeToSec(tiempo) {
				const d = new Date(0)
				d.setUTCSeconds(tiempo)
				return d.toISOString().split("T").pop().split(".").shift()
			}
			// Funciones para el reporte en tiempo real de agente
		},
		created: function() {
			this.recarga();
		},
		mounted() {
			let date = new Date()
			let y = date.getFullYear()
			let m = date.getMonth() + 1
			let d = date.getDate()
			let strDate = `${y}-${m > 9 ? m : '0'+m}-${d > 9 ? d : '0'+d}`
			$("#pickDate").val(`${strDate} / ${strDate}`)
			console.log("Test: ", this.gamificacionData, typeof this.gamificacionData)
			for (var i = 0; i <= 50; i++) {
				this.filterGami.push(i * 43)
			}
			this.mustLoadGami = true
			this.loadingGami = true
			this.selectAgentsAndStatuses()
			this.getGami()
			this.recarga()
			$('.tooltipped').tooltip();
		}
	});
	var repetir;
	repetir = setInterval(function() {
		app.recarga();
	}, 5000);
	$(document).ready(function() {
		$('.modal').modal({
			dismissible: false
		});
	});
	var agentes = [];
	var agentesInCall = [];
	var llamadas = [];
	var llamadasSonando = [];
	let llamadasSalientes = []

	// Arreglos para las graficas de llamadas en espera
	let llamadasEsperandoSalientes = []
	let llamadasEsperandoEntrantes = []

	function cambiaTiempo() {

		if ($("#tiemposRecargar").val() == "-1") {
			clearInterval(repetir);
			repetir = setInterval(function() {
				app.recarga();
			}, 1000);
		} else {
			clearInterval(repetir);
			repetir = setInterval(function() {
				app.recarga();
			}, parseInt($("#tiemposRecargar").val()) * 1000);
		}
	}

	function cambiaTiempoGami() {

		if ($("#tiemposRecargarGami").val() == "-1") {
			clearInterval(repetir);
			repetir = setInterval(function() {
				app.recarga();
			}, 1000);
		} else {
			clearInterval(repetir);
			repetir = setInterval(function() {
				app.recarga();
			}, parseInt($("#tiemposRecargarGami").val()) * 1000);
		}
	}

	function refrescaGrafica0(datos) {


		agentes.push(datos.agents_logged_in);
		agentesInCall.push(datos.agents_in_calls);
		llamadas.push(datos.llamadas_activas);
		if (agentes.length >= 19) {
			agentes = agentes.slice(1, agentes.length + 1);
		}
		if (agentesInCall.length >= 19) {
			agentesInCall = agentesInCall.slice(1, agentesInCall.length + 1);
		}
		if (llamadas.length >= 19) {
			llamadas = llamadas.slice(1, llamadas.length + 1);
		}
		llamadasSonando.push(datos.llamadas_sonando);
		if (llamadasSonando.length >= 19) {
			llamadasSonando = llamadasSonando.slice(1, llamadasSonando.length + 1);
		}

		llamadasSalientes.push(datos.llamadas_salientes);
		if (llamadasSalientes.length >= 19) {
			llamadasSalientes = llamadasSalientes.slice(1, llamadasSalientes.length + 1);
		}

		llamadasEsperandoSalientes.push(datos.llamadas_esperando_salientes);
		if (llamadasEsperandoSalientes.length >= 19) {
			llamadasEsperandoSalientes = llamadasEsperandoSalientes.slice(1, llamadasEsperandoSalientes.length + 1);
		}

		llamadasEsperandoEntrantes.push(datos.llamadas_esperando_entrantes);
		if (llamadasEsperandoEntrantes.length >= 19) {
			llamadasEsperandoEntrantes = llamadasEsperandoEntrantes.slice(1, llamadasEsperandoEntrantes.length + 1);
		}

		$("#one1").sparkline(agentes, {
			type: 'bar',
			width: '100%',
			height: '25',
			barWidth: 10,
			barSpacing: 4,
			barColor: '#b2ebf2',
			negBarColor: '#81d4fa',
			zeroColor: '#81d4fa',
		});
		$("#three3").sparkline(llamadas, {
			type: 'line',
			width: '100%',
			height: '25',
			lineWidth: 2,
			lineColor: '#ff6f00',
			fillColor: 'rgba(255, 255, 255, 0.2)',
			highlightSpotColor: '#ff6f00',
			highlightLineColor: '#ff6f00',
			minSpotColor: '#00bcd4',
			maxSpotColor: '#4caf50',
			spotColor: '#ff6f00',
			spotRadius: 4
		});
		$("#two2").sparkline(agentesInCall, {
			type: 'bar',
			width: '100%',
			height: '25',
			barWidth: 10,
			barSpacing: 4,
			barColor: '#b2ebf2',
			negBarColor: '#81d4fa',
			zeroColor: '#81d4fa',
		});
		$("#four2").sparkline(llamadasEsperandoSalientes, {
			type: 'line',
			width: '100%',
			height: '25',
			lineWidth: 2,
			lineColor: '#ff9800',
			fillColor: 'rgba(255, 152, 0, 0.4)',
			highlightSpotColor: '#ff9800',
			highlightLineColor: '#ff9800',
			minSpotColor: '#ffeb3b',
			maxSpotColor: '#cddc39',
			spotColor: '#ff9800',
			spotRadius: 4,
		});
		$("#four3").sparkline(llamadasEsperandoEntrantes, {
			type: 'line',
			width: '100%',
			height: '25',
			lineWidth: 2,
			lineColor: '#ff9800',
			fillColor: 'rgba(255, 152, 0, 0.4)',
			highlightSpotColor: '#ff9800',
			highlightLineColor: '#ff9800',
			minSpotColor: '#ffeb3b',
			maxSpotColor: '#cddc39',
			spotColor: '#ff9800',
			spotRadius: 4,
		});

		$("#four4").sparkline(llamadasSonando, {
			type: 'line',
			width: '100%',
			height: '25',
			lineWidth: 2,
			lineColor: '#9575cd',
			fillColor: 'rgba(233, 30, 99, 0.4)',
			highlightSpotColor: '#9575cd',
			highlightLineColor: '#9575cd',
			minSpotColor: '#f44336',
			maxSpotColor: '#4caf50',
			spotColor: '#9575cd',
			spotRadius: 4,
		});
		$("#four5").sparkline(llamadasSalientes, {
			type: 'line',
			width: '100%',
			height: '25',
			lineWidth: 2,
			lineColor: '#9575cd',
			fillColor: 'rgba(233, 30, 99, 0.4)',
			highlightSpotColor: '#9575cd',
			highlightLineColor: '#9575cd',
			minSpotColor: '#f44336',
			maxSpotColor: '#4caf50',
			spotColor: '#9575cd',
			spotRadius: 4,
		});
	}
</script>

<script>
	document.getElementById("campanaAgentes").setAttribute("data-tooltip", i18n.gettext("Campañas"));
	document.getElementById("grupoSelect").setAttribute("data-tooltip", i18n.gettext("Grupos"));
	document.getElementById("tooltip1").setAttribute("data-tooltip", i18n.gettext("Llamadas"));
	document.getElementById("tooltip2").setAttribute("data-tooltip", i18n.gettext("Agentes"));
</script>