<!--<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("Estatus de reciclaje")}}</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("Status")}}</th>
								<th>{{i18n.gettext("Leads al maximo")}}</th>
								<?php if ($_SESSION["Grupo"] == GRUPO_ADMINS) {?>
									<th>{{i18n.gettext("Opciones")}}</th>
									<th>{{i18n.gettext("Activado")}}</th>
								<?php }?>
							</tr>
						</thead>
						<tbody>
							<tr v-for='estatus in databuffer.Registros'>
								<td>{{estatus.status}} </td>
								<td>{{estatus.maximo}} </td>
								<?php if ($_SESSION["Grupo"] == GRUPO_ADMINS) {?>
									<td>
										<a href="#" class="tooltipped" v-bind:data-tooltip="translate('Editar status de reciclaje')" data-position="top" v-on:click="abreModal(estatus.recycle_id)"><i class="material-icons">edit</i></a>
										<a href="#" class="tooltipped" v-bind:data-tooltip="translate('Borrar status de reciclaje')" data-position="top" v-on:click="deleteCampana(estatus.recycle_id,estatus.status)"><i class="material-icons">delete</i></a>
									</td>
									<td>
										<div class="switch">
											<label class="active" v-if="estatus.active == 'N'">
												Off
												<input type="checkbox" v-on:click="activaCampana(estatus.recycle_id)">
												<span class="lever "></span>
												On
											</label>
											<label class="active" v-if="estatus.active == 'Y'">
												Off
												<input type="checkbox" class="" v-on:click="activaCampana(estatus.recycle_id)" checked>
												<span class="lever  "></span>
												On
											</label>
										</div>
									</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 estatus de reciclaje")}}</a>
					</div>
				<?php }?>
				<ul class="pagination center" id='paginacion'>

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

			</div>
			<!--end container-->
		</section>
	</div>
	<div id='formuModal' class='modal' style="height: 80%; max-height:80%;  width:40%">
	<div class='modal-content'>
		<div class='row'>
			<h3 id='titulo'></h3>
		</div>
		<div class='row'>
			<div class='col s12'>
				<div class='row'>
					<div class='input-field col s12'>
						<h4 id='Status'></h4>
						<input type='hidden' id='idShido'>
					</div>
				</div>
				<div class='row' id="hideThis">
					<div class='input-field col s6'>
						<label for='estado' class='active'>
							{{traducirFrase("Estatus")}}
							<select required='required' class="browser-default" id="statusSelec">
							</select>
						</label>
					</div>
				</div>
				<div class='row'>
					<div class='input-field col s6'>
						<input required='required' type='number' min="120" id='attempt_delay' class='validate active '>
						<label for='estado' class='active'>
							{{traducirFrase("Retardo para intentar")}}
						</label>
					</div>
					<div class='input-field col s6'>
						<input required='required' type='number' min="1" max="10" id='attempt_maximum' class='validate active'>
						<label for='nombre' class='active'>
							{{traducirFrase("Maximo de intentos")}}
						</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'>{{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>
</div>

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



<!-- END MAIN -->
<!-- //////////////////////////////////////////////////////////////////////////// -->
<!-- START FOOTER -->
<?php require_once UTILS_PATH . 'footer.php';?>

<!-- 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 == '') {
					$.post("<?=MODULOS;?>ReciclajeLeads/getStatusesSelect", {
						campana: app.campanaAct
					}).then(res => {
						if (res.Estado === "ok") {
							$("#statusSelec").html("");
							res.Registros.forEach(val => {
								$("#statusSelec").append("<option value='" + val.estado + "'>" + val.estado + " - " + val.nombre + "</option>");
							});
							$("#titulo").html(i18n.gettext("Estatus de reciclaje"));
							$("#hideThis").show();
							$("#CrearCampa").html(i18n.gettext("Crear status de reciclaje"));
							$("#statusSelec").val(res.Registros[0].estado);
							$("#attempt_delay").val("120");
							$("#attempt_maximum").val("1");
							document.getElementById("CrearCampa").onclick = creaNuevo;
							$("#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();
							}
						} else {
							M.toast({
								'html': resp.Descripcion
							});
						}
					});

				} else {
					$.post("<?=MODULOS;?>ReciclajeLeads/getStatusesSelect", {
						campana: app.campanaAct
					}).then(res => {
						if (res.Estado === "ok") {
							$("#statusSelec").html("");
							res.Registros.forEach(val => {
								$("#statusSelec").append("<option value='" + val.estado + "'>" + val.estado + " - " + val.nombre + "</option>");
							});
							$.post("<?=MODULOS;?>ReciclajeLeads/getStatDetails", {
								campana: app.campanaAct,
								estado: id
							}).then(res => {
								if (res.Estado == "ok") {
									$("#idShido").val(id);
									$("#hideThis").hide();
									$("#titulo").html(res.Reciclaje.status);
									$("#CrearCampa").html(i18n.gettext("Editar status de reciclaje"));
									$("#status").html(res.Reciclaje.status);
									$("#statusSelec").val(res.Reciclaje.status);
									$("#attempt_delay").val(res.Reciclaje.attempt_delay);
									$("#attempt_maximum").val(res.Reciclaje.attempt_maximum);
									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();
									}
								} else {
									M.toast({
										'html': res.Descripcion
									});
								}
							}).catch(err => {
								console.log(err);
							});
						} else {
							M.toast({
								'html': resp.Descripcion
							});
						}
					});


				}

			},
			activaCampana: function(id) {
				$.ajax({
					url: "<?=MODULOS;?>ReciclajeLeads/changeStatus",
					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': i18n.gettext("Estatus de reciclaje cambiado")
							});
							app.recargar();
						} else {
							M.toast({
								'html': res.Descripcion
							});
						}
					}
				});
			},
			deleteCampana: function(id, nombre) {
				Swal.fire({
					type: 'warning',
					title: i18n.gettext('Eliminar status de reciclaje'),
					text: i18n.gettext('¿Desea borrar el status de reciclaje: ') + 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;?>ReciclajeLeads/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': i18n.gettext("Estatus de reciclaje borrado")
									});
									app.recargar();
								} else {
									M.toast({
										'html': res.Descripcion
									});
								}
							}
						});
						Swal.fire(
							i18n.gettext(traducirFrase('Borrado')),
							i18n.gettext(traducirFrase('El status de reciclaje 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;?>ReciclajeLeads/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: $("#statusSelec").val(),
			attemp_delay: $("#attempt_delay").val(),
			attempt_maximum: $("#attempt_maximum").val(),
			campana: app.campanaAct
		}
		$.ajax({
			url: "<?=MODULOS;?>ReciclajeLeads/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 = {
			estado: $("#idShido").val(),
			attemp_delay: $("#attempt_delay").val(),
			attempt_maximum: $("#attempt_maximum").val(),
			campana: app.campanaAct
		}
		$.ajax({
			url: "<?=MODULOS;?>ReciclajeLeads/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>