//Estas son variables para saber si salio
var salio = true;
//Arreglo de los id de las pestañas
var pestanasLLenas = [];
// Esto lo usa Alan
var widthTmp = 0;
// Esta bandera controla si puede poner en la pantalla el texto
var puedoPoner = true;
//Esto te dice si la llamada es de saliente o entrante
var tipoLlamada = 'OUTBOUND';
//Esta variable guarda los logs para ser enviados o impresos
var logs = [];
///Esta bandera controla cuando empezar a obtener el status del agente
var flagStatus = true;
///Esta variable guarda el telefono del ultimo registro llamado
var dialvoxCRM;
///Este es el vendor_lead_code de la ultima llamada
var ultimoVendor = '';

///Esto lleva la cuenta de peticiones muertas
var contadorDePeticiones = 0;

//No tengo idea por el momento de para que es estas variables
var banderitaCRM = false;
var vuelveCheck = -1;
var aPasado = false;

// Resolviendo cruce de llamadas
let login_llamadaInicial = true;

var agente_bloqueado = false;

var flag = true;
var btnActual;

// Autopausa ==========
let _FORZAR_PAUSA_SONANDO = false;
let intervalReadyAutopausa = -1;
const audioAutopausa = new Audio();
audioAutopausa.src =
	'/' +
	RUTA_MAESTRA +
	'/public/audio/autopausa' +
	_FORZAR_PAUSA_TONO +
	'.wav';
audioAutopausa.volume =
	_FORZAR_PAUSA_VOLUMEN && !isNaN(_FORZAR_PAUSA_VOLUMEN)
		? _FORZAR_PAUSA_VOLUMEN / 100
		: 0.5;

const audioLagged = new Audio();
audioLagged.src = '/' + RUTA_MAESTRA + '/public/audio/lagged.mp3';

let audioAutopausaReproducido = false;
let audioAutopausaAnterior = 0;

const audioAutopausaColgado = new Audio();
audioAutopausaColgado.src = '/' + RUTA_MAESTRA + '/public/audio/colgado.mp3';
// ====================

let lanzaDispoFlag = 0; // Desconocido
let presionaEstados = -1; // Desconocido
let idAnterior = null; // Desconocido
let ultimoLeadId = ''; // Desconocido
let preventAction = -1; // Desconocido
let bln_hangup_block = false; // Esta bandera bloquea el colgado del agente
let bln_dial_block = false;
let timeout_queue = -1;
// ^ Esta bandera bloquea la accion de marcacion
// | del agente

// Reconexion por condiciones especiales
let enLagged = false;
let dispositivoCambiado = false;

function dvBodyTheme(target) {
	const allClasses = [
		'dv-theme-success',
		'dv-theme-info',
		'dv-theme-danger',
		'dv-theme-warning',
		'dv-theme-ready',
		'dv-theme-paused',
		'dv-theme-dispo',
		'dv-theme-incall',
		'dv-theme-dead',
		'dv-theme-error',
	];

	if (!$('.dv-body').hasClass(target)) {
		$('.dv-body').addClass(target);

		allClasses
			.filter((v) => v !== target)
			.forEach((v) => $('.dv-body').removeClass(v));
	}
}

const btnPlayIcon_answer = 'fa-check-circle';
const btnPlayIcon_icon = 'fa-play-circle';

function btnPlayIcon_Play(btn) {
	if (btn.hasClass(btnPlayIcon_answer)) {
		btn.removeClass(btnPlayIcon_answer);
	}
	if (!btn.hasClass(btnPlayIcon_icon)) {
		btn.addClass(btnPlayIcon_icon);
	}
}

function btnPlayIcon_Answer(btn) {
	if (btn.hasClass(btnPlayIcon_icon)) {
		btn.removeClass(btnPlayIcon_icon);
	}
	if (!btn.hasClass(btnPlayIcon_answer)) {
		btn.addClass(btnPlayIcon_answer);
	}
}
// Objeto para controlar el estado del agente
// en el reporte en tiempo real
let st_store = {
	get status() {
		// Nunca es leido el status, por lo que
		// no hace falta este getter
	},
	_status: 'PAUSED', // Atributo 'privado' que contiene el estado
	_contenidoControles: '', // Atributo 'privado' que contiene el contenido
	_pause_code: '',
	// del contenedor de controles, para saber si tiene que cambiar
	set status(newVal) {
		// Setter para el estado
		// Este setter recibe un areglo, es decir que siempre
		// sera utilizado de la siguiente forma:
		//      st_store.status = [valor1, valor2]
		// El primer indice del arreglo contiene
		// el estado del agente y el segundo un subestado
		// en caso de tenerlo
		let [status, substatus, pause_code] = newVal;

		// Revisar para un cambio de estado
		const contenidoControles = controlesCanales();
		if (this._contenidoControles !== contenidoControles) {
			const contenedorControles = document.getElementById(
				'channel-control-dropdown-container'
			);
			this._contenidoControles = contenidoControles;
			contenedorControles.innerHTML = this._contenidoControles;
		}

		// Esta variable sera mostrada al agente
		// en la navbar
		let status_text = traducirFrase('DESCONOCIDO');
		$('#agent_status').removeClass();
		this._pause_code = pause_code;

		const btnPlayIcon = $('#btnPlay i');

		switch (status) {
			case 'PAUSED':
				clearTimeout(timeout_queue);
				$('#agent_status').addClass('text-info');
				dvBodyTheme('dv-theme-paused');

				switch (substatus) {
					case 'DISPO':
						$('#phone-calling-label').text('');
						status_text = traducirFrase('CALIFICANDO');
						dvBodyTheme('dv-theme-dispo');
						btnPlayIcon_Play(btnPlayIcon);
						break;
					default:
						switch (pause_code) {
							case _FORZAR_PAUSA_CODIGO:
								if (_FORZAR_PAUSA) {
									clearTimeout(timeout_queue);
									clearTimeout(idTimeoutTiempoLimite);
									$('#agent_status').removeClass('text-info');
									$('#agent_status').addClass('text-success');
									btnPlayIcon_Answer(btnPlayIcon);

									dvBodyTheme('dv-theme-ready');
									// $("")
									status_text = traducirFrase('DISPONIBLE');
									break;
								}
							case 'LAGGED':
								$('#agent_status').addClass('text-danger');
								dvBodyTheme('dv-theme-error');

								if (!enLagged) {
									enLagged = true;
									mensajePorPosibleDesconexion();
									audioLagged.play();
								}
							default:
								status_text = `${traducirFrase(
									'PAUSADO'
								)} - ${pause_code}`;
								$('#phone-calling-label').text('');
								btnPlayIcon_Play(btnPlayIcon);
								break;
						}
				}
				break;

			case 'DIAL':
			case 'INCALL':
				clearTimeout(timeout_queue);
				clearTimeout(idTimeoutTiempoLimite);
				$('#phone-calling-label').text('');
				btnPlayIcon_Play(btnPlayIcon);
				if (substatus === 'DEAD') {
					$('#agent_status').addClass('text-danger');
					dvBodyTheme('dv-theme-dead');
					status_text = traducirFrase('LLAMADA CORTADA');
				} else {
					$('#agent_status').addClass('text-success');
					dvBodyTheme('dv-theme-incall');
					status_text = traducirFrase('EN LLAMADA');
				}
				break;
			case 'CLOSER':
			case 'READY':
				clearTimeout(timeout_queue);
				clearTimeout(idTimeoutTiempoLimite);
				btnPlayIcon_Play(btnPlayIcon);
				$('#agent_status').addClass('text-success');
				dvBodyTheme('dv-theme-ready');
				status_text = traducirFrase('DISPONIBLE');
				break;
			case 'QUEUE':
				$('#phone-calling-label').text('');
				clearTimeout(idTimeoutTiempoLimite);
				$('#agent_status').addClass('text-warning');
				btnPlayIcon_Play(btnPlayIcon);
				dvBodyTheme('dv-theme-paused');
				status_text = traducirFrase('EN COLA');
				timeout_queue = setTimeout(() => {
					const dispoBox = document
						.getElementById('my_iframe')
						.contentWindow.document.getElementById(
							'DispoSelectBox'
						);
					let log = '';
					if (localStorage.getItem('QUEUE_LOG')) {
						log = localStorage.getItem('QUEUE_LOG');
					}

					if (!dispoBox) {
						log += '\nNo hay dispoBox';
					} else {
						log += `\nVisibilidad dispoBox: ${dispoBox.style.visibility}`;
					}
					log += `\nBandera colgado: ${bln_dial_block}`;

					if (dispoBox && dispoBox.style.visibility !== 'hidden') {
						bln_hangup_block = false;
						enviaCalificacion('NOCAL', 1);
					}

					localStorage.setItem('QUEUE_LOG', log);
				}, 4000);
				break;
			case 'DEAD':
				$('#phone-calling-label').text('');
				clearTimeout(timeout_queue);
				clearTimeout(idTimeoutTiempoLimite);
				$('#agent_status').addClass('text-danger');
				btnPlayIcon_Play(btnPlayIcon);
				dvBodyTheme('dv-theme-error');
				status_text = traducirFrase('LLAMADA CORTADA');
				break;
			default:
				clearTimeout(timeout_queue);
				status_text = `${status}/${substatus}`;
				break;
		}

		$('#agent_status').text(status_text);
		$('#estado-telefono').text(status_text);
		//$('#pause_time_left').text(status_text);
		// Casos especiales para bloquear
		// la marcacion o el colgado
		if (
			this._status === 'DISPO' &&
			((status === 'PAUSED' && substatus !== 'DISPO') ||
				status !== 'PAUSED')
		) {
			ocultaCalificacion();
			bln_dial_block = false;
		}

		if (status === 'PAUSED') {
			if (substatus === 'DISPO') {
				if (this._status !== 'DISPO') {
					$('#btnPause').addClass('disabled');
					$('#btnPause').addClass('d-none');
					$('#btnPlay').addClass('disabled');
					$('#btnPlay').addClass('d-none');
					$('#btnStop').addClass('disabled');
					$('#btnllama').addClass('disabled');
					bln_dial_block = false;
					if (enGrabacion) grabaMaster();
					if (enLlamada || enDispo || enDead || enQueue) {
						if (cronometro === null) {
							cronometro = 0;
							lanzaCalificacion();
						}
					}

					// Esto tambien pretende bloaquear todas las acciones
					// posibles

					/* Verificar que estas banderas sean utilizadas */

					bloquearPlay = false;
					bloquearRedial = false;
					enLlamada = false;
					enGrabacion = false;
					enTransferido = false;
					//enEspera = false;
					aTransferir = -1;
					aPasado = false;
					cantidad++;

					if (cantidad == 2) {
						bloquearCuelga = true;
						setTimeout(() => {
							bloquearCuelga = false;
						}, 10000);
					}
				}
				llamadas_map = {};
				this._status = 'DISPO';
			} else {
				this._status = 'PAUSED';
			}
		} else if (status === 'DIAL') {
			this._status = 'DIAL';
		} else if (typeof status !== 'undefined') {
			if (status === 'INCALL' || status === 'DIAL') {
				bln_hangup_block = false;
				if (this._status !== status) {
					// ! Reproducir audios?
					Object.keys(dispositivosAudio ?? { default: true }).forEach(
						(dispositivo) => {
							const audio = new Audio();
							audio.src =
								'/' +
								RUTA_MAESTRA +
								'/index.php/AudioCliente/getAudioFromSession';
							audio.setSinkId(dispositivo).then(() => {
								audio.play();
							});
						}
					);
				}
			}
			this._status = status;
		} else {
			this._status = 'NONE';
		}
	},
};

