@extends('BaseSistemaWeb')

@section('CSS')
{{ HTML::style('WebPro/css/jquerysctipttop.css') }}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
{{ HTML::style('DataTables/dataTables.bootstrap.min.css') }}
{{ HTML::style('bootstrap-daterangepicker/daterangepicker.css') }}
@stop


@section('Contenido')
<div class="row">
	<div class="col-md-12">
		<h2><i class="icon-sc-landingpageicon"></i> Páginas de captura </h2>
	</div><!--/col-md-12-->
</div><!--/row-->

<div class="row">
	<div class="col-md-12">
		@if (Session::has('message'))
		<div class="alert alert-info">{{ Session::get('message') }}</div>
		@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>
					{{ $Variacion->pxc1nombre }} </strong> vs <strong> {{ $Variacion->pxc2nombre }} </strong>
					<div data-toggle="buttons" class="button-group pull-right">
						<a class="refresh tooltips" data-toggle="tooltip" data-original-title="Reestablecer estadísticas" onclick="Eliminar({{ $Variacion->id }})" href="javascript:Eliminar({{ $Variacion->id }});" style="color: rgba(0, 0, 0, 0.3)">
							<i class="fa fa-trash-o"></i>
						</a>
						<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">
						<label for="FiltroFechas" style="padding-top: 10px;"> Visitas y conversiones de: </label>
						<input id="FiltroFechas" type="text" name="filtrofechas" value="" readonly>
					</div>
					<button type="submit" class="btn btn-primary"> Filtrar </button>
					<button id="btnLimpiar" type="button" class="btn btn-default"> Limpiar </button>
				</form>
				<div class="table-responsive">
					<table class="table table-hover" id="tblEstadisticas">
						<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>
					</table>
				</div>
			</div>
			<div class="bottom"> </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> {{ $Variacion->pxc1nombre }} </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> {{ $Variacion->pxc2nombre }} </strong> </h3> </div>
			<div class="porlets-content">
				<div id="GraficoB"></div>
			</div>
		</div><!--/block-web--> 
	</div><!--/col-md-12--> 
</div><!--/row-->
@stop

