@extends('BaseSistemaWeb')

@section('CSS')
{{ HTML::style('DataTables/dataTables.bootstrap.min.css') }}
{{ HTML::style('DataTables/responsive.dataTables.min.css') }}
{{ HTML::style('bootstrap-daterangepicker/daterangepicker.css') }}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<style type="text/css">
	@media (max-width: 450px) { .ModalEliminar .modal-dialog { width: auto; } }
	@media (min-width: 451px) { .ModalEliminar .modal-dialog { width: 450px; } }
	@media (max-width: 1500px){
		.div-groupinput{
			width: 200px !important;
		}
		select[name="tblReportes_length"]{
			width: auto !important;
			padding: 7px !important;
		}
		.dataTables_length label{
			font-size: 12.5px !important;
		}
	}
	@media (max-width: 1400px){
		.col-paginacion{
			padding: 0 !important;
		}
	}
	@media (max-width: 1385px){
		.div-groupinput{
			width: 190px !important;
		}
	}
	@media (max-width: 1340px){
		.dataTables_filter .btn-default{
			display: none !important;
		}
		select[name="tblReportes_length"]{
			width: auto !important;
			padding: 0px !important;
		}
		.dataTables_length label{
			font-size: 12.5px !important;
		}
		.col-busqueda{
			padding: 0 !important;
		}
	}
	.div-groupinput{
		min-height: auto !important;
		width: 210px;
	}
	.dataTables_filter{
		display: flex;
		justify-content: center;
	}
	.dataTables_filter button{
		margin-left: 0 !important;
		margin-right: 0 !important;
		opacity: 0.9;
	}
	.col-busqueda input[type=search]{
		min-height: auto !important;
		margin-left: 0 !important;
	}
	.div-groupinput .btn{
		padding: 6px 12px;
	}
</style>
@stop


@section('Contenido')
<div class="row">
	<div class="col-md-12">
		<h2><i class="fa fa-file-pdf-o"></i> Reportes </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-8">
		<div class="block-web">
			<div class="header">
				<h3 class="content-header">
					Reporte de efectividad de referencias
					<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">
						<label for="FiltroFechas" style="padding-top: 10px;"> Fecha: </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-striped table-bordered table-hover" id="tblReportes">
						<thead>
							<tr>
								<th class="text-center" style="width: 20%;"> Referencia </th>
								<th class="text-center"> Cantidad de llamadas </th>
								<th class="text-center"> Porcentaje de llamadas </th>
								<th class="text-center" =""> Ventas cerradas </th>
								<th class="text-center" =""> Efectividad de referencias </th>
							</tr>
						</thead>
					</table>
				</div>
			</div>
		</div>
	</div>
	<div class="col-md-4">
		<div class="block-web">
			<div class="header">
				<h3 class="content-header">
					Gráfica de porcentaje de llamadas
				</h3>
			</div>
			<div class="porlets-content">
				<div id="Grafica"></div>
			</div>
		</div>
	</div>
</div><!--/row end-->
@stop

