<?php require('casa/setup.casa.php');
$titulo = "Mi Perfil de Usuario";
include('inc_head.php');
?>
<style>
td{font-size:19px}	
</style>
<body>
	<div class="wrapper">		
		<?php include('inc_menu.php');?>

		<div class="main-panel">
			<div class="content">
				<div class="panel-header bg-dark2">
					<div class="page-inner py-5">
						<div class="d-flex align-items-left align-items-md-center flex-column flex-md-row">
							<div>
								<h2 class="text-white"><?php echo $titulo?></h2>
							</div>							
						</div>
					</div>
				</div>
				<div class="page-inner mt--5">
				<div class="row">												
						<div class="col-md-6">
							<div class="card">
								<div class="card-profile text-center">
									<div id='ImgCambiar' style='cursor:pointer;' data-toggle="tooltip" data-placement="left" title="Click para cambiar la Foto de Perfil">
									<img src="<?php echo PATH_HOME.'perfil/'.$us_foto ?>" alt="..." class="avatar-img rounded"></div>		
										<h1><?php echo $USUARIO; ?></h1>
										<h3><?php echo $TipoUsuario; ?></h3>				
										<hr>
										<p><a href="#" id='btnCambiar' class="btn btn-default">
											<i class="fas fa-image"></i> &nbsp; Cambiar foto</a></p>
										<form id='PerfiFoto' method="post" action="<?php echo PATH_HOME.'us-foto-upd/'.$us_codigo; ?>" enctype="multipart/form-data">										
											<input type="file" id='Foto' name='Foto' style='display:none'>
											<input type="hidden" id='us_codigo' name='us_codigo' value='<?php echo $us_codigo; ?>'>
										</form>
								</div>
							</div>							
						</div>
						<div class="col-md-6">
							<div class="card">
								<div class="card-body">
									<div class="d-flex">
										<div id='ImgCambiar2' style='cursor:pointer;' data-toggle="tooltip" data-placement="left" data-original-title="Click para cambiar la Foto de Perfil">
											<img src="<?php echo PATH_HOME.'perfil/'.$us_foto ?>" class="rounded" width='140px'>
										</div>
										<div class="info-post ml-2">
											<h1><?php echo $USUARIO; ?></h1>
											<h3><?php echo $TipoUsuario; ?></h3>				
										</div>
									</div>
									<div class="separator-solid"></div>
									<div id='soloDatos'>
									<h3 class="card-title">
										Datos registrados
									</h3> <hr>
										<?php 
										$info = '<table width="80%" align="center">
											<tr>
												<td width="40%"><b>Nombres:</b></td>
												<td width="60%">'.$us_nombres.'</td>
											</tr>
											<tr>
												<td><b>Apellidos:</b></td>
												<td>'.$us_apellidos.'</td>
											</tr>
											<tr>
												<td><b>C.I.:</b></td>
												<td>'.$us_ci.'</td>
											</tr>
											<tr>
												<td><b>Usuario:</b></td>
												<td>'.$us_user.'</td>
											</tr>
											<tr>
												<td><b>Contraseña:</b></td>
												<td>***********</td>
											</tr>
										
									</table>';
										echo $info;
										?>																		
									
									<hr>
									<p class='text-center'>
										<a href="#" id='btnCambiarDatos' class="btn btn-default">
											<i class="fas fa-edit"></i> &nbsp; Cambiar mis Datos</a>
									</p>
									</div>
									<form id='PerfilDatos' style='display:none'>
										<div class="form-group">
										<h3 class="card-title">
											Modificar Mis Datos
										</h3> <hr>
												<div class="input-group mb-3">													
													<div class="input-group-prepend"><span class="input-group-text" id="basic-addon1">Nombres:</span></div>												
													<input id='txtNombres' value='<?php echo $us_nombres?>' type="text" class="form-control">
												</div>																																																																					
												<div class="input-group mb-3">													
													<div class="input-group-prepend"><span class="input-group-text" id="basic-addon1">Apellidos:</span></div>												
													<input id='txtApellidos' value='<?php echo $us_apellidos;?>' type="text" class="form-control">
												</div>																																																																					
												<div class="input-group mb-3">													
													<div class="input-group-prepend"><span class="input-group-text" id="basic-addon1">C.I.:</span></div>												
													<input id='txtCI' value='<?php echo $us_ci;?>' type="text" class="form-control">
												</div>																																																																					
												<div class="input-group mb-3">													
													<div class="input-group-prepend"><span class="input-group-text" id="basic-addon1">Usuario:</span></div>												
													<input id='txtUser' value='<?php echo $us_user;?>' type="text" class="form-control">
												</div>	
											</div>	
											<div class="col-md-12 text-center">
											<div id='res'></div>
												<input type="hidden" id='us_codigo' value='<?php echo $us_codigo; ?>'>
												<input type='button' id='btnCancelar' class="btn btn-danger" value="CANCELAR" />
												<button type='submit' class="btn btn-default"> GUARDAR </button>																				
											</div>
									</form>
								</div>
							</div>
						</div>						
					</div>
				</div>
			</div>
			<?php include('inc_pie.php');?>
		</div>		
	</div>	
</body>
</html>
<script>
$('#ImgCambiar,#btnCambiar,#ImgCambiar2').click(function(){
	$('#Foto').click();
});
$('#Foto').change(function(){
	$('#PerfiFoto').submit();
});
$('#btnCambiarDatos').click(function(){
	$('#soloDatos').slideUp();
	$('#PerfilDatos').slideDown();
});
$('#btnCancelar').click(function(){
	$('#PerfilDatos').slideUp();
	$('#soloDatos').slideDown();	
});
$('#PerfilDatos').on('submit', function(event) {
  event.preventDefault();

  $.post('<?php echo PATH_HOME.'us-datos-upd/'.md5(uniqid()); ?>',{	
	 'us_codigo': $('#us_codigo').val(),	 
	 'txtNombres': $('#txtNombres').val(),
	 'txtApellidos': $('#txtApellidos').val(),
	 'txtCI': $('#txtCI').val(),
	 'txtUser': $('#txtUser').val(),	 
    'coder': '<?php echo sha1(uniqid()); ?>'
  },function(data){
    $('#res').html(data);
  });  
});	
</script>