<div class="row">
	<!--Cliente lista-->
	<div class="col-sm-5">
		<div class="ibox">
			<div class="ibox-content">
				<!--Tools-->
				<div class="input-group">
					<div class="col-sm-5">
						<button type="button" id="clientes-nuevo-btn" class="btn btn btn-primary"> <i class="fa fa-plus"></i> Nuevo cliente</button>
					</div>
					<div class="col-sm-7">
						<input type="text" id="clientes-search-str" placeholder="Buscar cliente" class="input form-control">
					</div>
				</div>
				<!--List-->
				<div class="clients-list" id="clientes-lista-wrapper">
					<div class="table-responsive">
						<table class="table table-striped table-hover" id="clientes-lista-table">
							<tbody>
								<tr class="tr-loader">
									<td colspan="3"></td>
								</tr>
								<!--<tr>
									<td>
										<h4>Ronald Sifredo Amaya</h4>
										<small>Xypnos</small>
									</td>
									<td class="contact-type"><i class="fa fa-phone"> </i></td>
									<td> 7908-7100</td>
								</tr>-->
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--Cliente detalles-->
	<div class="col-sm-7">
		<div class="ibox">
			<div class="ibox-content">
				<!--<span class="m-r-sm text-muted welcome-message">Seleccione un cliente para ver su informaci&oacute;n</span>-->
				<div id="clientes-detalles-wrapper" class="p-sm">
					<div id="clientes-detalles-info-wrapper" class="lista-detalles-info-wrapper">
						<i class="fa fa-chevron-circle-left fa-5x"></i>
						<small>Seleccione un cliente de la lista para ver detalles.</small>
					</div>
					
					<div id="clientes-detalles-ajax-wrapper">
					</div>
					
				</div>
			</div>
		</div>
	</div>
</div>
<script>
$(function(){
	 $("#clientes-nuevo-btn").click(function(){
		Custombox.open({
			target:'<?php echo base_url("clientes/nuevo");?>?mode=create', 
			effect: 'fadein',
			overlayClose:false,
			complete:function(){
				$(".modal-body input:text").first().focus();
			}
		});
	});
	
	clientes.setUrl('<?php echo base_url();?>');
	clientes.cargarHTML(true,0);
	/*scroll*/
	$('#clientes-lista-wrapper').slimScroll({
        height: '500px'
	});
	$('#clientes-detalles-wrapper').slimScroll({
        height: '530px'
	});
	/*Load more*/
	$("#clientes-lista-wrapper").slimScroll().bind('slimscroll', function(e, position){
		if(position==='bottom'){
			clientes.cargarHTML(false,$("#clientes-lista-table tbody tr").size()-1);
		}
	});
	/*Search*/
	$("#clientes-search-str").keyup(function(){
		clientes.cargarHTML(true,0);
	}); 
	/*load details*/
	$("#clientes-lista-table").on("click","tbody tr:not(.tr-loader)",function(){
		clientes.detalles(($(this).attr('id').split('-')[1]));
	});
});
</script>