<!--<div class="col s6 offset-s3 valign-wrapper" id="barrita" style="">
	<div class="progress" >
		<div class="indeterminate"></div>
	</div>
</div>-->

<!-- //////////////////////////////////////////////////////////////////////////// -->
<!-- START CONTENT -->
<div id="mainTwo" v-cloak>
	<div class="barrita" style="position: absolute;right: 0%;left:0%;">
		<center><img src="<?=IMG_ADMIN;?>spinner.gif"></center>
	</div>
	<div class="" style="margin-top: 75px;">
		<section id="content">
			<div class="container card-panel white">
				<div class="section">
					<br>
					<div class="row">
						<div class="col s3">
							<input type='text' id='texto' class="form-control" :placeholder='traducirFrase("Busqueda")' onkeyup='cambiaPagina(1);'>
						</div>
					</div>
					<table class="table striped highlight responsive-table">
						<thead>
							<tr>
								<th>{{i18n.gettext("Id")}}</th>
								<th>{{i18n.gettext("Nombre")}}</th>
								<?php if ($_SESSION["Grupo"] == GRUPO_ADMINS) {?>
									<th>{{i18n.gettext("Opciones")}}</th>
								<?php }?>
							</tr>
						</thead>
						<tbody>
							<tr v-for='grupo in databuffer'>
								<td>{{grupo.id}} </td>
								<td>{{grupo.Grupo}}</td>
								<?php if ($_SESSION["Grupo"] == GRUPO_ADMINS) {?>
									<td>
										<a href="#" class="tooltipped" v-bind:data-tooltip="translate('Editar grupo de agentes')" data-position="top" v-on:click="abreModal(grupo.id)"><i class="material-icons">edit</i></a>
										<a href="#" class="tooltipped" v-bind:data-tooltip="translate('Borrar grupo de agentes')" data-position="top" v-on:click="deleteCampana(grupo.Grupo,grupo.id)"><i class="material-icons">delete</i></a>
									</td>
								<?php }?>
							</tr>
						</tbody>
					</table>
				</div>
				<?php if ($_SESSION["Grupo"] == GRUPO_ADMINS) {?>
					<div class="center" id='botonCrear'>
						<a class="waves-effect waves-light btn blue lighten-2 " v-on:click="abreModal('')">{{i18n.gettext("Nuevo grupo de agentes")}}</a>
					</div>
				<?php }?>
				<ul class="pagination center" id='paginacion'>

				</ul>
				<br><br>
				<br><br>

			</div>
			<!--end container-->
		</section>
	</div>
	<div id='formuModal' class='modal' style="height: 80%; max-height:80%;  width:40%" v-bind:style="classObject">
		<div class='modal-content'>
			<div class='row'>
				<h3 id='titulo'>{{i18n.gettext("Crear grupo de agentes")}}</h3>
			</div>
			<div class='row'>
				<div class='col s12'>
					<div class='row'>
						<div class='input-field col s12'>
							<input type='hidden' id='id'>
							<input required='required' type='text' id='nombre' class='validate' placeholder='' autocomplete="new-password">
							<label for='nombre' class='active'>
								{{i18n.gettext("Nombre")}}
							</label>
						</div>
					</div>
					<div class='row'>
						<div class="col s8 offset-s2">
							<button class="modal-close btn waves-effect waves-light" type='button' id='CancelarCampa'>{{i18n.gettext("Cancelar")}}
								<i class="material-icons right">cancel</i>
							</button>
							<button class=" btn waves-effect waves-light" onclick="creaNuevo()" id='CrearCampa' type='button'>{{i18n.gettext("Crear")}}
								<i class="material-icons right">send</i>
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- END CONTENT -->
<!-- //////////////////////////////////////////////////////////////////////////// -->



<!-- END MAIN -->
<!-- //////////////////////////////////////////////////////////////////////////// -->
<!-- START FOOTER -->
<?php require_once UTILS_PATH . 'footer.php';?>
</div>
</div>
<!-- END FOOTER -->
<!-- ================================================
    Scripts
    ================================================ -->