///Esto esconde el recuadro de los comentarios de los logs
$('#hideThis').hide();
//Esta variable controla la bandera que se pone en el idioma
var a = document.getElementById('idioma');
// if (a.value == 'es') {
// 	if (window.DIALVOX_BANDERA_ES) {
// 		document.getElementById('banderaPais').innerHTML =
// 			'<span class="flag-icon flag-icon-' +
// 			window.DIALVOX_BANDERA_ES +
// 			'"></span>&nbsp;';
// 	} else {
// 		document.getElementById('banderaPais').innerHTML =
// 			'<span class="flag-icon flag-icon-mx"></span>&nbsp;';
// 	}
// } else {
// 	document.getElementById('banderaPais').innerHTML =
// 		'<span class="flag-icon flag-icon-um"></span>&nbsp;';
// }
///Se supone que esto cierra la sesion antes de que la persona se vaya, aunque no siempre funciona
window.addEventListener('beforeunload', function (e) {
	document
		.getElementById('my_iframe')
		.contentWindow.dialedcall_send_hangup('', '', '', '', 'YES');
	$.get('/' + RUTA_MAESTRA + '/index.php/homeAgente/logout');
	window.location.assign('/' + RUTA_MAESTRA + '/index.php/homeAgente/logout');
});
/**
 * El siguiente codigo no se que haga, lo hizo Abdiel, seria bueno que lo revise o Alan o Enrique
 */
setTimeout(function () {
	document.body.scrollTop = document.documentElement.scrollTop = 0;
}, 1000);
//Supongo que esta cosa es el interval que usa Alan para agregar la barra de carga
var intervalProgressBar = setInterval(function () {
	if (widthTmp < 94) {
		widthTmp += (Math.random() * 100) % 10;
	}
	$('.progress-bar-hidden').css({ width: widthTmp + '%' });
}, 100);
/**
 * Esta funcion convierte el tiempo en segundos y lo deja como cadena
 * Formateada en HH:mm:ss
 */
function dameHora(tiempo) {
	var horas = Math.floor(tiempo / 3600);
	var minutos = Math.floor((tiempo % 3600) / 60);
	var segundos = (tiempo % 3600) % 60;
	return addZero(horas) + ':' + addZero(minutos) + ':' + addZero(segundos);
}
/**
 * Esto hace que en el reporte en tiempo real se muestre una alerta de que el agente
 * que este en la sesion
 */
function solicitaAyudaPorQueSoyUnInutil() {
	$.post('/' + RUTA_MAESTRA + '/index.php/homeAgente/ayudaSoyUnInutil')
		.then(function (data) {
			if (data.Estado === 'ok') {
				$('#ListaAlert').html(
					i18n.gettext(
						'Se ha avisado a los supervisores que solicitas ayuda'
					)
				);
				crearTooltip();
			} else {
				$('#ListaAlert').html(
					i18n.gettext('Ya se ha informado a su supervisor')
				);
				crearTooltip();
			}
		})
		['catch'](function (err) {
			console.error(err);
		});
}
//Esto reproduce el sonido de la campana que le indica al agente cuando el tiempo ha pasado
function PlaySound() {
	document.getElementById('beep').play();
}
//Esta es una funcion de sleep
function sleep(ms) {
	return new Promise(function (resolve) {
		return setTimeout(resolve, ms);
	});
}
/**
 * Esta funcion es la que empieza la magia, manda a llamar la funcion lanza
 * y obtiene los permisos para el audio
 */
