<div class="row">
	<div class="col-md-12">
		<div class="portlet box blue-hoki" id="form_wizard_1">
			<div class="portlet-title">
				<div class="caption">
					<i class=" icon-layers"></i>
					<span class="caption-subject sbold uppercase"> New Registration -
					<span class="step-title"> Step 1 of 2 </span>
					</span>
				</div>
			</div>
			<div class="portlet-body form">
				<form id="stepy_form" class="form-horizontal" method="POST">
					<div class="form-wizard">
						<div class="form-body">
							<ul class="nav nav-pills nav-justified steps">
								<li>
									<a href="#tab1" data-toggle="tab" class="step">
									<span class="number"> 1 </span>
									<span class="desc">
									<i class="fa fa-check"></i> Credential </span>
									</a>
								</li>
								<li>
									<a href="#tab2" data-toggle="tab" class="step">
									<span class="number"> 2 </span>
									<span class="desc">
									<i class="fa fa-check"></i> Confirm </span>
									</a>
								</li>
							</ul>
							<div id="bar" class="progress progress-striped" role="progressbar">
								<div class="progress-bar progress-bar-success"> </div>
							</div>
							<div class="tab-content">
								<div id='suksesupdate' class="alert alert-success alert-block fade in" style='display:none;'>
									<strong><i class="icon-ok-sign"></i>Success!</strong>Yehaa.. Your pasword has been updated. Reload page in few seconds..
								</div>
								<div id='gagalupdate' class="alert alert-danger alert-block fade in" style='display:none;'>
									<strong><i class="icon-ok-sign"></i>Whoops!</strong>
									<h4>
									You have some form errors. Please check below. 
								</div>
								<div class="tab-pane active" id="tab1">
									<div class="form-group">
										<label class="control-label col-md-3">Roles</label>
										<div class="col-md-4">
											<select id='group_id' name='group_id' class="form-control">
											<?php echo theGroup(); ?>
											</select>
										</div>
									</div>
									<div class="form-group">
										<label class="control-label col-md-3">First Name</label>
										<div class="col-md-4">
											<input class=" form-control" id="first_name" name="first_name" minlength="2" type="text" required />
										</div>
									</div>
									<div class="form-group">
										<label class="control-label col-md-3">Last Name</label>
										<div class="col-md-4">
											<input class=" form-control" id="last_name" name="last_name" minlength="2" type="text" required />
										</div>
									</div>
									<div class="form-group">
										<label class="control-label col-md-3">Mobile Number</label>
										<div class="col-md-4">
											<input class="form-control" name="username" id="username" type="text"/>
										</div>
									</div>
									<div class="form-group">
										<label class="control-label col-md-3">Email Address</label>
										<div class="col-md-4">
											<input class="form-control" name="email" id="email" type="email"/>
										</div>
									</div>
									<div class="form-group">
										<label class="control-label col-md-3">Password</label>
										<div class="col-md-4">
											<input class="form-control" name="password" id="password" type="password"/>
										</div>
									</div>
									<div class="form-group">
										<label class="control-label col-md-3">Confirm Password</label>
										<div class="col-md-4">
											<input class="form-control" name="pass_conf" id="pass_conf" type="password"/>
										</div>
									</div>
								</div>
								<div class="tab-pane" id="tab2">
									<h3 class="block">Confirm your account</h3>
									<h4 class="form-section">User Credential</h4>
									<div class="form-group">
										<label class="control-label col-md-3">Role:</label>
										<div class="col-md-4">
											<p class="form-control-static" data-display="group_id"> </p>
										</div>
									</div>
									<div class="form-group">
										<label class="control-label col-md-3">First Name:</label>
										<div class="col-md-4">
											<p class="form-control-static" data-display="first_name"> </p>
										</div>
									</div>
									<div class="form-group">
										<label class="control-label col-md-3">Last Name:</label>
										<div class="col-md-4">
											<p class="form-control-static" data-display="last_name"> </p>
										</div>
									</div>
									<div class="form-group">
										<label class="control-label col-md-3">Username:</label>
										<div class="col-md-4">
											<p class="form-control-static" data-display="username"> </p>
										</div>
									</div>
									<div class="form-group">
										<label class="control-label col-md-3">Password:</label>
										<div class="col-md-4">
											<p class="form-control-static" data-display="password"> </p>
										</div>
									</div>
									<div class="form-group">
										<label class="control-label col-md-3">Email Address:</label>
										<div class="col-md-4">
											<p class="form-control-static" data-display="email"> </p>
										</div>
									</div>
								</div>
							</div>
							<div class="form-actions">
								<div class="row">
									<div class="col-md-offset-3 col-md-9">
										<a href="javascript:;" class="btn default button-previous">
										<i class="fa fa-angle-left"></i> Back </a>
										<a href="javascript:;" class="btn btn-outline green button-next"> Continue
										<i class="fa fa-angle-right"></i>
										</a>
										<button type="submit" class="btn green button-submit" id="finish"> Finish!</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>