<!--<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;left:0%;right:0%;top:30%;z-index:10;display:none;">
		<center><img src="<?=IMG_ADMIN;?>spinner.gif"></center>
	</div>
	<div class="" style="margin-top: -60px;">
		<section id="content">

			<div class="container card-panel white">
				<div class="">
					<h4>{{i18n.gettext("Estado de Pausa")}}</h4>
					<label for='UWU'>{{i18n.gettext("Campaña")}}:</label>
					<select class='browser-default' v-model.lazy='campanaAct' id='UWU' style="width:180px;" v-on:change="spinnerFix">

						<option v-for='campana in campanas' v-bind:value='campana.campaign_id'>{{campana.campaign_name}}</option>
					</select>

					<table class="table striped highlight responsive-table">
						<thead>
							<tr>
								<th>{{i18n.gettext("Codigo de Pausa")}}</th>
								<th>{{i18n.gettext("Nombre")}}</th>
								<?php if ($_SESSION["Grupo"] == GRUPO_ADMINS) {?>
									<th>{{i18n.gettext("Opciones")}}</th>
								<?php }?>
							</tr>
						</thead>
						<tbody>
							<tr v-for='estatus in databuffer.Registros'>
								<td>{{estatus.estado}} </td>
								<td>{{estatus.nombre}} </td>
								<?php if ($_SESSION["Grupo"] == GRUPO_ADMINS) {?>
									<td>
										<a href="#" class="tooltipped" v-bind:data-tooltip="translate('Editar codigo de pausa')" data-position="top" v-on:click="abreModal(estatus.estado)"><i class="material-icons">edit</i></a>
										<a href="#" class="tooltipped" v-bind:data-tooltip="translate('Borrar codigo de pausa')" data-position="top" v-on:click="deleteCampana(estatus.estado,estatus.nombre)"><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 Codigo de Pausa")}}</a>
					</div>
				<?php }?>
				<ul class="pagination center" id='paginacion'>

				</ul>
				<br><br>
				<div class="center-align">
					<a class="btn" href="../campanas">{{i18n.gettext("Volver a campañas")}}</a>
				</div>
				<br><br>

			</div>
			<!--end container-->
		</section>
	</div>