@section('JS')
{{ HTML::script('DataTables/jquery.dataTables.min.js') }}
{{ HTML::script('DataTables/dataTables.bootstrap.min.js') }}
{{ HTML::script('DataTables/dataTables.responsive.min.js') }}
{{ HTML::script('bootstrap-daterangepicker/moment.min.js') }}
{{ HTML::script('bootstrap-daterangepicker/daterangepicker.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>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/randomcolor/0.5.2/randomColor.min.js"></script>
<script type="text/javascript">
	var grafica;
	function Actualizar(){
		var table = $("#tblReportes").DataTable();
		table.ajax.reload(null, false);
		GenerarGrafica();
	}
	function GenerarGrafica(){
		var filtrofechas = $("#FiltroFechas").val();
		$.post(
			"{{ URL::route('SysWebRptGCReferencias') }}",
			{filtrofechas: filtrofechas},
			function(data){
				var dataDonut = new Array();
				var dataColor = randomColor({luminosity: 'dark', count: data.length});
				$.each(data, function(key, value){
					dataDonut.push({label: value.referencia, value: parseFloat(value.porcentajeLlamadas)});
				});
				if( typeof grafica  == "undefined" ){
				grafica = Morris.Donut({
					element: "Grafica",
					data: dataDonut,
					colors: dataColor,
					formatter: function (y, data) {
						return Math.round(y)+"%";
					}
				});
			}
			else{
				grafica.setData(dataDonut);
			}

			},
			"json"
		);
	}
</script>
@stop

@section('JSOr')
$(".sidebar-toggle-box").trigger("click");
//$("a[data-toggle=\"tab\"]").on("shown.bs.tab", function (e) { $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust(); });

/*$('#tblReportes tfoot th').each(function(){
	var title = $(this).text();
	$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
});*/
GenerarGrafica();
$("#tblReportes").DataTable({
	"processing": true,
	"serverSide": true,
	preDrawCallback: function (settings) { $.isLoading("hide"); },
	"ajax": {
		url: "{{ URL::route('SysWebRptGCReferencias') }}",
		data: function (d) {
			d.filtrofechas = $("#FiltroFechas").val();
		}
	},
	columns: [
		{data: 'referencia', name: 'referencia', "searchable": false, "orderable": false},
		{data: 'total', name: 'total', "searchable": false, "orderable": false, "class": "text-center"},
		{data: 'porcentajeLlamadas', name: 'porcentajeLlamadas', "searchable": false, "orderable": false, "class": "text-center"},
		{data: 'vendidos', name: 'vendidos', "searchable": false, "orderable": false, "class": "text-center"},
		{data: 'efectividad', name: 'efectividad', "searchable": false, "orderable": false, "class": "text-center"}
	],
	"language": {
		"url": "{{ asset('DataTables/Spanish.json') }}"
	},
	"fnDrawCallback": function( oSettings ) {
		$(".tooltips").tooltip();
	},
	autoWidth: false,
	responsive: true,/*,
	initComplete: function(){
		this.api().columns().every(function(){
			var column = this;
			//console.log( column );
			var input = document.createElement("input");
			$(input).appendTo($(column.footer()).empty()).on("change", function(){
				//column.search($(this).val()).draw();
				//column.search($(this).val(), false, false, true).draw();
			});
		});
	}*/
	//initComplete: function(){
	//	var input = $(".dataTables_filter input").unbind(),
	//	self = this.api(),
	//	$searchButton = $('<button class="btn btn-primary tooltips" style="margin-left: 5px;" data-toggle="tooltip" data-original-title="Buscar">').html('<i class="fa fa-search"></i>').click(function(){
	//		self.search(input.val().trim()).draw();
	//	}),
	//	$clearButton = $('<button class="btn btn-default tooltips" style="margin-left: 5px;" data-toggle="tooltip" data-original-title="Limpiar">').html('<i class="fa fa-paint-brush"></i>').click(function(){
	//		input.val('');
	//		$searchButton.click(); 
	//	});
	//	$(".dataTables_filter").append($searchButton, $clearButton);
	//	$("body").tooltip({selector: "[data-toggle='tooltip']"});
	//}
}).on("processing.dt", function(e, settings, processing) {
	if (processing) {
		$.isLoading();
	}
	else{
		$.isLoading("hide");
		window.scrollTo(0, 0);
	}
});
$("#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 = $("#tblReportes").DataTable();
	table.ajax.reload(null, false);
	GenerarGrafica();
});
$("#btnLimpiar").click(function(e){
	e.preventDefault();
	$("#FiltroFechas").val("");
	var table = $("#tblReportes").DataTable();
	table.ajax.reload(null, false);
	GenerarGrafica();
});
@if(Session::has('EliminarMensajeS'))
new PNotify({ title: "Realizado", text: "{{ Session::get('EliminarMensajeS') }}", type: "success" });
@endif
@if(Session::has('EliminarMensajeE'))
new PNotify({ title: "Realizado", text: "{{ Session::get('EliminarMensajeE') }}", type: "error" });
@endif
@stop