<?php

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

?>
<div id="mainTwo" >
<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 id='stemen' src="<?=IMG_ADMIN;?>spinner.gif"></center>
	</div>
</div>
	<div class="" style="margin-top: 0px;">
		<section id="pruebaId">
			<div class="container">
				<div class="row" style="margin-top: 70px;">
					<div class="col s12 black-text card-panel white">
						<div class="row col s12" style="padding-top: 0px;">
							<h6>{{i18n.gettext("Ajustes")}}</h6>
							<div class="input-field col s3">
								<label class="active" for="campanaAgentes">
									{{traducirFrase("Grupo de entrada")}}
								</label>
								<select id="campanaAgentes" multiple onchange="generaURL()" >
									<option value="" disabled selected >{{traducirFrase("Selecciona los grupos")}}</option>
									<option v-for="grupo in gruposEntrada" :value="grupo.value">{{grupo.label}}</option>
								</select>
								<span class="helper-text">
									{{traducirFrase("Si no seleccionas un grupo de entrada se buscara en todos los grupos.")}}
								</span>
							</div>
							<div class="input-field col s3">
								<label class="active">{{traducirFrase("Tabla")}}</label>
								<select id="selectTablas" class="browser-default " onChange="analizaVisualTablas()">
									<option value="1">{{traducirFrase("Desglose en segundos")}}</option>
									<option value="2">{{traducirFrase("Porcentaje de llamadas y tiempo en llamada")}}</option>
									<option value="3">{{traducirFrase("Causa de colgado")}}</option>
									<option value="4">{{traducirFrase("Estado de calificación")}}</option>
									<option value="5">{{traducirFrase("Estadísticas de categorías personalizadas")}}</option>
									<option value="6">{{traducirFrase("Posición inicial en la cola")}}</option>
									<option value="7">{{traducirFrase("Estadísticas por agente")}}</option>
								</select>
							</div>
							<div class="input-field col s3">
								<label for="pickDate">{{traducirFrase("Fecha")}}</label>
								<input type="text" autocomplete="off" start-date="new Date()" class=" datepicker-here" data-range="true" data-multiple-dates-separator=" - " data-date-format="yyyy-mm-dd" data-language="<?=$idioma;?>" class="datepicker-here" id="pickDate"/>
							</div>
							<div class="input-field col s1">
								<label for="archived">
									<input type="checkbox" id="archived" class="input-field">
									<span>{{traducirFrase("Información archivada")}}</span>
								</label>
							</div>
							<div class="input-field col s2" style="padding-top: 25px;text-align:center;">
								<button class="btn btn-success" onClick="app.recarga()" v-bind:title="traducirFrase('Generar reporte')"><i class="material-icons">done</i></button>
								<a class="btn" href="javascript:descarga()" v-bind:title="traducirFrase('Descargar reporte')"><span><i class="material-icons">get_app</i></span></a>
								<a class="btn" id="descargaTodo" href="javascript:descargaDial()" v-bind:title="traducirFrase('Descargar todas las llamadas')"><span><i class="material-icons">call</i></span></a>
							</div>
						</div>
						<span id="escondeme" style="display:none;">
							<div class="col s12 white">
								<div class="row negrito textWh" 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</i>
											{{traducirFrase("Llamadas totales")}}
											<span class="badge" style="color:white;">{{tableResp.llamadasTotalesEnElGrupo}} {{traducirFrase("llam.")}}</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("Llamadas respondidas")}}
											<span class="badge" style="color:white;">{{tableResp.llamadasRespondidas}} {{traducirFrase("llam.")}}</span></div>
										</li>
									</ul>
									<ul class="collapsible col s4" style="background-color:#ec407a;">
										<li>
											<div class="btnW13 collapsible-header">
											<i class="material-icons">timer</i>
											{{traducirFrase("Llamadas abandonadas")}}
											<span class="badge" style="color:white;">{{tableResp.llamadasDejadasTotal}} {{traducirFrase("llam.")}}</span></div>
										</li>
									</ul>
								</div>
							</div>
							<div class="col s12 white">
								<!--<h3 class="black-text">{{i18n.gettext("Desglose en segundos")}}</h3>-->
								<div class="black-text">
									<div class="container " id="tabla1">
										<h3 class="black-text">{{i18n.gettext("Desglose en segundos")}}</h3>
										<h5 style="display:none;">{{traducirFrase("Llamadas en espera")}}</h5>
										<table style="display:none;">
											<thead>
												<tr>
													<th>0</th>
													<th>5</th>
													<th>10</th>
													<th>15</th>
													<th>20</th>
													<th>25</th>
													<th>30</th>
													<th>35</th>
													<th>40</th>
													<th>45</th>
													<th>50</th>
													<th>55</th>
													<th>60</th>
													<th>90</th>
													<th>+90</th>
													<th>Total</th>
												</tr>
											</thead>
											<tbody>
												<tr>
													<td v-for="t in tabla">{{t}}</td>
												</tr>
											</tbody>
										</table>

										<h5 style="display:none;">{{traducirFrase("Llamadas abandonadas")}}</h5>
										<table style="display:none;">
											<thead>
												<tr>
													<th>0</th>
													<th>5</th>
													<th>10</th>
													<th>15</th>
													<th>20</th>
													<th>25</th>
													<th>30</th>
													<th>35</th>
													<th>40</th>
													<th>45</th>
													<th>50</th>
													<th>55</th>
													<th>60</th>
													<th>90</th>
													<th>+90</th>
													<th>Total</th>
												</tr>
											</thead>
											<tbody>
												<tr>
													<td v-for="t in tabla2">{{t}}</td>
												</tr>
											</tbody>
										</table>
										<div style="display:none;" class="row">
											<div class="col s6">
													<div style="width:100%;height:30vh;">
															<h5>{{traducirFrase("Llamadas en espera")}}</h5>
															<canvas id="chartDesglose1" ></canvas>
													</div>
											</div>
											<div class="col s6">
													<div style="width:100%;height:30vh;">
															<h5>{{traducirFrase("Llamadas abandonadas")}}</h5>
															<canvas id="chartDesglose2" ></canvas>
													</div>
											</div>
										</div>
										<div id="containerColumnas1" class="col s6" style="margin-top:2%;height:300px;">  </div>
										<div id="containerCilindros1" class="col s6" style="margin-top:2%;height:300px;"> </div>


									</div>
									<div class="container " id="tabla2">
										<h4>{{traducirFrase("Porcentaje de llamadas y tiempo en llamada")}}</h4>
										<div class="col s7">
											<table class="bordA">
												<thead>
													<tr>
														<th></th>
														<th>0</th>
														<th>5</th>
														<th>10</th>
														<th>15</th>
														<th>20</th>
														<th>25</th>
														<th>30</th>
														<th>35</th>
														<th>40</th>
														<th>45</th>
														<th>50</th>
														<th>55</th>
														<th>60</th>
														<th>90</th>
														<th>+90</th>
														<th>Total</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td>INT.</td>
														<td v-for="t in tablas.tabla3.INTERVAL">{{t}}</td>
													</tr>
													<tr>
														<td>INT</td>
														<td v-for="t in tablas.tabla3.INT">{{t}}</td>
													</tr>
													<tr>
														<td>CUM.</td>
														<td v-for="t in tablas.tabla3.CUMULATIVE">{{t}}</td>
													</tr>
													<tr>
														<td>CUM</td>
														<td v-for="t in tablas.tabla3.CUM">{{t}}</td>
													</tr>
													<tr>
														<td>C. ANS</td>
														<td v-for="t in tablas.tabla3.CUMANS">{{t}}</td>
													</tr>
													<tr>
														<td>NIV. SERV.</td>
														<td v-for="t in tablas.tabla3.nivelServicio">{{t}}</td>
														<td>100%</td>
														<td></td>
													</tr>
												</tbody>
											</table>
										</div>

										<div id="containerPie1" style="margin-top:0;height:300px;" class="col s5">
										</div>
										<div style="display:none;" class="col s12">
												<div class="col s8 offset-s2">
														<div style="width:100%;height:30vh;">

																<canvas id="chartPorcentaje" ></canvas>
														</div>
												</div>
										</div>

									</div>
									<div class="container" id="tabla3">
										<h4>{{traducirFrase("Causa de colgado")}}</h4>
										<div class="col s6">
											<table class="bordA">
												<thead>
													<tr>
														<th>{{traducirFrase("Causa")}}</th>
														<th>{{traducirFrase("Llamadas")}}</th>
													</tr>
												</thead>
												<tbody>
													<tr v-for="t in tablas.tabla4.Registros">
														<td v-html="checaVE(t.razon)">
															{{t.razon}}
														</td>
														<td>{{t.conteo}}</td>
													</tr>
												</tbody>
												<thead>
													<th>Total:</th>
													<th>{{tablas.tabla4.Total}}</th>
												</thead>
											</table>
										</div>
										<div id="containerColumnas2" class="col s6" style="margin-top:2%;height:300px;">  </div>
										<div style="display:none;" class="col s12">
												<div class="col s8 offset-s2">
														<div style="width:100%;height:30vh;">

																<canvas id="chartCausa" ></canvas>
														</div>
												</div>
										</div>
									</div>
									<div class="container " id="tabla4">
										<h4>{{traducirFrase("Estatus de calificación")}}</h4>
										<div class="col s6">
											<table class="bordA">
												<thead>
													<tr>
														<th>{{traducirFrase("Estado")}}</th>
														<th>Desc.</th>
														<th>Cat.</th>
														<th>{{traducirFrase("Llam.")}}</th>
														<th>{{traducirFrase("T. total (seg.)")}}</th>
														<th>{{traducirFrase("T. prom. (seg.)")}}</th>
														<th>{{traducirFrase("Llam./Hr")}}</th>
													</tr>
												</thead>
												<tbody>
													<tr v-for="t in tablas.tabla5.Registros">
														<td>{{t.STATUS}}</td>
														<td>{{t.DESCRIPTION}}</td>
														<td>{{t.CATEGORY}}</td>
														<td>{{t.CALLS}}</td>
														<td v-html="formatea0(t.TOTALTIME)"></td>
														<td v-html="formatea0(t.AVERAGETIME)"></td>
														<td>{{t.CALLSHOURS}}</td>
													</tr>
												</tbody>
												<thead>
													<th colspan="3">Total:</th>
													<th>{{tablas.tabla5.Total.CALLS}}</th>
													<th v-html="formatea0(tablas.tabla5.Total.TOTALTIME)"></th>
													<th v-html="formatea0(tablas.tabla5.Total.AVGTIME)"></th>
													<th>{{tablas.tabla5.Total.CALLSHOURS}}</th>
												</thead>
											</table>
										</div>
										<div id="containerColumnas3" class="col s6" style="margin-top:2%;height:300px;"> </div>
										<div style="display:none;" class="col s12">
												<div class="col s8 offset-s2">
														<div style="width:100%;height:30vh;">
																<canvas id="chartEstado" ></canvas>
														</div>
												</div>
										</div>
									</div>
									<div class="container " id="tabla5">
										<h4>{{traducirFrase("Estadisticas de categorias personalizadas")}}</h4>
										<div class="col s6">
											<table class="bordA">
												<thead>
													<tr>
														<th>{{traducirFrase("Categoria")}}</th>
														<th>{{traducirFrase("Llamadas")}}</th>
														<th>{{traducirFrase("Descripción")}}</th>
													</tr>
												</thead>
												<tbody>
													<tr v-for="t in tablas.tabla6.Registros">
														<td>{{t.CATEGORY}}</td>
														<td>{{t.CALLS}}</td>
														<td>{{t.DESCRIPTION}}</td>
													</tr>
												</tbody>
												<tfoot>
													<th>Total:</th>
													<th>{{tablas.tabla6.Total}}</th>
													<th> </th>
												</tfoot>
											</table>
										</div>
										<div id="containerCilindros2" class="col s6" style="margin-top:2%;height:300px;"> </div>
										<div style="display:none;" class="col s12">
												<div class="col s6 offset-s3">
														<div style="width:100%;height:30vh;">
																<canvas id="chartEstadisticasCategorias"></canvas>
														</div>
												</div>
										</div>

									</div>
									<div class="container " id="tabla6">
										<h4>{{traducirFrase("Posicion inicial en la cola")}}</h4>

										<div style="display:none;">
											<table>
												<thead>
													<tr>
														<th>1</th>
														<th>2</th>
														<th>3</th>
														<th>4</th>
														<th>5</th>
														<th>6</th>
														<th>7</th>
														<th>8</th>
														<th>9</th>
														<th>10</th>
														<th>15</th>
														<th>20</th>
														<th>25</th>
														<th>+25</th>
														<th>Total</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td v-for="t in tablas.tabla7">{{t}}</td>
													</tr>
												</tbody>
											</table>
										</div>
										<div id="containerCilindros3" class="col s12" style="margin-top:2%;height:300px;"> </div>
										<div style="display:none;" class="col s12">
												<div class="col s6 offset-s3">
														<div style="width:100%;height:30vh;">
														<canvas id="chartPosicion" ></canvas>
														</div>
												</div>
										</div>

									</div>
									<div class="container " id="tabla7">
										<h4>{{traducirFrase("Estadisticas por agente")}}</h4>

										<div class="col s6">
											<table class="bordA">
												<thead>
													<tr>
														<th>{{traducirFrase("Usuario")}}</th>
														<th>{{traducirFrase("Nombre")}}</th>
														<th>{{traducirFrase("Llamadas")}}</th>
														<th>{{traducirFrase("Tiempo (seg.)")}}</th>
														<th>{{traducirFrase("Promedio (seg.)")}}</th>
													</tr>
												</thead>
												<tbody>
													<tr v-for="t in tablas.tabla8.Registros">
														<td>{{t.usuario}}</td>
														<td>{{t.nombre}}</td>
														<td>{{t.calls}}</td>
														<td v-html="formatea0(t.tiempo)"></td>
														<td v-html="formatea0(t.promedio)"></td>
													</tr>
												</tbody>
												<thead>
													<th>Total:</th>
													<th>{{tablas.tabla8.Total.Agentes}}</th>
													<th>{{tablas.tabla8.Total.Llamadas}}</th>
													<th v-html="formatea0(tablas.tabla8.Total.Tiempo)"></th>
													<th v-html="formatea0(tablas.tabla8.Total.Promedio)"></th>
												</thead>
											</table>
										</div>

										<div id="containerColumnas4" class="col s6" style="margin-top:2%;height:300px;"> </div>
										<div style="display:none;" class="col s12">
												<div class="col s6">
														<div style="width:100%;height:30vh;">
																<h5>Llamadas</h5>
																<canvas id="chartEstadisticasAgentes1" ></canvas>
														</div>
												</div>
												<div class="col s6">
														<div style="width:100%;height:30vh;">
																<h5>Tiempo Promedio</h5>
																<canvas id="chartEstadisticasAgentes2" ></canvas>
														</div>
												</div>
											</div>

									</div>


								</div>
								<br>


							</div>
							<div class="col s12 white">
								<div class="row negrito textWh" style="display: flex;justify-content: center;align-items: center;">
									<ul class="collapsible col s6" style="background-color:#3399cc;">
										<li>
											<div class="btnW collapsible-header">
											<i class="material-icons">call</i>
											{{i18n.gettext("Porcentaje de llamadas respondidas")}}
											<span class="badge" style="color:white;">{{tableResp.llamadasRespondidasPorcentaje}} %</span></div>
										</li>
									</ul>
									<ul class="collapsible col s6" style="background-color:#ffc107;">
										<li>
											<div class="btnW6 collapsible-header">
											<i class="material-icons">timer</i>
											{{traducirFrase("Porcentaje total de llamadas abandonadas")}}
											<span class="badge" style="color:white;">{{tableResp.llamadasDejadasTotalPorcentaje}}</span> %</div>
										</li>
									</ul>
								</div>
								<div class="row negrito textWh" style="display: flex;justify-content: center;align-items: center;">
									<ul class="collapsible col s6" style="background-color:#ff5722;">
										<li>
											<div class="btnW8 collapsible-header">
											<i class="material-icons">timer</i>
											{{traducirFrase("Duración prom. de las llamadas")}}
											<span class="badge" style="color:white;">{{tableResp.duracionPromedioTodasLlamadas}} seg.</span></div>
										</li>
									</ul>
									<ul class="collapsible col s6" style="background-color:#ab47bc ;">
										<li>
											<div class="btnW12 collapsible-header">
											<i class="material-icons">transfer_within_a_station</i>
											{{traducirFrase("Prom. de espera de llam. abandonadas")}}
											<span class="badge" style="color:white;">{{tableResp.tiempoPromedioEsperaLlamadasDejadas}} seg.</span></div>
										</li>
									</ul>
								</div>
								<br>
							</div>
						</span>

					</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>
<!--google map-->

<!--plugins.js - Some Specific JS codes for Plugin Settings-->
<script type="text/javascript" src="<?=JS_ADMIN;?>plugins.js"></script>
<!--card-advanced.js - Page specific JS-->
<script type="text/javascript" src="<?=JS_ADMIN;?>scripts/dashboard-analytics.js"></script>
<!--custom-script.js - Add your own theme custom JS
    <script type="text/javascript" src="<?=JS_ADMIN;?>custom-script.js"></script>-->
<script src="<?=JS_ADMIN;?>vue.js"></script>
<script src="<?=JS_ADMIN;?>Chart.min.js"></script>
<script src="<?=JS_ADMIN;?>gauge.min.js"></script>
<script src="<?=JS_ADMIN;?>raphael.js"></script>
<script src="<?=JS_ADMIN;?>justgage.js"></script>
<script src="<?=JS_ADMIN;?>datepicker.js"></script>
<script src="<?=JS_ADMIN;?>i18n/datepicker.es.js"></script>
<script src="<?=JS_ADMIN;?>i18n/datepicker.en.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>

<?php require_once "scripts.php";?>

</body>
<!--hola-->
<!-- 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>
