<?php

$idioma = "es";
if (isset($_COOKIE["idioma"])) {
    $idioma = isset($_COOKIE["idioma"]) ? $_COOKIE["idioma"] : "es";
}

?>
<div class="col s6 offset-s3 valign-wrapper" id="barrita" style="">
	<div id="stemen" class="barrita" style="position: absolute;left: 0;right: 0; top:38%; z-index: 100;">
		<center><img src="<?=IMG_ADMIN;?>spinner.gif"></center>
	</div>
</div>

<div id="barritaFade" style="position:absolute;width:100%;height:1000%;opacity: 0.5;background-color:black; z-index: 99;left: 0;right: 0;">
	&nbsp;
</div>

<div id="mainTwo" v-cloak>


	<div class="" style="margin-top: 0px;">
		<section id="">
			<div class="container">
				<div class="row">
					<div class="col s12" style="margin-top: 70px;">
						<div class="col s12">
							<div class="card-panel z-depth-5 hoverable">
								<h6>{{i18n.gettext("Ajustes")}}</h6>
								<div class="row">
									<div class="col s3">
										<label class=" textWh">{{i18n.gettext("Campaña")}}:</label>
										<select id="campanaAgentes" class="browser-default" onChange="dameListas()">
											<option value="-1">{{i18n.gettext("Todas las campañas")}}</option>
										</select>
									</div>
									<div class="col s2">
										<label class=" textWh">{{i18n.gettext("Lista")}}:</label>
										<select id="lista" class="browser-default">
											<option value="-1">{{i18n.gettext("Todas las listas")}}</option>
										</select>
									</div>
									<div class="col s2">
										<label class=" textWh">{{i18n.gettext("Desde")}}:</label>
										<!-- <input type="text" class='datepicker textWh' id="fechaInicio"> -->
										<input type="text" class='datepicker textWh' id="fechaInicio">
									</div>

									<div class="col s2">
										<label class=" textWh">{{i18n.gettext("Hasta")}}:</label>
										<!-- <input type="text" class='datepicker-here textWh' id="fechaFin"> -->
										<input type="text" class='datepicker textWh' id="fechaFin">
									</div>
									<div class="col s1">
										<label for="archived">
											<input type="checkbox" id="archived" class="input-field">
											<span>{{traducirFrase("Información archivada")}}</span>
										</label>
									</div>
									<div class="col s2" style="padding-top:2%;text-align:center;">
										<button class="btn btn-success btnW2" onClick="app.recarga();consultaCampa()">{{traducirFrase("Generar reporte")}}</button>&nbsp;&nbsp;

									</div>
									<!--<div class="col s4">
										<label class="">{{i18n.gettext("Tabla")}}:</label>
										<select id="tablaxD" class="browser-default" onChange="cambiaTabla()">
											<option value="2">{{i18n.gettext("Estado de las llamadas")}}</option>
											<option value="4">{{i18n.gettext("Estado de los agentes")}}</option>
											<option value="5">{{i18n.gettext("Estado de Listas")}}</option>
											<option value="3">{{i18n.gettext("Estado de categoría personalizada")}}</option>
											<option value="1">{{i18n.gettext("Estado de colgado")}}</option>
										</select>
									</div> -->
								</div>

								<span id="contTodo" style="display:none;">

									<div class="row negrito textWh" style="display: flex;justify-content: center;align-items: center;">
										<ul class="collapsible col s4" style="background-color:#3399cc;">
											<li>
												<div class="btnW collapsible-header">
												<i class="material-icons">call</i>
												{{traducirFrase("Llamadas totales realizadas")}}<br>&nbsp;
												<span class="badge" style="color:white;">{{datos.totales.llamadasTotales}}</span></div>
											</li>
										</ul>
										<ul class="collapsible col s4" style="background-color:#ef5350;">
											<li>
												<div class="btnW1 collapsible-header">
												<i class="material-icons">timer</i>
												{{traducirFrase("Duracion prom. de llamadas")}} <br> {{i18n.gettext("para todas las llamadas")}}
												<span class="badge" style="color:white;">{{datos.totales.duracionPromedio}}</span></div>
											</li>
										</ul>
										<ul class="collapsible col s4" style="background-color:#c0ca33 ;">
											<li>
												<div class="btnW5 collapsible-header">
												<i class="material-icons">transfer_within_a_station</i>
												{{i18n.gettext("Total de respuestas humanas")}}<br>&nbsp;
												<span class="badge" style="color:white;">{{datos.respuestasHumanas.total}}</span></div>
											</li>
										</ul>
									</div>

									<div class="row">

										<div style="text-align:center;width:100%;" class="textWh">

											<div class="col s11">
												<h5 id="two" style="text-align:center;"><i class="green-text material-icons material-icons">phone_forwarded</i>
													{{i18n.gettext("Estado de las llamadas")}}
												</h5>
											</div>
											<div class="col s1" style="text-align:center;">
												<a class="btn btnW2" title="Descargar" href=" javascript:descarga(2)"><i class="material-icons">archive</i></a><br>
											</div>

										</div>

										<div id="tabla2" class="col s6 negrito">

											<table class="striped responsive-table highlight bordA" style="text-align:center;">
												<thead class="theadW">
													<tr>
														<!--<th style="text-align:center;">{{i18n.gettext("Estado")}}</th>
														<th style="text-align:center;">{{i18n.gettext("Descripción")}}</th>
														<th style="text-align:center;">{{i18n.gettext("Categoria")}}</th>
														<th style="text-align:center;">{{i18n.gettext("Llamadas")}}</th>-->
														<th style="text-align:center;">{{i18n.gettext("Estado")}}</th>
														<th style="text-align:center;">Desc.</th>
														<th style="text-align:center;">Cat</th>
														<th style="text-align:center;">{{i18n.gettext("Llamadas")}}</th>
														<!--<th style="text-align:center;">{{i18n.gettext("Tiempo de llamada total")}}</th>
														<th style="text-align:center;">{{i18n.gettext("Tiempo promedio de llamada")}}</th>-->
														<th style="text-align:center;">{{traducirFrase("Tiempo")}}</th>
														<th style="text-align:center;">{{traducirFrase("Tiempo promedio")}}</th>
														<!--<th style="text-align:center;">{{i18n.gettext("Llamadas")}}/{{i18n.gettext("hora")}}</th>
														<th style="text-align:center;">{{i18n.gettext("Tiempo de agente en llamadas")}}/{{i18n.gettext("hora")}}</th>-->
														<th style="text-align:center;">{{traducirFrase("LLam./hr")}}</th>
														<th style="text-align:center;">{{traducirFrase("Agen. en Llam./hr")}}</th>
													</tr>
												</thead>
												<tbody class="tbodyW">
													<tr v-for="i in datos.estadoLlamada.Registros" class="trW">
														<td style="text-align:center;">{{i.status}}</td>
														<td style="text-align:center;">{{i.status_name}}</td>
														<td style="text-align:center;">{{i.statcat}}</td>
														<td style="text-align:center;">{{i.STATUScount}}</td>
														<td style="text-align:center;">{{getFormateado(i.STATUShours)}}</td>
														<td style="text-align:center;">{{i.STATUSavg}}</td>
														<td style="text-align:center;">{{i.STATUSrate}}</td>
														<td style="text-align:center;">{{i.AGENTrate}}</td>
													</tr>
												</tbody>
												<tfoot class="tfootW">
													<tr>
														<td style="text-align:center;">Total</td>
														<td></td>
														<td></td>
														<td style="text-align:center;">{{datos.estadoLlamada.total.TOTALcalls}}</td>
														<td style="text-align:center;">{{datos.estadoLlamada.total.TOTALavg}}</td>
														<td style="text-align:center;">{{datos.estadoLlamada.total.TOTALhours}}</td>
														<td style="text-align:center;">{{datos.estadoLlamada.total.TOTALrate}}</td>
														<td></td>

													</tr>
												</tfoot>
											</table>
										</div>
										<div id="containerPie1" style="margin-top:0;height:600px;" class="col s6 tablitasW">
										</div>
									</div>

									<div class="row negrito" style="display: flex;justify-content: center;align-items: center;">

										<ul class="collapsible col s4" style="background-color:#2e7d32 ;">
											<li>
												<div class="btnW3 collapsible-header">
												<i class="material-icons">update</i>
												{{i18n.gettext("Duracion de llamadas en promedio por")}} <br> {{i18n.gettext("respuestas humanas")}}
												<span class="badge" style="color:white;">{{formatTime(datos.respuestasHumanas.duracionPromedio)}}</span></div>
											</li>
										</ul>
										<ul class="collapsible col s4" style="background-color:#ec407a;">
											<li>
												<div class="btnW13 collapsible-header" >
												<i class="material-icons">trending_up</i>
												{{i18n.gettext("Total de llamadas dejadas salientes")}}<br>&nbsp;
												<span class="badge" style="color:white;">{{datos.abandono.total}}</span></div>
											</li>
										</ul>
										<ul class="collapsible col s4" style="background-color:#ffc107;">
											<li>
												<div class="btnW6 collapsible-header">
												<i class="material-icons">vertical_align_bottom</i>
												{{i18n.gettext("Porcentaje de llamadas dejadas")}} <br> {{i18n.gettext("tomadas de respuesta")}}
												<span class="badge" style="color:white;"> {{datos.abandono.porcentajeAbandonadasRespuestas}} %</span></div>
											</li>
										</ul>
									</div>

									<div class="row">

										<div style="text-align:center;width:100%;" class="textWh">

											<div class="col s11">
												<h5 id="four"><i class="purple-text material-icons negrito">person</i>{{traducirFrase("Estado de los agentes")}}</h5>
											</div>
											<div class="col s1" style="text-align:center;">
												<a class="btn btnW2" :title="traducirFrase('Descargar')" href=" javascript:descarga(4)"><i class="material-icons">archive</i></a><br>
											</div>

										</div>

										<div id="containerDona1" class="col s7 tablitasW" style="margin-top:0;height:600px;">
										</div>
										<div id="tabla4" class="col s5 negrito">

											<table class="striped responsive-table highlight bordA">
												<thead class="theadW">
													<tr>
														<th style="width:15%;text-align:center;">{{i18n.gettext("Agente")}}</th>
														<th style="width:30%;text-align:center;">{{i18n.gettext("Nombre")}}</th>
														<th style="width:15%;text-align:center;">{{i18n.gettext("Llamadas")}}</th>
														<th style="width:20%;text-align:center;">{{i18n.gettext("Tiempo")}}</th>
														<th style="width:20%;text-align:center;">{{i18n.gettext("Promedio")}}</th>
													</tr>
												</thead>
												<tbody class="tbodyW">
													<tr v-for="e in datos.estadisticasAgente.Registros" class="trW">
														<td style="width:15%;text-align:center;" v-text='(e.agente==="VDAD")?"Sistema":e.agente'></td>
														<td style="width:30%;text-align:center;">{{e.nombre}}</td>
														<td style="width:15%;text-align:center;">{{e.llamadas}}</td>
														<td style="width:20%;text-align:center;">{{getFormateado(e.hora)}}</td>
														<td style="width:20%;text-align:center;">{{getFormateado(e.promedio)}}</td>
													</tr>

												</tbody>
											</table>
										</div>
									</div>

									<div class="row negrito" style="display: flex;justify-content: center;align-items: center;">

										<ul class="collapsible col s4" style="background-color:#6d4c41;">
											<li>
												<div class="btnW7 collapsible-header">
												<i class="material-icons">sync_disabled</i>
												{{traducirFrase("Duración prom. para llam. dejadas")}}<br>&nbsp;
												<span class="badge" style="color:white;">{{datos.abandono.pocentaje}}</span></div>
											</li>
										</ul>
										<ul class="collapsible col s4" style="background-color:#ff5722;">
											<li>
												<div class="btnW8 collapsible-header">
												<i class="material-icons">style</i>
												{{i18n.gettext("Rating de productividad")}}<br>&nbsp;
												<span class="badge" style="color:white;">{{datos.abandono.rating}}</span></div>
											</li>
										</ul>
										<ul class="collapsible col s4" style="background-color:#9575cd ;">
											<li>
												<div class="btnW9 collapsible-header">
												<i class="material-icons">call_missed</i>
												{{i18n.gettext("Total de llamadas sin respuesta")}}<br>&nbsp;
												<span class="badge" style="color:white;">{{datos.sinRespuesta.total}}</span></div>
											</li>
										</ul>
									</div>

									<div class="row">
										<div id="tabla5" class="col s3 negrito">

											<div class="col s10">
												<h5 id="five"><i class="deep-orange-text left material-icons">person_pin</i>{{i18n.gettext("Estado de Listas")}}</h5>
											</div>
											<div class="col s2" style="text-align:left;">
												<a class="btn btnW2" title="Descargar" href=" javascript:descarga(5)"><i class="material-icons">archive</i></a><br>
											</div>

											<table class="striped responsive-table highlight bordA">
												<thead class="theadW">
													<tr>
														<th style="width:60%;text-align:center;">{{i18n.gettext("Lista")}}</th>
														<th style="width:40%;text-align:center;">{{i18n.gettext("Llamadas")}}</th>
													</tr>
												</thead>
												<tbody class="tbodyW">
													<tr v-for="registro in datos.estadisticasIdListas.Registros" class="trW">
														<td style="width:60%;text-align:center;">{{registro.lista}}</td>
														<td style="width:40%;text-align:center;">{{registro.llamadas}}</td>
													</tr>
												</tbody>
												<tfoot class="tfootW">
													<tr>
														<td style="width:60%;text-align:center;">{{i18n.gettext("Total")}}</td>
														<td style="width:40%;text-align:center;">{{datos.estadisticasIdListas.total}}</td>
													</tr>
												</tfoot>
											</table>
										</div>
										<div id="containerColumnas1" class="col s9 tablitasW" style="margin-top:2%;height:600px;">
										</div>
									</div>

									<div class="row negrito" style="display: flex;justify-content: center;align-items: center;">

										<ul class="collapsible col s4" style="background-color:#283593;">
											<li>
												<div class="btnW10 collapsible-header">
												<i class="material-icons">call_end</i>
												{{i18n.gettext("Total de llamadas automáticas")}} <br> {{i18n.gettext("sin respuesta")}}
												<span class="badge" style="color:white;">{{datos.sinRespuesta.totalLlamadasAutomaticas}}</span></div>
											</li>
										</ul>
										<ul class="collapsible col s4" style="background-color:#1976d2;">
											<li>
												<div class="btnW11 collapsible-header">
												<i class="material-icons">clear</i>
												{{i18n.gettext("Total de llamadas manuales")}} <br> {{i18n.gettext("sin respuesta")}}
												<span class="badge" style="color:white;">{{datos.sinRespuesta.totalLlamadasManuales}}</span></div>
											</li>
										</ul>

										<ul class="collapsible col s4" style="background-color:#ab47bc;">
											<li>
												<div class="btnW12 collapsible-header">
												<i class="material-icons">av_timer</i>
												Duracion prom. en llamadas <br> {{i18n.gettext("sin respuesta")}}
												<span class="badge" style="color:white;">{{datos.sinRespuesta.duracionAproximada}}</span></div>
											</li>
										</ul>
									</div>

									<div class="row negrito">

										<div id="tabla1" class="col s6">

											<div class="col s11">
												<h5 id="one"><i class="red-text material-icons left">phone_missed</i>{{i18n.gettext("Causa de colgado")}}</h5>
											</div>
											<div class="col s1" style="text-align:center;">
												<a class="btn btnW2" title="Descargar" href=" javascript:descarga(1)"><i class="material-icons">archive</i></a><br>
											</div>

											<table class="striped responsive-table highlight bordA" cellpadding="0">
												<thead class="">
													<tr>
														<th>{{i18n.gettext("Causa de colgado")}}</th>
														<th>{{i18n.gettext("Llamadas")}}</th>
													</tr>
												</thead>
												<tbody>
													<tr v-for="razon in datos.razonesColgado.Registros">
														<td>{{razon.razon}}</td>
														<td>{{razon.llamadas}}</td>
													</tr>
												</tbody>
												<tfoot>
													<tr>
														<td>{{i18n.gettext("Total")}}</td>
														<td>{{datos.razonesColgado.total}}</td>
													</tr>
												</tfoot>
											</table>
										</div>
										<div id="tabla3" class="col s6">
											<div class="col s11">
												<h5 id="three"><i class="indigo-text left material-icons">featured_play_list</i>{{i18n.gettext("Estado de categoría personalizada")}}</h5>
											</div>
											<div class="col s1" style="text-align:center;">
												<a class="btn btnW2" title="Descargar" href=" javascript:descarga(3)"><i class="material-icons">archive</i></a><br>
											</div>
											<table class="striped responsive-table highlight bordA">
												<thead class="">
													<tr>
														<th>{{i18n.gettext("Categoria")}}</th>
														<th>{{i18n.gettext("Llamadas")}}</th>
														<th>{{i18n.gettext("Descripción")}}</th>
													</tr>
												</thead>
												<tbody>
													<tr v-for="registro in datos.estadisticasCategoriasEstPersonalizados.Registros">
														<td>{{registro.categoria}}</td>
														<td>{{registro.llamadas}}</td>
														<td>{{registro.descripcion}}</td>
													</tr>

												</tbody>
												<tfoot>
													<tr>
														<td>Total</td>
														<td>{{datos.estadisticasCategoriasEstPersonalizados.total}}</td>
														<td>&nbsp;</td>
													</tr>
												</tfoot>
											</table>
										</div>

									</div>

									<div class="row">

										<div id="containerChart" style="height:700px;" class="tablitasW"></div>

									</div>

								</span>

							</div>

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

				<br>
				<br>
				<br>



			</div>
		</section>
	</div>