function demo() {
	setTimeout(() => {
		lanza();
	}, 2500);
	navigator.getMedia =
		navigator.getUserMedia ||
		navigator.webkitGetUserMedia ||
		navigator.mozGetUserMedia;
	navigator.getMedia(
		{
			audio: true,
		},
		function (localMediaStream) {
			$('#my_iframe').attr('allow', 'microphone');
		},
		function (err) {
			console.error('Ocurrió el siguiente error: ' + err);
		}
	);
}
//Esto es lo que se ejecuta cuando el iframe
document.getElementById('my_iframe').onload = function () {
	setTimeout(function () {
		demo();
		ocultaCalificacion();
		otraFlag = true;
		ocultapausa();
		$('.spinner').css({ display: 'none' });
		$('.main-hidden-content').css({ opacity: 1 });
		clearInterval(intervalProgressBar);
		document.body.scrollTop = document.documentElement.scrollTop = 0;
	}, 5000);
};
//Esta funcion manda a llamar al telefono para que inicie la sesion del agente
function lanza() {
	var parametros = {};
	$.ajax({
		url: '/' + RUTA_MAESTRA + '/index.php/homeAgente/llamadaInicial',
		type: 'POST',
		data: parametros,
		dataType: 'text',
		success: function (result) {
			var res = JSON.parse(result);
			if (res.Estado === 'ok') {
				if (login_llamadaInicial) {
					login_llamadaInicial = false;

					console.log('Colgado en llamada inicial');
					document
						.getElementById('my_iframe')
						.contentWindow.dialedcall_send_hangup(
							'',
							'',
							'',
							'',
							'YES'
						);

						setTimeout(() => {
							enviaCalificacion('NOCAL', 1);

							setTimeout(() => {
								document
									.getElementById('my_iframe')
									.contentWindow.AutoDial_ReSume_PauSe(
										'VDADpause',
										'',
										'',
										'',
										'',
										'',
										'',
										'YES'
									);

									setTimeout(() => {
										enviaPausa("LOGIN", 1, -1, '0');
									}, 1500)
							}, 1000)
						}, 1000)

				}
				

				console.log('Todo bien');
				salio = false;
			} else {
				console.error(res);
				console.error('AY Drake se murio esto');
				salio = true;
			}
		},
	});
}
//Esta funcion pone los numeros en la pantalla
function pon(num) {
	var dtmf = num;
	if (num == 10) dtmf = '+';
	else if (num == 11) dtmf = '#';
	else if (num == 12) dtmf = '*';
	if (enLlamada && (aTransferir == -1 || enTransferido)) {
		if (puedoEnviarDTMF) {
			if (num == 10) dtmf = '+';
			else if (num == 11) dtmf = 'P';
			else if (num == 12) dtmf = 'S';
			sendDTMF(dtmf);
		}
	} else {
		//phone_missed
		if (puedoPoner) $('#pantalla').val($('#pantalla').val() + dtmf);
	}
}
///Esta funcion valida que sea un numero lo que se pone en la pantalla
function validaNum(e) {
	var keynum;
	if (window.event) {
		// IE
		keynum = e.keyCode;
	} else if (e.which) {
		// Netscape/Firefox/Opera
		keynum = e.which;
	}
	if (keynum >= 96 && keynum <= 105) {
		// Numpad keys
		keynum -= 48;
	}

	return (
		keynum == 13 ||
		keynum == 37 ||
		e.key === '-' ||
		e.key === 'v' ||
		e.key === 'V' ||
		keynum == 46 ||
		keynum == 39 ||
		keynum == 8 ||
		/[0-9]/.test(String.fromCharCode(keynum))
	);
}
//Esta funcion muestra la ventana que se pase por parametro
function muestraCont(idCont) {
	if (idCont != btnActual) {
		$('#cont' + idCont).show();
		$('#cont' + btnActual).hide();
		$('#tab' + idCont).addClass('active');
		$('#tab' + btnActual).removeClass('active');
		btnActual = idCont;
		document.body.scrollTop = document.documentElement.scrollTop = 0;
	}
}
///Esta funcion borra la pestaña
function borrarPestana(n) {
	$('#cont' + n).remove();
	$('#titleTab' + n).remove();
	$('#tab' + 1).addClass('active');
	$('#cont' + 1).show();
	btnActual = 1;
	pestanasLLenas = pestanasLLenas.filter(function (val) {
		return val != n;
	});
}

// =================================================
// Funciones para agregar e iniciar los tabs para
// las ventanas del agente
let primerCargaTabs = true;
const tabsActuales = {};

function generarTab(tab, title, content) {
	const idTab = `${tab}-tab`;
	const strContent = content
		? `
		<iframe 
			id="${tab}_iframe" 
			name="${tab}_iframe" 
			src="${content}" 
			frameborder="0" 
			scrolling="yes" 
			style="overflow-y:scroll;overflow-x:scroll; height: 75vh;width: 100%;"
		></iframe>
	`
		: '';
	const strTab = `
		<li class="nav-item">
			<a 
				class="nav-link" 
				id="${idTab}" 
				href="#${tab}" 
				role="tab" 
				aria-controls="${tab}" 
				data-toggle="tab"
			>
				${title}
				${
					tab === 'contConts'
						? ''
						: `<button id='${idTab}_close_button' type="button" class="mx-2 close" aria-label="Close">
							<span aria-hidden="true">&times;</span>
			  			</button>`
				}
			</a>
		</li>
	`;
	const strTabPane = `
		<div id="${tab}" class='tab-pane fade' role="tabpanel" aria-labelledby="${idTab}">
			${strContent}
		</div>
	`;
	$('#tabVentanas').append(strTab);
	$('#tabContentVentanas').append(strTabPane);

	const r = {
		tab: $('#' + idTab),
		pane: $('#' + tab),
		iframe: $('#' + tab + '_iframe'),
	};

	if (tab !== 'contConts') {
		$(`#${idTab}_close_button`).on('click', (e) => {
			e.preventDefault();
			r.tab.remove();
			r.pane.remove();
			const someFrame = Object.keys(tabsActuales).pop();
			tabsActuales[someFrame].tab.trigger('click');
			primerCargaTabs = true;
			delete tabsActuales[tab];
		});
	}
	return r;
}

function defaultTabs() {
	const obj = generarTab('contConts', 'CRM');
	tabsActuales['default'] = {
		estatico: true,
		tab: obj.tab,
		pane: obj.pane,
		iframe: obj.iframe,
	};
}

function obtenerVentanas() {
	$.ajax({
		url: MODULOS + 'homeAgente/getFrames',
		type: 'GET',
		data: {},
		dataType: 'text',
		success: function (result) {
			const res = JSON.parse(result);
			if (!tabsActuales['default'] && (res.webForm || res.webFormTwo)) {
				defaultTabs();
			}

			res.Frames.forEach((frame, i) => {
				const tabId = frame.Titulo.replace(/[ ]/gi, '_');
				if (!tabsActuales[tabId]) {
					const tab = generarTab(tabId, frame.Titulo, frame.Url);
					tabsActuales[tabId] = {
						estatico: frame.Estatico === '1' ? true : false,
						tab: tab.tab,
						pane: tab.pane,
						iframe: tab.iframe,
					};
				} else if (!tabsActuales[tabId].estatico) {
					tabsActuales[tabId].iframe.attr('src', frame.Url);
				}
			});

			if (Object.keys(tabsActuales).length > 0 && primerCargaTabs) {
				const someFrame = Object.keys(tabsActuales).pop();
				tabsActuales[someFrame].tab.trigger('click');
				primerCargaTabs = false;
			}
		},
		error: function (data) {
			console.log(data);
			return 'error';
		},
	});
}

// =================================================

