<div class="row">
	<!--perfil-->
	<div class="col-md-4">
		<div class="ibox">
			<div class="ibox-title">
				<h5>Perfil</h5>
			</div>
			<div class="ibox-content no-padding border-left-right" id="admin-usuarios-perfil-foto-wrapper">
				<img id="admin-usuarios-perfil-foto" class="img-responsive" alt="imagen de perfil" data-image="<?php echo ($usuario->perfil_usuario != "")?base_url($usuario->perfil_usuario):base_url('assets/img/user_default.png');?>" src="<?php echo ($usuario->perfil_usuario != "")?base_url($usuario->perfil_usuario):base_url('assets/img/user_default.png');?>">
				<div id="admin-usuarios-perfil-foto-change-mask">
					<i class="fa fa-camera fa-5x m-t-sm"></i>
					<h1>Cambiar imagen</h1>
				</div>
				<form autocomplete='off' class='form-horizontal' name='formUploadImage' id="formUploadImage"  method='post' action=''>
					<input type="file" id="admin-usuarios-perfil-foto-file" name="admin-usuarios-perfil-foto-file">
					<input type="hidden" id="id_usuario_perfil" name="id_usuario_perfil" value="<?php echo $usuario->id_usuario;?>">
				</form>
			</div>
			<div class="ibox-content profile-content">
				<h4><strong><?php echo $usuario->nombre_usuario;?></strong></h4>
				<p>
				 Usuario: <?php echo $usuario->username_usuario;?>
				</p>
				<p>
					<button class="btn btn-primary btn-sm btn-block modal-trigger" data-target="<?php echo base_url('administracion/cambiarcontrasena');?>?idusuario=<?php echo $usuario->id_usuario;?>">Cambiar contrase&ntilde;a</button>
				</p>
			</div>
		</div>
	</div>
	<!--usuarios-->
	<div class="col-md-8">
		<div class="ibox">
			<div class="ibox-title">
				<h5>Usuarios</h5>
			</div>
			<div class="ibox-content">
				<?php if($permiso_usuariosver):?>
			
				<div class="row">
					<!--Usuarios 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" class="btn btn btn-primary modal-trigger" data-target="<?php echo base_url("administracion/nuevousuario");?>?mode=create;"> <i class="fa fa-plus"></i> Nuevo usuario</button>
									</div>
									<div class="col-sm-7">
										<input type="text" id="usuarios-search-str" placeholder="Buscar usuario" class="input form-control">
									</div>
								</div>
								<!--List-->
								<div class="clients-list" id="usuarios-lista-wrapper">
									<div class="table-responsive">
										<table class="table table-striped table-hover" id="usuarios-lista-table">
											<tbody>
												<tr class="tr-loader">
													<td colspan="3"></td>
												</tr>
												<!--<tr>
													<td>
														<h4>Ronald Sifredo Amaya</h4>
														<small>roam08</small>
													</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="usuarios-detalles-wrapper" class="p-sm">
									<div id="usuarios-detalles-info-wrapper" class="lista-detalles-info-wrapper">
										<i class="fa fa-chevron-circle-left fa-5x"></i>
										<small>Seleccione un usuario de la lista para ver detalles.</small>
									</div>
									
									<div id="usuarios-detalles-ajax-wrapper">									
									</div>
									
								</div>
							</div>
						</div>
					</div>
				</div>
				<?php else:?>
				<div class="text-center">
					<span>Usuarios no disponibles, consulte los permisos de su cuenta</span>
				</div>
				<?php endif;?>
			</div>
		</div>
	</div>

</div>
<script>
	/*Imagen de perfil*/
	var $inputImage = $("#admin-usuarios-perfil-foto-file");
	$("#admin-usuarios-perfil-foto-change-mask").on("click",function(){
		$inputImage .click();
	});
	if (window.FileReader) {
		$inputImage.change(function() {
			$inputImage.attr("disabled", true);
			
			var fileReader = new FileReader(),
					files = this.files,
					file;

			if (!files.length) {
				return;
			}

			file = files[0];

			if (/^image\/\w+$/.test(file.type)){
				fileReader.readAsDataURL(file);
				fileReader.onload=function(e){
					$("#admin-usuarios-perfil-foto").attr("src",fileReader.result);
					$inputImage.attr("disabled", false);
					swal({
					  title: "Cambiar Imagen de Perfil",
					  text: "Esta acción cambiara la imagen de perfil<br>&iquest;Esta seguro que desea continuar?",
					  type: "warning",
					  html: true,
					  showCancelButton: true,
					  confirmButtonColor: "#3C8DBC",
					  cancelButtonText: "Cancelar",
					  confirmButtonText: "Si, cambiar foto de perfil"
					},
					function(isConfirm){
						if(isConfirm){
							$('#formUploadImage').ajaxSubmit({
								type: "POST",
								url: "<?php echo base_url();?>administracion/guardar_imagenperfil",
								data: $('#formUploadImage').serialize(),
								cache: false,
								success: function (response) {
									$("#admin-usuarios-perfil-foto").attr("data-image",response.split("‡")[0]);									
									$("#img-user-perfil-thumb").attr("src",response.split("‡")[1]);									
								}
							});
						}else{
							$("#admin-usuarios-perfil-foto").attr("src",$("#admin-usuarios-perfil-foto").attr('data-image'));
						}						
					});
				};
			} else {
				swal("Error", "Por favor seleccione una imagen", "error")
			}
		});
	} else {
		$inputImage.addClass("hide");
	}
</script>
<script>
$(function(){
	usuarios.setUrl('<?php echo base_url();?>');
	usuarios.cargar(true,0);
	/*scroll*/
	$('#usuarios-lista-wrapper').slimScroll({
        height: '500px'
	});
	$('#usuarios-detalles-wrapper').slimScroll({
        height: '530px'
	});
	/*Load more*/
	$("#usuarios-lista-wrapper").slimScroll().bind('slimscroll', function(e, position){
		if(position==='bottom'){
			usuarios.cargar(false,$("#usuarios-lista-table tbody tr").size()-1);
		}
	});
	/*Search*/
	$("#usuarios-search-str").keyup(function(){
		usuarios.cargar(true,0);
	}); 
	/*load details*/
	$("#usuarios-lista-table").on("click","tbody tr:not(.tr-loader)",function(){
		usuarios.detalles(($(this).attr('id').split('-')[1]));
	});
});
</script>