</div>
<!-- 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>

<script src="<?=LIB_JS;?>highcharts/stock/highstock.js"></script>
<script src="<?=LIB_JS;?>highcharts/highcharts-more.js"></script>
<script src="<?=LIB_JS;?>highcharts/stock/modules/data.js"></script>
<script src="<?=LIB_JS;?>highcharts/stock/modules/exporting.js"></script>
<script src="<?=LIB_JS;?>highcharts/highcharts-3d.js"></script>
<script src="<?=LIB_JS;?>highcharts/modules/exporting.js"></script>
<script src="<?=LIB_JS;?>highcharts/modules/export-data.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>




</script>-->


<script>

$("body").css("overflow", "hidden");

	function consultaCampa(){

		//alert("Consultando: "+idCampa);

		$('#barrita').show();
		$('#barritaFade').show();
		$("body").css("overflow", "hidden");

		var idCampa = $("#campanaAgentes").val();

		// if(idCampa == -1){

		// 	//alert("selecciona una campaña");
		// 	return false;

		// }else{

		// 	//alert("campaña: "+idCampa);
		// }

		console.log("cargando...");

		$.ajax({
			url: "reporteSalientes/infoCampaHistSal",
			type: "POST",
			data: {
					campana: idCampa,
					lista: 0,
					fechaInicial: $("#fechaInicio").val(),
					fechaFinal: $("#fechaFin").val()
				},
			async: true,
			cache: false,
			dataType: "text",
			success: function (resp) {

				//alert("bien");

				//console.log("Wolf:");

				var data = JSON.parse(resp);

				//console.log(resp);

				var dataE = [];

				var seriesW = [];

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

					dataE = [];

					$.each(value.calls, function( index, value2 ) {

						//console.log("Wolf 2000:");

						//console.log(value);

						//console.log("Wolf termina");

						time = (new Date(value2.fecha)).getTime();
						dato = parseInt(value2.cuenta);

						//console.log("fecha: "+value.fecha+" cuent: "+value.cuenta);

						dataE.push([
							time,
							dato
						]);

					});

					seriesW.push({'name' : value.estatus, 'data': dataE});

				});

				//console.log("Wolf 2:");

				//console.log(seriesW);

				//Armado de la grafica

				// Create a timer
				var start = +new Date();

				$("#containerChart").show();

				// Create the chart
				Highcharts.stockChart('containerChart', {
					chart: {
						events: {
							load: function () {
								if (!window.TestController) {
									this.setTitle(null, {
										text: ' '
									});
								}
							}
						},
						zoomType: 'x'
					},

					yAxis: {

						labels: {
							enabled: true
						}
					},

					rangeSelector: {

						enabled: false
					},

					legend: {
						layout: 'horizontal',
						align: 'center',
						verticalAlign: 'top',
						enabled: true
					},

					yAxis: {
						title: {
							text: traducirFrase('Llamadas')
						}
					},

					title: {
					text: traducirFrase('Lista historica de campaña')+" "+$('select[id="campanaAgentes"] option:selected').text()
					},

					series: seriesW

				});

				$('#barrita').hide();
				$('#barritaFade').hide();
				$("body").css("overflow", "auto");

			},
			error: function (data) {
				alert("error");
				console.log(data);
			}
		});
		console.log("Finalizo");
		//alert("Acabo de consultar")

		/*$('#barrita').hide();
		$('#barritaFade').hide();*/
	}

	function creaPie1(data){

		var dataE = [];

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

			dataE.push({
                    name: value.status_name,
                    y: parseInt(value.STATUScount)
                });

		});

		Highcharts.chart('containerPie1', {
			chart: {
				type: 'pie',
				options3d: {
					enabled: true,
					alpha: 45,
					beta: 0
				}
			},
			title: {
				text: ' '
			},
			tooltip: {
				pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
			},
			plotOptions: {
				pie: {
					allowPointSelect: true,
					cursor: 'pointer',
					depth: 35,
					dataLabels: {
						enabled: true,
						format: '{point.name}'
					}
				}
			},
			series: [{
				type: 'pie',
				name: 'Porcentaje',
				data: dataE
			}]
		});

	}

	function creaDona1(data){

		var dataE = [];
		var agenteStr = "";

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

			agenteStr = value.agente.replace("VDAD", "Sistema");

			dataE.push({
					name: agenteStr+" - "+value.nombre,
					y: parseInt(value.llamadas)
				});

		});

		Highcharts.chart('containerDona1', {
			chart: {
				type: 'pie',
				options3d: {
					enabled: true,
					alpha: 45,
					beta: 0
				}
			},
			title: {
				text: ' '
			},
			tooltip: {
				pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
			},
			plotOptions: {
				pie: {
					allowPointSelect: true,
					innerSize: 100,
            		depth: 45,
					cursor: 'pointer',
					dataLabels: {
						enabled: true,
						format: '{point.name}'
					}
				}
			},
			series: [{
				name: 'Porcentaje',
				data: dataE
			}]
		});

	}

	function creaColumnas1(data){

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

		var colorW = "";

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

			dataL.push(
				value.status_name
			);

			colorW = generaColor();

			dataC.push(
				colorW
			);

			dataE.push([
				value.status_name,
				parseInt(value.STATUSrate)
			]);

		});

		Highcharts.chart('containerColumnas1', {
			chart: {
				type: 'column',
				options3d: {
					enabled: true,
					alpha: 15,
					beta: 15,
					viewDistance: 255,
					depth: 30,
					dataLabels:{enabled:true}
				}
			},
			title: {
				text: traducirFrase('Llamadas/hora')
			},
			subtitle: {
				text: traducirFrase('Por cada estado de llamada')
			},
			plotOptions: {
				column: {
					depth: 25,
					colorByPoint: true
				}
			},
			colors:dataC,
			xAxis: {
				categories: dataL,
				labels: {
					skew3d: true,
					style: {
						fontSize: '16px'
					}
				}
			},
			yAxis: {
				title: {
					text: null
				}
			},
			series: [{
				name: 'Llamadas / hora',
				data: dataE
			}]
		});

	}

	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;
	}

	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 bla;
	var totalesChart;
	var estadoChart;
	var humanasChart;
	var dejadasChart;
	var respuestaChart;
	var ctx0;
	var ctx1;
	var ctx2;
	var ctx3;
	var ctx4;

	if (localStorage.getItem('background') == "black") {
		document.getElementById('stemen').style.filter = 'invert(100%)'
	}

	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%)';

		}

		'use strict';

		/* global document */

		// Load the fonts

		Highcharts.createElement('link', {
			href: '<?=LIB_JS;?>fonts/unica_one.css',
			rel: 'stylesheet',
			type: 'text/css'
		}, null, document.getElementsByTagName('head')[0]);

		Highcharts.theme = {
			colors: ['#2b908f', '#90ee7e', '#f45b5b', '#7798BF', '#aaeeee', '#ff0066',
				'#eeaaee', '#55BF3B', '#DF5353', '#7798BF', '#aaeeee'],
			chart: {
				backgroundColor: {
					linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
					stops: [
						[0, '#2a2a2b'],
						[1, '#3e3e40']
					]
				},
				style: {
					fontFamily: '\'Unica One\', sans-serif'
				},
				plotBorderColor: '#606063'
			},
			title: {
				style: {
					color: '#E0E0E3',
					textTransform: 'uppercase',
					fontSize: '20px'
				}
			},
			subtitle: {
				style: {
					color: '#E0E0E3',
					textTransform: 'uppercase'
				}
			},
			xAxis: {
				gridLineColor: '#707073',
				labels: {
					style: {
						color: '#E0E0E3'
					}
				},
				lineColor: '#707073',
				minorGridLineColor: '#505053',
				tickColor: '#707073',
				title: {
					style: {
						color: '#A0A0A3'

					}
				}
			},
			yAxis: {
				gridLineColor: '#707073',
				labels: {
					style: {
						color: '#E0E0E3'
					}
				},
				lineColor: '#707073',
				minorGridLineColor: '#505053',
				tickColor: '#707073',
				tickWidth: 1,
				title: {
					style: {
						color: '#A0A0A3'
					}
				}
			},
			tooltip: {
				backgroundColor: 'rgba(0, 0, 0, 0.85)',
				style: {
					color: '#F0F0F0'
				}
			},
			plotOptions: {
				series: {
					dataLabels: {
						color: '#F0F0F3',
						style: {
							fontSize: '13px'
						}
					},
					marker: {
						lineColor: '#333'
					}
				},
				boxplot: {
					fillColor: '#505053'
				},
				candlestick: {
					lineColor: 'white'
				},
				errorbar: {
					color: 'white'
				}
			},
			legend: {
				backgroundColor: 'rgba(0, 0, 0, 0.5)',
				itemStyle: {
					color: '#E0E0E3'
				},
				itemHoverStyle: {
					color: '#FFF'
				},
				itemHiddenStyle: {
					color: '#606063'
				},
				title: {
					style: {
						color: '#C0C0C0'
					}
				}
			},
			credits: {
				style: {
					color: '#666'
				}
			},
			labels: {
				style: {
					color: '#707073'
				}
			},

			drilldown: {
				activeAxisLabelStyle: {
					color: '#F0F0F3'
				},
				activeDataLabelStyle: {
					color: '#F0F0F3'
				}
			},

			navigation: {
				buttonOptions: {
					symbolStroke: '#DDDDDD',
					theme: {
						fill: '#505053'
					}
				}
			},

			// scroll charts
			rangeSelector: {
				buttonTheme: {
					fill: '#505053',
					stroke: '#000000',
					style: {
						color: '#CCC'
					},
					states: {
						hover: {
							fill: '#707073',
							stroke: '#000000',
							style: {
								color: 'white'
							}
						},
						select: {
							fill: '#000003',
							stroke: '#000000',
							style: {
								color: 'white'
							}
						}
					}
				},
				inputBoxBorderColor: '#505053',
				inputStyle: {
					backgroundColor: '#333',
					color: 'silver'
				},
				labelStyle: {
					color: 'silver'
				}
			},

			navigator: {
				handles: {
					backgroundColor: '#666',
					borderColor: '#AAA'
				},
				outlineColor: '#CCC',
				maskFill: 'rgba(255,255,255,0.1)',
				series: {
					color: '#7798BF',
					lineColor: '#A6C7ED'
				},
				xAxis: {
					gridLineColor: '#505053'
				}
			},

			scrollbar: {
				barBackgroundColor: '#808083',
				barBorderColor: '#808083',
				buttonArrowColor: '#CCC',
				buttonBackgroundColor: '#606063',
				buttonBorderColor: '#606063',
				rifleColor: '#FFF',
				trackBackgroundColor: '#404043',
				trackBorderColor: '#404043'
			}
		};

		// Apply the theme
		Highcharts.setOptions(Highcharts.theme);

	}
	if (localStorage.getItem('background') == "black") {
		bla = document.getElementsByClassName('negrito');
		document.getElementsByClassName('card-panel')[0].style.background = '#3b3d3b';
		let blo = document.getElementsByClassName('textWh');
		blo = Array.prototype.slice.call(blo)

		for (let i = 0; i < blo.length; i++) {

			blo[i].style.color = 'white';
		}
		bla = Array.prototype.slice.call(bla)
		cambiarAOscuro();
	}
	var scroll = new SmoothScroll('a[href*="#"]', {
		speed: 500,
		speedAsDuration: false,
		easing: 'easeInOutCubic',
		offset: 100
	});
	$(document).ready(function () {
		M.toast({
			html: i18n.gettext("Cargando datos, por favor espere")+"."
		});
		if (localStorage.getItem('background') == "black") {
			document.getElementsByClassName('barrita').style.filter = 'invert(100%);'
		}
	});

	var puedoRecargar = true;
	var app = new Vue({
		el: '#main',
		data: {
			datos: {
				totales: {
					total: 0,
					duracionPromedio: 0,
					rollover: 0
				},
				respuestasHumanas: {
					total: 0,
					duracionPromedio: 0,
					tiempoTotal: 0
				},
				abandono: {
					total: 0,
					pocentaje: 0,
					totalAbandonadasRespuestas: 0,
					porcentajeAbandonadasRespuestas: 0,
					totalRollover: 0,
					porcentajeRollover: 0,
					segundos: 0
				},
				sinRespuesta: {
					total: 0,
					porcentaje: 0,
					totalLlamadasAutomaticas: 0,
					totalLlamadasManuales: 0,
					duracionAproximada: 0
				},
				razonesColgado: {
					Registros: [],
					total: 0
				},
				estadoLlamada: {
					Registros: [],
					total: {
						TOTALcalls: 0,
						TOTALhours: 0,
						TOTALavg: 0,
						TOTALrate: 0
					}
				},
				estadisticasIdListas: {
					Registros: [],
					total: 0
				},
				carrier: {
					Registros: [],
					total: 0
				},
				estadisticasCategoriasEstPersonalizados: {
					Registros: [],
					total: 0
				},
				estadisticasAgente: {
					Registros: []
				}
			},
			ls: localStorage.getItem('background'),
			razonesColgado: '',
			estadoLlamada: '',
			categoriaPersonalizada: '',
			idListas: '',
			i18n : i18n
		},
		mounted: function () {

		},
		methods: {
			nivelMod: function () {
				return parseFloat(this.nivel).toFixed(2);
			},
			formatTime:function(val){
				val = parseInt(val);
				let Horas = Math.floor(val / 3600);
				val -= Horas * 3600;
				let Minutos = Math.floor(val / 60);
				val -= Minutos * 60;
				let Segundos = val;
				val = (Horas<10?"0"+Horas:Horas) + ":" + (Minutos<10?"0"+Minutos:Minutos) + ":" + (Segundos<10?"0"+Segundos:Segundos);
				return val;
			},
			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;
			},
			getFormateado: function (hora) {
				return ((Math.floor(hora / 3600) < 10 ? "0" + Math.floor(hora / 3600) : Math.floor(hora / 3600)) + ":" + (Math.floor(
					(hora % 3600) / 60) < 10 ? "0" + Math.floor((hora % 3600) / 60) : Math.floor((hora % 3600) / 60)) + ":" + ((
					hora % 3600) % 60 < 10 ? "0" + (hora % 3600) % 60 : (hora % 3600) % 60));
			},
			recarga: function () {
				if (puedoRecargar) {
					$('#barrita').show();
					$('#barritaFade').show();

					$("body").css("overflow", "hidden");


					if (localStorage.getItem('background') == "black") {

						document.getElementById('barrita').style.filter = 'invert(100%);'
					}

					puedoRecargar = false;
					if ($("#fechaInicio").val() == undefined || $("#fechaInicio").val() == "") {
						var d = new Date();
						document.getElementById("fechaInicio").value = d.getFullYear() + "-" + ((d.getMonth() + 1) >= 10 ? (d.getMonth() +
							1) : ("0" + (d.getMonth() + 1))) + "-" + d.getDate();
						document.getElementById("fechaFin").value = d.getFullYear() + "-" + ((d.getMonth() + 1) >= 10 ? (d.getMonth() +
							1) : ("0" + (d.getMonth() + 1))) + "-" + d.getDate();
					}
					var parametros = {
						campana: $("#campanaAgentes").val(),
						fechaInicial: $("#fechaInicio").val(),
						fechaFinal: $("#fechaFin").val(),
						lista:$("#lista").val(),
						archived:document.getElementById("archived").checked?"1":"0"
					};
					$.ajax({
						url: "reporteSalientes/outboundReport",
						type: "GET",
						data: parametros,
						dataType: "text",
						error: function (data) {
							console.log(data);
						},
						success: function (response) {

							//alert("Listo");

							var resp = JSON.parse(response);

							if(parseInt(resp.totales.llamadasTotales) == 0){
								puedoRecargar = true;
								alert(traducirFrase('La busqueda no genero resultados'));
								$('#barrita').hide();
								$('#barritaFade').hide();
								$('#contTodo').hide();
								$("body").css("overflow", "auto");
								return false;
							}else{

								//alert('si genero');
								$('#contTodo').show();
								document.getElementById("contTodo").style.display = "block";
							}

							$('#contTodo').show();
								document.getElementById("contTodo").style.display = "block";

							if (resp.Estado == 'ok') {
								puedoRecargar = true;
								document.getElementById("barrita").style.display = "none";
								document.getElementById("contTodo").style.display = "block";
								$('#barritaFade').hide();
								$("body").css("overflow", "auto");
								$('#contTodo').show();
								creaPie1(resp.estadoLlamada);
								creaDona1(resp.estadisticasAgente);
								creaColumnas1(resp.estadoLlamada);
								$('.fixed-action-btn').floatingActionButton();
								app._data.datos = resp;
								var colores = [
									'rgba(54, 162, 235, 0.5)',
									'rgba(255, 206, 86, 0.5)',
									'rgba(75, 192, 192, 0.5)',
									'rgba(153, 102, 255, 0.5)',
									'rgba(255, 159, 64, 0.5)',
									'rgba(255, 99, 132, 0.5)'
								];
								setTimeout(function () {

										if (app.datos.razonesColgado.Registros.length != undefined) {

											if(ctx0 !=null){
												//totalesChart.destroy();
												/*estadoChart.destroy();
												humanasChart.destroy();
												dejadasChart.destroy();
												respuestaChart.destroy();*/
											}

											var lab = [];
											var dat = []
											for (var i = 0; i < app.datos.razonesColgado.Registros.length; i++) {
												lab.push((app.datos.razonesColgado.Registros[i].razon));
												dat.push((app.datos.razonesColgado.Registros[i].llamadas));
											}
											/*ctx0 = document.getElementById("estadoCanvas").getContext('2d');
										 estadoChart = new Chart(ctx0, {
												type: 'bar',
												data: {
													labels: lab,
													datasets: [{
														label: i18n.gettext("Estado de colgado"),
														data: dat,
														backgroundColor: [
															'rgba(255, 99, 132, 0.2)',
															'rgba(54, 162, 235, 0.2)',
															'rgba(255, 206, 86, 0.2)',
															'rgba(75, 192, 192, 0.2)',
															'rgba(153, 102, 255, 0.2)',
															'rgba(255, 159, 64, 0.2)'
														],
														borderColor: [
															'rgba(255,99,132,1)',
															'rgba(54, 162, 235, 1)',
															'rgba(255, 206, 86, 1)',
															'rgba(75, 192, 192, 1)',
															'rgba(153, 102, 255, 1)',
															'rgba(255, 159, 64, 1)'
														],
														borderWidth: 1
													}]
												},
												options: {
													scales: {
														yAxes: [{
															ticks: {
																beginAtZero: true
															}
														}]
													}
												}
											});*/

											// highchart piramyd

											/*ctx1 = document.getElementById("totalesCanvas").getContext('2d');
											totalesChart = new Chart(ctx1, {
												type: 'horizontalBar',
												data: {
													labels: [i18n.gettext("Llamadas totales \n para esta campaña"),
													i18n.gettext("Duración de llamadas en \n promedio para todas las llamadas")
													],
													datasets: [{
														label: i18n.gettext("Totales"),
														data: [app.datos.totales.llamadasTotales, app.datos.totales.duracionPromedio],
														backgroundColor: colores,
													}]
												},
												plugins: [{
													beforeInit: function (chart) {
														chart.data.labels.forEach(function (e, i, a) {
															if (/\n/.test(e)) {
																a[i] = e.split(/\n/);
															}
														});
													}
												}],
												options: {
													legend: false,
													scales: {
														xAxes: [{
															ticks: {
																maintainAspectRatio: false,
																beginAtZero: true
															}
														}]
													}
												}
											});*/

											/*ctx2 = document.getElementById("humanasCanvas").getContext('2d');
											humanasChart = new Chart(ctx2, {
												type: 'horizontalBar',
												data: {
													labels: [i18n.gettext("Total de respuestas humanas \n para esta campaña"),
														i18n.gettext("Duración de llamadas en \n promedio por repsuestas humanas")
													],
													datasets: [{
														label: i18n.gettext("Respuestas Humanas"),
														data: [app.datos.respuestasHumanas.total, app.datos.respuestasHumanas.duracionPromedio],
														backgroundColor: colores,

													}]
												},
												plugins: [{
													beforeInit: function (chart) {
														chart.data.labels.forEach(function (e, i, a) {
															if (/\n/.test(e)) {
																a[i] = e.split(/\n/);
															}
														});
													}
												}],
												options: {
													legend: false,
													scales: {
														xAxes: [{
															ticks: {
																maintainAspectRatio: false,
																beginAtZero: true
															}
														}]
													},
												}
											});
											ctx3 = document.getElementById("dejadasCanvas").getContext('2d');
											dejadasChart = new Chart(ctx3, {
												type: 'horizontalBar',
												data: {
													labels: [
														i18n.gettext("Total de llamadas \n dejadas salientes"),
														i18n.gettext("Porcentaje de llamadas \n dejadas tomadas de respuesta"),
														i18n.gettext("Duración promedio para \n llamadas dejadas"),
														i18n.gettext("Rating de productividad")
													],
													datasets: [{
														label: i18n.gettext("Respuestas Humanas"),
														data: [app.datos.abandono.total,
															app.datos.abandono.porcentajeAbandonadasRespuestas,
															app.datos.abandono.pocentaje,
															app.datos.abandono.rating
														],
														backgroundColor: colores,

													}]
												},
												plugins: [{
													beforeInit: function (chart) {
														chart.data.labels.forEach(function (e, i, a) {
															if (/\n/.test(e)) {
																a[i] = e.split(/\n/);
															}
														});
													}
												}],
												options: {
													legend: false,
													scales: {
														xAxes: [{
															ticks: {
																maintainAspectRatio: false,
																beginAtZero: true
															}
														}]
													}
												}
											});

											ctx4 = document.getElementById("respuestaCanvas").getContext('2d');
											respuestaChart = new Chart(ctx4, {
												type: 'horizontalBar',
												data: {
													labels: [
														i18n.gettext("Total de llamadas sin respuesta"),
														i18n.gettext("Total de llamadas sin respuesta \n automáticas"),
														i18n.gettext("Total de llamadas sin respuesta \n manuales"),
														i18n.gettext("Duracion en promedio para \n llamadas sin respuesta")
													],
													datasets: [{
														label: i18n.gettext("Respuestas Humanas"),
														data: [
															app.datos.sinRespuesta.total,
															app.datos.sinRespuesta.totalLlamadasAutomaticas,
															app.datos.sinRespuesta.totalLlamadasManuales,
															app.datos.sinRespuesta.duracionAproximada
														],
														backgroundColor: colores,

													}]
												},
												plugins: [{
													beforeInit: function (chart) {
														chart.data.labels.forEach(function (e, i, a) {
															if (/\n/.test(e)) {
																a[i] = e.split(/\n/);
															}
														});
													}
												}],
												options: {
													legend: false,
													scales: {
														xAxes: [{
															ticks: {
																maintainAspectRatio: false,
																beginAtZero: true
															}
														}]
													}
												}
											});*/
										}

									},
									500);
								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%)';
									}

									'use strict';

									/* global document */

									// Load the fonts

									Highcharts.createElement('link', {
										href: '<?=LIB_JS;?>fonts/unica_one.css',
										rel: 'stylesheet',
										type: 'text/css'
									}, null, document.getElementsByTagName('head')[0]);

									Highcharts.theme = {
										colors: ['#2b908f', '#90ee7e', '#f45b5b', '#7798BF', '#aaeeee', '#ff0066',
											'#eeaaee', '#55BF3B', '#DF5353', '#7798BF', '#aaeeee'],
										chart: {
											backgroundColor: {
												linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
												stops: [
													[0, '#2a2a2b'],
													[1, '#3e3e40']
												]
											},
											style: {
												fontFamily: '\'Unica One\', sans-serif'
											},
											plotBorderColor: '#606063'
										},
										title: {
											style: {
												color: '#E0E0E3',
												textTransform: 'uppercase',
												fontSize: '20px'
											}
										},
										subtitle: {
											style: {
												color: '#E0E0E3',
												textTransform: 'uppercase'
											}
										},
										xAxis: {
											gridLineColor: '#707073',
											labels: {
												style: {
													color: '#E0E0E3'
												}
											},
											lineColor: '#707073',
											minorGridLineColor: '#505053',
											tickColor: '#707073',
											title: {
												style: {
													color: '#A0A0A3'

												}
											}
										},
										yAxis: {
											gridLineColor: '#707073',
											labels: {
												style: {
													color: '#E0E0E3'
												}
											},
											lineColor: '#707073',
											minorGridLineColor: '#505053',
											tickColor: '#707073',
											tickWidth: 1,
											title: {
												style: {
													color: '#A0A0A3'
												}
											}
										},
										tooltip: {
											backgroundColor: 'rgba(0, 0, 0, 0.85)',
											style: {
												color: '#F0F0F0'
											}
										},
										plotOptions: {
											series: {
												dataLabels: {
													color: '#F0F0F3',
													style: {
														fontSize: '13px'
													}
												},
												marker: {
													lineColor: '#333'
												}
											},
											boxplot: {
												fillColor: '#505053'
											},
											candlestick: {
												lineColor: 'white'
											},
											errorbar: {
												color: 'white'
											}
										},
										legend: {
											backgroundColor: 'rgba(0, 0, 0, 0.5)',
											itemStyle: {
												color: '#E0E0E3'
											},
											itemHoverStyle: {
												color: '#FFF'
											},
											itemHiddenStyle: {
												color: '#606063'
											},
											title: {
												style: {
													color: '#C0C0C0'
												}
											}
										},
										credits: {
											style: {
												color: '#666'
											}
										},
										labels: {
											style: {
												color: '#707073'
											}
										},

										drilldown: {
											activeAxisLabelStyle: {
												color: '#F0F0F3'
											},
											activeDataLabelStyle: {
												color: '#F0F0F3'
											}
										},

										navigation: {
											buttonOptions: {
												symbolStroke: '#DDDDDD',
												theme: {
													fill: '#505053'
												}
											}
										},

										// scroll charts
										rangeSelector: {
											buttonTheme: {
												fill: '#505053',
												stroke: '#000000',
												style: {
													color: '#CCC'
												},
												states: {
													hover: {
														fill: '#707073',
														stroke: '#000000',
														style: {
															color: 'white'
														}
													},
													select: {
														fill: '#000003',
														stroke: '#000000',
														style: {
															color: 'white'
														}
													}
												}
											},
											inputBoxBorderColor: '#505053',
											inputStyle: {
												backgroundColor: '#333',
												color: 'silver'
											},
											labelStyle: {
												color: 'silver'
											}
										},

										navigator: {
											handles: {
												backgroundColor: '#666',
												borderColor: '#AAA'
											},
											outlineColor: '#CCC',
											maskFill: 'rgba(255,255,255,0.1)',
											series: {
												color: '#7798BF',
												lineColor: '#A6C7ED'
											},
											xAxis: {
												gridLineColor: '#505053'
											}
										},

										scrollbar: {
											barBackgroundColor: '#808083',
											barBorderColor: '#808083',
											buttonArrowColor: '#CCC',
											buttonBackgroundColor: '#606063',
											buttonBorderColor: '#606063',
											rifleColor: '#FFF',
											trackBackgroundColor: '#404043',
											trackBorderColor: '#404043'
										}
									};

									// Apply the theme
									Highcharts.setOptions(Highcharts.theme);

								}

								if (localStorage.getItem('background') == "black") {
									bla = document.getElementsByClassName('negrito')
									document.getElementsByClassName('card-panel')[0].style.background = '#3b3d3b';
									let blo = document.getElementsByClassName('textWh');
									blo = Array.prototype.slice.call(blo)

									for (let i = 0; i < blo.length; i++) {

										blo[i].style.color = 'white';
									}

									bla = Array.prototype.slice.call(bla)
									cambiarAOscuro();
								}

								$('#contTodo').show();
								document.getElementById("contTodo").style.display = "block";

							} else {
								M.toast({
									html: resp.Descripcion
								});
							}
						}
					});
				}

				$('#contTodo').show();
				document.getElementById("contTodo").style.display = "block";
			}
		},
		mounted: function () {
	
			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%)';

				}

				'use strict';

				/* global document */

				// Load the fonts

				Highcharts.createElement('link', {
					href: '<?=LIB_JS;?>fonts/unica_one.css',
					rel: 'stylesheet',
					type: 'text/css'
				}, null, document.getElementsByTagName('head')[0]);

				Highcharts.theme = {
					colors: ['#2b908f', '#90ee7e', '#f45b5b', '#7798BF', '#aaeeee', '#ff0066',
						'#eeaaee', '#55BF3B', '#DF5353', '#7798BF', '#aaeeee'],
					chart: {
						backgroundColor: {
							linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
							stops: [
								[0, '#2a2a2b'],
								[1, '#3e3e40']
							]
						},
						style: {
							fontFamily: '\'Unica One\', sans-serif'
						},
						plotBorderColor: '#606063'
					},
					title: {
						style: {
							color: '#E0E0E3',
							textTransform: 'uppercase',
							fontSize: '20px'
						}
					},
					subtitle: {
						style: {
							color: '#E0E0E3',
							textTransform: 'uppercase'
						}
					},
					xAxis: {
						gridLineColor: '#707073',
						labels: {
							style: {
								color: '#E0E0E3'
							}
						},
						lineColor: '#707073',
						minorGridLineColor: '#505053',
						tickColor: '#707073',
						title: {
							style: {
								color: '#A0A0A3'

							}
						}
					},
					yAxis: {
						gridLineColor: '#707073',
						labels: {
							style: {
								color: '#E0E0E3'
							}
						},
						lineColor: '#707073',
						minorGridLineColor: '#505053',
						tickColor: '#707073',
						tickWidth: 1,
						title: {
							style: {
								color: '#A0A0A3'
							}
						}
					},
					tooltip: {
						backgroundColor: 'rgba(0, 0, 0, 0.85)',
						style: {
							color: '#F0F0F0'
						}
					},
					plotOptions: {
						series: {
							dataLabels: {
								color: '#F0F0F3',
								style: {
									fontSize: '13px'
								}
							},
							marker: {
								lineColor: '#333'
							}
						},
						boxplot: {
							fillColor: '#505053'
						},
						candlestick: {
							lineColor: 'white'
						},
						errorbar: {
							color: 'white'
						}
					},
					legend: {
						backgroundColor: 'rgba(0, 0, 0, 0.5)',
						itemStyle: {
							color: '#E0E0E3'
						},
						itemHoverStyle: {
							color: '#FFF'
						},
						itemHiddenStyle: {
							color: '#606063'
						},
						title: {
							style: {
								color: '#C0C0C0'
							}
						}
					},
					credits: {
						style: {
							color: '#666'
						}
					},
					labels: {
						style: {
							color: '#707073'
						}
					},

					drilldown: {
						activeAxisLabelStyle: {
							color: '#F0F0F3'
						},
						activeDataLabelStyle: {
							color: '#F0F0F3'
						}
					},

					navigation: {
						buttonOptions: {
							symbolStroke: '#DDDDDD',
							theme: {
								fill: '#505053'
							}
						}
					},

					// scroll charts
					rangeSelector: {
						buttonTheme: {
							fill: '#505053',
							stroke: '#000000',
							style: {
								color: '#CCC'
							},
							states: {
								hover: {
									fill: '#707073',
									stroke: '#000000',
									style: {
										color: 'white'
									}
								},
								select: {
									fill: '#000003',
									stroke: '#000000',
									style: {
										color: 'white'
									}
								}
							}
						},
						inputBoxBorderColor: '#505053',
						inputStyle: {
							backgroundColor: '#333',
							color: 'silver'
						},
						labelStyle: {
							color: 'silver'
						}
					},

					navigator: {
						handles: {
							backgroundColor: '#666',
							borderColor: '#AAA'
						},
						outlineColor: '#CCC',
						maskFill: 'rgba(255,255,255,0.1)',
						series: {
							color: '#7798BF',
							lineColor: '#A6C7ED'
						},
						xAxis: {
							gridLineColor: '#505053'
						}
					},

					scrollbar: {
						barBackgroundColor: '#808083',
						barBorderColor: '#808083',
						buttonArrowColor: '#CCC',
						buttonBackgroundColor: '#606063',
						buttonBorderColor: '#606063',
						rifleColor: '#FFF',
						trackBackgroundColor: '#404043',
						trackBorderColor: '#404043'
					}
				};

				// Apply the theme
				Highcharts.setOptions(Highcharts.theme);

			}
			if (localStorage.getItem('background') == "black") {
				bla = document.getElementsByClassName('negrito')
				document.getElementsByClassName('card-panel')[0].style.background = '#3b3d3b';
				let blo = document.getElementsByClassName('textWh');
				blo = Array.prototype.slice.call(blo)

				for (let i = 0; i < blo.length; i++) {

					blo[i].style.color = 'white';
				}
				bla = Array.prototype.slice.call(bla)
				cambiarAOscuro();
			}

			$('.datepicker').datepicker({
				format: "yyyy-mm-dd",
				selectMonths: true,
				selectYears: true,
				showClearBtn: true,
				i18n: {
					months: [traducirFrase('Enero'), traducirFrase('Febrero'), traducirFrase('Marzo'), traducirFrase('Abril'), traducirFrase('Mayo'), traducirFrase('Junio'), traducirFrase('Julio'), traducirFrase('Agosto'), traducirFrase('Septiembre'), traducirFrase('Octubre'),
						traducirFrase('Noviembre'), traducirFrase('Diciembre')
					],
					monthsShort: [traducirFrase('Ene'), traducirFrase('Feb'), traducirFrase('Mar'), traducirFrase('Abr'), traducirFrase('May'), traducirFrase('Jun'), traducirFrase('Jul'), traducirFrase('Ago'), traducirFrase('Sep'), traducirFrase('Oct'), traducirFrase('Nov'), traducirFrase('Dic')],
					weekdays: [traducirFrase('Domingo'), traducirFrase('Lunes'), traducirFrase('Martes'), traducirFrase('Miércoles'), traducirFrase('Jueves'), traducirFrase('Viernes'), traducirFrase('Sábado')],
					weekdaysShort: [traducirFrase('Dom'), traducirFrase('Lun'), traducirFrase('Mar'), traducirFrase('Mié'), traducirFrase('Jue'), traducirFrase('Vie'), traducirFrase('Sáb')],
					today: traducirFrase('Hoy'),
					clear: traducirFrase('Borrar'),
					cancel: traducirFrase('Cerrar'),
					done: traducirFrase('Confirmar'),
					weekdaysAbbrev: [traducirFrase("D"), traducirFrase("L"), traducirFrase("M"), traducirFrase("M"), traducirFrase("J"), traducirFrase("V"), traducirFrase("S")],
					firstDay: 1
				}
			});
			if ($("#fechaInicio").val() == null || $("#fechaInicio").val() == '') {
				var d = new Date()
				document.getElementById("fechaInicio").value = d.getFullYear() + "-" + ((d.getMonth() + 1) >= 10 ? (d.getMonth() +
					1) : ("0" + (d.getMonth() + 1))) + "-" + ((d.getDate() + 1) >= 10 ? (d.getDate()) : ("0" + (d.getDate())));
				document.getElementById("fechaFin").value = d.getFullYear() + "-" + ((d.getMonth() + 1) >= 10 ? (d.getMonth() +
					1) : ("0" + (d.getMonth() + 1))) + "-" + ((d.getDate()) >= 10 ? (d.getDate()) : ("0" + (d.getDate())));
			}
			$.ajax({
				url: 'campanas/getCampaignsSelect',
				dataType: "text",
				type: 'GET',
				success: function (res) {
					var resp = JSON.parse(res);
					if (resp.Estado == 'ok') {
						for (var i = 0; i < resp.Campanas.length; i++) {
							$("#campanaAgentes").append("<option value='" + resp.Campanas[i].campaign_id + "'><span>" + resp.Campanas[
									i]
								.campaign_name +
								"</span></option>");
						}
					} else {
						M.toast({
							html: resp.Descripcion
						});
					}
				},
				error: function (error) {
					console.log(error);
				}
			});
			var Arreglo = $('select');
			for (var i = 0; i < Arreglo.length; i++) {
				if (Arreglo[i].id != '') {
					$("#" + Arreglo[i].id).formSelect();
				}
			}
			$('.fixed-action-btn').floatingActionButton();
			cambiaTabla();
			setTimeout(() => {
				app.recarga();
			}, 5000);
		},
		computed: {
			classObject: function () {
				if (this.ls == 'white') {
					return 'black-text';
				} else {
					return 'white-text';
				}
			}
		}
	});

	function cambiaTabla() {
		/*for (var i = 1; i <= 5; i++) {
			$("#tabla" + i).hide();
		}
		var x = $("#tablaxD").val();
		$("#tabla" + x).show();*/
	}
    function dameListas(){
	$("#lista").html("<option value=-1><span>"+traducirFrase("Todas las listas")+"</span></option>");
        $.ajax({
            url: 'listas/getListsSelect',
            dataType: "text",
			type: 'POST',
            data:{
            },
            error: function (data) {
                console.log(data);
			},
            success: function (response) {
                var resp = JSON.parse(response);
                if(resp.Estado!="ok"){

                }else{
                    for(var i = 0;i<resp.Listas.length;i++){
                        $("#lista").append("<option value='" + resp.Listas[i].list_id + "'><span>" + resp.Listas[i].list_name +"</span></option>");
                    }
                }
            }
        });
    }
	function descarga(valTabla) {

		//alert($("#tablaxD").val());
		var url = "reporteSalientes/outboundReportCSV?csv=true&archived="+(document.getElementById("archived").checked?"1":"0")+"&campana=" + $("#campanaAgentes").val() + "&fechaInicial=" + $(
			"#fechaInicio").val() + "&fechaFinal=" + $("#fechaFin").val()+"&lista="+$("#lista").val()+"&donde="+valTabla;
		window.location.replace(url);
	}

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