///Esta funcion crea la pestaña con el id y el numero que quieras mostrar
function crearPestana(id, numero) {
	obtenerVentanas();
	$('#contConts').append(
		'\n\t\t<div class="container row frameBox col-sm-12" id="cont' +
			id +
			'">\n\t\t\t\t<iframe src="" id="crm1' +
			id +
			'" class="ifrLeft col-sm-6" frameborder="1" scrolling="yes" style="overflow-y:scroll;overflow-x:scroll;"></iframe>\n\t\t\t\t<iframe src="" id="crm2' +
			id +
			'" class="ifrRight col-sm-6" frameborder="1" scrolling="yes" style="overflow-y:scroll;overflow-x:scroll;"></iframe>\n\t\t\t</div>\n\t\t'
	);
	$('#barraNav').append(
		'\n\t\t<li class="nav-item" id="titleTab' +
			id +
			'">\n\t\t\t<a onclick="muestraCont(\'' +
			id +
			'\')"  class="nav-link " href="#" id="tab' +
			id +
			'">' +
			numero +
			'<i ' +
			(ventanas == 1 ? 'onclick="borrarPestana(\'' + id + '\')"' : '') +
			'class="float-right fas fa-times align-middle"></i></a>\n\t\t</li>\n\t\t'
	);
	pestanasLLenas.push(id);
	muestraCont(id);
	document.body.scrollTop = document.documentElement.scrollTop = 0;
}
///Esta funcion ya esta deprecada, pero aun sirve para mostrar el estado actual del agente
function test() {
	console.log(
		'TiempoDispo,ventanas,allow_beep,pestanasLLenas,Manual,conCallBack,btnActual,time_beep,time_repeat,salio,otraFlag,puedoPoner,flag,flagStatus,banderitaCRM,vuelveCheck,aPasado,dialvoxCRM,Usuario,statusCalificacion,cronometro,TiempoTot,statusPausa,enGrabacion,enLlamada,puedoEnviarDTMF,otraFlag,enEspera,enTransferido,aTransferir,banderaCRM,banderaCRM2'
	);
	console.log(test);
}
//Esta funcion manda el texto a una notificacion
function crearTooltip() {
	/*
		var x = document.getElementById("snackbar");
		x.className = "show";
		setTimeout(function(){ x.className = x.className.replace("show", ""); }, 10000);
	*/
	var options = {
		body: $('#ListaAlert').html().replace(new RegExp('<br>', 'gi'), '\n'),
	};
	Notification.requestPermission()
		.then(function (permission) {
			if (permission == 'granted') {
				new Notification('Aviso', options);
			} else {
				alert(options.body);
			}
		})
		['catch'](function (err) {
			console.error(err);
		});
}
///Esto muestra el recuadro de los comentarios para los logs
function prepareLogs() {
	$('#hideThis').show();
}
//Esta funcion manda los logs para su revision
function sendLogs() {
	var data = {
		logs: logs,
		texto: $('#notasLogs').val(),
	};
	$.ajax({
		url: '/' + RUTA_MAESTRA + '/index.php/homeAgente/makeLOG',
		type: 'POST',
		data: data,
		dataType: 'text',
		success: function (response) {
			$('#hideThis').hide();
			$('#notasLogs').val('');
			var data = JSON.parse(response);
			if (data.Estado === 'ok') {
				$('#ListaAlert').html(
					i18n.gettext('Los datos han sido enviados')
				);
				crearTooltip();
			} else {
				$('#ListaAlert').html(i18n.gettext(resp.Descripcion));
				crearTooltip();
			}
		},
		error: function (err) {
			console.error(err);
			$('#ListaAlert').html(
				i18n.gettext('Hubo un problema al guardar el log')
			);
			crearTooltip();
		},
	});
}

// ============== Cambio en dispositivos
let _devices_initialGroupId = '';
function dispositivosIniciales(h) {
	navigator.mediaDevices.enumerateDevices().then((d) => {
		const initialDefault = d.find((v) => v.deviceId === 'default') ?? {
			groupId: '',
		};
		_devices_initialGroupId = initialDefault.groupId;

		h();
	});
}

function listenerDeDispositivos() {
	setTimeout(() => {
		dispositivosIniciales(() => {
			navigator.mediaDevices.addEventListener('devicechange', () => {
				navigator.mediaDevices.enumerateDevices().then((devices) => {
					const current = devices.find(
						(v) => v.deviceId === 'default'
					);

					if (_devices_initialGroupId !== current.groupId) {
						dispositivoCambiado = true;
						dispositivosIniciales(() => {});
						mensajePorPosibleDesconexion();
					}
				});
			});
		});
	}, 5000);
}
listenerDeDispositivos();
// ============== Cambio en dispositivos

function mensajePorPosibleDesconexion() {
	const textos = {
		lagged: {
			title: traducirFrase('LAGGED'),
			text: traducirFrase(
				"Atención. Se ha perdido la conexión con el servidor. Por seguridad su sesión ha quedado en pausa. Por favor, revise su pantalla. Reintente conectarse con el botón 'Reconectar' o cierre sesión y vuelva a ingresar."
			),
		},
		dispositivo: {
			title: traducirFrase('Micrófono/altavoz desconectado'),
			text: traducirFrase(
				"Se detectó que tu micrófono o altavoz ha sido desconectado. Su sesión puede haber sido interrumpida. Reintente conectarse con el botón 'Reconectar' o cierre sesión y vuelva a ingresar."
			),
		},
	};

	const seleccion = enLagged ? textos.lagged : textos.dispositivo;

	return Swal.fire({
		title: seleccion.title,
		text: seleccion.text,
		icon: 'warning',
		showCancelButton: true,
		showConfirmButton: true,
		confirmButtonText: traducirFrase('Reconectar'),
		cancelButtonText: traducirFrase('Cerrar sesión'),
		allowOutsideClick: false,
	}).then((result) => {
		if (result.value) {
			enLagged = false;
			dispositivoCambiado = false;
			reconnect();
		} else {
			// TODO: Cerrar sesión
			salir();
		}

		Swal.close();
	});
}

function reconnect() {
	const mensajeErrorConferencia = 'ERROR 123: Hubo un problema con tu conexión a internet, no fue posible reestablecer tu sesión automaticamente.';
	$.get('/' + RUTA_MAESTRA + '/index.php/homeAgente/actualizarConferencia')
		.then(function (d) {
			const data = JSON.parse(d)

			console.log(data)
			if (data.Estado === 'ok') {
				document.getElementById('my_iframe').contentWindow.ReconnectWEBPHONE();
				setTimeout(() => {
					Swal.close();
					demo();
				}, 750)
			} else {
				$('#ListaAlert').html(
					i18n.gettext(mensajeErrorConferencia)
				);
				crearTooltip();
				salir();
			}
		})
		.catch(function (err) {
			console.log(err)
			$('#ListaAlert').html(
				i18n.gettext(mensajeErrorConferencia)
			);
			crearTooltip();
			salir();
		});
}

