<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;
}

.btn-group-xs>.btn, .btn-xs {
  font-size: 11px !important;
}
</style>
<!--<h1 class="page-title"> Company Settings
	</h1>-->
<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>Shipment Arrangement Status</strong> 
				</div>
				<div class="actions">				
					<a class="btn white btn-circle btn-outline pull-right" href="#form_add" data-toggle="modal"> 
					Add New <i class="fa fa-plus"></i> 
					</a>					
				</div>
			</div>
			<div class="portlet-body">
				
				<table class="table table-striped table-bordered table-hover" id="shipment-arrangements">
					<thead>
						<tr role="row" class="heading">
							<th>Shipment No</th>
							<th>Container <br/>No</th>
							<th>Type of<br/> Container</th>
							<th>Loading Date</th>
							<th>ETD</th>
							<th>ETA</th>
							<th>Order No</th>
							<th>Loading <br/> Venue</th>
							<th>Status</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">Shipment Arrangement</h4>
			</div>
			<div class="modal-body form"  id="form_wizard_1">
				<?php if($_SESSION['company_id'] <> 0 && getOrderSelectionCount() > 0){ ?>
				<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> Shipment Details </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> Consolidation </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">Shipment Arrangement Details</h3>
										<div class="row">
											<div class="col-md-12">
												<div class="col-md-6">
													<div class="form-group">
														<label class="control-label col-md-4">Loading Date</label>
														<div class="col-md-8">
															<input class="form-control date-picker" id="loading_date" name="loading_date" type="text" value="">
														</div>
													</div>
													<div class="form-group">
														<label class="control-label col-md-4">Shipment No</label>
														<div class="col-md-8">
															<input class="form-control" id="shipment_no" name="shipment_no" type="text" value="">
														</div>
													</div>
													<div class="form-group">
														<label class="control-label col-md-4">Departure Port</label>
														<div class="col-md-8">
															<input class="form-control" id="departure_port" name="departure_port" type="text" value="">
														</div>
													</div>
													<div class="form-group">
														<label class="control-label col-md-4">Arrival Port</label>
														<div class="col-md-8">
															<input class="form-control" id="arrival_port" name="arrival_port" type="text" value="">
														</div>
													</div>
												</div>
												<div class="col-md-6">
													<div class="form-group">
														<label class="control-label col-md-4">Container No</label>
														<div class="col-md-8">
															<input class="form-control" id="container_no" name="container_no" type="text" value="">
														</div>
													</div>
													<div class="form-group">
														<label class="control-label col-md-4">Type of Container</label>
														<div class="col-md-8">
															<select name="container_type" id="container_type" class="form-control" aria-invalid="false">
																<option value="">Please select type of Container</option>
																<option value="Dry Storage Container 10ft">Dry Storage Container 10ft</option>
																<option value="Dry Storage Container 20ft">Dry Storage Container 20ft</option>
																<option value="Dry Storage Container 40ft">Dry Storage Container 40ft</option>
																<option value="Flat Rack Container">Flat Rack Container</option>
																<option value="Open Top Container">Open Top Container</option>
																<option value="Tunnel Container">Tunnel Container</option>
																<option value="Open Side Storage Container">Open Side Storage Container</option>
																<option value="Double Doors Container 20ft">Double Doors Container 20ft</option>
																<option value="Double Doors Container 40ft">Double Doors Container 40ft</option>
																<option value="Refrigerared ISO Container">Refrigerared ISO Container</option>
																<option value="Insulated or Thermal Container">Insulated or Thermal Container</option>
																<option value="Tanks">Tanks</option>
																<option value="Cargo Storage Roll Container">Cargo Storage Roll Container</option>
																<option value="Half Height Container">Half Height Container</option>
																<option value="Car Container">Car Container</option>
																<option value="Intermediate Bulk Shift Container">Intermediate Bulk Shift Container</option>
																<option value="Drums">Drums</option>
																<option value="Special Purpose Container">Special Purpose Container</option>
																<option value="Swap Bodies">Swap Bodies</option>
															</select>
														</div>
													</div>
													<div class="form-group">
														<label class="control-label col-md-4">ETA</label>
														<div class="col-md-8">
															<input class="form-control date-picker" id="eta" name="eta" type="text" value="">
														</div>
													</div>
													<div class="form-group">
														<label class="control-label col-md-4">ETD</label>
														<div class="col-md-8">
															<input class="form-control date-picker" id="etd" name="etd" type="text" value="">
														</div>
													</div>
												</div>
											</div>
										</div>
										<h3 class="block">Loading Vehicle & Driver</h3>
										<div class="row">
											<div class="col-md-12">
												<div class="col-md-6">
													<div class="form-group">
														<label class="control-label col-md-4">Driver Name</label>
														<div class="col-md-8">
															<input class="form-control" id="driver_contact_person" name="driver_contact_person" type="text" value="">
														</div>
													</div>
													<div class="form-group">
														<label class="control-label col-md-4">Driver Contact No</label>
														<div class="col-md-8">
															<input class="form-control" id="driver_contact_person_no" name="driver_contact_person_no" type="text" value="">
														</div>
													</div>
												</div>
												<div class="col-md-6">
													<div class="form-group">
														<label class="control-label col-md-4">Trailer No</label>
														<div class="col-md-8">
															<input class="form-control" id="trailer_no" name="trailer_no" type="text" value="">
														</div>
													</div>
													<div class="form-group">
														<label class="control-label col-md-4">Driver IC No</label>
														<div class="col-md-8">
															<input class="form-control" id="driver_ic_no" name="driver_ic_no" type="text" value="">
														</div>
													</div>
												</div>
											</div>
										</div>
										<h3 class="block">Loading Venue</h3>
										<div class="row">
											<div class="col-md-12">
												<div class="col-md-6">
													<div class="form-group">
														<label class="control-label col-md-4">Loading Address</label>
														<div class="col-md-8">
															<input class="form-control" id="loading_address" name="loading_address" type="text" value="">
														</div>
													</div>
													<div class="form-group">
														<label class="control-label col-md-4">Loading City</label>
														<div class="col-md-8">
															<input class="form-control" id="loading_city" name="loading_city" type="text" value="">
														</div>
													</div>
													<div class="form-group">
														<label class="control-label col-md-4">Loading State</label>
														<div class="col-md-8">
															<input class="form-control" id="loading_state" name="loading_state" type="text" value="">
														</div>
													</div>
													<div class="form-group">
														<label class="control-label col-md-4">Contact No</label>
														<div class="col-md-8">
															<input class="form-control" id="loading_contact_person_no" name="loading_contact_person_no" type="text" value="">
														</div>
													</div>
												</div>
												<div class="col-md-6">
													<div class="form-group">
														<label class="control-label col-md-4">Postcode</label>
														<div class="col-md-8">
															<input class="form-control" id="loading_zip" name="loading_zip" type="text" value="">
														</div>
													</div>
													<div class="form-group">
														<label class="control-label col-md-4">Country</label>
														<div class="col-md-8">
															<input class="form-control" id="loading_country" name="loading_country" type="text" value="">
														</div>
													</div>
													<div class="form-group">
														<label class="control-label col-md-4">Contact Person</label>
														<div class="col-md-8">
															<input class="form-control" id="loading_contact_person" name="loading_contact_person" type="text" value="">
														</div>
													</div>
												</div>
											</div>
										</div>
										<div class="row">
											<div class="col-md-12">
												<div class="form-group">
													<label class="control-label col-md-3">Remark</label>
													<div class="col-md-7">
														<textarea id="remark" name="remark" class="form-control" aria-invalid="false"> </textarea>
													</div>
												</div>
												<!--/span-->
											</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="orderSelection">
													<thead>
														<tr>
															<td>Date</td>
															<td>Marking No</td>
															<td>Total CBM</td>
															<td>Total Weight</td>
															<td>Select</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>
				<?php }elseif($_SESSION['company_id'] <> 0 && getOrderSelectionCount() == 0){ ?>
					<center style="margin-top:70px;margin-bottom: 70px">
						There is no order created to your company. Please ask your importer to create an order to your company.
					</center>
				<?php }else{ ?>
					<center style="margin-top:70px;margin-bottom: 70px">
						Please complete your <strong><a href="/company/edit">Company Information</a></strong> to proceed.
					</center>
				<?php } ?>
			</div>
		</div>
	</div>
</div>
<div class="modal fade in printable" id="examinations" tabindex="-1" 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>
				<h3 class="modal-title">Customs Examination</h3>
			</div>
			<div class="modal-body form">
				<div class="row">
					<form class="form-horizontal" id="submit_customs_examination">
						<div class="form-body" id="getCode">
						</div>
					</form>
				</div>
			</div>
			<div class="modal-footer">
				<div class="row">
					<div class="col-md-offset-3 col-md-9">
						<a class="btn green button-submit-customs-edit" id="submit-customs-edit"> Submit</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>