

<div class="col s6 offset-s3 valign-wrapper" id="barrita" style="">
	<div class="barrita" style="position: absolute;left: 0;right: 0; top:38%; z-index:1090;" id="stemen">
		<center><img src="<?=IMG_ADMIN;?>spinner.gif"></center>
	</div>
</div>
<div id="mainTwo" v-cloak>
	<div class="">
		<section id="">
			<div class="container">
				<div class="row">
					<div class="col s12" style="padding-top: 0px; margin-top: 70px;">
						<div class="col s12 black-text white z-depth-3 hoverable card-panel" style="padding-top: 0px;">
							<h4>{{i18n.gettext("Estadisticas de Estatus de Listas")}}</h4>
							<div class="input-field col s4">
								<select id="tabu" class="browser-default" onchange="analiza()">
									<option value="1" selected>{{i18n.gettext("Resumen de ID de lista")}}</option>
									<option value="2">{{i18n.gettext("Resumen de clasificación de status de campaña")}}</option>
									<option value="3">{{i18n.gettext("Estadisticas por categoria de campaña")}}</option>
									<option value="4">{{i18n.gettext("Estadisticas de detalles por lista")}}</option>
								</select>
								<label class="active">{{i18n.gettext("Tabla")}}</label>
							</div>
							<div class="input-field col s3">
								<select id="campanas" v-on:change='cargaListas()' class="browser-default">
								</select>
								<label class="active">{{i18n.gettext("Campañas")}}</label>
							</div>
							<div class="input-field  col s3" id="escondeme">
								<select id="lista" class="browser-default" onchange='cambiaLista()'>
								</select>
								<label class="active">{{traducirFrase("Lista")}}</label>
							</div>
							<div class="col s2 superCenter">
								<button class="btn btn-success btnW" title="Generar reporte" v-on:click="cargaReporte(true);"><i class="material-icons">done</i></button>&nbsp;&nbsp;
								<a class="btn btnW" title="Descargar reporte" id='descargarReporte'><span><i class="material-icons">get_app</i></span></a>
							</div>
						</div>
						<!--<div style="min-height: 300px; padding-top:10px;padding-bottom: 10px;">
							<canvas id="dona1"></canvas>
						</div>-->
					</div>
					<div class="col s12">
						<div class="col s12">
							<div class=" card-panel white z-depth-5 hoverable">
								<div class='row'>
									<div class="col s12">
										<h4>{{i18n.gettext("Estadisticas de Estatus de Listas")}}</h4>
									</div>

								</div>
								<div class='row'>
									<div class='col s12  animated fadeInUp'>

										<div id="test-swipe-1" class="col s12 animated fadeInUp ">
											<div class="row">

												<div class="col s12">
													<h5>{{i18n.gettext("Resumen de ID de lista")}}</h5>
												</div>

												<div class="col s4">
													<table class='centered responsive-table bordA'>
														<thead>
															<tr>
																<th class="btnW2">{{i18n.gettext("Lista")}}</th>
																<th class="btnW2">{{i18n.gettext("Registro")}}</th>
																<th class="btnW2">{{i18n.gettext("Activo")}}</th>
															</tr>
														</thead>
														<tbody id='ResumenId'>
															<tr v-bind:class="(registro.activo == 'INACTIVE')? 'btnW1':'btnW3'" v-for="registro in resumenIdLista.Registros">
																<td>{{registro.lista}}</td>
																<td>{{registro.registro}}</td>
																<td>{{(registro.activo=="INACTIVE"?traducirFrase('Inactiva'):traducirFrase('Activa'))}}</td>
															</tr>
                                                        </tbody>
                                                        <thead>
															<tr>
																<th class="">{{i18n.gettext("Total")}}: </th>
																<th class="">{{ resumenIdLista.total }}</th>
																<th></th>
															</tr>
														</thead>
													</table>
												</div>
												<div id="pieChart1" style="margin-top:0;height:600px;" class="col s8"></div>

											</div>
										</div>
										<div id="test-swipe-2" class="col s12 animated fadeInUp">

											<div class="col s12">
												<h5>{{i18n.gettext("Resumen de clasificación de status de campaña")}}</h5>
											</div>


											<div id="highChart2" style="margin-top:0;height:600px;" class="col s8 tablitasW"></div>

											<div class="col s4">
												<table class='striped highlight centered responsive-table bordA'>
													<thead>
														<tr>
															<th class="btnW7">{{i18n.gettext("Clasificacion de status")}}</th>
															<th class="btnW8">{{i18n.gettext("Llamadas")}}</th>
															<th class="btnW9">{{i18n.gettext("Porcentaje")}}</th>
														</tr>
													</thead>
													<tbody id='ResumenBan'>
														<tr>
															<td>{{i18n.gettext("Respuesta Humana")}}</td>
															<td>{{resumenBanderaSistema.respuestaHumana.registros}} </td>
															<td>{{resumenBanderaSistema.respuestaHumana.porcentaje}}%</td>
														</tr>
														<tr>
															<td>{{i18n.gettext("Promesa de objetivo")}}</td>
															<td>{{resumenBanderaSistema.venta.registros}} </td>
															<td>{{resumenBanderaSistema.venta.porcentaje}}%</td>
														</tr>
														<tr>
															<td>{{i18n.gettext("No llamar")}}</td>
															<td>{{resumenBanderaSistema.DNC.registros}} </td>
															<td>{{resumenBanderaSistema.DNC.porcentaje}}%</td>
														</tr>
														<tr>
															<td>{{i18n.gettext("Cliente contactado")}}</td>
															<td>{{resumenBanderaSistema.contactoCliente.registros}} </td>
															<td>{{resumenBanderaSistema.contactoCliente.porcentaje}}%</td>
														</tr>
														<tr>
															<td>{{i18n.gettext("Cliente no interesado")}}</td>
															<td>{{resumenBanderaSistema.noInteresado.registros}} </td>
															<td>{{resumenBanderaSistema.noInteresado.porcentaje}}%</td>
														</tr>
														<tr>
															<td>{{i18n.gettext("Registro no Trabajable")}}</td>
															<td>{{resumenBanderaSistema.noTrabajable.registros}} </td>
															<td>{{resumenBanderaSistema.noTrabajable.porcentaje}}%</td>
														</tr>
														<tr>
															<td>{{i18n.gettext("Volver a llamar al cliente")}}</td>
															<td>{{resumenBanderaSistema.llamarDeVuelta.registros}} </td>
															<td>{{resumenBanderaSistema.llamarDeVuelta.porcentaje}}%</td>
														</tr>
														<tr>
															<td>{{i18n.gettext("Objetivo cumplido")}}</td>
															<td>{{resumenBanderaSistema.completado.registros}} </td>
															<td>{{resumenBanderaSistema.completado.porcentaje}}%</td>
														</tr>
													</tbody>
												</table>
											</div>
										</div>
										<div id="test-swipe-3" class="col s12  animated fadeInUp">

											<div class="col s12">
												<h5>{{i18n.gettext("Estadisticas por categoria de campaña")}}</h5>
											</div>

											<div class="col s4">

												<table class='striped highlight centered responsive-table bordA'>
													<thead>
														<tr>
														<th class="btnW10">{{i18n.gettext("Categoria")}}</th>
														<th class="btnW11">{{i18n.gettext("Llamadas")}}</th>
														<th class="btnW12">{{i18n.gettext("Descripción")}}</th>
														</tr>
													</thead>
													<tbody id='StatsCat'>
														<tr v-for='registro in estadosPersonalizados.Registros'>
															<td>
																{{registro.categoria}}
															</td>
															<td>{{registro.llamadas}} </td>
															<td>{{registro.descripcion}} </td>
														</tr>
													</tbody>
													<thead>
														<tr>
															<th class="">{{i18n.gettext("Total")}}</th>
															<th class="">{{estadosPersonalizados.total}} </th>
															<th class=""></th>
														</tr>
													</thead>
												</table>

											</div>

											<div id="highChart3" style="margin-top:0;height:300px;" class="col s8 tablitasW"></div>

										</div>

										<div id="test-swipe-4" class="col s12 animated fadeInUp">

											<div class="col s12">
												<h5>{{i18n.gettext("Estadísticas de detalles por lista")}}</h5>
											</div>

											<div v-for='(det,index) in datalle' v-if='seleccionado==getId(det.nombre)'>
												<div class='row'>

													<div id="highChart4" style="margin-top:0;height:600px;" class="col s8 tablitasW"></div>

													<div class='col s4'>
														<table class='striped highlight centered responsive-table bordA'>
															<thead>
																<tr>
																	<th class="btnW2">{{det.nombre}} </th>
																	<th class="btnW2"></th>
																	<th class="btnW3">{{getActive(det.nombre)}} </th>
																</tr>
															</thead>
															<tbody>
																<tr>
																	<td>{{i18n.gettext("Respuesta Humana")}}</td>
																	<td>{{detalle[index].respuestaHumana.registros}}</td>
																	<td>{{detalle[index].respuestaHumana.porcentaje+'%'}}</td>
																</tr>
																<tr>
																	<td>{{i18n.gettext("Promesa de objetivo")}}</td>
																	<td>{{detalle[index].venta.registros}}</td>
																	<td>{{detalle[index].venta.porcentaje+'%'}}</td>
																</tr>
																<tr>
																	<td>{{i18n.gettext("No llamar")}}</td>
																	<td>{{detalle[index].DNC.registros}}</td>
																	<td>{{detalle[index].DNC.porcentaje+'%'}}</td>
																</tr>
																<tr>
																	<td>{{i18n.gettext("Cliente contactado")}}</td>
																	<td>{{detalle[index].contactoCliente.registros}}</td>
																	<td>{{detalle[index].contactoCliente.porcentaje+'%'}}</td>
																</tr>
																<tr>
																	<td>{{i18n.gettext("Cliente no interesado")}}</td>
																	<td>{{detalle[index].noInteresado.registros}}</td>
																	<td>{{detalle[index].noInteresado.porcentaje+'%'}}</td>
																</tr>
																<tr>
																	<td>{{i18n.gettext("Registro no Trabajable")}}</td>
																	<td>{{detalle[index].noTrabajable.registros}}</td>
																	<td>{{detalle[index].noTrabajable.porcentaje+'%'}}</td>
																</tr>
																<tr>
																	<td>{{i18n.gettext("Volver a llamar al cliente")}}</td>
																	<td>{{detalle[index].llamarDeVuelta.registros}}</td>
																	<td>{{detalle[index].llamarDeVuelta.porcentaje+'%'}}</td>
																</tr>
																<tr>
																	<td>{{i18n.gettext("Objetivo cumplido")}}</td>
																	<td>{{detalle[index].completado.registros}}</td>
																	<td>{{detalle[index].completado.porcentaje+'%'}}</td>
																</tr>
															</tbody>
															<thead>
																<tr>
																	<th class="">{{i18n.gettext("Registros totales")}}:</th>
																	<th class=""></th>
																	<th class="">{{det.cantidad}} </th>
																</tr>
															</thead>
														</table>
													</div>

												</div>
												<div class='row'>

													<div class='col s4'>
														<table class='striped highlight centered responsive-table bordA'>
															<thead>
																<tr>
																	<th class="btnW7">{{i18n.gettext("Estatus de calificación")}}</th>
																	<th class="btnW8">{{i18n.gettext("Cantidad")}}</th>
																</tr>
															</thead>
															<tbody>
																<tr v-for='registro in detalle[index].breakdown.Registros'>
																	<td>
																		{{registro.status}}
																	</td>
																	<td>
																		{{registro.cantidad}}
																	</td>
																</tr>
                                                            </tbody>
                                                            <thead>
                                                                <tr>
																	<th class="">
																	{{i18n.gettext("Total")}}:
																	</th>
																	<th class="">
																		{{detalle[index].breakdown.total}}
																	</th>
																</tr>
															</tbody>
														</table>
													</div>

													<div id="highChart5" style="margin-top:0;height:600px;" class="col s8 tablitasW"></div>

												</div>
											</div>
										</div>
									</div>
								</div>

							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
	</div>
