<style>
th,td {
  vertical-align: middle !important;
  font-size: 11px !important;
}

th.dt-body-center,
	td.dt-body-center {
  text-align: center !important;
  vertical-align: middle !important;
}

.table-scrollable .dataTable td>.btn-group, .table-scrollable .dataTable th>.btn-group {
  position: absolute;
  margin-top: -10px;
}

.dataTables_empty {
  text-align: center !important;
}

.dropdown-menu {
  min-width: 10px !important;
}

.sent {
  color: #F1C40F;
  font-weight: 700;
}
</style>
<div class="row">
	<div class="col-md-12">
		<div class="portlet box blue-hoki">
			<div class="portlet-title">
				<div class="caption">
					<i class="fa fa-cogs"></i><strong>Custom Declaration Arrangement Status</strong> 
				</div>
			</div>
			<div class="portlet-body">
				<div class="col-md-12">				
					<a class="btn red btn-circle btn-outline pull-right" href="#form_add" data-toggle="modal"> 
					Add New <i class="fa fa-plus"></i> 
					</a>					
				</div>
				<table class="table table-striped table-bordered table-hover" id="custom-declarations">
					<thead>
						<tr role="row" class="heading">
							<th>Reference No</th>
							<th>Date</th>
							<th>Marking No</th>
							<th>Supplier Name</th>
							<th>Exporter Name</th>
							<th>Action</th>
						</tr>
					</thead>
				</table>
			</div>
		</div>
	</div>
</div>
<div class="modal fade modal-scroll bs-modal-lg  in" id="form_add" role="basic" aria-hidden="true">
	<div class="modal-dialog  modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
				<h4 class="modal-title">Custom Declaration</h4>
			</div>
			<div class="modal-body form"  id="form_wizard_1">
				<div class="row">
					<form class="form-horizontal" id="submit_form">
						<div class="form-wizard">
							<div class="form-body">
								<ul class="nav nav-pills nav-justified steps">
									<li>
										<a href="#ttab1" data-toggle="tab" class="step">
										<span class="number"> 1 </span>
										<span class="desc">
										<i class="fa fa-check"></i> Shipping Order </span>
										</a>
									</li>
									<li>
										<a href="#ttab2" data-toggle="tab" class="step">
										<span class="number"> 2 </span>
										<span class="desc">
										<i class="fa fa-check"></i> Custom Details </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="ttab1">
										<h3 class="block">Shipping Order Selection</h3>
										<div class="row">
											<div class="col-md-12">
												<div class="col-md-12">
													<div class="form-group">
														<label class="control-label col-md-3">Order No</label>
														<div class="col-md-7">
															<select name="so_id" id="so_id" class="form-control">
																<option>Please select</option>
																<?php echo getAllSOWithSA(); ?>
															</select>
														</div>
													</div>
													<div class="form-group">
														<label class="control-label col-md-3">Reference Number</label>
														<div class="col-md-7">
															<input class="form-control" id="ref_no" name="ref_no" type="text">
														</div>
													</div>
													<div class="form-group">
														<label class="control-label col-md-3">Exporter Name</label>
														<div class="col-md-7">
															<input class="form-control" id="exporter_name" name="exporter_name" type="text">
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
									<div class="tab-pane" id="ttab2">
										<h3 class="block">Order Selection</h3>
										<div class="row">
											<div class="col-md-12">
												<table class="table table-striped table-hover" id="soItems">
													<thead>
														<tr>
															<td>No</td>
															<td>HS Code</td>
															<td>Product Name</td>
															<td>Description</td>
															<td>Quantity</td>
															<td>UOM</td>
															<td>Price</td>
														</tr>
													</thead>
													<tbody id="tbody">
													</tbody>
												</table>
											</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>
											<a class="btn green button-submit" id="finish"> Finish!</a>
										</div>
									</div>
								</div>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>