@section('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>
{{ HTML::script('SysWeb/SumeClientes/Fechas.js') }}
{{ HTML::script('DataTables/jquery.dataTables.min.js') }}
{{ HTML::script('DataTables/dataTables.bootstrap.min.js') }}
{{ HTML::script('bootstrap-daterangepicker/moment.min.js') }}
{{ HTML::script('bootstrap-daterangepicker/daterangepicker.js') }}
<script type="text/javascript">
	var grafica1;
	var grafica2;
	function Actualizar(){
		var table = $("#tblEstadisticas").DataTable();
		table.ajax.reload(null, false);
	}
	function Eliminar(id){
		var id = id;
		var mensaje = "<div class='row'> \
							<div class='col-xs-12'> \
								<form id='frmEliminar'> \
									<h2> ¿Seguro que desea reestablecer las estadísticas? </h2> \
									<div class='alert alert-warning' role='alert'> \
										<strong> Si las reestableces se borrararán todas las estadisticas de las variaciones capturadas hasta la fecha. \
										Debes tomar en cuenta que se mantendrán las estadisticas obtenidas de manera individual </strong> \
									</div> \
									<input type='hidden' name='idV' value='"+id+"'> \
								</form> \
							</div> \
						</div>";
		BootstrapDialog.show({
			title: "Reestablecer estadisticas",
			type: BootstrapDialog.TYPE_DANGER,
			message: mensaje,
			draggable: true,
			cssClass: "ModalEliminar",
			buttons: [{
				id: "btnEliminar",
				label: "Reestablecer",
				cssClass: "btn-danger",
				action: function(dialogItself){
					$("#btnEliminar").prop("disabled", true).html('<i class="fa fa-spinner fa-spin"></i> Eliminando');
					$.post(
						"{{ URL::route('SysWebPAterrizajeVariacionEliminarEstadisticas') }}",
						{idV:id},
						function(data){
							$("#btnEnviar").prop("disabled", false).html("Reestablecer");
							if(data.success){
								new PNotify({ title: "Felicidades!", text: data.mensaje, type: "success" });
								dialogItself.close();
								var table = $("#tblEstadisticas").DataTable();
								table.ajax.reload(null, false);
								Grafica('');
							}
							else{
								if(data.mensaje != ''){ new PNotify({ title: "Error", text: data.mensaje, type: "error" }); }
								$.each(data.errMensajes, function(key, value){ if(value != ''){ $("#err"+key).html(value); } else{ $("#err"+key).html(""); } });
							}
						},
						"json"
					);
				}
			}]
		});
	}
	function Grafica(filtro){
		filtro = filtro;
		ruta1 = (filtro != '')?"{{ URL::route('SysWebPAterrizajeVisitanteGrafica', array($Variacion->pxc1id, $Variacion->id)) }}/"+filtro:"{{ URL::route('SysWebPAterrizajeVisitanteGrafica', array($Variacion->pxc1id, $Variacion->id)) }}";
		$.get(
			ruta1,
			function(data){
				if(data.success){
					if( typeof grafica1  == "undefined" ){
						grafica1 = Morris.Line({
							element: "GraficoA",
							hideHover: "auto",
							data: data.data,
							xkey: "period",
							ykeys: ["v", "c"],
							labels: ["Visitas", "Conversiones"],
							lineColors: ["#0197DA", "#56BE22"],
							xLabelFormat: function(d) {
								return moment(d.toString()).format("DD-MM-YYYY");
							},
							hoverCallback: function (index, options, content) {
								var row = options.data[index];
								var Titulo = moment(row.period, "YYYY-MM-DD").format("DD-MM-YYYY");
								var contenido = '<div class="morris-hover-row-label"> '+Titulo+' </div> \
													<div class="morris-hover-point" style="color: #0197DA"> \
														Visitas: '+row.v+' \
													</div> \
													<div class="morris-hover-point" style="color: #56BE22"> \
													Conversiones: '+row.c+' \
												</div>';
								return(contenido);
							},
							resize: true
						});
					}
					else{
						grafica1.setData(data.data);
					}
				}
				else{
					if(data.mensaje != ''){ new PNotify({ title: "Error", text: data.mensaje, type: "error" }); }
				}
			},
			"json"
		);
		ruta2 = (filtro != '')?"{{ URL::route('SysWebPAterrizajeVisitanteGrafica', array($Variacion->pxc2id, $Variacion->id)) }}/"+filtro:"{{ URL::route('SysWebPAterrizajeVisitanteGrafica', array($Variacion->pxc2id, $Variacion->id)) }}";
		$.get(
			ruta2,
			function(data){
				if(data.success){
					if( typeof grafica2  == "undefined" ){
						grafica2 = Morris.Line({
							element: "GraficoB",
							hideHover: "auto",
							data: data.data,
							xkey: "period",
							ykeys: ["v", "c"],
							labels: ["Visitas", "Conversiones"],
							lineColors: ["#0197DA", "#56BE22"],
							xLabelFormat: function(d) {
								return moment(d.toString()).format("DD-MM-YYYY");
							},
							hoverCallback: function (index, options, content) {
								var row = options.data[index];
								var Titulo = moment(row.period, "YYYY-MM-DD").format("DD-MM-YYYY");
								var contenido = '<div class="morris-hover-row-label"> '+Titulo+' </div> \
													<div class="morris-hover-point" style="color: #0197DA"> \
														Visitas: '+row.v+' \
													</div> \
													<div class="morris-hover-point" style="color: #56BE22"> \
													Conversiones: '+row.c+' \
												</div>';
								return(contenido);
							},
							resize: true
						});
					}
					else{
						grafica2.setData(data.data);
					}
				}
				else{
					if(data.mensaje != ''){ new PNotify({ title: "Error", text: data.mensaje, type: "error" }); }
				}
			},
			"json"
		);
	}
</script>
@stop

@section('JSOr')
$("#tblEstadisticas").DataTable({
	"processing": true,
	"serverSide": true,
	"ajax": {
		url: "{{ URL::route('SysWebPAterrizajeVariacionEstadisticas', array($Variacion->id)) }}",
		data: function (d) { d.filtrofechas = $("#FiltroFechas").val(); }
	},
	columns: [
		{data: 'nombre', name: 'nombre', "searchable": false, "orderable": false},
		{data: 'visitantes', name: 'visitantes', "searchable": false, "orderable": false},
		{data: 'conversiones', name: 'conversiones', "searchable": false, "orderable": false, "class": "text-center"},
		{data: 'calificacion_conversion', name: 'calificacion_conversion', "orderable": false, "class": "tdCalificacion"},
		{data: 'mejoras', name: 'mejoras', "orderable": false, "class": "tdMejoras"}
	],
	"language": {
		"url": "{{ asset('DataTables/Spanish.json') }}"
	},
	"fnDrawCallback": function( oSettings ) {
		$(".tooltips").tooltip();
		//CALCULO LA MEJORA ---------------------------------------------------------------------------------------------------
		var porcentajeCV1 = parseFloat( $($("#tblEstadisticas").find("td.tdCalificacion")[0]).html().trim().replace("%", "") );
		var porcentajeCV2 = parseFloat( $($("#tblEstadisticas").find("td.tdCalificacion")[1]).html().trim().replace("%", "") );
		if( porcentajeCV1 == 0 && porcentajeCV2 == 0 ){
			$($("#tblEstadisticas").find("td.tdMejoras")[0]).html("0.00%");
			$($("#tblEstadisticas").find("td.tdMejoras")[1]).html("0.00%");
		}
		else if( porcentajeCV1 > porcentajeCV2 ){
			var mejora = ((porcentajeCV1/porcentajeCV2)*100).toFixed(2);
			$($("#tblEstadisticas").find("td.tdMejoras")[0]).html(mejora+"%");
			$($("#tblEstadisticas").find("td.tdMejoras")[1]).html("");
		}
		else if( porcentajeCV2 > porcentajeCV1 ){
			var mejora = ((porcentajeCV2/porcentajeCV1)*100).toFixed(2);
			$($("#tblEstadisticas").find("td.tdMejoras")[0]).html("");
			$($("#tblEstadisticas").find("td.tdMejoras")[1]).html(mejora+"%");
		}
		//---------------------------------------------------------------------------------------------------------------------
	},
	"paging":   false,
	"ordering": false,
	"info":     false,
	"searching": false
});
$("#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");
		var fecha2 = filtro.substr(13, 10);
		fecha2 = moment(fecha2, "DD/MM/YYYY").format("DD-MM-YYYY");
		Grafica(fecha1+'--'+fecha2);
	}
	else{
		Grafica('');
	}
});
$("#btnLimpiar").click(function(e){
	e.preventDefault();
	$("#FiltroFechas").val("");
	var table = $("#tblEstadisticas").DataTable();
	table.ajax.reload(null, false);
	Grafica('');
});
Grafica('');
@stop