<?php $__env->startSection('CSS'); ?>
<?php echo HTML::style('WebPro/css/jquerysctipttop.css'); ?>

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<?php $__env->stopSection(); ?>


<?php $__env->startSection('Contenido'); ?>
<div class="row">
	<div class="col-md-12">
		<h2><i class="fa fa-dot-circle-o"></i> Páginas de captura </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"> Estadisticas de la variación entre <strong> <?php echo $estadisticas[0]['slug']; ?> </strong> vs <strong> <?php echo $estadisticas[1]['slug']; ?> </strong> </h3> </div>
			<div class="porlets-content">
				<div class="table-responsive">
					<table class="table table-hover">
						<thead>
							<tr>
								<th class="col-md-4"> Variación </th>
								<th class="col-md-2"> Visitas </th>
								<th class="col-md-2"> Conversiones </th>
								<th class="col-md-2"> Porcentaje de conversión </th>
								<th class="col-md-2"> Mejoras </th>
							</tr>
						</thead>
						<tbody>
							<?php for($i=0; $i<count($estadisticas); $i++): ?>
							<tr>
								<td> <?php echo $estadisticas[$i]['slug']; ?> </td>
								<td> <?php echo $estadisticas[$i]['visits']; ?> </td>
								<td> <?php echo $estadisticas[$i]['conversions']; ?> </td>
								<td> <?php echo $estadisticas[$i]['conversions_rate'].' %'; ?> </td>
								<td> - </td>
							</tr>
							<?php endfor; ?>
						</tbody>
					</table>
				</div>
			</div>
			<div class="bottom">
				<?php /* HTML::linkRoute('SysWebPAterrizajePlantillaCrear', 'Agregar', array(), array('class' => 'btn btn-primary')) */ ?>
			</div>
		</div>
	</div>
</div><!--/row end-->

<div class="row">
	<div class="col-md-12">
		<div class="block-web">
			<div class="header"> <h3 class="content-header"> Gráfica visitas y conversiones de la página <strong> <?php echo $estadisticas[0]['slug']; ?> </strong> </h3> </div>
			<div class="porlets-content">
				<div id="GraficoA"></div>
			</div>
		</div><!--/block-web--> 
	</div><!--/col-md-12--> 
</div><!--/row-->

<div class="row">
	<div class="col-md-12">
		<div class="block-web">
			<div class="header"> <h3 class="content-header"> Gráfica visitas y conversiones de la página <strong> <?php echo $estadisticas[1]['slug']; ?> </strong> </h3> </div>
			<div class="porlets-content">
				<div id="GraficoB"></div>
			</div>
		</div><!--/block-web--> 
	</div><!--/col-md-12--> 
</div><!--/row-->
<?php $__env->stopSection(); ?>

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

<?php $__env->stopSection(); ?>

<?php $__env->startSection('JSOr'); ?>
	$.get(
		"<?php echo URL::route('SysWebPAterrizajeVisitanteGrafica', array($estadisticas[0]['id'], $Variacion->id)); ?>",
		function(data){
			if(data.success){
				Morris.Area({
					element: "GraficoA",
					data: data.data,
					xkey: "period",
					ykeys: ["v", "c"],
					labels: ["Visitas", "Conversiones"],
					pointSize: 2,
					hideHover: "auto",
					lineColors: ["#68A2D5", "#48BEAD"],
					xLabelFormat: function(d) {
						return Meses((d.getMonth()+1))+", "+(d.getDate()-1);
					},
					hoverCallback: function (index, options, content) {
						var row = options.data[index];
						var fecha = new Date(row.period);
						var Titulo = Meses(fecha.getMonth()+1)+", "+fecha.getDate();
						var contenido = '<div class="morris-hover-row-label"> '+Titulo+' </div> \
										<div class="morris-hover-point" style="color: #68A2D5"> \
											Visitas: '+row.v+' \
										</div> \
										<div class="morris-hover-point" style="color: #48BEAD"> \
											Conversiones: '+row.c+' \
										</div>';
						return(contenido);//return(content);
					}
				});
			}
			else{
				if(data.mensaje != ''){ new PNotify({ title: "Error", text: data.mensaje, type: "error" }); }
			}
		},
		"json"
	);
	$.get(
		"<?php echo URL::route('SysWebPAterrizajeVisitanteGrafica', array($estadisticas[1]['id'], $Variacion->id)); ?>",
		function(data){
			if(data.success){
				Morris.Area({
					element: "GraficoB",
					data: data.data,
					xkey: "period",
					ykeys: ["v", "c"],
					labels: ["Visitas", "Conversiones"],
					pointSize: 2,
					hideHover: "auto",
					lineColors: ["#68A2D5", "#48BEAD"],
					xLabelFormat: function(d) {
						return Meses((d.getMonth()+1))+", "+d.getDate();
					},
					hoverCallback: function (index, options, content) {
						var row = options.data[index];
						var fecha = new Date(row.period);
						var Titulo = Meses(fecha.getMonth()+1)+", "+fecha.getDate();
						var contenido = '<div class="morris-hover-row-label"> '+Titulo+' </div> \
										<div class="morris-hover-point" style="color: #68A2D5"> \
											Visitas: '+row.v+' \
										</div> \
										<div class="morris-hover-point" style="color: #48BEAD"> \
											Conversiones: '+row.c+' \
										</div>';
						return(contenido);//return(content);
					}
				});
			}
			else{
				if(data.mensaje != ''){ new PNotify({ title: "Error", text: data.mensaje, type: "error" }); }
			}
		},
		"json"
	);
<?php $__env->stopSection(); ?>
<?php echo $__env->make('BaseSistemaWeb', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>