function getStatus() {
	if (flagStatus && !salio) {
		flagStatus = false;

		var parametros = {
			idReportePausa: localStorage.getItem('idReportePausa'),
		};
		$.ajax({
			url: '/' + RUTA_MAESTRA + '/index.php/homeAgente/getStatus',
			type: 'POST',
			data: parametros,
			dataType: 'text',
			success: function (result) {
				try {
					if (contadorDePeticiones != 0) {
						reconnect();
						contadorDePeticiones = 0;
					}
					$('#tiempoLlamada').hide();
					flagStatus = true;
					//Esto solo parsea los datos
					var res = JSON.parse(result);
					if (res.reportePausa == 1) {
						$('#modalTiempoLimitePausa').modal('hide');
						localStorage.removeItem('idReportePausa');
					}
					if (res.status != 'INCALL') {
						enEspera = false;
						$('#btnesperao').removeClass(
							'btn btn-info phone-tecla active'
						);
						$('#btnesperao').addClass('btn btn-info phone-tecla');
					}
					st_store.status = [
						res.status,
						res.real_time_sub_status,
						res.pause_code,
					];
					//Obtiene los elementos del crm solo para que despues se obtenga su url
					var crm1 = document.getElementById('crm1' + res.call_id);
					var crm2 = document.getElementById('crm2' + res.call_id);
					//Esto lo agrega en el arreglo de logs
					var nuevo = new Array(
						TiempoDispo,
						ventanas,
						allow_beep,
						Manual,
						btnActual,
						time_beep,
						time_repeat,
						salio,
						otraFlag,
						puedoPoner,
						flag,
						flagStatus,
						banderitaCRM,
						vuelveCheck,
						aPasado,
						dialvoxCRM,
						Usuario,
						statusCalificacion,
						cronometro,
						TiempoTot,
						statusPausa,
						enGrabacion,
						enLlamada,
						puedoEnviarDTMF,
						otraFlag,
						enEspera,
						enTransferido,
						aTransferir,
						banderaCRM,
						banderaCRM2,
						res.status,
						res.real_time_sub_status,
						crm1 ? crm1.src : '',
						crm2 ? crm2.src : '',
						new Date().toString()
					);
					logs.push(nuevo);
					if (logs.length > 100) {
						logs.shift();
					}
					if (res.Estado === 'ok' && res.campActiva === 'Y') {
						$('#ringing_calls').text(res.llamadasSonando);

						$('#agent_campana').text(res.Campana);
						if (bloquearCuelga) {
							$('#btncuelga').addClass('disabled');
						} else {
							$('#btncuelga').removeClass('disabled');
						}
						if (res.status === 'PAUSED' && res.pause_code !== '') {
							if (
								dialvoxCRM == null ||
								res.real_time_sub_status === 'DISPO'
							) {
								$('#btnotro').addClass('disabled');
							} else {
								$('#btnotro').removeClass('disabled');
							}
						} else {
							if (
								res.status === 'READY' ||
								res.status === 'CLOSER'
							) {
								$('#btnotro').removeClass('disabled');
							} else {
								$('#btnotro').addClass('disabled');
							}
						}

						scheduler.str_leadId = res.lead_id;

						/*
						if (res.Cuelga)
							cuelga();
						*/
						if (res.status != 'INCALL') {
							$('#btnesperao').removeClass(
								'btn btn-info phone-tecla active'
							);
							$('#btnesperao').addClass(
								'btn btn-info phone-tecla'
							);
						}
						if (res.status == 'QUEUE') {
							scheduler.int_status = -1;
							if (res.Tiempo > 10) enQueue = true;
							else enQueue = false;
						}
						if (res.status === 'PAUSED') {
							if (res.real_time_sub_status == 'DISPO') {
								enDispo = true;
								if (!bloquearCuelga) {
									$('#btncuelga').removeClass('disabled');
								}
							} else {
								$('#btncuelga').addClass('disabled');
								enDispo = false;
								TiempoTot = 0;
								clearInterval(cronometro);
							}
							if (
								res.real_time_sub_status === 'DISPO' ||
								res.pause_code === ''
							) {
								$('#btnPause').addClass('disabled');
								$('#btnPause').addClass('d-none');
								$('#btnPlay').addClass('disabled');
								$('#btnPlay').addClass('d-none');
								$('#btnStop').addClass('disabled');
								$('#btnllama').addClass('disabled');
								$('#pantalla').attr('disabled', true);
								puedoPoner = false;
							} else {
								$('#pantalla').attr('disabled', false);

								$('#btnPause').addClass('disabled');
								$('#btnPause').addClass('d-none');
								if (res.pause_code === _FORZAR_PAUSA_CODIGO) {
									$('#btnPause').removeClass('disabled');
									$('#btnPause').removeClass('d-none');
								}

								if (!agente_bloqueado) {
									$('#btnPlay').removeClass('disabled');
									$('#btnPlay').removeClass('d-none');
								}
								$('#btnStop').removeClass('disabled');
								puedoPoner = true;
							}
							if (
								(Manual === 'MANUAL' ||
									Manual === 'INBOUND_MAN') &&
								res.real_time_sub_status === '' &&
								res.pause_code === ''
							) {
								$('#pantalla').attr('disabled', true);
								$('#btnPause').addClass('disabled');
								$('#btnPause').addClass('d-none');
								if (!agente_bloqueado) {
									$('#btnPlay').removeClass('disabled');
									$('#btnPlay').removeClass('d-none');
								}
								$('#btnStop').removeClass('disabled');
								$('#btnllama').removeClass('disabled');
								if (dialvoxCRM == null) {
									$('#btnotro').addClass('disabled');
								} else {
									$('#btnotro').removeClass('disabled');
								}
								puedoPoner = true;
							}
						} else {
							if (
								Manual === 'MANUAL' &&
								(res.status === 'READY' ||
									res.status === 'CLOSER')
							) {
								$('#btnPause').addClass('disabled');
								$('#btnPause').addClass('d-none');
								if (!agente_bloqueado) {
									$('#btnPlay').removeClass('disabled');
									$('#btnPlay').removeClass('d-none');
								}
								$('#btnStop').removeClass('disabled');
								puedoPoner = true;
							} else {
								if (res.status !== 'INCALL') {
									if (
										res.status === 'READY' ||
										res.status === 'CLOSER'
									) {
										puedoPoner = true;
									} else {
										puedoPoner = false;
									}
									$('#dtmfSender').hide();
									$('#encuestaSender').hide();
								} else {
									$('#dtmfSender').show();
									$('#encuestaSender').show();
									puedoPoner = true;
								}
								$('#btnPlay').addClass('disabled');
								$('#btnPlay').addClass('d-none');
								$('#btnPause').removeClass('disabled');
								$('#btnPause').removeClass('d-none');
							}
							$('#pause_time_left').text('');
						}
						if (res.real_time_sub_status == 'DEAD') {
							if (!enDead) {
								ultimoLeadId = res.lead_id;
								enDead = true;
								/*
								setTimeout(() => {
									if (enDead && ultimoLeadId === res.lead_id) {
										$("#ListaAlert").html(i18n.gettext("Ocurrio un error fatal en la llamada telefonica por parte del carrier. Favor de volver a iniciar sesion."));
										crearTooltip();
										salir(true)
									}
								}, 30000);
								*/
							}

							// cuelga(true);
							// scheduler.int_status = -1;
						} else {
							enDead = false;
						}
						if (
							res.status === 'READY' ||
							res.status === 'CLOSER' ||
							res.status === 'PAUSED'
						) {
							if (
								(res.status === 'READY' ||
									res.status === 'CLOSER') &&
								mamadasPendejas != 2
							) {
								mamadasPendejas = 1;
							} else {
								mamadasPendejas = 0;
							}
							if (res.real_time_sub_status === 'DISPO') {
								$('#btnStop').addClass('disabled');
							} else {
								$('#btnStop').removeClass('disabled');
							}
						} else {
							mamadasPendejas = 0;
							$('#btnStop').addClass('disabled');
						}
						if (
							res.status === 'DIAL' ||
							res.real_time_sub_status === 'DIAL'
						) {
							cantidad = 0;
							bloquearCuelga = false;
							scheduler.int_status = -1;
						}
						if (res.status == 'INCALL') {
							Enpausa = false;
							$('#pause_time_left').text('');
							if (!leads_idDeLlamadas[res.phone_number]) {
								leads_idDeLlamadas[res.phone_number] =
									res.lead_id;
							}
							ultimoLeadId = res.lead_id;
							ultimoVendor = res.vendor_lead_code;
							$('#dtmfSender').show();
							$('#encuestaSender').show();
							scheduler.int_status = -1;
							if (campaign_recording === 'ONDEMAND') {
								$('#btnRecord').removeClass('disabled');
							} else {
								$('#btnRecord').removeClass('disabled');
							}
							cantidad = 0;
							bloquearCuelga = false;
							$('#btntransfer').show();
							$('#btnotro').hide();
							dialvoxCRM =
								res.phone_number.length > TELEFONO_LIMITE ||
								res.phone_number.length < 1
									? null
									: res.phone_number;
							tipoLlamada = res.tipoLlamada;
							if (tipoLlamada == 'Inbound') {
								document.getElementById(
									'avisoEstado'
								).innerHTML =
									'<i class="fas fa-phone fa-sm"></i> <i class="fas fa-level-down-alt fa-sm"></i>';
							} else {
								document.getElementById(
									'avisoEstado'
								).innerHTML =
									'<i class="fas fa-phone fa-sm"></i> <i class="fas fa-level-up-alt fa-sm"></i>';
							}
							if (res.Tiempo >= time_beep && allow_beep == 1) {
								if (
									(res.Tiempo - time_beep) % time_repeat ==
									0
								) {
									PlaySound();
								}
							}
							$('#btnPause').addClass('disabled');
							$('#btnPause').addClass('d-none');
							$('#btntrans1').removeClass('disabled');
							$('#btntrans2').removeClass('disabled');
							$('#btnespera').removeClass('disabled');
							$('#btnotro').addClass('disabled');
							enLlamada = true;
							puedoEnviarDTMF = true;
							if (ventanas == 1) {
								if (!pestanasLLenas.includes(res.call_id)) {
									crearPestana(
										res.call_id,
										res.phone_number.length >
											TELEFONO_LIMITE
											? traducirFrase('Desconocido')
											: res.phone_number
									);
									if (pestanasLLenas.length >= 20) {
										$('#ListaAlert').html(
											i18n.gettext(
												'Tienes demasiadas pestañas abiertas, deberias cerrarlas'
											)
										);
										crearTooltip();
									}
									cambiaCRM(res.call_id);
									cambiaCRM2(res.call_id);
								}
							} else {
								if (!pestanasLLenas.includes(res.call_id)) {
									crearPestana(
										res.call_id,
										res.phone_number.length >
											TELEFONO_LIMITE
											? 'Desconocido'
											: res.phone_number
									);
									pestanasLLenas.forEach(function (item) {
										if (
											res.call_id != item &&
											item !== 'WAM'
										) {
											borrarPestana(item);
										}
									});
									cambiaCRM(res.call_id);
									cambiaCRM2(res.call_id);
								}
							}
							$('#tiempoLlamada').show();
							$('#tiempoLlamada').html(dameHora(res.Tiempo));
							if (res.real_time_sub_status === '3-WAY') {
								enTransferido = true;
							}
							if (aTransferir == -1 || enTransferido) {
								aPasado = false;
								$('#pantalla').attr('disabled', true);
								if (
									res.phone_number.length > TELEFONO_LIMITE ||
									res.phone_number < 1
								) {
									$('#pantalla').val('Desconocido');
								} else {
									$('#pantalla').val(res.phone_number);
								}
								if (
									llamadas_map &&
									!llamadas_map[res.phone_number]
								) {
									llamadas.push({
										telefono: res.phone_number,
										fecha: new Date(),
										tipo: 'Entrante',
									});
									llamadas_map[res.phone_number] = true;
								}
								$('#btnllama').addClass('disabled');
							} else {
								if (!aPasado) {
									aPasado = true;
									$('#pantalla').attr('disabled', false);
									$('#pantalla').val('');
									$('#btnllama').removeClass('disabled');
								}
							}
						} else {
							$('#dtmfSender').hide();
							$('#encuestaSender').hide();
							$('#btnRecord').addClass('disabled');
							$('#btntransfer').hide();
							$('#btnotro').show();
							if (
								res.status === 'READY' ||
								res.status === 'CLOSER'
							) {
								if (Manual === 'INBOUND_MAN') {
									$('#pantalla').attr('disabled', false);
									$('#btnllama').removeClass('disabled');
								} else {
									$('#pantalla').attr('disabled', false);
									$('#btnllama').removeClass('disabled');
									// $('#pantalla').attr('disabled', true);
									// $('#btnllama').addClass('disabled');
								}
								document.getElementById(
									'avisoEstado'
								).innerHTML = '';
								$('#btncuelga').addClass('disabled');
							} else {
								if (
									!(
										res.real_time_sub_status === 'DISPO' ||
										res.pause_code === ''
									)
								) {
									$('#btnllama').removeClass('disabled');
								}
							}
							aPasado = false;
							$('#btntrans1').addClass('disabled');
							$('#btntrans2').addClass('disabled');
							$('#btnespera').addClass('disabled');

							enLlamada = false;
							enGrabacion = false;
							enTransferido = false;
							//enEspera = false;
							aTransferir = -1;
							$('#tiempoLlamada').hide();
							puedoEnviarDTMF = false;
						}
						if (enTransferido) {
							$('#btntrans1').attr(
								'title',
								i18n.gettext('Abandonar llamada de 3 vias')
							);
							$('#btntrans2').attr(
								'title',
								i18n.gettext('Colgar llamada transferida')
							);
							$('#btntrans1').addClass('btn-danger');
							$('#btntrans2').addClass('btn-danger');
							$('#btntrans1').removeClass('btn-primary');
							$('#btntrans2').removeClass('btn-warning');
						} else {
							$('#btntrans2').attr(
								'title',
								i18n.gettext('Marcar con el cliente')
							);
							$('#btntrans1').attr(
								'title',
								i18n.gettext('Marcación ciega')
							);
							$('#btntrans1').removeClass('btn-danger');
							$('#btntrans2').removeClass('btn-danger');
							$('#btntrans1').addClass('btn-primary');
							$('#btntrans2').addClass('btn-warning');
						}

						if (
							res.status === 'PAUSED' &&
							res.pause_code !== '' &&
							res.real_time_sub_status !== 'DISPO' &&
							res.real_time_sub_status !== 'DEAD'
						) {
							scheduler.int_status = 1;
						} else {
							if (
								res.status === 'READY' ||
								res.status === 'CLOSER'
							) {
								scheduler.int_status = 0;
							} else {
								scheduler.int_status = -1;
							}
						}

						// Codigo para poner el grupo de entrada
						if (res.actual_call_type === 'INBOUND') {
							$('#actual-ingroup-name').text(res.ingroup_name);
						} else {
							$('#actual-ingroup-name').text('');
						}
						// Codigo para poner el grupo de entrada

						// ? Autopausa
						if (_FORZAR_PAUSA) {
							if (
								res.status === 'READY' ||
								res.status === 'CLOSER'
							) {
								if (intervalReadyAutopausa < 0) {
									intervalReadyAutopausa = setTimeout(() => {
										console.log(
											'Ejecutando pausa automatica'
										);

										audioAutopausaColgado.play();

										document
											.getElementById('my_iframe')
											.contentWindow.AutoDial_ReSume_PauSe(
												'VDADpause',
												'',
												'',
												'',
												'',
												'',
												'',
												'YES'
											);

										setTimeout(() => {
											enviaPausa(
												_FORZAR_PAUSA_CODIGO,
												1,
												-1,
												'0'
											);
										}, 500);

										clearTimeout(intervalReadyAutopausa);
										intervalReadyAutopausa = -1;
									}, 3 * 1000);
								}
							} else {
								clearTimeout(intervalReadyAutopausa);
								intervalReadyAutopausa = -1;
							}
						}

						const llamadasSonando = parseInt(res.llamadasSonando);
						const autopausaTimbrar = res.autopausaTimbrar;
						// console.log(
						// 	_FORZAR_PAUSA,
						// 	llamadasSonando,
						// 	st_store._status,
						// 	audioAutopausaAnterior
						// );
						if (_FORZAR_PAUSA) {
							if (!isNaN(llamadasSonando)) {
								_FORZAR_PAUSA_SONANDO = llamadasSonando > 0;
								if (
									st_store._status === 'PAUSED' &&
									st_store._pause_code ===
										_FORZAR_PAUSA_CODIGO
								) {
									try {
										if (
											llamadasSonando > 0 &&
											autopausaTimbrar !== undefined &&
											autopausaTimbrar
										) {
											$('#btnPlay').removeClass(
												'disabled'
											);
											$('#btnPlay').removeClass('d-none');

											if (
												autopausaTimbrar !==
													undefined &&
												autopausaTimbrar
											) {
												audioAutopausa.play();
												let texto =
													'Llamada de ' +
													res.primerLlamadaSonando;
												if (res.transferenciaAlAgente) {
													texto =
														'Transferencia de ' +
														res.primerLlamadaSonando;
												} else if (
													res.multiplesLlamadas
												) {
													text =
														llamadasSonando +
														' llamadas entrantes';
												}

												$('#phone-calling-label').text(
													texto
												);

												// Vaciar texto y bloquear
												$('#pantalla').val('');
												$('#pantalla').prop(
													'disabled',
													true
												);
											} else {
												$('#phone-calling-label').text(
													''
												);
												$('#pantalla').prop(
													'disabled',
													false
												);
											}
										} else {
											$('#btnPlay').addClass('disabled');
											$('#btnPlay').addClass('d-none');

											$('#phone-calling-label').text('');
											audioAutopausa.pause();
											audioAutopausa.currentTime = 0;
											$('#pantalla').prop(
												'disabled',
												false
											);
										}
									} catch (e) {
										console.log(e);
									}
								}
							}
						}
					} else {
						if (res.Estado === 'error') {
							enLlamada = false;
							console.error(res);
							$('#ListaAlert').html(
								i18n.gettext('Ha sido expulsado de su sesión') +
									'<br>' +
									res.Descripcion
							);
							crearTooltip();
							salir();
						} else {
							enLlamada = false;
							console.error(res);
							$('#ListaAlert').html(
								i18n.gettext('La campaña ha sido desactivada')
							);
							crearTooltip();
							salir();
						}
					}
				} catch (error) {
					console.error(error);
					enLlamada = false;
					console.error(result);
					$('#ListaAlert').html(
						i18n.gettext(
							'Ha sido expulsado de su sesión o se perdio conexion con el servidor'
						)
					);
					crearTooltip();
					salir();
				}
			},
			error: function (err) {
				contadorDePeticiones++;
				if (contadorDePeticiones === 1) {
					Swal.fire({
						title: i18n.gettext('¡Conexión perdida! Reconectando'),
						allowOutsideClick: false,
						allowEscapeKey: false,
						allowEnterKey: false,
						showConfirmButton: false,
						onBeforeOpen: () => Swal.showLoading(),
						icon: 'warning',
					});
				}
				if (contadorDePeticiones >= LIMITE_PETICIONES_AGENTE) {
					console.error(err);
					enLlamada = false;
					$('#ListaAlert').html(
						i18n.gettext('Se perdio conexión con el servidor')
					);
					crearTooltip();
					salir();
				} else {
					flagStatus = true;
				}
			},
		});
	}
}
//Esto muestra el boton extra solo cuando el tipo de marcacion es entrada manual
if (Manual === 'INBOUND_MAN') {
	$('#btnStop').show();
}

