<section class="content-header">
	<h1>&nbsp;</h1>
	<ol class="breadcrumb">
		<li><a href="<?php echo site_url('dashboard'); ?>"><i class="fa fa-dashboard"></i> Dashboard</a></li>
		<li class="active">Profile</li>
	</ol>
</section>
<section class="content">
	<?php echo alert(); ?>
	<div class="row">
		<div class="col-md-6">
			<div class="box box-title">
				<div class="box-header with-border">
					<h3 class="box-title"><i class="fa fa-fw fa-key"></i> Login Info</h3>
				</div>
				<form action="<?php echo site_url('profile'); ?>" method="POST" class="form-validate login-info-form">
					<div class="box-body">
						<!-- ajax message will splash here -->
						<div class="login-info-form-msg"></div>

						<div class="form-group">
							<label for="username-text">Login Name</label>
							<div class="controls">
								<input class="form-control" value="" autocomplete="off" name="email" id="username-text" placeholder="Login Name" type="text" data-msg-required="Login Name required." data-rule-required="true">
							</div>
						</div>
						<div class="form-group">
							<label for="password-text">Password</label>
							<div class="controls">
								<input class="form-control" value="" autocomplete="off" name="password" id="password-text" placeholder="Password" type="password" data-rule-required="true" data-msg-required="Password required." data-rule-required="true">
							</div>
						</div>
						<div class="form-group">
							<label for="conf-password-text">Confirm Password</label>
							<div class="controls">
								<input class="form-control" value="" autocomplete="off" id="conf-password-text" placeholder="Password" type="password" equalTo="#password-text">
							</div>
						</div>
					</div>
					<div class="box-footer">
						<div class="pull-right">
							<button type="submit" class="btn btn-success button-save btn-save">Save Changes</button>
						</div>
					</div>
				</form>
			</div>
		</div>
		<div class="col-md-6" style="display:none">
			<div class="box box-title">
				<div class="box-header with-border">
					<h3 class="box-title"><i class="fa fa-fw fa-child"></i> Personal Info</h3>
				</div>
				<form action="<?php echo site_url('profile'); ?>" method="post" enctype="multipart/form-data" role="form" class="form-horizontal form-validate personal-info-form">
					<div class="box-body">
						<!-- ajax message will splash here -->
						<div class="personal-info-form-msg"></div>
						<div class="form-group">
							<label for="user-name" class="col-sm-2 control-label">Name</label>
							<div class="col-sm-10 controls">
								<input class="form-control" id="user-name" value="<?php echo $user_info['name']; ?>" placeholder="Your Name" name="name" type="text" data-rule-required="true" data-msg-required="Name required." />
							</div>
						</div>
					<!-- 	<div class="form-group">
							<label for="user-email" class="col-sm-2 control-label">Email</label>
							<div class="col-sm-10 controls">
								<input class="form-control" id="user-email" value="<?php //echo $user_info['email_id']; ?>" placeholder="Email" type="email" name="email_id" data-rule-required="true" data-msg-required="Email required." data-rule-email="true" />
							</div>
						</div> -->
						<div class="form-group">
							<label class="col-sm-2 control-label">Image</label>
							<div class="col-lg-4">
								<img class="img-thumbnail" src="<?php echo $user_img; ?>" width="100%"/>
							</div>
							<div class="col-lg-4">
								<p>Dimension: 700 x 700<br>
									Max Size: 100 Kb<br>
									Type: JPG / PNG / JPEG<br>
								</p>
								<button type="button" class="btn btn-success btn-clr" onclick="$('[name=img]').trigger('click');" style="width:100%">Choose Picture</button>
								<input type="file" name="img" style="display:none;" />
							</div>
						</div>

					</div>
					<div class="box-footer">
						<div class="pull-right">
							<button type="submit" class="btn btn-success button-save btn-save">Save Changes</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</section>
<script type="text/javascript" src="<?php echo base_url('assets/js/jquery.validate.min.js'); ?>"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('.form-validate').each(function(){      
			$(this).validate({
				errorElement:'span',
				errorClass: 'error',
				errorPlacement:function(error, element){
					element.parents('.controls').append(error);
				},
				highlight: function(label) {
					$(label).closest('.form-group').removeClass('error success').addClass('error');
				},
				success: function(label) {
					label.addClass('valid').closest('.form-group').removeClass('error success').addClass('success');
				}
			});
		});
	});
</script>