<?php $__env->startSection('CSS'); ?>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<?php echo HTML::style('bootstrap-daterangepicker/daterangepicker.css'); ?>

<?php echo HTML::style('DataTables/dataTables.bootstrap.min.css'); ?>

<?php echo HTML::style('DataTables/responsive.dataTables.min.css'); ?>

<?php echo HTML::style('DataTables/select.dataTables.min.css'); ?>

<?php echo HTML::style('DataTables/buttons.dataTables.min.css'); ?>

<?php echo HTML::style('DataTables/fixedHeader.dataTables.min.css'); ?>

<?php echo HTML::style('bootstrap-select/css/bootstrap-select.min.css'); ?>

<style type="text/css" class="init">
	@media (max-width: 450px) { .ModalEliminar .modal-dialog { width: auto; } }
	@media (min-width: 451px) { .ModalEliminar .modal-dialog { width: 450px; } }
	table.dataTable.stripe tbody > tr.odd.selected, table.dataTable.stripe tbody > tr.odd > .selected, table.dataTable.display tbody > tr.odd.selected, table.dataTable.display tbody > tr.odd > .selected {
		background-color: #E9E9E9;
	}
	table.dataTable tbody > tr.selected, table.dataTable tbody > tr > .selected {
		background-color: #E9E9E9;
	}
	table.dataTable.display tbody > tr.odd.selected > .sorting_1, table.dataTable.order-column.stripe tbody > tr.odd.selected > .sorting_1 {
		background-color: #E9E9E9;
	}
	table.dataTable.order-column tbody > tr.selected > .sorting_1, table.dataTable.order-column tbody > tr.selected > .sorting_2, table.dataTable.order-column tbody > tr.selected > .sorting_3, table.dataTable.order-column tbody > tr > .selected, table.dataTable.display tbody > tr.selected > .sorting_1, table.dataTable.display tbody > tr.selected > .sorting_2, table.dataTable.display tbody > tr.selected > .sorting_3, table.dataTable.display tbody > tr > .selected {
		background-color: #E9E9E9;
	}
	table.dataTable.display tbody > tr.even.selected > .sorting_1, table.dataTable.order-column.stripe tbody > tr.even.selected > .sorting_1 {
		background-color: #E9E9E9;
	}
	table.dataTable.display tbody > tr.selected:hover, table.dataTable.display tbody > tr > .selected:hover {
		background-color: #E9E9E9;
	}
	table.dataTable.display tbody > tr.selected:hover > .sorting_1, table.dataTable.order-column.hover tbody > tr.selected:hover > .sorting_1 {
		background-color: #E9E9E9;
	}
	.table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th {
		background-color: #E9E9E9;
	}
	table.table.fixedHeader-floating {
		top: 35px !important;
		z-index: 99999;
	}
	#tblPerfilesXCliente >thead>tr>th {
		min-width: unset !important;
	}
	.modal-backdrop {
		z-index: 99999 !important;
	}
	.bootstrap-dialog {
		z-index: 99999 !important;
	}
	div.tooltip {
		z-index: 99999999999 !important;
	}
	.form-inline .form-control.bootstrap-select {
		display: inline-block;
		width: auto;
	}
	.checkbox-inline {
		font-weight: bold;
	}
</style>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('Contenido'); ?>
<div class="row">
	<div class="col-md-12">
		<h2><i class="fa fa-bar-chart"></i> Estadisticas de usos de las herramientas de la plataforma </h2>
	</div><!--/col-md-12-->
</div><!--/row-->

<!--div class="row">
	<div class="col-md-12">
		<?php if(Session::has('message')): ?>
		<div class="alert alert-info"><?php echo Session::get('message'); ?></div>
		<?php endif; ?>
	</div>
</div-->

<div class="row">
	<div class="col-md-12">
		<div class="block-web">
			<div class="header">
				<h3 class="content-header">
					Visitas a páginas de aterrizaje y sitios web
					<div data-toggle="buttons" class="button-group pull-right">
						<a class="refresh tooltips" data-toggle="tooltip" data-original-title="Actualizar registros" onclick="Actualizar()" href="javascript:Actualizar()" style="color: rgba(0, 0, 0, 0.3)">
							<i class="fa fa-repeat"> </i>
						</a>
					</div>
				</h3>
			</div>
			<div class="porlets-content">
				<form id="frmFiltroFechas" class="form-inline" style="padding-bottom: 15px;">
					<div class="form-group">
						<?php
							$fecha = new DateTime('now');
							$ahora = $fecha->format('d/m/Y');
							$fechaSP = new DateTime('now');
							$fechaSP->sub(new DateInterval('P1W'));
							$semanaPasada = $fechaSP->format('d/m/Y');
						?>
						<label for="FiltroFechas" style="padding-top: 10px;"> Filtro de fechas: </label>
						<input id="FiltroFechas" type="text" name="filtrofechas" value="<?php echo $semanaPasada; ?> - <?php echo $ahora; ?>" readonly>
					</div>
					<button type="submit" class="btn btn-primary"> Filtrar </button>
					<button id="btnLimpiar" type="button" class="btn btn-default"> Limpiar </button>
				</form>
				<div id="Grafico"></div>
			</div>
			<div class="bottom">
			</div>
		</div>
	</div>
