@extends('BaseSistemaWeb')

@section('CSS')
{{ HTML::style('DataTables/dataTables.bootstrap.min.css') }}
{{ HTML::style('DataTables/responsive.dataTables.min.css') }}
{{ HTML::style('bootstrap-daterangepicker/daterangepicker.css') }}
<style type="text/css">
	@media (max-width: 450px) { .ModalEliminar .modal-dialog { width: auto; } }
	@media (min-width: 451px) { .ModalEliminar .modal-dialog { width: 450px; } }
	.table > tbody > tr.success > td {
		background-color: #b4ef9d;
	}
	.table > tbody > tr.success:hover > td {
		background-color: #9fec82;
	}
	.table > tbody > tr.info > td {
		background-color: #b1dff6;
	}
	.table > tbody > tr.info:hover > td {
		background-color: #95d6f6;
	}
	.table > tbody > tr.warning > td {
		background-color: #f5e8a5;
	}
	.table-hover > tbody > tr.warning:hover > td {
		background-color: #f5e490;
	}
	.table > tbody > tr.danger > td {
		background-color: #f6b9b9;
	}
	.table > tbody > tr.danger:hover > td {
		background-color: #f89494;
	}
	.table-bordered {
		border: 1px solid #7a7a7a;
	}
	.table-bordered > thead > tr > th {
		border: 1px solid #7a7a7a;
	}
	.table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {
		border: 1px solid #7a7a7a;
	}
	.col-busqueda{
		margin-left: 35px;
	}
	.col-paginacion{
		margin-left: -35px;
	}
	@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: 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;
		}
	}
	.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 vendedores
					<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>
					<select name="slVendedores" class="form-control" id="slVendedores">
						<option value="0">Seleccione un vendedor...</option>
						@foreach( $Empleados as $Empleado )
						<option value="{{ $Empleado->id }}"> {{ $Empleado->nombre_completo }} </option>
						@endforeach
					</select>
					<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: 9%;"> Fecha </th>
								<th class="text-center"> Prospecto </th>
								<th class="text-center"> Acciones </th>
							</tr>
						</thead>
					</table>
				</div>
			</div>
		</div>
	</div>
	<div class="col-md-4">
		<div class="block-web">
			<div class="header">
				<h3 class="content-header">
					Desglose de efectividad
					<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">
				<div class="table-responsive">
					<table class="table">
						<tbody>
							<tr>
								<td> Asignados </td>
								<td> <span id="spAtendidos"> </td>
								<td></td>
							</tr>
							<tr class="success">
								<td> Vendidos </td>
								<td> <span id="spVendidos"> </td>
								<td> <span id="spVendidosP"></span> </td>
							</tr>
							<tr class="info">
								<td> Cotizados </td>
								<td> <span id="spCotizados"> </td>
								<td> <span id="spCotizadosP"> </td>
							</tr>
							<tr class="warning">
								<td> Pendientes </td>
								<td> <span id="spPendientes"> </td>
								<td> <span id="spPendientesP"> </td>
							</tr>
							<tr class="danger">
								<td> Rechazados </td>
								<td> <span id="spRechazados"> </td>
								<td> <span id="spRechazadosP"> </td>
							</tr>
						</tbody>
					</table>
				</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 type="text/javascript">
	function Actualizar(){
		var table = $("#tblReportes").DataTable();
		table.ajax.reload(null, false);
		Desglose();
	}
	function Desglose(){
		$.post(
			"{{ URL::route('SysWebRptGCEfectividad') }}",
			{ filtrofechas: $("#FiltroFechas").val(), slVendedores: $("#slVendedores").val() },
			function(data){
				var total = (data[0].total==null)?0:data[0].total;
				var vendidos = (data[0].vendidos==null)?0:data[0].vendidos;
				var vendidosP = (total==0)?0:Math.round(((vendidos/total)*100), -2);
				var rechazados = (data[0].rechazados==null)?0:data[0].rechazados;
				var rechazadosP = (total==0)?0:Math.round(((rechazados/total)*100), -2);
				var cotizados = (data[0].cotizados==null)?0:data[0].cotizados;
				var cotizadosP = (total==0)?0:Math.round(((cotizados/total)*100), -2);
				var pendientes = (parseInt(total)-(parseInt(vendidos)+parseInt(rechazados)+parseInt(cotizados)));
				var pendientesP = (total==0)?0:Math.round(((pendientes/total)*100), -2);
				$("#spAtendidos").html( total );
				$("#spVendidos").html( vendidos );
				$("#spVendidosP").html( vendidosP+"%" );
				$("#spRechazados").html( rechazados );
				$("#spRechazadosP").html( rechazadosP+"%" );
				$("#spCotizados").html( cotizados );
				$("#spCotizadosP").html( cotizadosP+"%" );
				$("#spPendientes").html( pendientes );
				$("#spPendientesP").html( pendientesP+"%" );
			},
			"json"
		);
	}
	function detectarAnchoVistas() {
		var anchoPantalla = window.innerWidth;
		if(anchoPantalla <= 1400){
			$(".col-busqueda").find("button").addClass("btn-sm");
			$(".col-paginacion").find("li").addClass("btn-sm");
			$(".col-busqueda").find("input").addClass("input-sm");
		}
		else{
			$(".col-busqueda").find("button").removeClass("btn-sm");
			$(".col-paginacion").find("li").removeClass("btn-sm");
			$(".col-busqueda").find("input").removeClass("input-sm");
		}
	}
	$(window).resize(function() {
		detectarAnchoVistas();
	});
</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+'" />' );
});*/
$.fn.DataTable.ext.pager.numbers_length = 5;
$("#tblReportes").DataTable({
	"processing": true,
	"serverSide": true,
	preDrawCallback: function (settings) { $.isLoading("hide"); },
	"ajax": {
		url: "{{ URL::route('SysWebRptGCEfectividad') }}",
		data: function (d) {
			d.filtrofechas = $("#FiltroFechas").val();
			d.slVendedores = $("#slVendedores").val();
		}
	},
	"pagingType": "simple_numbers",
	dom: "<'row'<'col-sm-2 col-mostrar'l><'col-sm-4 col-busqueda'f><'col-sm-6 col-paginacion'p>>" +
		"<'row'<'col-sm-12'tr>>" +
	"<'row'<'col-sm-5'i><'col-sm-7'p>>",
	columns: [
		{data: 'fecha_registrado', name: 'prospectos.fecha_registrado'},
		{data: 'contacto', name: 'prospectos.contacto'},
		{data: 'acciones', name: 'acciones', "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();
		$(".dataTables_filter").html('');
		var 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(); 
		});
		divInputGroup = $('<div class="input-group div-groupinput">'+
			'<div class="input-group-btn div-groupbutton">'+
			'</div>'+
		'</div>');
		$(".dataTables_filter").append(divInputGroup);
		$(".div-groupinput").prepend(input);
		$(".div-groupbutton").append($searchButton, $clearButton);
		$("body").tooltip({selector: "[data-toggle='tooltip']"});
		$("input[type=search]").attr("placeholder", "Buscar...");
		detectarAnchoVistas();
	}
}).on("processing.dt", function(e, settings, processing) {
	if (processing) {
		$.isLoading();
	}
	else{
		$.isLoading("hide");
		window.scrollTo(0, 0);
	}
});
Desglose();
$("#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);
	Desglose();
});
$("#btnLimpiar").click(function(e){
	e.preventDefault();
	$("#FiltroFechas").val("");
	var table = $("#tblReportes").DataTable();
	table.ajax.reload(null, false);
	Desglose();
});
@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