</div>

<!-- END MAIN -->
<!-- //////////////////////////////////////////////////////////////////////////// -->
<!-- START FOOTER -->
<footer class="page-footer black" style="position:fixed;bottom:0;left:0;width:100%;">
	<footer class="black">
		<div class="footer-copyright  black">
			<div class="container">
				<span>Copyright ©
					<script type="text/javascript">
						document.write(new Date().getFullYear());

					</script> <a class="grey-text text-lighten-4" href="http://sisvox.mx" target="_blank">Sisvox</a>
				{{traducirFrase("Todos los derechos reservados")}}.</span>
				<span class="right hide-on-small-only">{{traducirFrase("Desarrollado por")}} <a class="grey-text text-lighten-4" href="https://sisvox.mx">Sisvox</a></span>
			</div>
		</div>
	</footer>
</footer>
</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 type="text/javascript" src="<?=LIB_JS;?>highcharts/stock/highstock.js"></script>
<script src="<?=LIB_JS;?>highcharts/highcharts-3d.js"></script>
<script src="<?=LIB_JS;?>highcharts/modules/cylinder.js"></script>
<script src="<?=LIB_JS;?>highcharts/modules/exporting.js"></script>
<script src="<?=LIB_JS;?>highcharts/modules/export-data.js"></script>
<script src="<?=LIB_JS;?>highcharts/modules/funnel.js"></script>
<script src="<?=LIB_JS;?>highcharts/modules/series.js"></script>
<script src="<?=LIB_JS;?>highcharts/modules/accesibility.js"></script>

