<style>
	th, td { text-align: center; }
</style>
<div class="row">
	<div class="col-md-12">
		<div class="portlet box green">
			<div class="portlet-title">
				<div class="caption">
					<i class="fa fa-cogs"></i><strong>Notice</strong> 
				</div>
				<div class="actions">
					<a class="btn white btn-outline btn-circle" href="#form_add" data-toggle="modal"> Add New <i class="fa fa-plus"></i></a>					
				</div>
			</div>
			<div class="portlet-body">
				<div class="row">
					<div class="col-md-6 col-sm-6">
					</div>
					<div class="col-md-6 col-sm-6">
						<div class="pull-right">
							<label>Search :&nbsp;&nbsp;<input type="text" data-column="0" class="search-input-text input-sm input-small input-inline form-control form-filter"></label>
						</div>
					</div>
				</div>
				<div id='suksesupdate' class="alert alert-success alert-block fade in" style='display:none;'>
					<h4>
						<i class="icon-ok-sign"></i>
						Success!
					</h4>
					<p>Yehaa.. Your staff added to your company. Redirecting in few seconds..</p>
				</div>
				<div id='gagalupdate' class="alert alert-danger alert-block fade in" style='display:none;'>
					<h4>
						<i class="icon-ok-sign"></i>
						Whoops!
					</h4>
					<p>Add staff been declined. There is an error occured. Please refresh the page and retry.</p>
				</div>
				<table class="table table-striped table-hover table-bordered" id="notice">
					<thead>
						<tr role="row" class="heading">
							<th>
								<center>Message</center>
							</th>
							<th>
								<center>Photo</center>
							</th>
							<th>
								<center>Receipent</center>
							</th>
						</tr>
					</thead>
				</table>
			</div>
		</div>
	</div>
</div>
<div class="modal fade in" id="form_add" role="basic" aria-hidden="true">
	<div class="modal-dialog ">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
				<h4 class="modal-title">Add Notice</h4>
			</div>
			<div class="modal-body form"  id="form_wizard_1">
				<div class="row">
					<form class="form-horizontal" id="stepy_form" method="POST" action="/notice/add-notice">
						<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> Messages </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> Receipent </span>
										</a>
									</li>
									<li>
										<a href="#tab3" data-toggle="tab" class="step">
										<span class="number"> 3 </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 class="tab-pane active" id="tab1">
										<div class="form-group">
											<label for="message" class="control-label col-md-3">Message</label>
											<div class="col-md-9">
												<textarea class="form-control" name="message" id="message" rows="3" placeholder="Enter a message..."></textarea>
											</div>
										</div>
										<!--<div class="form-group">
											<label class="control-label col-md-3">Upload Photo</label>
											<div class="col-md-9">
												<div class="fileinput fileinput-new" data-provides="fileinput">
													<div class="fileinput-new thumbnail" style="width: 200px; height: auto;">												
														<img id="uploadPreview" src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" alt="" /> </div>
													<div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"> </div>
													<div>
														<span class="btn default btn-file">
															<span class="fileinput-new"> Select image </span>
															<span class="fileinput-exists"> Change </span>
															<input type="file" name="image" id="image" onchange="PreviewImage();"> </span>
														<a href="javascript:;" class="btn default fileinput-exists" data-dismiss="fileinput"> Remove </a>
													</div>
												</div>
											</div>
											</div>-->								
									</div>
									<div class="tab-pane" id="tab2">
										<div class="portlet box blue">
											<div class="portlet-title">
												<div class="caption">
													<i class="fa fa-gift"></i>Select Contact
												</div>
												<div class="tools">
													<a href="javascript:;" class="collapse" data-original-title="" title=""> </a>
												</div>
											</div>
											<div class="portlet-body">
												<table class="table table-striped table-hover table-bordered" id="contacts">
													<thead>
														<tr>
															<th>
																<center></center>
															</th>
															<th>
																<center>Profile Picture</center>
															</th>
															<th>
																<center>Name</center>
															</th>
															<th>
																<center>Phone Number</center>
															</th>
														</tr>
													</thead>
												</table>
											</div>
										</div>
										<div class="portlet box blue">
											<div class="portlet-title">
												<div class="caption">
													<i class="fa fa-gift"></i>Select Company
												</div>
												<div class="tools">
													<a href="javascript:;" class="collapse" data-original-title="" title=""> </a>
												</div>
											</div>
											<div class="portlet-body">
												<table class="table table-striped table-hover table-bordered" id="companies">
													<thead>
														<tr>
															<th>
																<center></center>
															</th>
															<th>
																<center>Company Logo</center>
															</th>
															<th>
																<center>Name</center>
															</th>
															<th>
																<center>Office Number</center>
															</th>
														</tr>
													</thead>
												</table>
											</div>
										</div>
									</div>
									<div class="tab-pane" id="tab3">
										<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">Message</label>
											<div class="col-md-4">
												<p class="form-control-static" data-display="message"> </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>
</div>