//Esto se encarga de recargar la peticion para obtener el status del agente todo el tiempo
obtenerVentanas();
setInterval(function () {
	getStatus();
}, 1750);

// ====================================================
// Funciones para los controles de los canales

// Estado del canal del agente sobre que tiene que hacer
let estadoCanalAgente = { estado: 'MUTING', volumen: 6 };
let estadoCanales = {};
let cambioEnCanales = false;
let telefonoActualCanal = '';
let telefonoActualTripartita = '';

$('#channel-control-dropdown-button').click((e) => {
	$('#channel-control-dropdown-container').toggle('show');
});

function controlesCanales() {
	try {
		const user = document
			.getElementById('agent-user-container')
			.textContent.trim();
		const channelsContainer = document.getElementById(
			'channel-control-dropdown-container'
		);
		const vicidialIFrame = document.getElementById('my_iframe');
		const vicidialDocument = vicidialIFrame.contentDocument;
		const vicidialWindow = vicidialIFrame.contentWindow;
		const rawChannelCells = [];
		const idChannels = [];
		let channels = [];

		vicidialWindow.conf_channels_detail('SHOW');

		const tableContainer =
			vicidialDocument.getElementById('outboundcallsspan');

		tableContainer.querySelectorAll('tr').forEach((elem, index) => {
			if (index !== 0) {
				rawChannelCells.push(elem.querySelectorAll('td'));
			}
		});

		rawChannelCells.forEach((cells) => {
			const rawName = cells[1].textContent;
			const hangup = cells[2].textContent.toLowerCase();
			if (hangup === 'hangup') {
				if (rawName.indexOf(user) !== -1) {
					channels.push({
						name: traducirFrase('Tu canal'),
						raw: rawName,
						id: 0,
						tipo: 1,
					});
				} else if (rawName.indexOf('SIP') === -1) {
					const id = rawName.split('-').pop().split(';').shift();
					idChannels.push(parseInt(id, 16));
					channels.push({
						name: '',
						raw: rawName,
						id: parseInt(id, 16),
						tipo: 0,
					});
				}
			}
		});

		const canalesActuales = Object.assign({}, estadoCanales);
		estadoCanales = {};

		channels = channels.sort((a, b) => a.id - b.id);

		switch (channels.length) {
			case 0:
				break;
			case 1:
				break;
			case 2:
				channels[1].name = $('#pantalla').val();
				break;
			case 3:
				break;
			default:
				channels.slice(3).forEach((channel) => {
					for (let i = 0; i < canalesExtras.length; i++) {
						const canalExtra = canalesExtras[i];
						if (
							canalExtra.id === -1 &&
							!canalesExtras.find((v) => v.id === channel.id)
						) {
							channel.name = canalExtra.telefono;
							canalExtra.id = channel.id;
							break;
						}
					}
				});
				break;
		}

		channels.forEach((channel) => {
			if (canalesActuales[channel.raw]) {
				const canalActual = canalesActuales[channel.raw];
				estadoCanales[channel.raw] = canalActual;

				if (canalActual.name !== '') {
					channel.name = canalActual.name;
				} else {
					estadoCanales[channel.raw].name = channel.name;
				}
			} else {
				// Esto inicializa el canal si es de tripartita
				// al agregarse
				if (channel.name === '' && telefonoActualTripartita !== '') {
					channel.name = telefonoActualTripartita;
				}
				estadoCanales[channel.raw] = {
					volumen: 6,
					mute: true,
					name: channel.name,
				};
			}
		});

		return [
			enTransferido && aTransferir === 1
				? `
				<div class='d-flex justify-content-around px-3 py-2'>
					<button type="button" class="btn btn-info flex-grow-1" onclick="abrirModalNuevoCanal()" >Agregar canal</button>
				</div>
			`
				: '',
			...channels.map(generarCanal),
		].join('');
	} catch (err) {
		console.log(err);
		return '';
	}
}