<script>
	//Esconde el switch para mostrar Navbar
	var navigationBarSwitchElement = document.getElementById('navigationBarSwitch');
	navigationBarSwitchElement.style.visibility = "hidden";

	

	var prev = "1";

	function analiza() {
		if (prev == null || prev == undefined) {
			var s = $("#tabu").val()
			$('#test-swipe-' + s).show();
			prev = s;
		} else {
			for (var i = 1; i <= 5; i++)
				$('#test-swipe-' + i).hide();

			var s = $("#tabu").val()
			$('#test-swipe-' + s).show();
			prev = s;
		}
		if ($("#tabu").val() != 4) {
			$("#escondeme").hide();
		} else {
			$("#escondeme").show();
			app.cargaListas();
		}

	}

	var flagCampana = false;
	var flagLista = false;
	var flagReporte = false;
	var puedoRecargar = false;

	var app = new Vue({
		el: '#main',
		data: {
			resumenIdLista: {},
			resumenBanderaSistema: {},
			estadosPersonalizados: {},
			seleccionado: 1,
			datalle: {},
			detalle: {},
			i18n : i18n
		},
		mounted: function () {

			var bla;
			$("#escondeme").hide();

			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();

			setTimeout(() => {
				M.Dropdown.init(document.querySelectorAll('.dropdown-trigger'), {
					'hover': true, coverTrigger: false, constrainWidth: false,
				});
			}, 1500)


		},
		methods: {
			getId: function (nombre) {
				return nombre.split("-")[0].trim();
			},
			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;
			},
			recarga: function () {
				if (puedoRecargar) {}
			},
			cargaCampana: function () {
				if (!flagCampana) {
					flagCampana = true;
					$.ajax({
						url: '<?=MODULOS;?>campanas/getCampaignsSelect',
						dataType: "text",
						type: 'GET',
						async: false,
						success: function (res) {
							var resp = JSON.parse(res);
							if (resp.Estado == 'ok') {
								$("#campanas").html("");
								$("#campanas").append("<option value='-1' selected='selected' id='todascamp'>Todas las campañas</option>");
								cambioManual("todascamp", "Todas las campañas");
								for (var i = 0; i < resp.Campanas.length; i++) {
									$("#campanas").append("<option value='" + resp.Campanas[i].campaign_id + "' ><span>" + resp.Campanas[i].campaign_name +
										"</span></option>");
								}
								app.cargaListas();
								analiza();
								cambiaLista();
								$("#descargarReporte").attr("href",
									"<?=MODULOS;?>reporteListaFecha/listCampaignStatsCSV?campana=" + $('#campanas').val() +
									"&csv=true&seccion="+$("#tabu").val());
								flagCampana = false;
								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();
								}
								$('.barrita').hide();
							} else {
								M.toast({
									html: resp.Descripcion
								});
							}
						},
						error: function (error) {
							console.error(error);
						}
					});
				}
			},
			cargaListas: function (uwu) {
				if (!flagLista) {
					flagLista = true;
					$.ajax({
						url: '<?=MODULOS;?>Listas/getListsSelect',
						dataType: "text",
						type: 'POST',
						data: {
							campana: $("#campanas").val()
						},
						success: function (res) {
							var resp = JSON.parse(res);
							if (resp.Estado == 'ok') {
								var Prev = $("#lista").val();
								$("#lista").html("");
								var Primera = null;
								for (var i = 0; i < resp.Listas.length; i++) {
									if (Primera == null) {
										Primera = resp.Listas[i].list_id;
									}
									if (Prev == resp.Listas[i].list_id) {
										Primera = resp.Listas[i].list_id
									}
									$("#lista").append("<option value='" + resp.Listas[i].list_id + "' ><span>" + resp.Listas[i].list_name +
										"</span></option>");
								}
								flagLista = false;
								var bla;
								if (Prev == null || Prev == "" || Prev == Primera)
									$("#lista").val(Primera)

								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();
								}
								$('.barrita').hide();
								cambiaLista();
							} else {
								M.toast({
									html: resp.Descripcion
								});
							}
						},
						error: function (error) {
							console.log(error);
						}
					});
				}
			},
			cargaReporte: function (val) {
				//$("#escondeme").hide();

				$('.barrita').show();
				if (!flagReporte) {
					flagReporte = true;
					var parametros = {
						campana: $("#campanas").val()
					};
					$.ajax({
						url: '<?=MODULOS;?>reporteListaFecha/listCampaignStats',
						dataType: "text",
						type: 'GET',
						data: parametros,
						success: function (res) {

							var resp = JSON.parse(res);
							if (resp.Estado == 'ok') {
								$("#descargarReporte").attr("href",
									"<?=MODULOS;?>reporteListaFecha/listCampaignStatsCSV?campana=" + $('#campanas').val() +
									"&csv=true&seccion="+$("#tabu").val());
								app.resumenIdLista = resp.resumenIdLista;

								//creaPie1(resp.resumenIdLista.Registros);

								app.resumenBanderaSistema = resp.resumenBanderaSistema;
								app.estadosPersonalizados = resp.estadosPersonalizados;
								app.detalle = resp.detalle;
								app.datalle = resp.datalle;
								flagReporte = false;
								var bla;
								app.cargaListas();

								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();
								}
								var labels = [];
								var regis = [];
								for (let i = 0; i < app.resumenIdLista.Registros.length; i++) {
									labels.push(app.resumenIdLista.Registros[i].lista.trim());
									regis.push(app.resumenIdLista.Registros[i].registro.trim());
								}

								$("#escondeme").hide();
								$('.barrita').hide();
								if (val) {
									analiza();
								}
								app.cargaListas();
								cambiaLista();

								setTimeout(() => {

									creaPie1();

									creaDona1();

									creaBarra1();

									//var ctx1 = document.getElementById("dona1").getContext("2d");

									/*var donaChart = new Chart(ctx1, {
										type: 'doughnut',
										data: {
											labels: labels,
											datasets: [{
												label: '',
												data: regis,
												backgroundColor: [
													"rgba(9, 97, 229, 0.3)",
													"rgba(107, 238, 149, 0.3)",
													"rgba(244, 252, 0, 0.3)",
													"rgba(214, 176, 10, 0.3)",
													"rgba(13, 137, 98, 0.3)",
													"rgba(191, 42, 59, 0.3)",
													"rgba(237, 159, 42, 0.3)",

													"rgba(126, 73, 183, 0.3)",
													"rgba(52, 55, 153, 0.3)",
													"rgba(134, 145, 20, 0.3)",
													"rgba(16, 188, 3, 0.3)",
													"rgba(178, 209, 54, 0.3)",
													"rgba(224, 80, 210, 0.3)",
													"rgba(239, 100, 93, 0.3)",
													"rgba(75, 6, 132, 0.3)",
													"rgba(127, 175, 36, 0.3)",
													"rgba(56, 209, 99, 0.3)",
													"rgba(249, 83, 42, 0.3)",
													"rgba(247, 19, 201, 0.3)",
													"rgba(75, 242, 128, 0.3)",
													"rgba(162, 226, 49, 0.3)",
													"rgba(237, 208, 64, 0.3)",
													"rgba(89, 219, 189, 0.3)",
													"rgba(234, 83, 56, 0.3)",
													"rgba(6, 143, 150, 0.3)"
												],
												borderColor: [

												],
												borderWidth: 1
											}]
										},
										options: {
											maintainAspectRatio: false,
											legend:{
												display:false
											}
										}
									});*/
								}, 100);

							} 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 (error) {
							console.log(error);
						}
					});
				}
			},
			getActive: function (Nombre) {
				var Arr = this.resumenIdLista.Registros.find(function (val) {
					if (val.lista.trim() === Nombre.trim()) {
						return true;
					}
					return false;
				});

				return Arr.activo;
			}
		},
		created: function () {

			analiza();

			M.toast({
				html: i18n.gettext("Cargando datos, por favor espere")+"."
			});
			this.cargaCampana();
			this.cargaReporte();
			$('#test-swipe-2').hide();
			$('#test-swipe-3').hide();
			$('#test-swipe-4').hide();
			$('#test-swipe-5').hide();
			$('#test-swipe-6').hide();
			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();


		},
		computed: {
			classObject: function () {
				if (this.ls == 'white') {
					return 'black-text';
				} else {
					return 'white-text';
				}
			}
		}
	});

	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 cambiaLista() {

		app.seleccionado = $("#lista").val();

		var index = 0;

		for(var t = 0; t < app.datalle.length; t++){

			if(app.seleccionado == app.getId(app.datalle[t].nombre)){

				index = t;
			}
		}

		var detalle = app.detalle[index];

		creaDona2(detalle);

		creaPie2(detalle.breakdown.Registros);

	}
	setTimeout(function () {
		<?php
if ($lista != null) {
    ?>
		$("#tabu").val(4);
		analiza();
		//$("#lista").val("<?=$lista;?>");
		$("#lista > option").each(function () {
			if ((this.text).includes("<?=$lista;?>")) {
				$("#lista").val(this.value);
			}
		});
		app.cambiaLista();
		<?php
}
?>
	}, 2000);
	setInterval(() => {
		app.cargaCampana();
		app.cargaListas();
	}, 60000);

	var intervalListener = self.setInterval(function () {
		someProcess()
	}, 500);

	function someProcess() {
		if ($("#tabu").val() == null || $("#tabu").val() == "") {

			$("#tabu").val(1);
			analiza();

			window.clearInterval(intervalListener);

		} else {
			analiza();

			window.clearInterval(intervalListener);

		}
	}

	function creaPie1(){

		var data = app.resumenIdLista.Registros;

		var dataE = [];
		var dataL = [];

		$.each(data, function( index, value ) {

			colorW = generaColor();

			dataL.push(value.lista);

			dataE.push({
				name: value.lista,
				y: parseInt(value.registro),
				color: colorW
			});

		});

		Highcharts.chart('pieChart1', {
			chart: {
				type: 'bar'
			},
			title: {
				text: ''
			},
			xAxis: {
				categories: dataL
			},
			yAxis: {
				min: 0,
				title: {
					text: ''
				}
			},
			legend: {
				reversed: true
			},
			plotOptions: {
				series: {
					stacking: 'normal'
				}
			},
			series: [{
				name: 'Registros',
				data: dataE
			}]
		});

	}

	function creaDona1(){

		var data = app.resumenBanderaSistema;

		var dataE = [];

		dataE.push({
			name: "Respuesta Humana",
			y: parseInt(data.respuestaHumana.registros)
		});

		dataE.push({
			name: "Objetivo cumplido",
			y: parseInt(data.venta.registros)
		});

		dataE.push({
			name: "No llamar",
			y: parseInt(data.DNC.registros)
		});

		dataE.push({
			name: "Cliente contactado",
			y: parseInt(data.contactoCliente.registros)
		});

		dataE.push({
			name: "Cliente no interesado",
			y: parseInt(data.noInteresado.registros)
		});

		dataE.push({
			name: "Registro no Trabajable",
			y: parseInt(data.noTrabajable.registros)
		});

		dataE.push({
			name: "Volver a llamar al cliente",
			y: parseInt(data.llamarDeVuelta.registros)
		});

		dataE.push({
			name: "Objetivo cumplido",
			y: parseInt(data.completado.registros)
		});

		Highcharts.chart('highChart2', {
			chart: {
				type: 'funnel3d',
				options3d: {
					enabled: true,
					alpha: 10,
					depth: 50,
					viewDistance: 50
				}
			},
			title: {
				text: ' '
			},
			plotOptions: {
				series: {
					dataLabels: {
						enabled: true,
						format: '',
						allowOverlap: true,
						y: 10
					},
					neckWidth: '30%',
					neckHeight: '25%',
					width: '80%',
					height: '80%'
				}
			},
			series: [{
				name: 'Unique users',
				data: dataE
			}]
		});

	}

	function creaDona2(datae){

		var data = datae;

		var dataE = [];
		var dataL = [];

		dataE.push({
			name: traducirFrase("Respuesta Humana"),
			y: parseInt(data.respuestaHumana.registros)
		});

		dataL.push(
			traducirFrase("Respuesta Humana")
			);

		dataE.push({
			name: traducirFrase("Objetivo cumplido"),
			y: parseInt(data.venta.registros)
		});

		dataL.push(
			traducirFrase("Promesa de objetivo")
			);

		dataE.push({
			name: traducirFrase("No llamar"),
			y: parseInt(data.DNC.registros)
		});

		dataL.push(
			traducirFrase("No llamar")
			);

		dataE.push({
			name: traducirFrase("Cliente contactado"),
			y: parseInt(data.contactoCliente.registros)
		});

		dataL.push(
			traducirFrase("Cliente contactado")
			);

		dataE.push({
			name: traducirFrase("Cliente no interesado"),
			y: parseInt(data.noInteresado.registros)
		});

		dataL.push(
			traducirFrase("Cliente no interesado")
			);

		dataE.push({
			name: traducirFrase("Cliente interesado"),
			y: ( 100 - parseInt(data.noInteresado.porcentaje))
		});

		dataL.push(
			traducirFrase("Cliente interesado")
			);

		dataE.push({
			name: traducirFrase("Registro no Trabajable"),
			y: parseInt(data.noTrabajable.registros)
		});

		dataL.push(
			traducirFrase("Registro no Trabajable")
			);

		dataE.push({
			name: traducirFrase("Volver a llamar al cliente"),
			y: parseInt(data.llamarDeVuelta.registros)
		});

		dataL.push(
			traducirFrase("Volver a llamar al cliente")
			);

		dataE.push({
			name: traducirFrase("Objetivo cumplido"),
			y: parseInt(data.completado.registros)
		});

		dataL.push(
			traducirFrase("Objetivo cumplido")
			);

		var pieColors = (function () {
			var colors = [],
				base = Highcharts.getOptions().colors[2],
				i;

			for (i = 0; i < 10; i += 1) {
				// Start out with a darkened base color (negative brighten), and end
				// up with a much brighter color
				colors.push(Highcharts.Color(base).brighten((i - 5) / 10).get());
			}
			return colors;
		}());

		Highcharts.chart('highChart4', {
			chart: {
				type: 'column'
			},
			title: {
				text: ''
			},
			xAxis: {
				categories: dataL,
				min: 0,
				max:5,
				scrollbar: {
					enabled: true
				},
				labels: {
					skew3d: true,
					style: {
						fontSize: '16px'
					}
				}
			},
			yAxis: {
				title: {
					text: null
				}
			},
			series: [{
				name: '',
				data: dataE
			}]
		});

	}

	function creaPie2(data){


		var dataE = [];

		var dataL = [];

		var colorW;

		$.each(data, function( index, value ) {

			dataL.push(value.status);

			dataE.push({
				name: value.status,
				y: parseInt(value.cantidad),
				color : generaColor()
			});

		});

		Highcharts.chart('highChart5', {
			chart: {
				zoomType: 'xy'
			},
			title: {
				text: ' '
			},
			subtitle: {
				text: ' '
			},
			xAxis: [{
				categories:dataL,
				crosshair: true
			}],
			yAxis: [{ // Primary yAxis
				labels: {
					format: '{value}',
					style: {
						color: Highcharts.getOptions().colors[1]
					}
				},
				title: {
					text: '',
					style: {
						color: Highcharts.getOptions().colors[1]
					}
				}
			}, { // Secondary yAxis
				title: {
					text: '',
					style: {
						color: Highcharts.getOptions().colors[0]
					}
				},
				labels: {
					format: '{value}',
					style: {
						color: Highcharts.getOptions().colors[0]
					}
				},
				opposite: true
			}],
			tooltip: {
				shared: true
			},
			legend: {
				enabled: false
			},
			series: [{
				name: 'Estatus',
				type: 'column',
				yAxis: 1,
				data: dataE

			}, {
				name: 'Estatus',
				type: 'spline',
				data: dataE
			}]
		});

	}

	function creaBarra1(){

		var data = app.estadosPersonalizados.Registros;

		var dataE = [];
		var dataL = [];
		var dataC = [];
		var colorW = "";

		$.each(data, function( index, value ) {

			dataE.push([
				value.categoria,
				//numRand
				parseInt(value.llamadas)
			]);

			dataL.push(
				value.categoria
			);

			colorW = generaColor();

			dataC.push(
				colorW
			);

		});

		Highcharts.chart('highChart3', {
			chart: {
				type: 'column'
			},
			title: {
				text: traducirFrase('Estadistica por agente')
			},
			xAxis: {
				min: 0,
				max:5,
				categories: dataL,
				scrollbar: {
					enabled: true
				},
				labels: {
					skew3d: true,
					style: {
						fontSize: '16px'
					}
				}
			},
			colors:dataC,
			yAxis: {
				title: {
					text: null
				}
			},
			series: [{
				name: traducirFrase('Llamadas'),
				data: dataE
			}]
		});

	}

	//color random

	function generaColor(){

		var hexadecimal = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
		var color_aleatorio = "#";

		var posarray;

		for (i=0;i<6;i++){

			posarray = aleatorio(0,hexadecimal.length);
			color_aleatorio += hexadecimal[posarray];

		}

		return color_aleatorio

	}

	function aleatorio(inferior,superior){
		numPosibilidades = superior - inferior;
		aleat = Math.random() * numPosibilidades;
		aleat = Math.floor(aleat);

		return parseInt(inferior) + aleat;

	}


</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>