<!-- jQuery Library -->
<script type="text/javascript" src="<?=VENDORS_ADMIN;?>jquery-3.2.1.min.js"></script>
<!--materialize js-->
<script type="text/javascript" src="<?=JS_ADMIN;?>materialize.min.js"></script>
<!--scrollbar-->
<script type="text/javascript" src="<?=VENDORS_ADMIN;?>perfect-scrollbar/perfect-scrollbar.min.js"></script>
<!-- chartjs -->
<script type="text/javascript" src="<?=VENDORS_ADMIN;?>chartjs/chart.min.js"></script>
<!-- sparkline -->
<script type="text/javascript" src="<?=VENDORS_ADMIN;?>sparkline/jquery.sparkline.min.js"></script>
<!-- google map api -->
<script type="text/javascript" src="<?=JS_ADMIN;?>maps.js"></script>
<!--jvectormap-->
<script type="text/javascript" src="<?=VENDORS_ADMIN;?>jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script type="text/javascript" src="<?=VENDORS_ADMIN;?>jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script type="text/javascript" src="<?=VENDORS_ADMIN;?>jvectormap/vectormap-script.js"></script>
<!--google map-->

<!--plugins.js - Some Specific JS codes for Plugin Settings-->
<script type="text/javascript" src="<?=JS_ADMIN;?>plugins.js"></script>
<!--card-advanced.js - Page specific JS-->
<script type="text/javascript" src="<?=JS_ADMIN;?>scripts/dashboard-analytics.js"></script>
<!--custom-script.js - Add your own theme custom JS
    <script type="text/javascript" src="<?=JS_ADMIN;?>custom-script.js"></script>-->