function generarCanal(channel) {
	const idBotones = channel.name + '-button';
	const idVolumen = channel.name + '-volumen';
	// Bandera para saber si poner MUTING
	const estadoMuting =
		channel.tipo === 1
			? estadoCanalAgente.estado === 'MUTING'
				? true
				: false
			: estadoCanales[channel.raw].mute;
	return `
		<h6 class='dropdown-header'>${channel.name}</h6>
		<div class='d-flex justify-content-around px-3 py-2'>
			<i 
				class="fas fa fa-volume-down mx-1" 
				style="cursor: pointer;"
				id='${idBotones}-down'
				onclick="controlCanales('${channel.raw}', 'DOWN', '${idBotones}-down', '${
		channel.tipo
	}', '${idVolumen}')"
			></i>
			<div class='progress flex-grow-1'>
				<div class='progress-bar col-${
					channel.tipo === 1
						? estadoCanalAgente.volumen
						: estadoCanales[channel.raw].volumen
				}' role='progressbar' id='${idVolumen}'></div>
			</div>
			<i 
				class="fas fa fa-volume-up mx-1" 
				style="cursor: pointer;"
				id='${idBotones}-up'
				onclick="controlCanales('${channel.raw}', 'UP', '${idBotones}-up', '${
		channel.tipo
	}', '${idVolumen}')"
			></i>
			<i 
				class="mx-1 fas fa ${
					estadoMuting
						? 'fa-microphone text-primary'
						: 'fa-microphone-slash text-danger'
				}" 
				style="cursor: pointer;"
				id='${idBotones}-muting'
				onclick="controlCanales('${channel.raw}', '${
		estadoMuting ? 'MUTING' : 'UNMUTE'
	}', '${idBotones}-muting', '${channel.tipo}', '${idVolumen}')"
			></i>
			${
				canalesExtras.find((v) => v.id === channel.id)
					? `<i 
				class="mx-1 fas fa fa-phone-slash text-danger" 
				style="cursor: pointer;"
				id='${idBotones}-hangup'
				onclick="colgarCanal('${channel.raw}', ${channel.id})"
			></i>`
					: ''
			}
		</div>
	`;
}

