@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;
	}
</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"
		);
	}
</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+'" />' );
});*/

$("#tblReportes").DataTable({
	"processing": true,
	"serverSide": true,
	"ajax": {
		url: "{{ URL::route('SysWebRptGCEfectividad') }}",
		data: function (d) {
			d.filtrofechas = $("#FiltroFechas").val();
			d.slVendedores = $("#slVendedores").val();
		}
	},
	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();
			});
		});
	}*/
});
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