<script>
	function validate(event, regex, limit, whites) {
		let val = event.target.value
		if (val.length > limit) {
			return false
		}
		if (whites) {
			if (regex.test(event.key)) {
				return (val.length == 1 || val.split(" ").length != val.length)
			} else {
				return false
			}
		}
		return regex.test(event.key)
	}
	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;';

	}

	function ocultaroff() {
		$("#ojito_off").hide();
		$("#ojito").show();
		$("#password").attr("type", "text");
		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(100%)';
			}
		}

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

	function ocultar() {
		$("#ojito").hide();
		$("#ojito_off").show();
		$("#password").attr("type", "password");
		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(100%)';
			}
		}

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

	function ocultaroff2() {
		$("#ojito_off2").hide();
		$("#ojito2").show();
		$("#ext_pass").attr("type", "text");
		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(100%)';
			}
		}

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

	function ocultar2() {
		$("#ojito2").hide();
		$("#ojito_off2").show();
		$("#ext_pass").attr("type", "password");
		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(100%)';
			}
		}

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

	function analiza() {
		if (document.getElementById('vieja').checked) {
			document.getElementById('ext').checked = true;
			$("#ext_pass").attr("disabled", true);
			$("#ext").attr("disabled", true);
			$("#ext_pass").val($("#password").val());
		} else {
			document.getElementById('ext').checked = true;
			$("#ext_pass").attr("disabled", false);
			$("#ext").attr("disabled", false);
			analiza2();
		}
		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(100%)';
			}
		}

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

	function analiza2() {
		if (document.getElementById('ext').checked) {
			$("#ext_pass").attr("disabled", false);
		} else {
			$("#ext_pass").attr("disabled", true);
		}
		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(100%)';
			}
		}

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

	function analiza3() {
		if ($("#grupo").val() != "<?= GRUPO_AGENTES; ?>") {
			$("#analizar").hide();
			document.getElementById('vieja').checked = false;
			$("#vieja").attr("disabled", true);
			$("#ext").attr("disabled", false);
			<?php if (NEED_WA && $_SESSION['allow_waCli']) { ?>
				document.getElementById("allow_wa").checked = false;
				$(".hidThis").hide()
			<?php } ?>
		} else {
			$("#analizar").show();
			document.getElementById('vieja').checked = true;
			$("#vieja").attr("disabled", false);
			<?php if (NEED_WA && $_SESSION['allow_waCli']) { ?>
				$(".hidThis").show()
			<?php } ?>



		}
		analiza();


	}
	var app = new Vue({
		el: '#main',
		data: {
			databuffer: [

			],
			flagRecargar: true,
			pagina: 1,
			i18n: i18n,
			texto: "",
			// INGROUPS
			ingroupsModal: false,
			ingroupsRegs: [],
			campaignIngroups: [],
			ingroupsPage: 1,
			ingroupsCount: 1,
			campaignIngroupsId: "",
			// INGROUPS
			// INICIO - Rango grupo de entrada variables
			ingroupsRankModal: false,
			campaignIngroupsId: '',
			userIngroupSelectedId: '',
			userIngroupSelectedRank: 1,
			userIngroupsSelectOptions: [],
			userIngroupsRanks: {},
			// FIN - Rango grupo de entrada variables
			// Solve Issue #567
			modalFile: false,
			modalFileDisabled: false,
			modalFileLoading: false,
			// Solve Issue #567
			// Closes Issue #596 {
			campanasModal: false,
			usuariosXCampanas: [],
			campanasIdUsuario: '',
			// }

		},
		mounted: function() {
			var bla;
			$("#escondeme").hide();
			$('.tooltipped').tooltip();

			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(100%)';
				}

			}

			if (localStorage.getItem('background') == "black") {
				bla = document.getElementsByClassName('card-panel')
				bla = Array.prototype.slice.call(bla)
				cambiarAOscuro();
			}
			document.getElementById('spinnerCont').innerHtml =
				`<div class="barrita" style="position:absolute;left:0%;right:0%;" v-bind:style="classObject"><center><img src="<?= IMG_ADMIN; ?>spinner.gif" ></center></div>`;
			$("#escondeme").hide();
			$(".modal:not(.modal-component)").modal();
			$("#barrita").show();
			Arreglo = $('select');
			for (var i = 0; i < Arreglo.length; i++) {
				if (Arreglo[i].id != '') {
					$("#" + Arreglo[i].id).formSelect();
				}
			}
			cargaCategorias();
			this.recargar();

		},
		methods: {
			nivelMod: function() {
				return parseFloat(this.nivel).toFixed(2);
			},
			parseMembers: function(json) {
				var arr = [];
				for (var key in json) {
					if (json.hasOwnProperty(key)) {
						var val = json[key];
						arr.push(val);
					}
				}
				arr.pop();
				return arr;
			},
			translate(texto) {
				if (i18n) return i18n.gettext(texto)
			},
			abreModal: function(id) {
				$("#password").removeClass("invalid");
				$("#ext_pass").removeClass("invalid");
				ocultar();
				ocultar2();
				var Elem = null;
				<?php if ($_SESSION["Cliente"] == -1) { ?>
					getClientes();
				<?php } ?>
				if (id == '') {
					cambioManual("titulo", "Crear Usuario");
					$("#codigo").val("");
					$("#idShido").val("");
					$("#idShido").attr("type", "text")
					$("#Nombre").val("");
					$("#cliente").val("");
					$("#grupo").val("<?= GRUPO_AGENTES; ?>");
					$("#password").val("");
					$("#extLog").val("");
					document.getElementById('vieja').checked = false;
					document.getElementById('ext').checked = false;
					$("#ext_pass").attr("disabled", true);
					$("#ext_pass").val("");
					<?php if (NEED_WA && $_SESSION['allow_waCli']) { ?>document.getElementById("allow_wa").checked = false;
				<?php } ?>
				$("#Extensiones").show();
				$("#Pregunta").show();

				document.getElementById("CrearCampa").innerHTML = i18n.gettext("Crear") + "<i class='material-icons right'>send</i>";
				cambioManual("textoExt", "¿Crear una extensión para el usuario?");
				document.getElementById("CrearCampa").onclick = creaNuevo;
				<?php if ($_SESSION["Cliente"] == -1) { ?>
					$("#Clientes").val("")
				<?php } ?>
				} else {
					Elem = app.databuffer.find(function(elem) {
						if (elem.user == id) {
							return true;
						}
						return false;
					});
					$("#otroTexto").html(traducirFrase("¿Desea crear una extension para el usuario y que se logue a la nueva version del Dialvox?"));
					$("#textoExt").html(traducirFrase("¿Mantener la extension del usuario?"));
					$("#titulo").html(traducirFrase("Editar Usuario"))
					$("#codigo").val(Elem.user);
					$("#idShido").val(Elem.user);
					$("#idShido").attr("type", "hidden")
					$("#Nombre").val(Elem.full_name);
					$("#cliente").val(Elem.cliente);
					$("#grupo").val(Elem.user_group.split("_").pop())
					analiza3()
					<?php if ($_SESSION["Cliente"] == -1) { ?>
						$("#Clientes").val(Elem.cliente)
					<?php } ?>
					// $("#grupo").val('<?= GRUPO_AGENTES; ?>');
					$("#password").val(Elem.pass);
					$("#Categoria").val(Elem.Grupo.id);
					<?php if (NEED_WA && $_SESSION['allow_waCli']) { ?>
						document.getElementById("allow_wa").checked = Elem.Grupo.allow_wa == 1;
						$("#idUsuario_wa").val(Elem.Grupo.idUsuario_wa)
					<?php } ?>
					if (Elem.extension.extension == Elem.user && Elem.pass == Elem.extension.password) {
						document.getElementById('vieja').checked = true;
					} else {
						document.getElementById('vieja').checked = false;
					}
					if (Elem.extension.extension == "") {
						$("#Extensiones").hide();

						document.getElementById('ext').checked = false;
					} else {
						$("#Extensiones").show();
						document.getElementById('vieja').checked = Elem.extension.extension == Elem.user && Elem.pass == Elem.extension.password;
						document.getElementById('ext').checked = true;
					}
					$("#Pregunta").hide();
					$("#ext_pass").val(Elem.extension.password);
					$("#extLog").val(Elem.extension.extension);
					document.getElementById("CrearCampa").innerHTML = i18n.gettext("Editar") + "<i class='material-icons right'>send</i>";
					document.getElementById("CrearCampa").onclick = changeUser;
				}
				$("#formuModal").modal("open");
				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(100%)';
					}
				}

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

				if (Elem != null) {

					if (Elem.extension.extension == Elem.user && Elem.pass == Elem.extension.password) {
						document.getElementById('vieja').checked = true;
					} else {
						document.getElementById('vieja').checked = false;
					}
					if (Elem.extension.extension == "") {
						$("#Extensiones").hide();

						document.getElementById('ext').checked = false;
					} else {
						$("#Extensiones").show();
						document.getElementById('vieja').checked = Elem.extension.extension == Elem.user && Elem.pass == Elem.extension.password;
						document.getElementById('ext').checked = true;
					}
					analiza();
				} else {
					analiza();
					analiza2();
					analiza3();
				}
			},
			changeUserPerron: function(Usuario) {
				var parametros = {
					usuario: Usuario
				};

				$.ajax({
					url: "/<?= RUTA_MAESTRA; ?>/index.php/usuarios/changeUserStatus",
					type: "POST",
					data: parametros,
					dataType: "text",
					success: function(result) {
						var resp = JSON.parse(result);
						if (resp.Estado == 'ok') {
							app.recargar();
						} else {
							M.toast({
								html: resp.Descripcion
							});
						}
						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(100%)';
							}
						}

						if (localStorage.getItem('background') == "black") {
							bla = document.getElementsByClassName('card-panel')
							bla = Array.prototype.slice.call(bla)
							cambiarAOscuro();
						}
					},
					error: function(err) {
						console.log(err);
					}
				});
			},
			recargar: function() {
				if (app.flagRecargar) {
					app.flagRecargar = false;
					var parametros = {
						pagina: app.pagina,
						texto: $("#texto").val()
					};

					$.ajax({
						url: "<?= MODULOS; ?>usuarios/getUsers",
						type: "POST",
						data: parametros,
						dataType: "text",
						error: function(data) {
							console.log(data);
						},
						success: function(result) {
							var resp = JSON.parse(result);
							if (resp.Estado != "ok") {
								M.toast({
									html: resp.Descripcion
								});
							} else {

								app.flagRecargar = true;
								app.databuffer = resp.usuarios;
								$("#paginacion").html("");
								var Anterior = resp.Cuenta;
								resp.Cuenta /= 10;
								resp.Cuenta = Math.floor(resp.Cuenta);
								if (Anterior % 10 != 0) {
									resp.Cuenta++;
								}
								if (app.pagina == 1) {
									$("#paginacion").append(
										"<li class='disabled'><a href='#!'><i class='material-icons'>chevron_left</i></a></li>");
								} else {
									$("#paginacion").append("<li class='waves-effect'><a href='javascript:cambiaPagina(" + (app.pagina - 1) +
										")'><i class='material-icons'>chevron_left</i></a></li>");
								}
								for (var i = 0; i < resp.Cuenta; i++) {
									if (app.pagina == (i + 1)) {
										$("#paginacion").append("<li class='active blue lighten-2 '><a href='javascript:cambiaPagina(" + (i + 1) +
											")'>" + (i + 1) + "</a></li>");
									} else {
										$("#paginacion").append("<li class='waves-effect'><a href='javascript:cambiaPagina(" + (i + 1) + ")'>" +
											(i + 1) + "</a></li>");
									}
								}
								if (app.pagina == resp.Cuenta || resp.Cuenta == 0) {
									$("#paginacion").append(
										"<li class='disabled'><a href='#!'><i class='material-icons'>chevron_right</i></a></li>");
								} else {
									$("#paginacion").append("<li class='waves-effect'><a href='javascript:cambiaPagina(" + (app.pagina + 1) +
										")'><i class='material-icons'>chevron_right</i></a></li>");
								}

								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(100%)';
									}
								}

								if (localStorage.getItem('background') == "black") {
									bla = document.getElementsByClassName('card-panel')
									bla = Array.prototype.slice.call(bla)
									document.getElementById('barrita').style.filter = "invert(100%)";
									cambiarAOscuro();
								}
								$('.barrita').hide();
								setTimeout(() => {
									$('.tooltipped').tooltip();
								}, 1000);
							}
						}
					});
					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(100%)';
						}
					}

					if (localStorage.getItem('background') == "black") {
						bla = document.getElementsByClassName('card-panel')
						bla = Array.prototype.slice.call(bla)
						cambiarAOscuro();
					}
					$("#escondeme").hide();
				}
			},
			// INGROUPS NEW METHODS
			/*
				ingroupsModal: false,
				ingroupsRegs: [],
				campaignIngroups: [],
				ingroupsPage: 1,
				ingroupsCount: 1,
			*/
			showIngroups($evt) {
				document.getElementById("barritaAlt").style.display = "block";
				this.loadIngroups($evt)
			},
			loadIngroups($evt, handler) {
				let self = this
				gen_rpost("GrupoDeEntrada/seleccionarIngroups", {}).then(results => {
					self.loadCampaignIngroups($evt, results.Ingroups)
					self.ingroupsModal = true
					document.getElementById("barritaAlt").style.display = "none";
				}).catch(err => {
					console.log(err)
				})
			},
			loadCampaignIngroups($evt, regs) {
				let newRegs = regs
				const closer_campaigns = $evt.closer_campaigns || ""
				this.campaignIngroupsId = ''
				this.campaignIngroups = null
				this.ingroupsRegs = []
				this.campaignIngroupsId = $evt.user
				// closer_campaigns
				this.campaignIngroups = new Set(closer_campaigns.split(" ").filter(v => v !== "" && v !== "-").reverse())
				newRegs.forEach(value => {
					if (this.campaignIngroups.has(value.id)) {
						value["InCampaign"] = 'Y'
					} else {
						value["InCampaign"] = 'N'
					}
				})
				this.ingroupsRegs = newRegs
			},
			addIngroup($evt) {
				if (!this.campaignIngroups.has($evt.id)) {
					this.campaignIngroups.add($evt.id)
				} else {
					this.campaignIngroups.delete($evt.id)
				}
			},
			saveIngroups() {
				let self = this
				handled_rpost("usuarios/changeIngroup", {
					id: this.campaignIngroupsId,
					ingroups: (function() {
						let str = ' '
						self.campaignIngroups.delete("-")
						self.campaignIngroups.forEach(value => {
							str += value + " "
						})
						str += "-"
						return str
					})()
				}).then(res => {
					self.campaignIngroupsId = ''
					self.campaignIngroups = null
					self.ingroupsRegs = []
					app.recargar()
				}).catch(err => console.log(err))
			},
			// END
			// INICIO - Rango de grupos de entrada
			openIngroupRank(user) {
				document.getElementById("barritaAlt").style.display = "block";
				gen_rpost("GrupoDeEntrada/seleccionarIngroups", {}).then(results => {

					document.getElementById("barritaAlt").style.display = "none";
					const ingroups = results.Ingroups

					console.log(ingroups)

					this.campaignIngroupsId = user.user
					this.userIngroupsSelectOptions = user.closer_campaigns
						.split(' ')
						.filter(v => v !== '' && v !== '-')
						.map(ingroupsId => {
							const ig = ingroups.find(v => v.id === ingroupsId)
							console.log(ig, ingroupsId)
							return {
								value: ingroupsId,
								label: ig.Nombre
							}
						})
					this.userIngroupSelectedId = this.userIngroupsSelectOptions[0].value
					this.ingroupsRankModal = true
					const userIngroupsRanks = {}

					user.ranks.forEach(rank => {
						userIngroupsRanks[rank.group_id] = rank.group_rank;
					})

					this.userIngroupsRanks = userIngroupsRanks
					this.userIngroupSelectedRank = this.userIngroupsRanks[this.userIngroupSelectedId] || 0

				}).catch(err => {
					console.log(err)
					M.toast({
						'html': traducirFrase('El usuario no tiene grupos de entrada')
					});
					console.log("Aquí está el error");

				})

			},
			saveIngroupRank() {
				const self = this;
				handled_rpost("usuarios/changeRank", {
					id: this.campaignIngroupsId,
					ingroup: this.userIngroupSelectedId,
					rank: this.userIngroupSelectedRank,
				}).then(res => {
					console.log(res)
					this.userIngroupsRanks[this.userIngroupSelectedId] = this.userIngroupSelectedRank
				}).catch(err => console.log(err))
			},
			// FIN - Rango en grupos de entrada
			// Solve Issue #567
			cargarUsuarios() {

				const clavesParametros = {
					"Usuario": "usuario", // $("#idShido").val(),
					"Password": "password", // $("#password").val(),
					"Grupo": "grupo", // $("#grupo").val(),
					"Nombre": "nombre", // $("#Nombre").val(),
					"WebRTC": "nueva", // document.getElementById("vieja").checked ? 1 : 0, Si usa webrtc
					"Extension": "extension", // document.getElementById("ext").checked ? 1 : 0,
					"PasswordExtension": "passExt", // $("#ext_pass").val(),
					"Categoria": "grupo2", // $("#Categoria").val(),
					<?php if (NEED_WA && $_SESSION['allow_waCli']) { ?> "WhatsApp": "allow_wa", // 1 : 0
					<?php } ?>
					<?php if ($_SESSION["Cliente"] == -1) { ?> "Cliente": "cliente",
					<?php } ?>
				};

				const input = document.getElementById('archivo_usuarios_masivo')
				const file = input.files[0]
				const fileReader = new FileReader()

				if (!file) {
					M.toast({
						html: traducirFrase('No has seleccionado un archivo.'),
						classes: 'red darken-1 white-text'
					});
					return;
				}

				this.modalFileDisabled = true
				this.modalFileLoading = true

				fileReader.onload = (e) => {

					const promises = []
					const lines = e.target.result.split(/\r?\n|\r/)
					const headers = lines.shift().split(',')

					for (let i = 0; i < headers.length; i++) {
						if (headers[i] !== "PasswordExtension" && !clavesParametros[headers[i]]) {
							M.toast({
								html: traducirFrase('El archivo es incorrecto, no se considera ') + '"' + headers[i] + '"' + traducirFrase(' como campo valido.'),
								classes: 'red darken-1 white-text'
							});
							this.modalFileDisabled = false
							this.modalFileLoading = false
							document.getElementById('archivo_usuarios_masivo').value = ""
							document.getElementById('archivo_usuarios_masivo_filepath').value = ""
							return;
						}
					}

					lines.forEach(line => {

						if (line.length > 0) {
							const user = {}
							const data = line.split(',')

							headers.forEach((h, i) => user[clavesParametros[h]] = data[i])
							if (!user.cliente) {
								user.cliente = "<?= $_SESSION["Cliente"]; ?>"
							}

							if (user.extension === "1" && user.passExt === "") {
								user.passExt = user.password
							}

							promises.push(
								$.post("<?= MODULOS; ?>usuarios/addUser", user).then(r => {
									if (r.Estado === "ok") {
										return null
									} else {
										return {
											descripcion: r.Descripcion,
											usuario: user
										}
									}
									// Usuario creado
								}).catch(e => {
									return {
										descripcion: "Ha ocurrido un error desconocido",
										usuario: user
									}
								})
							)
						}


					});

					Promise.all(promises).then(r => {
						// Terminar carga de usuario
						const errores = []
						const descripciones = []
						r.forEach(r => {
							if (r) {
								errores.push(r.usuario.usuario)
								descripciones.push(r.descripcion)
							}
						})

						if (errores.length > 0) {
							M.toast({
								html: traducirFrase('Hubo un error con los usuarios ') + errores.slice(0, 5).join(', ') + '. <br> ' + traducirFrase('Algunas razones son') + ' <br>"' + descripciones.slice(0, 5).join('",<br>"') + '"',
								classes: 'red darken-1 white-text'
							});
						} else {
							this.modalFile = false
							M.toast({
								html: traducirFrase('Usuarios creados con exito!'),
								classes: 'green darken-1 white-text'
							});
						}
						this.modalFileDisabled = false
						this.modalFileLoading = false
						document.getElementById('archivo_usuarios_masivo').value = ""
						document.getElementById('archivo_usuarios_masivo_filepath').value = ""


					}).catch(e => {
						// Mostrar error
						console.log(e)
						M.toast({
							html: traducirFrase("Ocurrio un error desconocido con las peticiones"),
							classes: 'red darken-1 white-text'
						});
						this.modalFileDisabled = false
						this.modalFileLoading = false
						document.getElementById('archivo_usuarios_masivo').value = ""
						document.getElementById('archivo_usuarios_masivo_filepath').value = ""
					})

				}

				fileReader.readAsText(file)

			},
			// Solve Issue #567
			// Closes 596 {
			cargarUsuariosXCampanas() {
				return selectCampanas().then(campanas => {
					if (campanas) {
						gen_rpost("Campanas/listCampaignToUserByUser", {
							user: this.campanasIdUsuario,
						}).then(r => {
							if (r.Estado === 'ok') {
								const relacionCampanas = r.Registros
								const usuariosXCampanas = []
								this.usuariosXCampanas = []

								campanas.forEach(a => {
									const n = {
										'id': this.campanasIdUsuario + '_' + a.value,
										'name': a.label,
										'campana': a.value,
										'active': 'N',
									};

									if (relacionCampanas && relacionCampanas.find(v => v === a.value)) {
										n['active'] = 'Y';
									}

									usuariosXCampanas.push(n);
								})

								this.usuariosXCampanas = usuariosXCampanas;

							} else {
								MToastError(r.Descripcion)
							}
						}).catch(e => {
							MToastError(e.message)
						})
					} else {
						MToastError("Ocurrio un error obteniendo las campañas.")
					}
				})
			},
			openCampanasModal(item) {
				this.campanasIdUsuario = item.user;
				this.cargarUsuariosXCampanas().then(_ => {
					this.campanasModal = true;
				});
			},
			toggleUserCampaign(item) {
				handled_rpost(
					'Campanas/' +
					(item['active'] === 'Y' ?
						'deleteCampaignToUser' : 'addCampaignToUser'
					), {
						campana: item.campana,
						user: this.campanasIdUsuario,
					}).then(r => {
					this.cargarUsuariosXCampanas();
				});
			}
			// }
		},
		watch: {
			userIngroupSelectedId(newVal) {
				this.userIngroupSelectedRank = this.userIngroupsRanks[newVal] || 0
			}
		},
		created: function() {
			M.toast({
				html: i18n.gettext("Cargando usuarios, por favor espere") + "."
			});
			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(100%)';
				}
			}

			if (localStorage.getItem('background') == "black") {
				bla = document.getElementsByClassName('card-panel')
				bla = Array.prototype.slice.call(bla)
				document.getElementById('barrita').style.filter = "invert(100%)";

				cambiarAOscuro();
			}
			$("#escondeme").hide();

			$('.fixed-action-btn').floatingActionButton();

			this.recargar();
		},
		computed: {
			classObject: function() {
				if (this.ls == 'white') {
					return {};
				} else {
					return {
						filter: 'invert(80%)'
					};
				}
			}
		}
	});
	setInterval(function() {
		app.recargar();
	}, 1000);

	function cambiaPagina(pag) {
		app.pagina = pag;
		app.recargar();
	}

	function abreNuevo() {
		$("#formuModal").modal("open");
		flagInfo = true;
	}

	function creaNuevo() {
		var thePassword = $("#password").val();
		var thePasswordExt = $("#ext_pass").val();
		var format = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]+/;

		if (format.test(thePassword) || format.test(thePasswordExt)) {
			if (format.test(thePassword)) {
				$("#password").addClass("invalid");
			}
			if (format.test(thePasswordExt)) {
				$("#ext_pass").addClass("invalid");
			}
			M.toast({
				'html': traducirFrase("¡La contraseña NO puede tener caracteres especiales!")
			});
			return;
		} else {
			$("#botonModalReg").attr("disabled", true);
			var parametros = {
				usuario: $("#idShido").val(),
				password: $("#password").val(),
				grupo: $("#grupo").val(),
				nombre: $("#Nombre").val(),
				nueva: document.getElementById("vieja").checked ? 1 : 0,
				extension: document.getElementById("ext").checked ? 1 : 0,
				passExt: $("#ext_pass").val(),
				grupo2: $("#Categoria").val(),
				ext: $("#extLog").val(),
				<?php if ($_SESSION["Cliente"] == -1) { ?>
					cliente: $("#Clientes").val(),
				<?php } else { ?>
					cliente: "<?= $_SESSION["Cliente"]; ?>",
				<?php } ?>
				<?php if (NEED_WA && $_SESSION['allow_waCli']) { ?>
					allow_wa: document.getElementById("allow_wa").checked == true ? 1 : 0,
					idUsuario_wa: $("#idUsuario_wa").val(),
				<?php } ?>
			};

			$.ajax({
				url: "/<?= RUTA_MAESTRA; ?>/index.php/usuarios/addUser",
				type: "POST",
				data: parametros,
				dataType: "text",
				success: function(result) {
					var resp = JSON.parse(result);
					if (resp.Estado == 'ok') {
						$("#botonModalReg").attr("disabled", false);
						flagInfo = false;
						$("#formuModal").modal("close");
						app.pagina = 1;
						app.recargar();
						if (resp.numExt != null) {
							Swal.fire(traducirFrase("Creado"), traducirFrase("La extension del usuario es: ") + resp.numExt, "success");
						}
					} else {
						M.toast({
							html: resp.Descripcion,
							classes: 'red darken-1 white-text'
						});
						$("#botonModalReg").attr("disabled", true);
					}
				},
				error: function(err) {
					console.log(err);
				}
			});
		}
	}

	function changeUser(Index) {
		var thePassword = $("#password").val();
		var thePasswordExt = $("#ext_pass").val();
		var format = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]+/;

		if (format.test(thePassword) || format.test(thePasswordExt)) {

			if (format.test(thePassword)) {
				$("#password").addClass("invalid");
			}
			if (format.test(thePasswordExt)) {
				$("#ext_pass").addClass("invalid");
			}
			M.toast({
				'html': traducirFrase("¡La contraseña NO puede tener caracteres especiales!")
			});
			return;
		} else {
			if ($("#grupo").val() != "<?= GRUPO_AGENTES; ?>") {
				var parametros = {
					usuario: $("#idShido").val(),
					pass: $("#password").val(),
					user_group: $("#grupo").val(),
					full_name: $("#Nombre").val(),
					nueva: document.getElementById("vieja").checked ? 1 : 0,
					extension: document.getElementById("ext").checked ? 1 : 0,
					passExt: $("#ext_pass").val(),
					grupo: $("#Categoria").val(),
					<?php if ($_SESSION["Cliente"] == -1) { ?>
						cliente: $("#Clientes").val(),
					<?php } else { ?>
						cliente: "<?= $_SESSION["Cliente"]; ?>",
					<?php } ?>
					ext: $("#extLog").val()
				};
				$.ajax({
					url: "/<?= RUTA_MAESTRA; ?>/index.php/usuarios/updateUser",
					type: "POST",
					data: parametros,
					dataType: "text",
					success: function(result) {
						var resp = JSON.parse(result);
						if (resp.Estado == 'ok') {
							flagInfo = false;
							$("#formuModal").modal("close");
							app.pagina = 1;
							app.recargar();
						} else {
							M.toast({
								html: resp.Descripcion
							});
						}
					},
					error: function(err) {
						console.log(err);
					}
				});
			} else {

				console.log("Hola del else");
				var parametros = {
					usuario: $("#idShido").val()
				};

				$.ajax({
					url: "/<?= RUTA_MAESTRA; ?>/index.php/usuarios/deleteUser",
					type: "POST",
					data: parametros,
					dataType: "text",
					success: function(result) {
						var resp = JSON.parse(result);
						if (resp.Estado == 'ok') {
							creaNuevo();
							app.recargar();
						} else {
							M.toast({
								html: resp.Descripcion,
							})
						}
					},
					error: function(err) {
						console.log(err);
					}
				});

			}
		}

	}

	function activeModal(Index) {

		var Elem = app.databuffer.find(function(val) {
			return val.status == Index;
		});
		$("#formuModal").modal("open");
		var Arreglo = $('select');
		for (var i = 0; i < Arreglo.length; i++) {
			if (Arreglo[i].id != '') {
				$("#" + Arreglo[i].id).formSelect();
			}
		}
	}

	function redirectPost(location, args) {
		var form = '';
		$.each(args, function(key, value) {
			value = value.split('"').join('\"')
			form += '<input type="hidden" name="' + key + '" value="' + value + '">';
		});
		$('<form action="' + location + '" method="POST">' + form + '</form>').appendTo($(document.body)).submit();
	}

	function ajaxToma(usuario, campana, level, nuevo, userExt, passExt, contrasena) {
		$.ajax({
			url: "/<?= RUTA_MAESTRA; ?>/index.php/usuarios/tomarUsuario",
			type: "POST",
			data: {
				usuario: usuario,
				campana: campana,
				userExt: userExt,
				passExt: passExt
			},
			dataType: "text",
			success: function(result) {
				var resp = JSON.parse(result);
				if (resp.Estado == "ok") {
					if (level == 2) {
						if (nuevo) {
							window.location.replace("<?= MODULOS; ?>homeAgente");
						} else {
							redirectPost("/agc_ATP/vicidial.php", {
								phone_login: userExt,
								phone_pass: passExt,
								VD_login: usuario,
								VD_pass: contrasena,
								VD_campaign: campana
							});
						}
					} else {
						window.location.replace("/<?= RUTA_MAESTRA; ?>");
					}
				} else {
					M.toast({
						html: resp.Descripcion
					});
				}
			},
			error: function(data) {
				M.toast({
					'html': traducirFrase('Error al tomar el usuario')
				});
			}
		});
	}
	<?php if ($_SESSION["Cliente"] == -1) { ?>

		function getClientes() {
			$.ajax({
				url: "<?= MODULOS; ?>clientes/getClientsSelect",
				type: "POST",
				dataType: "text",
				error: function(data) {
					console.log(data);
				},
				success: function(result) {
					var resp = JSON.parse(result);
					if (resp.Estado == 'ok') {
						$("#Clientes").html("");
						for (var i = 0; i < resp.Registros.length; i++) {
							$("#Clientes").append("<option value='" + resp.Registros[i].nombre + "'>" + resp.Registros[i].nombre + "</option>");
						}
					} else {
						M.toast({
							html: resp.Descripcion
						});
					}
				}
			});
		}
	<?php } ?>

	function takePosseion(usuario, level, nuevo, contrasena) {
		if (level == 2) {
			$.ajax({
				url: "/<?= RUTA_MAESTRA; ?>/index.php/campanas/getCampaignsSelect",
				type: "POST",
				data: {},
				dataType: "text",
				success: function(result) {
					var opciones = "";
					var resp = JSON.parse(result);
					if (resp.Estado == "ok") {
						for (var i = 0; i < resp.Campanas.length; i++) {
							opciones += "<option value='" + resp.Campanas[i].campaign_id + "'> " + resp.Campanas[i].campaign_name + "</option>";
						}
						var otras = "";
						if (!nuevo) {
							otras = i18n.gettext("Numero de extensión") + ":<input type='text' id='numExtens'><br>" + i18n.gettext("Contraseña de la extensión") + ":<input type='text' id='passExtens'>";
						}
						Swal.fire({
							title: i18n.gettext("Seleccione una campaña"),
							showCancelButton: true,
							confirmButtonText: i18n.gettext("Intruir usuario"),
							cancelButtonText: i18n.gettext("Cancelar"),
							html: i18n.gettext("Campaña") + ':<select class="browser-default" id="campanasExt">' + opciones + '</select><br>' + otras,
							showLoaderOnConfirm: true,
							preConfirm: () => {
								if (nuevo) {
									ajaxToma(usuario, $("#campanasExt").val(), level, nuevo, usuario, contrasena, contrasena);
								} else {
									var parametros = {
										extension: $("#numExtens").val(),
										pass: $("#passExtens").val(),
										campana: $("#campanasExt").val()
									}
									$.ajax({
										url: "/<?= RUTA_MAESTRA; ?>/index.php/Login/validaExtension",
										type: "POST",
										data: parametros,
										dataType: "text",
										success: function(result) {
											var resp = JSON.parse(result);
											if (resp.Estado == 'ok') {
												ajaxToma(usuario, parametros.campana, level, nuevo, parametro.extension, parametro.pass, contrasena);
											} else {
												M.toast({
													html: traducirFrase("Número o contraseña de extension invalida")
												})
											}
										},
										error: function(err) {
											console.log(err);
										}
									});
								}
							}
						});

					} else {
						M.toast({
							html: resp.Descripcion
						});
					}
				}
			});
		} else {
			ajaxToma(usuario, "");
		}
	}

	function borrarUser(user) {
		Swal.fire({
			title: i18n.gettext("Eliminar usuario"),
			html: i18n.gettext("Esta seguro de que desea eliminar el usuario") + ' : ' + user + '? \n' + i18n.gettext("Esta acción no se puede deshacer"),
			type: 'warning',
			footer: "",
			confirmButtonText: i18n.gettext("Continuar"),
			cancelButtonText: i18n.gettext("Cancelar"),
			showCancelButton: true,
			showLoaderOnConfirm: true,
			preConfirm: () => {
				expulsarUsuarioSinAlert(
					user,
					function() {
						var parametros = {
							usuario: user
						};

						$.ajax({
							url: "/<?= RUTA_MAESTRA; ?>/index.php/usuarios/deleteUser",
							type: "POST",
							data: parametros,
							dataType: "text",
							success: function(result) {
								var resp = JSON.parse(result);
								if (resp.Estado == 'ok') {
									Swal.fire(traducirFrase("Borrado"), traducirFrase("El usuario fue borrado exitosamente"), "success");
									app.recargar();
								} else {
									M.toast({
										html: resp.Descripcion,
									})
								}
							},
							error: function(err) {
								console.log(err);
							}
						});
					},
					function(err) {
						M.toast({
							html: err,
						})
					}
				)

			}

		});
	}

	function cargaCategorias() {
		$.ajax({
			url: "/<?= RUTA_MAESTRA; ?>/index.php/GrupoAgentes/getGroupsSelect",
			type: "POST",
			dataType: "text",
			success: function(result) {
				var resp = JSON.parse(result);
				if (resp.Estado == 'ok') {
					$("#Categoria").html("");
					for (var i = 0; i < resp.Registros.length; i++) {
						$("#Categoria").append("<option value='" + resp.Registros[i].id + "'>" + resp.Registros[i].Grupo + "</option>");
					}
					var Arreglo = $('select');
					for (var i = 0; i < Arreglo.length; i++) {
						if (Arreglo[i].id != '') {
							$("#" + Arreglo[i].id).formSelect();
						}
					}
				} else {
					M.toast({
						html: resp.Descripcion,
					})
				}
			},
			error: function(err) {
				console.log(err);
			}
		});
	}
	setInterval(() => {
		cargaCategorias();
	}, 60000);

	function expulsarUsuarioSinAlert(user, callback, error) {
		var parametros = {
			usuario: user
		};

		$.ajax({
			url: "/<?= RUTA_MAESTRA; ?>/index.php/usuarios/ejectAgent",
			type: "POST",
			data: parametros,
			dataType: "text",
			success: function(result) {
				var resp = JSON.parse(result);
				if (resp.Estado == 'ok') {
					callback()
				} else {
					error(resp.Descripcion)
				}
			},
			error: function(err) {
				console.log(err);
				error("Ocurrió un error inesperado expulsando al usuario")
			}
		});
	}

	function expulsarUsuario(user) {
		Swal.fire({
			title: i18n.gettext("Ejectar usuario"),
			html: i18n.gettext("¿Esta seguro de que quiere ejectar al usuario") + ' : ' + user + '?\n ' + i18n.gettext("Esto sacará al usuario de su sesión"),
			type: 'warning',
			footer: "",
			confirmButtonText: i18n.gettext("Continuar"),
			cancelButtonText: i18n.gettext("Cancelar"),
			showCancelButton: true,
			showLoaderOnConfirm: true,
			preConfirm: () => {
				var parametros = {
					usuario: user
				};

				$.ajax({
					url: "/<?= RUTA_MAESTRA; ?>/index.php/usuarios/ejectAgent",
					type: "POST",
					data: parametros,
					dataType: "text",
					success: function(result) {
						var resp = JSON.parse(result);
						if (resp.Estado == 'ok') {
							Swal.fire("Ejectado", "El usuario fue ejectado exitosamente", "success");
							app.recargar();
						} else {
							M.toast({
								html: resp.Descripcion,
							})
						}
					},
					error: function(err) {
						console.log(err);
					}
				});
			}

		});
	}
</script>