<style>
	.table-result {
		font-size: 13px;
	}
</style>
<div class="box box-primary">
	<div class="box-header with-border">
		<h3 class="box-title">Criterios de selección </h3>
	</div>
	<?php echo form_open('', 'class="form-horizontal" id="form_busqueda"', '') ?>
	<div class="box-body">
		<div class="form-group">
			<label for="rut" class="col-sm-2 control-label">Rut trabajador</label>
			<div class="col-sm-3">
				<input type="text" name="rut" id="rut" />
			</div>
			<label for="ciudad" class="col-sm-2 control-label">Centro de costos</label>
			<div class="col-sm-3">
				<select class="select2 form-control" name="cc" id="cc">
					<option value="todos">Todos</option>
					<?php foreach ($cc as $key => $value): ?>
						<option value="<?php echo $value->id ?>"><?php echo ($value->nombre) ?></option>
					<?php endforeach ?>
				</select>
			</div>
		</div>
		<div class="form-group">
			<label for="limite" class="col-sm-2 control-label">Fecha </label>
			<div class="col-sm-1" style="width: 12.5%">
				<input type="date" placeholder="Fecha desde" class="form-control" name="fecha_desde" id="fecha_desde" />
			</div>
			<div class="col-sm-1" style="width: 12.5%">
				<input type="date" placeholder="Fecha Hasta" class="form-control" name="fecha_hasta" id="fecha_hasta" />
			</div>

			<label for="estado" class="col-sm-2 control-label">Agrupación</label>
			<div class="col-sm-3">
				<select class="select2 form-control" name="grupo" id="grupo">
					<option value="rut_mes">Rut-Mes</option>
					<option value="mes">Mes</option>
				</select>
			</div>
		</div>
		<div class="form-group">
			<label for="porcentaje" class="col-sm-2 control-label">% Cumplimiento</label>
			<div class="col-sm-3">
				<select class="select2 form-control" name="porcentaje" id="porcentaje">
					<option value="0">Sin Filtro</option>
					<option value="100" <?php if ($por == "100") {
											echo 'selected';
										} ?>>Superior a 90</option>
					<option value="90" <?php if ($por == "90") {
											echo 'selected';
										} ?>>De 85 a 90</option>
					<option value="85" <?php if ($por == "85") {
											echo 'selected';
										} ?>>Menor a 85</option>
				</select>
			</div>
		</div>
		<div class="form-group">
			<div class="col-sm-5 col-md-offset-5">
				<button type="button" id="buscar" class="bg-navy btn pull-right">Realizar busqueda</button>
				<a href="<?= base_url('dashboard/reportes/vision-general') ?>" class="btn btn-default pull-right">Limpiar</a>
			</div>
		</div>
	</div>
	<?php echo form_close() ?>
</div>
<?php if ($por == "100"): ?>
	<div class="alert alert-info">
		<a data-dismiss="alert" class="close">×</a>
		Se estan mostrando los registros de los usuarios con cumplimiento sobre 90%
	</div>
<?php endif ?>
<?php if ($por == "90"): ?>
	<div class="alert alert-info">
		<a data-dismiss="alert" class="close">×</a>
		Se estan mostrando los registros de los usuarios con cumplimiento de 85% a 90%
	</div>
<?php endif ?>
<?php if ($por == "85"): ?>
	<div class="alert alert-info">
		<a data-dismiss="alert" class="close">×</a>
		Se estan mostrando los registros de los usuarios con cumplimiento inferior a 85%
	</div>
<?php endif ?>

<div class="box box-primary">
	<div class="box-body" id="result_busqueda">
		<?php if (count($detalles) == 0) : ?>
			<h4 class="text-center">Búsqueda sin resultados</h4>
		<?php endif ?>
		<?php $this->load->view('reportes/_vision_general_busqueda_view', $detalles, $por); ?>
	</div>
</div>
<script>
	$('#buscar').click(function() {
		url = "<?php echo base_url("dashboard/reportes/vision-general/buscar?por=$por") ?>";
		$("#result_busqueda").html('<div class="text-center">Buscando información <br /><br /> <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span></div>');
		data = $("#form_busqueda").serialize();
		$.post(url, data, function(data, status) {
			$("#result_busqueda").html(data);
		}).fail(function(xhr, status, error) {
			$("#result_busqueda").html('<div class="alert alert-danger">Ocurrio un error al buscar la información solicitada, favor intente de nuevo <br/> <b>INFO</b>: ' + error + '</div>');
		});
	});
</script>