function controlCanales(channel, action, idButton, cambiarEstado, idVolumen) {
	const vicidialIFrame = document.getElementById('my_iframe');
	const vicidialWindow = vicidialIFrame.contentWindow;
	const volumen = document.getElementById(idVolumen);

	const button = document.getElementById(idButton);

	if (action === 'MUTING' || action === 'UNMUTE') {
		let mutingAction = action;
		if (button.classList.contains('fa-microphone-slash')) {
			mutingAction = 'UNMUTE';
			button.classList.remove('fa-microphone-slash');
			button.classList.add('fa-microphone');
			button.classList.remove('text-danger');
			button.classList.add('text-primary');
		} else {
			mutingAction = 'MUTING';
			button.classList.remove('fa-microphone');
			button.classList.add('fa-microphone-slash');
			button.classList.remove('text-primary');
			button.classList.add('text-danger');
		}
		if (cambiarEstado === '1') {
			estadoCanalAgente.estado =
				mutingAction === 'MUTING' ? 'UNMUTE' : 'MUTING';
		} else {
			estadoCanales[channel].mute = !estadoCanales[channel].mute;
		}
		vicidialWindow.volume_control(mutingAction, channel, '');
	} else {
		const aumento = action === 'UP' ? 1 : -1;
		volumen.classList.forEach((cssclass) => {
			if (cssclass.indexOf('col-') !== -1) {
				let volumenActual = parseInt(cssclass.split('-').pop());
				volumenActual += aumento;
				if (volumenActual >= 1 && volumenActual <= 12) {
					if (cambiarEstado === '1') {
						estadoCanalAgente.volumen = volumenActual;
					} else estadoCanales[channel].volumen = volumenActual;
					volumen.classList.remove(cssclass);
					volumen.classList.add('col-' + volumenActual);
				}
			}
		});
		vicidialWindow.volume_control(action, channel, '');
		button.classList.add('text-primary');
		setTimeout(() => button.classList.remove('text-primary'), 327);
	}
}

function colgarCanal(canal, id) {
	const vicidialIFrame = document.getElementById('my_iframe');
	const vicidialWindow = vicidialIFrame.contentWindow;
	vicidialWindow.livehangup_send_hangup(canal);
}

// ====================================================
// Evento para reconectar del boton
$('#reconnectButton').click(() => {
	Swal.fire({
		icon: 'warning',
		title: traducirFrase('¿Esta seguro que quiere intentar reconectar?'),
		text: traducirFrase(
			'Esto puede requerir varios intentos para tomar efecto. Nota: Solo debe usar este boton, cuando el circulo rojo de la pestaña se apaga o desaparece.'
		),
		showCancelButton: true,
		cancelButtonText: traducirFrase('Cancelar'),
		confirmButtonText: traducirFrase('Reconectar'),
	}).then((r) => {
		if (r.value) {
			reconnect();
		}
	});
});
// Evento para reconectar del boton

// Modificaciones al frame de vicidieal =================================

(function () {
	function initializeVicidialIFrameUntilFullLoad() {
		var vicidialIFrame = document.getElementById('my_iframe');
		var vicidialIFrameDocument =
			vicidialIFrame.contentDocument ||
			vicidialIFrame.contentWindow.document;

		if (vicidialIFrameDocument.readyState == 'complete') {
			console.log('El vicidialIFrame esta cargado');
			initializeIFrameVicidial(vicidialIFrame.contentWindow);
			return;
		}

		setTimeout(initializeVicidialIFrameUntilFullLoad, 100);
	}

	function initializeIFrameVicidial(w = window) {
		w.PETICIONES_ACTIVAS = new Map();
		w.LIMITE_TIEMPO_PETICION_ACTIVA = 1000 * 60;
		w.LIMITE_PETICIONES_ACTIVAS = 6;

		const originalXMLHttpRequestSendFunction =
			w.XMLHttpRequest.prototype.send;

		w.XMLHttpRequest.prototype.send = function (...args) {
			const ESTA_AL_LIMITE_PETICIONES_ACTIVAS =
				w.PETICIONES_ACTIVAS.size >= w.LIMITE_PETICIONES_ACTIVAS;
			if (ESTA_AL_LIMITE_PETICIONES_ACTIVAS) {
				return;
			}

			w.PETICIONES_ACTIVAS.set(
				this,
				setTimeout(() => {
					const SIGUE_LA_PETICION_ACTIVA =
						w.PETICIONES_ACTIVAS.has(this);

					if (SIGUE_LA_PETICION_ACTIVA) {
						w.PETICIONES_ACTIVAS.delete(this);
					}
				}, w.LIMITE_TIEMPO_PETICION_ACTIVA)
			);

			originalXMLHttpRequestSendFunction.call(this, ...args);

			this.addEventListener('load', () => {
				if (w.PETICIONES_ACTIVAS.has(this)) {
					clearTimeout(w.PETICIONES_ACTIVAS.get(this));
					w.PETICIONES_ACTIVAS.delete(this);
				}
			});
		};
	}

	initializeVicidialIFrameUntilFullLoad();
})();

// ======================================================================

// Dispositivos de audio
if (!localStorage.getItem('dispositivosAudio')) {
	localStorage.setItem(
		'dispositivosAudio',
		JSON.stringify({
			default: true,
		})
	);
}
const dispositivosAudio = JSON.parse(localStorage.getItem('dispositivosAudio'));
(function () {
	const audio = new Audio();
	audio.src =
		'/' + RUTA_MAESTRA + '/index.php/AudioCliente/getAudioFromSession';
	//commondatastorage.googleapis.com/codeskulptor-assets/jump.ogg';

	new Promise((solve, reject) => {
		$.ajax({
			method: 'GET',
			url: audio.src,
			dataType: 'text',
			success: function (response) {
				try {
					JSON.parse(response);
					reject();
				} catch (e) {
					console.log('Error obteniendo audio', e);
					solve();
				}
			},
			error: function (err) {
				reject();
			},
		});
	})
		.then((r) => {
			$('#dispositivosDeAudio').click(() => {
				$('#dispositivos-container').html('');

				navigator.mediaDevices
					.enumerateDevices()
					.then((devices) => {
						const d = devices.filter(
							(v) => v.kind === 'audiooutput'
						);

						d.forEach((device) => {
							$('#dispositivos-container').append(
								`<div class="audio-item d-flex" style="flex-direction: column; gap: 0.2rem;">
					  <div class="d-flex" style="align-items: center; gap: 0.2rem;">
						<input type="checkbox" id="${device.deviceId}-check" />
						<span style="flex: 1" for="dispositivo1-check">${device.label}</span>
						<i class="btn btn-link fas fa-phone-volume" id="${device.deviceId}-test"></i>
					  </div>
					</div>`
							);

							if (dispositivosAudio[device.deviceId]) {
								$(`#${device.deviceId}-check`).prop(
									'checked',
									true
								);
							}

							$(`#${device.deviceId}-check`).click(function (e) {
								dispositivosAudio[device.deviceId] =
									$(this).prop('checked');
								localStorage.setItem(
									'dispositivosAudio',
									JSON.stringify(dispositivosAudio)
								);
							});

							$(`#${device.deviceId}-test`).click((e) => {
								console.log('Iniciando test de ', device.label);
								audio
									.setSinkId(device.deviceId)
									.then((r) => {
										console.log('Sinkid exitoso', r);
										audio.play();
									})
									.catch((e) => {
										console.log('Sinkid no exitoso', e);
									});
							});
						});

						$('.dropdown-menu .audio-item').click((e) =>
							e.stopPropagation()
						);
					})
					.catch((e) => {
						console.log('Error obteniendo los dispositivos', e);
					});
			});
		})
		.catch((err) => {
			$('#dispositivosDeAudio').hide();
		});
})();
