<article>
	<h1><span class="icon-v-card"></span> &nbsp;&nbsp;Perfil de Usuario - <?=$nom_usuari?></h1>
    <h2>Datos de Acceso</h2>
    <section>
		<table width="100%" border="0">
		  <tbody>
			<tr>
			  <td width="30%">Nombre de usuario:</td>
			  <td width="16%"><?=$usu_usuari?></td>
			  <td width="54%">&nbsp;</td>
			</tr>
			<tr>
			  <td>Contraseña :</td>
			  <td>********</td>
			  <td>
			    <button style="cursor: pointer" id="cambiar" onClick="divcabio();">Cambiar</button>
			  </td>
			</tr>
		  </tbody>
		</table>
		<div style="display: none" id="cambios">	
			<table width="100%" border="0">
				<tbody>
				<tr>
				  <td width="30%">Contraseña anterior:</td>
				  <td width="16%"><input type="password" id="conante"></td>
				  <td width="54%">&nbsp;</td>
				</tr>
				<tr>
				  <td>Nueva contraseña:</td>
				  <td><input type="password" id="connue1"></td>
				  <td>&nbsp;</td>
				</tr>
				<tr>
				  <td>Confirmar contraseña:</td>
				  <td><input type="password" id="connue2"></td>
				  <td>&nbsp;</td>
				</tr>
				<tr>
				  <td align="center">
				  <input type="button" value="Aceptar" style="cursor: pointer" onClick="cambiarContrasena('<?=$sesiedgard?>',$('#conante').val(),$('#connue1').val(),$('#connue2').val());"></td>
				  <td align="center">&nbsp;</td>
				  <td>&nbsp;</td>
				</tr>
				<tr>
					<td colspan="2" align="center" style="color: #22960C"><span id="cambiarContrasena"></span></td>
				  <td>&nbsp;</td>
				  </tr>
	          </tbody>			
		</table>		
		</div>
	</section> 
	<br>
	<br>
	<h2>Datos de Usuario</h2>
	<section>
		<table width="100%" border="0">
	  <tbody>
		<tr>
		  <td width="30%">Correo:</td>
		  <td width="31%"><?=$cor_usuari?></td>
		  <td width="39%">&nbsp;</td>
		</tr>
		<tr>
		  <td>Tipo de usuario:</td>
		  <td><?=$uso_usuari?></td>
		  <td>&nbsp;</td>
		</tr>
		<tr>
		  <td>Estado de usuario:</td>
		  <td>
		  <?php if($est_usuari=='1'){echo '<span style="color: #18C01B">Activo</span>';}else{echo '<span style="color: #F9161A">Inactivo<span>';}?>
		  </td>
		  <td>&nbsp;</td>
		</tr>
	  </tbody>
	</table>
	</section> 
	<br>
	<br>
	<h2>Foto de perfil</h2>
	<section>
		<table width="100%" border="0">
	  <tbody>
		<tr>
		  <td width="30%" align="left"><img src="img/icon_user.png" style="margin-left: 30px;" width="50" height="50" alt=""/></td>
		  <td width="31%">
		  	<input type="button" value="Cambiar" style="cursor: pointer" onClick="cambiar_ImagenModal();">
		  </td>
		  <td width="39%">&nbsp;</td>
		</tr>
		</tbody>
	</table>
	</section> 
	
	
 		

               
             
              
       

</article>
<script>
function cambiar_ImagenModal(){
$("#cambiar_Image_mod").dialog({
	title: "Cambiar foto de perfil",
	resizable: false,
	height: "auto",
	width: 520,
	modal: true,
	buttons: {				
		"1": { id: 'continue', text: 'Guardar', click: function(){cambiar_Imagen();},"class": "orange" },
		"2": { id: 'close', text: 'Cancelar', click: function(){ $(this).dialog("close"); }, "class": "orange"}	
	},
	open: function (event, ui) {
    $('#cambiar_Image_mod').css('overflow', 'hidden'); //this line does the actual hiding
   }
});
}
</script>
<div id="cambiar_Image_mod" style="display: none">   
<center>	
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td width="49%"><div id="croppic"></div></td>
      <td width="3%">&nbsp;</td>
      <td width="48%" valign="bottom">
		<span class="btn" id="cropContainerHeaderButton">Obtener imagen</span><br><br>
		<span class="agregarSlideButton" onClick="registrarSlide($('.croppedImg').attr('src'));">
		Guardar Imagen
		</span>
   	  </td>
    </tr>
  </tbody>
</table>
</center>
<div id="cambiar_Image"></div>
</div>  

<script>
	var clic = 1;
	function divcabio(){ 
		if(clic==1){
			$('#cambios').css('display','block'); 
			$('#cambiar').html('Cancelar'); 
		   	clic = clic + 1;
		} else{
		   	$('#cambios').css('display','none');
			$('#cambiar').html('Cambiar'); 
			clic = 1;
	   	}   
	}
</script><!--Muestra y oculta cambio de contraseña