<script src="<?=JS_ADMIN;?>vue.js"></script>
<script src="<?=JS_ADMIN;?>Chart.min.js"></script>
<script src="<?=JS_ADMIN;?>gauge.min.js"></script>
<script src="<?=JS_ADMIN;?>raphael.js"></script>
<script src="<?=JS_ADMIN;?>justgage.js"></script>
<script src="<?=LIB_JS;?>sweetalert2.js" type="text/javascript"></script>


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

	} else {

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

	}

	var app = new Vue({
		el: '#main',
		data: {
			databuffer: {},
			flagRecargar: true,
			pagina: 1,
			i18n: i18n
		},
		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();
			}
			$("#escondeme").hide();
			$(".modal").modal();

		},
		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) {
				if (id == "") {
					cambioManual("titulo", "Crear grupo de agentes");
					$("#nombre").val("");
					document.getElementById("CrearCampa").innerHTML = i18n.gettext("Crear") + "<i class='material-icons right'>send</i>";
					document.getElementById("CrearCampa").onclick = creaNuevo;
					$("#formuModal").modal("open");
				} else {
					var Elem = app.databuffer.find(function(val) {
						return val.id == id;
					});
					cambioManual("titulo", "Editar grupo de agentes");
					$("#nombre").val(Elem.Grupo);
					$("#id").val(Elem.id);
					document.getElementById("CrearCampa").innerHTML = i18n.gettext("Editar") + "<i class='material-icons right'>send</i>";
					document.getElementById("CrearCampa").onclick = editar;
					$("#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();
			},
			recargar: function() {
				if (this.flagRecargar) {
					this.flagRecargar = false;
					var pagina = 1;
					if (app != null) {
						pagina = app.pagina;
					}
					$.ajax({
						url: "GrupoAgentes/getGroups",
						type: "POST",
						data: {
							pagina: pagina,
							texto: $("#texto").val()
						},
						dataType: "text",
						error: function(data) {
							console.log(data);
						},
						success: function(response) {
							$('.barrita').hide();
							app.flagRecargar = true;
							$("#botonCrear").show();
							var res = JSON.parse(response);
							if (res.Estado == 'ok') {
								app.databuffer = res.Registros;
								$("#paginacion").html("");
								var Anterior = res.Cuenta;
								res.Cuenta /= 15;
								res.Cuenta = Math.floor(res.Cuenta);
								if (Anterior % 15 != 0) {
									res.Cuenta++;
								}
								if (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(" + (pagina - 1) +
										")'><i class='material-icons'>chevron_left</i></a></li>");
								}
								for (var i = 0; i < res.Cuenta; i++) {
									if (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 (pagina == res.Cuenta || res.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(" + (pagina + 1) +
										")'><i class='material-icons'>chevron_right</i></a></li>");
								}
								setTimeout(() => {
									$('.tooltipped').tooltip();
								}, 1000);
							} else {
								M.toast({
									'html': res.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();
				}
				$("#escondeme").hide();
			},
			deleteCampana: function(nombre, id) {
				Swal.fire({
					type: 'warning',
					title: i18n.gettext("Eliminar grupo de agentes"),
					text: i18n.gettext("¿Desea borrar el grupo de agente") + ' : ' + nombre + '?\n ' + i18n.gettext("Esta acción no se puede deshacer"),
					showCancelButton: true,
					confirmButtonColor: '#3085d6',
					cancelButtonColor: '#d33',
					confirmButtonText: i18n.gettext("Si"),
					cancelButtonText: i18n.gettext("Cancelar"),
					preConfirm: () => {
						$.ajax({
							url: "GrupoAgentes/delete",
							type: "POST",
							data: {
								campana: id
							},
							dataType: "text",
							success: function(response) {
								var res = JSON.parse(response);
								if (res.Estado == "error") {
									M.toast({
										'html': '<h1>Error:</h1>' + res.Descripcion
									});
								} else {
									M.toast({
										'html': traducirFrase('Grupo de agente eliminado')
									});
									app.recargar();
								}
							}
						});
					}
				});
			}
		},
		created: function() {
			M.toast({
				html: i18n.gettext("Cargando datos, 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)
				cambiarAOscuro();
			}
			$("#escondeme").hide();

			this.recargar();
		},
		computed: {
			classObject: function() {
				if (localStorage.getItem('background') == 'white') {
					return {};
				} else {
					return {
						filter: 'invert(85%)'
					};
				}
			}
		}
	});
	setInterval(function() {
		app.recargar();
	}, 3000);

	function creaNuevo() {
		var parametros = {
			nombre: $("#nombre").val(),
		}
		$.ajax({
			url: "GrupoAgentes/addGroup",
			type: "POST",
			data: parametros,
			dataType: "text",
			error: function(data) {
				console.log(data);
			},
			success: function(response) {
				var res = JSON.parse(response);
				if (res.Estado == 'ok') {
					$("#formuModal").modal("close");
					app.recargar();
					M.toast({
						'html': traducirFrase("Grupo de agente creado")
					});
				} else {
					M.toast({
						'html': res.Descripcion
					});
				}
			}
		});
	}

	function editar() {
		var parametros = {
			nombre: $("#nombre").val(),
			grupo: $("#id").val()
		};
		$.ajax({
			url: "GrupoAgentes/editGroup",
			type: "POST",
			data: parametros,
			dataType: "text",
			error: function(data) {
				console.log(data);
			},
			success: function(response) {
				var res = JSON.parse(response);
				if (res.Estado == 'ok') {
					$("#formuModal").modal("close");
					app.recargar();
					M.toast({
						'html': traducirFrase("Grupo de agente editado")
					});
				} else {
					M.toast({
						'html': res.Descripcion
					});
				}
			}
		});
	}

	function cambiaPagina(num) {
		app.pagina = num;
		app.recargar();
	}
</script>

<script>
	document.getElementById("texto").placeholder = i18n.gettext("Busqueda") + "...";
</script>

</body>

<!-- Mirrored from pixinvent.com/materialize-material-design-admin-template/html/horizontal-menu/ by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 07 Aug 2018 16:55:15 GMT -->

</html>