</div>
<div id='formuModal' class='modal' style="height: 80%; max-height:80%;  width:40%">
	<div class='modal-content'>
		<div class='row'>
			<h3 id='titulo'>{{traducirFrase("Crear codigo de pausa")}}</h3>
		</div>
		<div class='row'>
			<div class='col s12'>
				<div class='row'>
					<div class='input-field col s12'>
						<h4 id='codigo'></h4>
						<input type='hidden' id='idShido'>
					</div>
				</div>
				<div class='row'>
					<div class='input-field col s6'>
						<input required='required' type='text' id='estado' class='validate' placeholder='' autocomplete="new-password">
						<label for='estado' class='active'>
							{{traducirFrase("Código")}}
						</label>
					</div>
					<div class='input-field col s6'>
						<input required='required' type='text' id='nombre' class='validate' placeholder='' autocomplete="new-password">
						<label for='nombre' class='active'>
							{{traducirFrase("Nombre")}}
						</label>
					</div>
					<div class="input-field col s12">
						<input
							required
							type="number"
							min="0"
							max="86400"
							placeholder="Tiempo limite (segundos)"
							id="tiempo_limite"
						/>
						<label for="tiempo_limite" class="active">
							{{traducirFrase("Tiempo limite en segundos")}}
						</label>
					</div>
					<div class="input-field col s12">
						<input
							required
							type="number"
							min="0"
							max="86400"
							placeholder="Cantidad maxima de pausas al día"
							id="cantidad_pausa"
						/>
						<label for="cantidad_pausa" class="active">
							{{traducirFrase("Cantidad maxima de pausas")}}
						</label>
					</div>
					<div class="input-field col s12">
						<p>
							<label for="requierePassword">
								<input type="checkbox" id="requierePassword">
								<span>
								{{traducirFrase("Desactivar por supervisor")}}
								</span>
							</label>
						</p>
					</div>
					<div class="input-field col s12">
						<p>
							<label for="es_global">
								<input type="checkbox" id="es_global">
								<span>
								{{traducirFrase("La pausa es global")}}
								</span>
							</label>
						</p>
					</div>
				</div>
				<div class='row'>
					<div class="col s8 offset-s2">
						<button class="modal-close btn waves-effect waves-light" type='button' id='CancelarCampa'>{{traducirFrase("Cancelar")}}
							<i class="material-icons right">cancel</i>
						</button>
						<button class=" btn waves-effect waves-light" onclick="creaNuevo()" id='CrearCampa' type='button'>{{traducirFrase("Crear")}}
							<i class="material-icons right">send</i>
						</button>
					</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 flagBar = false;
	var app = new Vue({
		el: '#main',
		data: {
			flagOtro: true,
			databuffer: {},
			flagRecargar: true,
			pagina: 1,
			campanaAct: '',
			campanas: [],
			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();
			$("#barrita").show();
			this.cargarCampanas();
			this.recargar();
		},
		methods: {
			spinnerFix: function() {
				flagBar = !flagBar;
				cambiaPagina(1);
			},
			deten: function() {
				flagRecargar = false;
			},
			continua: function() {
				flagRecargar = true;
			},
			nivelMod: function() {
				return parseFloat(this.nivel).toFixed(2);
			},
			translate: function(texto) {
				if (i18n) return i18n.gettext(texto)
			},
			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;
			},
			cargarCampanas: function() {
				$.ajax({
					url: "<?=MODULOS;?>campanas/getCampaignsSelect",
					type: "POST",
					dataType: "text",
					error: function(data) {
						console.log(data);
					},
					success: function(response) {
						var res = JSON.parse(response);
						if (res.Estado == 'ok') {
							app.campanas = res.Campanas;
						} else {
							M.toast({
								'html': res.Descripcion
							});
						}
					}
				});
			},
			abreModal: function(id) {
				if (id == '') {
					$("#titulo").html(i18n.gettext("Codigo de Pausa"));
					$("#codigo").html("");
					$("#estado").val("");
					$("#estado").prop('disabled', false);
					$("#idShido").val("");
					$("#nombre").val("");
					$("#tiempo_limite").val("");
					$("#cantidad_pausa").val("");
					document.getElementById("requierePassword").checked = false;
					document.getElementById("es_global").checked=false;
					$("#CrearCampa").html(i18n.gettext("Crear codigo de pausa"));
					document.getElementById("CrearCampa").onclick = creaNuevo;
				} else {
					var Elem = this.databuffer.Registros.find(function(elem) {
						if (elem.estado == id) {
							return true;
						}
						return false;
					});
					$("#titulo").html(i18n.gettext("Codigo de pausa"));
					$("#codigo").html(Elem.estado);
					$("#estado").val(Elem.estado);
					$("#estado").prop('disabled', true);
					$("#idShido").val(Elem.estado);
					$("#nombre").val(Elem.nombre);
					$("#tiempo_limite").val(Elem.tiempo_limite);
					$("#cantidad_pausa").val(Elem.cantidadMaxima);
					document.getElementById("requierePassword").checked = Elem.requiere_aprovacion === "1";
					document.getElementById("es_global").checked=Elem.esGlobal ==="1";
					$("#CrearCampa").html(i18n.gettext("Editar codigo de pausa"));
					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 codigo de pausa'),
					text: i18n.gettext('¿Desea borrar el codigo de pausa: ') + 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: "<?=MODULOS;?>estadosPausa/deleteStatus",
							type: "POST",
							data: {
								campana: app.campanaAct,
								estado: 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("Codigo de pausa borrado")
									});
									app.recargar();
								} else {
									M.toast({
										'html': res.Descripcion
									});
								}
							}
						});
						Swal.fire(
							i18n.gettext('Borrado'),
							i18n.gettext('El codigo de pausa fue borrado'),
							'success'
						);
					}
				});

			},
			recargar: function() {
				if (app.flagRecargar) {
					if (flagBar) {
						$('#barrita').show();
					}
					app.flagRecargar = false;
					if (app.flagOtro) {
						app.flagOtro = false;
						var url_string = window.location.href;
						var url = new URL(url_string);
						app.campanaAct = url.searchParams.get("campana");
						if (app.campanaAct == null) {
							app.campanaAct = "";
						}
					}
					var parametros = {
						pagina: app.pagina,
						campana: app.campanaAct
					}
					$.ajax({
						url: "<?=MODULOS;?>EstadosPausa/getStatuses",
						type: "POST",
						data: parametros,
						dataType: "text",
						error: function(data) {
							console.log(data);
						},
						success: function(response) {
							app.flagRecargar = true;
							var res = JSON.parse(response);
							if (res.Estado == 'ok') {
								$("#barrita").hide();
								app.databuffer = res;
								flagInfo3 = false;
								$("#paginacion").html("");
								var Anterior = res.Cuenta;
								res.Cuenta /= 10;
								res.Cuenta = Math.floor(res.Cuenta);
								if (Anterior % 10 != 0) {
									res.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 < res.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 == 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(" + (app.pagina + 1) +
										")'><i class='material-icons'>chevron_right</i></a></li>");
								}
								setTimeout(() => {
									$('.tooltipped').tooltip();
								}, 1000);
								if (flagBar) {
									flagBar = !flagBar;
								}
								$('#barrita').hide();
							} 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();
				}
			}
		},
		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();

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

			this.recargar();
			this.cargarCampanas();
		},
		computed: {
			classObject: function() {
				if (this.ls == 'white') {
					return 'black-text';
				} else {
					return 'white-text';
				}
			}
		}
	});
	app.recargar();
	app.cargarCampanas();
	setInterval(function() {
		app.recargar();
	}, 30000);
	setInterval(function() {
		app.cargarCampanas();
	}, 120000);

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

	function creaNuevo() {
		var parametros = {
			estado: $("#estado").val(),
			nombre: $("#nombre").val(),
			campana: app.campanaAct,
			tiempo_limite: Math.min(86400,$("#tiempo_limite").val()),
			cantidadMaxima: $("#cantidad_pausa").val(),
			requiere_password: document.getElementById("requierePassword").checked ? 1 : 0,
			esGlobal:document.getElementById("es_global").checked? 1:0
		}
		$.ajax({
			url: "<?=MODULOS;?>estadosPausa/addStatus",
			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 editaCategoria() {
		var parametros = {
			nombre: $("#nombre").val(),
			estado: $("#idShido").val(),
			campana: app.campanaAct,
			tiempo_limite: Math.min(86400,$("#tiempo_limite").val()),
			cantidadMaxima: $("#cantidad_pausa").val(),
			requiere_password: document.getElementById("requierePassword").checked ? 1 : 0,
			esGlobal:document.getElementById("es_global").checked? 1:0
		}
		$.ajax({
			url: "<?=MODULOS;?>estadosPausa/editStatus",
			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>