</div><!--/row end-->
<?php $__env->stopSection(); ?>

<?php $__env->startSection('JS'); ?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<?php echo HTML::script('SysWeb/SumeClientes/Fechas.js'); ?>

<?php echo HTML::script('bootstrap-daterangepicker/moment.min.js'); ?>

<?php echo HTML::script('bootstrap-daterangepicker/daterangepicker.js'); ?>

<?php echo HTML::script('DataTables/jquery.dataTables.min.js'); ?>

<?php echo HTML::script('DataTables/dataTables.bootstrap.min.js'); ?>

<?php echo HTML::script('DataTables/dataTables.responsive.min.js'); ?>

<?php echo HTML::script('DataTables/dataTables.select.min.js'); ?>

<?php echo HTML::script('DataTables/dataTables.buttons.min.js'); ?>

<?php echo HTML::script('DataTables/dataTables.fixedHeader.min.js'); ?>

<?php echo HTML::script('bootstrap-select/js/bootstrap-select.min.js'); ?>

<script type="text/javascript">
	var grafica;
	function Grafica(fechaInicio, fechaFin){
		var ruta = "<?php echo URL::route('SysWebEstAdminVisitas', array()); ?>";
		$.post(
			ruta,
			{fechaInicio: fechaInicio, fechaFin: fechaFin},
			function(data){
				if(data.success){
					if( typeof grafica  == "undefined" ){
						grafica = Morris.Bar({
							element: "Grafico",
							hideHover: "auto",
							data: data.data,
							xkey: "fechaVisto",
							ykeys: ["visitas"],
							labels: ["Visitas"],
							lineColors: ["#0197DA"],
							resize: true
						});
					}
					else{
						grafica.setData(data.data);
					}
				}
				else{
					if(data.mensaje != ''){ new PNotify({ title: "Error", text: data.mensaje, type: "error" }); }
				}
			},
			"json"
		);
	}
</script>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('JSOr'); ?>
$("#FiltroFechas").daterangepicker({
	"ranges": {
		"Hoy": [moment(), moment()],
		"Ayer": [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
		"Últimos 7 días": [moment().subtract(6, 'days'), moment()],
		"Últimos 30 días": [moment().subtract(29, 'days'), moment()],
		"Este mes": [moment().startOf('month'), moment().endOf('month')],
		"Último mes": [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
	},
	"alwaysShowCalendars": true,
	locale: {
		format: 'DD/MM/YYYY'
	},
	autoUpdateInput: false,
	"startDate": moment(),
	"endDate": moment()
}, function(start, end, label) {
	console.log("New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')");
});
$("#FiltroFechas").on("apply.daterangepicker", function(ev, picker) { $(this).val(picker.startDate.format("DD/MM/YYYY") + " - " + picker.endDate.format("DD/MM/YYYY")); });
$("#FiltroFechas").on("cancel.daterangepicker", function(ev, picker) { $(this).val(""); });
$("#frmFiltroFechas").submit(function(e){
	e.preventDefault();
	var table = $("#tblEstadisticas").DataTable();
	table.ajax.reload(null, false);
	var filtro = $("#FiltroFechas").val();
	if(filtro!=""){
		var fecha1 = filtro.substr(0, 10);
		//fecha1 = moment(fecha1, "DD/MM/YYYY").format("DD-MM-YYYY");
		fecha1 = moment(fecha1, "DD/MM/YYYY").format("YYYY-MM-DD");
		var fecha2 = filtro.substr(13, 10);
		//fecha2 = moment(fecha2, "DD/MM/YYYY").format("DD-MM-YYYY");
		fecha2 = moment(fecha2, "DD/MM/YYYY").format("YYYY-MM-DD");
		Grafica(fecha1, fecha2);
	}
	else{
		Grafica('');
	}
});
$("#frmFiltroFechas").submit();
$("#btnLimpiar").click(function(e){
	e.preventDefault();
	$("#FiltroFechas").val("");
	var table = $("#tblEstadisticas").DataTable();
	table.ajax.reload(null, false);
	Grafica('');
});
<?php if( Agent::isDesktop() ): ?>
$(".sidebar-toggle-box").trigger("click");
<?php endif; ?>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('BaseSistemaWeb', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>