<!--<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 id="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">
					<table class="table striped highlight responsive-table">
						<thead>
							<tr>
								<th>{{i18n.gettext("Id")}}</th>
								<th>{{i18n.gettext("Nombre")}}</th>
								<th>{{i18n.gettext("Descripción")}}</th>
								<?php if ($_SESSION["Grupo"] == GRUPO_ADMINS) { ?>
									<th>{{i18n.gettext("Opciones")}}</th>
								<?php } ?>
							</tr>
						</thead>
						<tbody>
							<tr v-for='categoria in databuffer.Registros'>
								<td>{{categoria.vsc_id}} </td>
								<td>{{categoria.vsc_name}} </td>
								<td>{{categoria.vsc_description}} </td>
								<?php if ($_SESSION["Grupo"] == GRUPO_ADMINS) { ?>
									<td>
										<a href="#" class="tooltipped" v-bind:data-tooltip="translate('Editar categoria')" data-position="top" v-on:click="abreModal(categoria.vsc_id)"><i class="material-icons">edit</i></a>
										<a href="#" class="tooltipped" v-bind:data-tooltip="translate('Borrar categoria')" data-position="top" v-on:click="deleteCampana(categoria.vsc_id,categoria.vsc_name)"><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("Nueva Categoria")}}</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 Categoria")}}</h3>
			</div>
			<div class='row'>
				<div class='col s12'>
					<div class='row'>
						<div class='input-field col s12'>
							<h4 id='idvsc'></h4>
							<input type='hidden' id='idShido'>
						</div>
					</div>
					<div class='row'>
						<div class='input-field col s12'>
							<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='input-field col s12'>
							<input required='required' type='text' class='validate' id='descripcion' maxlength='40' autocomplete="new-password">
							<label for='descripcion' class='active'>
								{{i18n.gettext("Descripción")}}
							</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,
			ls: localStorage.getItem('background'),
			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)
				document.getElementById('barrita').style.filter = 'invert(100%)';
				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(id) {
				if (id == '') {
					cambioManual("titulo", "Crear Categoria");
					$("#idvsc").html("");
					$("#idShido").val("");
					$("#nombre").val("");
					$("#descripcion").val("");
					document.getElementById("CrearCampa").innerHTML = i18n.gettext("Crear") + "<i class='material-icons right'>send</i>";
					document.getElementById("CrearCampa").onclick = creaNuevo;
				} else {
					var Elem = this.databuffer.Registros.find(function(elem) {
						if (elem.vsc_id == id) {
							return true;
						}
						return false;
					});
					cambioManual("titulo", "Editar Categoria");
					$("#idvsc").html(Elem.vsc_id);
					$("#idShido").val(Elem.vsc_id);
					$("#nombre").val(Elem.vsc_name);
					$("#descripcion").val(Elem.vsc_description);
					document.getElementById("CrearCampa").innerHTML = i18n.gettext("Editar") + "<i class='material-icons right'>send</i>";
					document.getElementById("CrearCampa").onclick = editaCategoria;
				}
				$("#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();
			},
			deleteCampana: function(id, nombre) {
				Swal.fire({
					type: 'warning',
					title: i18n.gettext("Eliminar categoria"),
					text: i18n.gettext("¿Desea borrar la categoria") + ' : ' + id + '-' + 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: "categorias/deleteCategory",
							type: "POST",
							data: {
								categoria: id
							},
							dataType: "text",
							error: function(data) {
								console.log(data);
							},
							success: function(response) {
								var res = JSON.parse(response);
								if (res.Estado == 'ok') {
									M.toast({
										'html': traducirFrase("Categoria borrada")
									});
									app.recargar();
								} else {
									M.toast({
										'html': res.Descripcion
									});
								}
							}
						});
						Swal.fire(
							traducirFrase('Borrado'),
							traducirFrase('La categoria fue borrada'),
							'success'
						);
					}
				});

			},
			recargar: function() {
				if (this.flagRecargar) {
					this.flagRecargar = false;
					var pagina = 1;
					if (app != null) {
						pagina = app.pagina;
					}
					$.ajax({
						url: "categorias/getCategories",
						type: "POST",
						data: {
							pagina: pagina
						},
						dataType: "text",
						error: function(data) {
							console.log(data);
						},
						success: function(response) {
							app.flagRecargar = true;
							$("#botonCrear").show();
							//document.getElementById("barrita").style.display = "none"; //// ABDIEL <------------------------
							$('#barrita').hide();
							var res = JSON.parse(response);
							if (res.Estado == 'ok') {

								app.databuffer = res;
								$("#paginacion").html("");
								var Anterior = res.Cuenta;
								res.Cuenta /= 10;
								res.Cuenta = Math.floor(res.Cuenta);
								if (Anterior % 10 != 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>");
								}
								$('#barrita').hide();
								setTimeout(() => {
									$('.tooltipped').tooltip();
								}, 1000);
							} else {
								M.toast({
									'html': resp.Descripcion
								});
							}
						}
					});
				}

				$("#escondeme").hide();
			}
		},
		created: function() {
			M.toast({
				html: traducirFrase("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 (this.ls == 'white') {
					return {};
				} else {
					return {
						filter: 'invert(85%)'
					};
				}
			}
		}
	});
	setInterval(function() {
		app.recargar();
	}, 3000);

	function creaNuevo() {
		var parametros = {
			nombre: $("#nombre").val(),
			descripcion: $("#descripcion").val(),
			vdad: 'N',
			sale: 'Y',
			dead: 'Y'
		}
		$.ajax({
			url: "categorias/addCategory",
			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();
				} else {
					M.toast({
						'html': res.Descripcion
					});
				}
			}
		});
	}

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

	function editaCategoria() {
		var parametros = {
			nombre: $("#nombre").val(),
			descripcion: $("#descripcion").val(),
			vdad: 'N',
			sale: 'Y',
			dead: 'Y',
			categoria: $("#idShido").val()
		}
		$.ajax({
			url: "categorias/editCategory",
			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();
				} else {
					M.toast({
						'html': res.Descripcion
					});
				}
			}
		});
	}
</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>