From b31d97db5059f3aa03cf2ef2ca685cbf41c7e424 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?GEGULA=EF=BF=BD?= <alyn.mahat@gmail.com>
Date: Mon, 25 Sep 2017 16:44:59 +0800
Subject: [PATCH] FORWARDER 2

---
 public/Forwarder/purchaseorder.html   |  10 +-
 public/Forwarder/shipmentarrange.html | 527 ++++++++++++++++++--------
 2 files changed, 370 insertions(+), 167 deletions(-)

diff --git a/public/Forwarder/purchaseorder.html b/public/Forwarder/purchaseorder.html
index cae8569..9015411 100644
--- a/public/Forwarder/purchaseorder.html
+++ b/public/Forwarder/purchaseorder.html
@@ -399,7 +399,7 @@ License: You must have a valid license purchased only from themeforest(the above
                                                               <li><input onchange="filterme()" name="orderno" value="" type="checkbox"/>&nbsp;Tom Warehouse</li>                      
                                                             </ul>
                                                         </th>
-                                                        <th width="1%"> Total <br/>
+                                                        <th width="1%"> Total Purchase Value <br/>
                                                             <button type="button" style="text-decoration: none" class="btn btn-link btn-sm dropdown-toggle" data-toggle="dropdown">
                                                             <span class="fa fa-filter"></span></button>
                                                             <ul class="dropdown-menu">
@@ -446,7 +446,7 @@ License: You must have a valid license purchased only from themeforest(the above
                                                         <td><span style='color:#FF0000;font-weight: 700;' > No </span></td>
                                                         <td><center>
                                                             <div class='btn-group'>
-                                                            <button class='btn green btn-xs btn-circle btn-outline dropdown-toggle btiv' data-toggle='dropdown'>Actions<i class='fa fa-angle-down'></i></button><ul class='dropdown-menu'><li><a href='#'> View </a></li><li><a href='#'> Edit </a></li><li><a href='#'> Cancel </a></li></ul>
+                                                            <button class='btn green btn-xs btn-circle btn-outline dropdown-toggle btiv' data-toggle='dropdown'>Actions<i class='fa fa-angle-down'></i></button><ul class='dropdown-menu'><li><a href='#'> View </a></li><li><a href='#'> Cancel </a></li></ul>
                                                             </div><br/></center>
                                                         </td>
                                                     </tr>
@@ -460,7 +460,7 @@ License: You must have a valid license purchased only from themeforest(the above
                                                         <td> Yes </td>
                                                         <td><center>
                                                             <div class='btn-group'>
-                                                            <button class='btn green btn-xs btn-circle btn-outline dropdown-toggle btiv' data-toggle='dropdown'>Actions<i class='fa fa-angle-down'></i></button><ul class='dropdown-menu'><li><a href='#'> View </a></li><li><a href='#'> Edit </a></li><li><a href='#'> Cancel </a></li></ul>
+                                                            <button class='btn green btn-xs btn-circle btn-outline dropdown-toggle btiv' data-toggle='dropdown'>Actions<i class='fa fa-angle-down'></i></button><ul class='dropdown-menu'><li><a href='#'> View </a></li><li><a href='#'> Cancel </a></li></ul>
                                                             </div><br/></center>
                                                         </td>
                                                     </tr>
@@ -474,7 +474,7 @@ License: You must have a valid license purchased only from themeforest(the above
                                                         <td><span style='color:#FF0000;font-weight: 700;' > No </span></td>
                                                         <td><center>
                                                             <div class='btn-group'>
-                                                            <button class='btn green btn-xs btn-circle btn-outline dropdown-toggle btiv' data-toggle='dropdown'>Actions<i class='fa fa-angle-down'></i></button><ul class='dropdown-menu'><li><a href='#'> View </a></li><li><a href='#'> Edit </a></li><li><a href='#'> Cancel </a></li></ul>
+                                                            <button class='btn green btn-xs btn-circle btn-outline dropdown-toggle btiv' data-toggle='dropdown'>Actions<i class='fa fa-angle-down'></i></button><ul class='dropdown-menu'><li><a href='#'> View </a></li><li><a href='#'> Cancel </a></li></ul>
                                                             </div><br/></center>
                                                         </td>
                                                     </tr>
@@ -488,7 +488,7 @@ License: You must have a valid license purchased only from themeforest(the above
                                                         <td> Yes</td>
                                                         <td><center>
                                                             <div class='btn-group'>
-                                                            <button class='btn green btn-xs btn-circle btn-outline dropdown-toggle btiv' data-toggle='dropdown'>Actions<i class='fa fa-angle-down'></i></button><ul class='dropdown-menu'><li><a href='#'> View </a></li><li><a href='#'> Edit </a></li><li><a href='#'> Cancel </a></li></ul>
+                                                            <button class='btn green btn-xs btn-circle btn-outline dropdown-toggle btiv' data-toggle='dropdown'>Actions<i class='fa fa-angle-down'></i></button><ul class='dropdown-menu'><li><a href='#'> View </a></li><li><a href='#'> Cancel </a></li></ul>
                                                             </div><br/></center>
                                                         </td>
                                                     </tr>                                             
diff --git a/public/Forwarder/shipmentarrange.html b/public/Forwarder/shipmentarrange.html
index 123b720..f6ed35b 100644
--- a/public/Forwarder/shipmentarrange.html
+++ b/public/Forwarder/shipmentarrange.html
@@ -67,6 +67,9 @@
 			.dt-buttons{
 			    margin-top: 0px !important;
 				}
+            .tooltip{
+                z-index: 20000 !important;
+            }
 			#mask {
 				display: none;
 				background: transparent;
@@ -406,6 +409,7 @@
                                             </div>
                                         </div>
                                     </div>
+
                                     <div class="portlet-body">
 									
                                         <div class="table-container">
@@ -472,7 +476,7 @@
                                                                     <div class="form-group">
                                                                         <label class="control-label col-md-3">Loading Date</label>
                                                                         <div class="col-md-9">
-                                                                            <input type="text" class="form-control"> </div>
+                                                                            <input type="date" class="form-control"> </div>
                                                                     </div>
                                                                 </div>
                                                                 <!--/span-->
@@ -488,7 +492,47 @@
                                                             <div class="row">
                                                                 <div class="col-md-6">
                                                                     <div class="form-group">
-                                                                        <label class="control-label col-md-3">Shipment No</label>
+                                                                        <label class="control-label col-md-3" >Shipment No <a class=" tooltips"  data-placement="right" data-original-title="Just key in your shipment ref if needed"><i class="fa fa-question-circle"></i></a></label>
+                                                                        <div class="col-md-9">
+                                                                        <input type="text" class="form-control"> </div>
+                                                                    </div>
+                                                                </div>
+                                                                <!--/span-->
+                                                                <div class="col-md-6">
+                                                                    <div class="form-group">
+                                                                        <label class="control-label col-md-3">Type of Container</label>
+                                                                        <div class="col-md-9">
+                                                                            <select class="form-control">
+                                                                                <option>Select</option>
+                                                                                <option>Dry Storage Container 10ft</option>
+                                                                                <option>Dry Storage Container 20ft</option>
+                                                                                <option>Dry Storage Container 40ft</option>
+                                                                                <option>Flat Rack Container</option>
+                                                                                <option>Open Top Container</option>
+                                                                                <option>Tunnel Container</option>
+                                                                                <option>Open Side Storage Container</option>
+                                                                                <option>Double Doors Container 20ft</option>
+                                                                                <option>Double Doors Container 40ft</option>
+                                                                                <option>Refrigerared ISO Container</option>
+                                                                                <option>Insulated or Thermal Container</option>
+                                                                                <option>Tanks</option>
+                                                                                <option>Cargo Storage Roll Container</option>
+                                                                                <option>Half Height Container</option>
+                                                                                <option>Car Container</option>
+                                                                                <option>Intermediate Bulk Shift Container</option>
+                                                                                <option>Drums</option>
+                                                                                <option>Special Purpose Container</option>
+                                                                                <option>Swap Bodies</option>
+                                                                            </select>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                                <!--/span-->
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col-md-6">
+                                                                    <div class="form-group">
+                                                                        <label class="control-label col-md-3">Departure Port</label>
                                                                         <div class="col-md-9">
                                                                             <input type="text" class="form-control"> </div>
                                                                     </div>
@@ -498,7 +542,7 @@
                                                                     <div class="form-group">
                                                                         <label class="control-label col-md-3">ETD</label>
                                                                         <div class="col-md-9">
-                                                                            <input type="text" class="form-control"> </div>
+                                                                            <input type="date" class="form-control"> </div>
                                                                     </div>
                                                                 </div>
                                                                 <!--/span-->
@@ -506,7 +550,7 @@
                                                             <div class="row">
                                                                 <div class="col-md-6">
                                                                     <div class="form-group">
-                                                                        <label class="control-label col-md-3">Loading Departure</label>
+                                                                        <label class="control-label col-md-3">Arrival Port</label>
                                                                         <div class="col-md-9">
                                                                             <input type="text" class="form-control"> </div>
                                                                     </div>
@@ -516,24 +560,53 @@
                                                                     <div class="form-group">
                                                                         <label class="control-label col-md-3">ETA</label>
                                                                         <div class="col-md-9">
-                                                                            <input type="text" class="form-control"> </div>
+                                                                            <input type="date" class="form-control"> </div>
                                                                     </div>
                                                                 </div>
+                                                                </div>
                                                                 <!--/span-->
-                                                            </div>
-                                                            <div class="row">
+                                                        <div class="row">
+                                                                <div class="col-md-6">
+                                                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<h4><b>Vehicle & Driver</b></h4>
+                                                                </div>
+                                                                <!--/span-->
+                                                                <div class="col-md-6">
+                                                                </div>
+                                                                <!--/span-->
+                                                        </div>
+                                                        <div class="row">
                                                                 <div class="col-md-6">
                                                                     <div class="form-group">
-                                                                        <label class="control-label col-md-3">Loading Arrival</label>
+                                                                        <label class="control-label col-md-3">Trailer No</label>
                                                                         <div class="col-md-9">
                                                                             <input type="text" class="form-control"> </div>
                                                                     </div>
                                                                 </div>
-                                                                <!--/span-->
                                                                 <div class="col-md-6">
+                                                                    <div class="form-group">
+                                                                        <label class="control-label col-md-3">Driver Name</label>
+                                                                        <div class="col-md-9">
+                                                                            <input type="text" class="form-control"> </div>
                                                                     </div>
                                                                 </div>
-                                                                <!--/span-->
+                                                        </div>
+                                                        <div class="row">
+                                                                <div class="col-md-6">
+                                                                    <div class="form-group">
+                                                                        <label class="control-label col-md-3">Driver Contact No</label>
+                                                                        <div class="col-md-9">
+                                                                            <input type="text" class="form-control"> </div>
+                                                                    </div>
+                                                                </div>
+                                                                <div class="col-md-6">
+                                                                    <div class="form-group">
+                                                                        <label class="control-label col-md-3">Driver I/C No</label>
+                                                                        <div class="col-md-9">
+                                                                            <input type="text" class="form-control"> </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+
                                                         <div class="row">
                                                                 <div class="col-md-6">
                                                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<h4><b>Loading Venue</b></h4>
@@ -546,28 +619,11 @@
                                                             <div class="row">
                                                                 <div class="col-md-6">
                                                                     <div class="form-group">
-                                                                        <label class="control-label col-md-3">Trailer No</label>
+                                                                        <label class="control-label col-md-3">Loading Address</label>
                                                                         <div class="col-md-9">
                                                                             <input type="text" class="form-control"> </div>
                                                                     </div>
                                                                 </div>
-                                                                <div class="col-md-6">
-                                                                    <div class="form-group">
-                                                                        <label class="control-label col-md-3">Area</label>
-                                                                        <div class="col-md-9">
-                                                                            <input type="text" class="form-control"> </div>
-                                                                    </div>
-                                                                </div>
-                                                            </div>
-                                                            <div class="row">
-                                                                <div class="col-md-6">
-                                                                    <div class="form-group">
-                                                                        <label class="control-label col-md-3">Driver Name</label>
-                                                                        <div class="col-md-9">
-                                                                            <input type="text" class="form-control"> </div>
-                                                                    </div>
-                                                                </div>
-                                                                <!--/span-->
                                                                 <div class="col-md-6">
                                                                     <div class="form-group">
                                                                         <label class="control-label col-md-3">Country</label>
@@ -575,13 +631,11 @@
                                                                             <input type="text" class="form-control"> </div>
                                                                     </div>
                                                                 </div>
-                                                                <!--/span-->
                                                             </div>
-                                                            <!--/row-->
                                                             <div class="row">
                                                                 <div class="col-md-6">
                                                                     <div class="form-group">
-                                                                        <label class="control-label col-md-3">Driver Contact No</label>
+                                                                        <label class="control-label col-md-3">Area</label>
                                                                         <div class="col-md-9">
                                                                             <input type="text" class="form-control"> </div>
                                                                     </div>
@@ -608,18 +662,19 @@
                                                                 <!--/span-->
                                                                 <div class="col-md-6">
                                                                     <div class="form-group">
-                                                                        <label class="control-label col-md-3">Contact Person No</label>
+                                                                        <label class="control-label col-md-3">Contact No</label>
                                                                         <div class="col-md-9">
                                                                             <input type="text" class="form-control"> </div>
                                                                     </div>
                                                                 </div>
                                                                 <!--/span-->
                                                             </div>
+                                                            <!--/row-->
                                                             <div class="row">
-                                                                <div class="col-md-6">
+                                                                <div class="col-md-12">
                                                                     <div class="form-group">
                                                                         <label class="control-label col-md-3">Remark</label>
-                                                                        <div class="col-md-9">
+                                                                        <div class="col-md-7">
                                                                             <textarea class="form-control"> </textarea>
                                                                     </div>
                                                                 </div>
@@ -651,43 +706,61 @@
                                                     <th width="5">No</th>
                                                     <th width="10">Date</th>
                                                     <th width="10">Order No</th>
-                                                    <th width="10">Action</th>
+                                                    <th width="10">Total CBM</th>
+                                                    <th width="10">Total Weight</th>
+                                                    <th width="10">Remark</th>
+                                                    <th width="10">Select</th>
                                                 </tr>
                                             </thead>
                                             <tbody>
                                                 <tr>
                                                    <td>1</td>
                                                    <td>03-08-2017</td>
-                                                   <td>014567</td> 
+                                                   <td ><a data-toggle="modal" href ='#preview'>014567</a></td>
+                                                   <td>10 CBM</td>
+                                                   <td>5 kg</td> 
+                                                   <th contenteditable="true">Any remark</th>
                                                    <th><input type="checkbox" class="checkboxes"></th>
                                                 </tr>
                                                 <tr>
                                                    <td>2</td>
                                                    <td>04-08-2017</td>
-                                                   <td>014567</td> 
+                                                   <td><a data-toggle="modal" href ='#preview'>014567</a></td> 
+                                                   <td>11 CBM</td>
+                                                   <td>6 kg</td>
+                                                   <th contenteditable="true">Any remark</th>
                                                    <th><input type="checkbox" class="checkboxes"></th>
                                                 </tr>
                                                 <tr>
                                                    <td>3</td>
                                                    <td>05-08-2017</td>
-                                                   <td>014567</td> 
+                                                   <td><a data-toggle="modal" href ='#preview'>014567</a></td>
+                                                   <td>12 CBM</td>
+                                                   <td>7 kg</td> 
+                                                   <th contenteditable="true">Any remark</th>
                                                    <th><input type="checkbox" class="checkboxes"></th>
                                                 </tr>
                                             </tbody>
                                             </table>
                                             <div  class="form-group">
-                                                <label class="control-label col-md-3">Message</label>
+                                                <label class="control-label col-md-3">Notification</label>
                                                 <div class="col-md-7">
                                                 <textarea id="message" class="form-control" rows="10">
-CIEF Delivery Message
+Shipment Notification
 
-Order No: <<order_no>> 
-Delivery Date: 03-07-2017
-Driver Name: Bob 
-Driver Contact No: 013-3456789
-Vehicle No: WAA 123 C
+Order No: #012345 
+From Supplier: Bob Supplier
+Total Quantity: 10 Pallet
+Total CBM: 7 CBM
+ETD: 10-10-2017
+ETA: 15-10-2017
+EDD: 17-10-2017
 
-* Kindly proceed to the messenger to confirm
+*ETD = Estimated Time Departure
+ ETA = Estimated Time Arrived
+ EDD = Estimated Delivery Date
+
+[Forwarder Company Name]
 </textarea>
                                             </div>
                                             </div>
@@ -729,6 +802,150 @@ Vehicle No: WAA 123 C
 							<!-- /.modal-dialog -->
 						</div>
 
+                <div class="modal fade" id="preview" tabindex="-1" role="preview" aria-hidden="true">
+                    <div class="modal-dialog modal-lg">
+                        <div class="modal-content">
+                            <div class="modal-body">    
+                                <div class="row">
+                                    <div class="portlet box green">
+                                        <div class="portlet-title">
+                                            <div class="caption">
+                                                <i class="fa fa-cogs"></i><strong>Packing List</strong> </div>
+                                            <div class="actions">
+                                                <div class="btn-group">
+                                                    <a class="btn white btn-outline btn-circle" href="javascript:;" data-toggle="dropdown">
+                                                        <i class="fa fa-share"></i>
+                                                        <span class="hidden-xs"> Actions </span>
+                                                        <i class="fa fa-angle-down"></i>
+                                                    </a>
+                                                    <ul class="dropdown-menu pull-right" id="sample_3_tools">
+                                                        <li>
+                                                            <a href="javascript:;" data-action="0" class="tool-action">
+                                                                <i class="icon-printer"></i> Print</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="javascript:;" data-action="1" class="tool-action">
+                                                                <i class="icon-check"></i> Copy</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="javascript:;" data-action="2" class="tool-action">
+                                                                <i class="icon-doc"></i> PDF</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="javascript:;" data-action="3" class="tool-action">
+                                                                <i class="icon-paper-clip"></i> Excel</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="javascript:;" data-action="4" class="tool-action">
+                                                                <i class="icon-cloud-upload"></i> CSV</a>
+                                                        </li>
+                                                        <li class="divider"> </li>
+                                                        <li>
+                                                            <a href="javascript:;" data-action="5" class="tool-action">
+                                                                <i class="icon-refresh"></i> Reload</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="portlet-body">
+                                            <div class="table-container">
+                                                <table id="table1" class="table table-bordered table-striped">
+                                                    <thead>
+                                                        <tr>
+                                                            <th rowspan="2">No </th>
+                                                            <th rowspan="2">Product Name</th>
+                                                            <th rowspan="2">Model</th>
+                                                            <th rowspan="2">UOM</th>
+                                                            <th rowspan="2">Qty</th>
+                                                            <th colspan="3">CMB</th>
+                                                            <th colspan="2">Weight</th>
+                                                            <th rowspan="2">Photo</th>
+                                                            <th rowspan="2">Remark</th>
+                                                        </tr>
+                                                        <tr>
+                                                            <td>Height</td>
+                                                            <td>Weight</td>
+                                                            <td>Depth</td>
+                                                            <td>Cross</td>
+                                                            <td>Nett</td>
+                                                        </tr>
+
+                                                    </thead>
+                                                    <tbody>
+
+                                                        <tr>
+                                                            <td>1 </td>
+                                                            <td>Television </td>
+                                                            <td>CS110 </td>
+                                                            <td>Unit </td>
+                                                            <td>10 </td>
+                                                            <td>12 </td>
+                                                            <td>15</td>
+                                                            <td>12</td> 
+                                                            <td>12</td>
+                                                            <td>15</td>    
+                                                            <td><img src="../assets/global/img/tv.jpg" alt="" style="width:100px;height:75px;" /></td>
+                                                            <td> </td>
+
+
+                                                        </tr>
+                                                        <tr>
+                                                            <td>2 </td>
+                                                            <td>Tire </td>
+                                                            <td>CS251 </td>
+                                                            <td>Unit </td>
+                                                            <td>20 </td>
+                                                            <td>12 </td>
+                                                            <td>15</td>
+                                                            <td>12</td> 
+                                                            <td>12</td>
+                                                            <td>15</td> 
+                                                            <td><img src="../assets/global/img/tire.jpg" alt="" style="width:100px;height:100px;" /> </td>
+                                                            <td> </td>
+
+                                                        </tr>
+                                                        <tr>
+                                                            <td>3 </td>
+                                                            <td>Chair </td>
+                                                            <td>CS486 </td>
+                                                            <td>Unit </td>
+                                                            <td>5 </td>
+                                                            <td>12 </td>
+                                                            <td>15</td>
+                                                            <td>12</td> 
+                                                            <td>12</td>
+                                                            <td>15</td> 
+                                                            <td><img src="../assets/global/img/chair.jpg" alt="" style="width:100px;height:100px;" />  </td>
+                                                            <td> </td>
+
+                                                        </tr>
+                                                        <tr>
+                                                            <td>4 </td>
+                                                            <td>Table </td>
+                                                            <td>CS125 </td>
+                                                            <td>Unit </td>
+                                                            <td>5 </td>
+                                                            <td>12 </td>
+                                                            <td>15</td>
+                                                            <td>12</td> 
+                                                            <td>12</td>
+                                                            <td>15</td> 
+                                                            <td><img src="../assets/global/img/table.jpg" alt="" style="width:100px;height:100px;" /> </td>
+                                                            <td> </td>
+
+                                                        </tr>
+                                                    </tbody>
+                                                </table>
+                                            </div>
+                                        </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                     </div>
+
 						
 						<div class="modal fade in" id="reason" tabindex="-1" role="basic" aria-hidden="true">
 							<div class="modal-dialog">
@@ -787,7 +1004,7 @@ Vehicle No: WAA 123 C
                                         
                                         </div>
 
-                                        <div class="tab-pane active" id="tab_1_1" class="col-md-12">
+                                        <div class="tab-pane active" id="tab_1_1" class="col-md-17">
                                     <div class="portlet light bordered">
                                         <div class="portlet-title">
                                             <div class="caption">
@@ -796,60 +1013,41 @@ Vehicle No: WAA 123 C
                                             </div>
                                         </div>
                                          <div class="tab-pane active" id="tab1">
-                                                            <div class="row" class="col-md-9">
-                                                                <div class="col-md-6">
-                                                                    <div class="form-group">
-                                                                        <p>Loading Date : 02-02-2017</p>
-                                                                        
+                                                            <div class="row static-info">
+                                                                        <div class="col-md-5 name"> Loading Date : 02-02-2017 </div>
+                                                                        <div class="col-md-7 value"> Container No : CTN121 </div>
                                                                     </div>
+                                                            <div class="row static-info">
+                                                                        <div class="col-md-5 name"> Shipping No : 12345 </div>
+                                                                        <div class="col-md-7 value"> Type of Container : Tank </div>
+                                                                    </div>
+                                                            <div class="row static-info">
+                                                                        <div class="col-md-5 name"> Departure Port : Guangzhou </div>
+                                                                        <div class="col-md-7 value"> ETD : 03-02-2017 </div>
+                                                                    </div>
+                                                            <div class="row static-info">
+                                                                        <div class="col-md-5 name"> Arrival Port: Port Klang </div>
+                                                                        <div class="col-md-7 value"> ETA : 04-02-2017 </div>
+                                                                    </div>
+                                                                <!--/span-->
+                                                        <div class="row">
+                                                                <div class="col-md-6">
+                                                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<h5><b>Vehicle & Driver</b></h5>
                                                                 </div>
                                                                 <!--/span-->
                                                                 <div class="col-md-6">
-                                                                    <div class="form-group">
-                                                                        <p>Container No : CTN121</p>
-                                                                    </div>
                                                                 </div>
                                                                 <!--/span-->
-                                                            </div>
-                                                            <div class="row">
-                                                                <div class="col-md-6">
-                                                                    <div class="form-group">
-                                                                        <p>Shipping No : 12345</p>
+                                                        </div>
+                                                         <div class="row static-info">
+                                                                        <div class="col-md-5 name"> Trailer No : WA 234 K</div>
+                                                                        <div class="col-md-7 value"> Driver Name : Yew </div>
                                                                     </div>
-                                                                </div>
-                                                                <!--/span-->
-                                                                <div class="col-md-6">
-                                                                    <div class="form-group">
-                                                                        <p>ETD : 03-02-2017</p>
+                                                        <div class="row static-info">
+                                                                        <div class="col-md-5 name"> Driver Contact No :012-3456789 </div>
+                                                                        <div class="col-md-7 value"> Driver I/C No : 880101-08-5433 </div>
                                                                     </div>
-                                                                </div>
-                                                                <!--/span-->
-                                                            </div>
-                                                            <div class="row">
-                                                                <div class="col-md-6">
-                                                                    <div class="form-group">
-                                                                        <p>Loading Departure : Guangzhou
-                                                                    </div>
-                                                                </div>
-                                                                <!--/span-->
-                                                                <div class="col-md-6">
-                                                                    <div class="form-group">
-                                                                        <p>ETA : 04-02-2017</p>
-                                                                    </div>
-                                                                </div>
-                                                                <!--/span-->
-                                                            </div>
-                                                            <div class="row">
-                                                                <div class="col-md-6">
-                                                                    <div class="form-group">
-                                                                        <p>Loading Arrival : Port Klang</p>
-                                                                    </div>
-                                                                </div>
-                                                                <!--/span-->
-                                                                <div class="col-md-6">
-                                                                    </div>
-                                                                </div>
-                                                                <!--/span-->
+
                                                         <div class="row">
                                                                 <div class="col-md-6">
                                                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<h5><b>LOADING VENUE</b></h5>
@@ -859,70 +1057,74 @@ Vehicle No: WAA 123 C
                                                                 </div>
                                                                 <!--/span-->
                                                         </div>
-                                                            <div class="row">
-                                                                <div class="col-md-6">
-                                                                    <div class="form-group">
-                                                                        <p>Trailer No : JLM 1234</p>
+                                                        <div class="row static-info">
+                                                                        <div class="col-md-5 name"> Loading Address : 3, Bandar Utama </div>
+                                                                        <div class="col-md-7 value"> Country : Malaysia </div>
                                                                     </div>
-                                                                </div>
-                                                                <div class="col-md-6">
-                                                                    <div class="form-group">
-                                                                        <p>Area : Semenyih</p>
+                                                            <div class="row static-info">
+                                                                        <div class="col-md-5 name"> Area : Klang </div>
+                                                                        <div class="col-md-7 value"> Postcode : 62150 </div>
                                                                     </div>
-                                                                </div>
-                                                            </div>
-                                                            <div class="row">
-                                                                <div class="col-md-6">
-                                                                    <div class="form-group">
-                                                                        <p>Driver Name : Bob</p>
+                                                            <div class="row static-info">
+                                                                        <div class="col-md-5 name"> Contact Person : Lisa </div>
+                                                                        <div class="col-md-7 value"> Contact No : 011-2345678 </div>
                                                                     </div>
-                                                                </div>
-                                                                <!--/span-->
-                                                                <div class="col-md-6">
-                                                                    <div class="form-group">
-                                                                        <p>Country : Malaysia</p>
+                                                            <div class="row static-info">
+                                                                        <div class="col-md-7 name"> Remark : On the Way to delivered </div>
                                                                     </div>
-                                                                </div>
-                                                                <!--/span-->
-                                                            </div>
+                                                                    <br>
+                                                                    <br>
                                                             <!--/row-->
-                                                            <div class="row">
-                                                                <div class="col-md-6">
-                                                                    <div class="form-group">
-                                                                        <p>Driver Contact No : 0123456789</p>
-                                                                    </div>
-                                                                </div>
-                                                                <!--/span-->
-                                                                <div class="col-md-6">
-                                                                    <div class="form-group">
-                                                                        <p>Postcode : 62150</p>
-                                                                    </div>
-                                                                </div>
-                                                                <!--/span-->
-                                                            </div>
-                                                            <!--/row-->
-                                                            <div class="row">
-                                                                <div class="col-md-6">
-                                                                    <div class="form-group">
-                                                                        <p>Contact Person : Kyle</p>
-                                                                    </div>
-                                                                </div>
-                                                                <!--/span-->
-                                                                <div class="col-md-6">
-                                                                    <div class="form-group">
-                                                                        <p>Contact Person No : 0123456789</p>
-                                                                    </div>
-                                                                </div>
-                                                                <!--/span-->
-                                                            </div>
-                                                            <div class="row">
-                                                                <div class="col-md-6">
-                                                                    <div class="form-group">
-                                                                        <p>Remark : On the Way to delivered</p>
-                                                                    </div>
-                                                                </div>
-                                                                <!--/span-->
+                                                <div class="col-md-13">
+                                    <div class="portlet light bordered">
+                                        <div class="portlet-title">
+                                            <div class="caption">
+                                                <i class="icon-social-dribbble font-green hide"></i>
+                                                <span class="caption-subject font-dark bold uppercase">Order List</span>
+                                            </div>
+                                        </div>
+                                        <div class="portlet-body">
+                                            <table class="table table-bordered table-hover">
+                                            <thead>
+                                                <tr>
+                                                    <th width="5">No</th>
+                                                    <th width="10">Date</th>
+                                                    <th width="10">Order No</th>
+                                                    <th width="10">Total CBM</th>
+                                                    <th width="10">Total Weight</th>
+                                                    <th width="10">Remark</th>
+                                                </tr>
+                                            </thead>
+                                            <tbody>
+                                                <tr>
+                                                   <td>1</td>
+                                                   <td>03-08-2017</td>
+                                                   <td >014567</td>
+                                                   <td>10 CBM</td>
+                                                   <td>5 kg</td> 
+                                                   <th contenteditable="true">Any remark</th>
+                                                </tr>
+                                                <tr>
+                                                   <td>2</td>
+                                                   <td>04-08-2017</td>
+                                                   <td>014567</td> 
+                                                   <td>11 CBM</td>
+                                                   <td>6 kg</td>
+                                                   <th contenteditable="true">Any remark</th>
+                                                </tr>
+                                                <tr>
+                                                   <td>3</td>
+                                                   <td>05-08-2017</td>
+                                                   <td>014567</td>
+                                                   <td>12 CBM</td>
+                                                   <td>7 kg</td> 
+                                                   <th contenteditable="true">Any remark</th>
+                                                </tr>
+                                            </tbody>
+                                            </table>
+                                        </div>
                                                             </div>
+                                                        </div>
                                                             </div>
                                                     </div>
                                             
@@ -1011,7 +1213,7 @@ Vehicle No: WAA 123 C
                                             <p class="caption-subject font-red">Release Date : <input type="date" name="" ></p>
                                         <div class="row">
                                             <div  class="col-md-offset-4 col-md-9">
-                                                <a href="javascript:;" class="btn btn-outline green button-next"> Submit</a>
+                                                <a href="chat.html" class="btn btn-outline green button-next"> Submit</a>
                                                 <button type="button" class="btn dark btn-outline" data-dismiss="modal">Close</button>
                                                 </div>
                                                 </div>
@@ -1076,7 +1278,7 @@ Vehicle No: WAA 123 C
         <script src="../assets/layouts/layout/scripts/demo.min.js" type="text/javascript"></script>
         <script src="../assets/layouts/global/scripts/quick-sidebar.min.js" type="text/javascript"></script>
         <script src="../assets/layouts/global/scripts/quick-nav.min.js" type="text/javascript"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
+    
         <!-- END THEME LAYOUT SCRIPTS -->        
 		
 		<script>
@@ -1084,12 +1286,12 @@ Vehicle No: WAA 123 C
 		
 			
             var dataSet = [
-				["1","CTN121","789ABC","01-08-2017","<span style='color:red'>01-08-2017 </span>","<span style='color:red'>05-08-2017 </span>","12345","Driver Name:Bob <br>Driver No:0123456789<br>Contact Person:Ying<br>Contact No:0112345678<br>Venue:61250, Dongguan","<span style='color:red'>Customs Examination </span><br/><div class='btn-group'><button class='btn green btn-xs btn-circle btn-outline dropdown-toggle' data-toggle='dropdown'>Actions<i class='fa fa-angle-down'></i></button><ul class='dropdown-menu'><li><a  data-toggle='modal' href='#boxes'>View </a></li><li><a href='javascript:;'> Delete</a></li><li><a  data-toggle='modal' href='#profile'> Customs Examination</a></li></ul></div>","Any Remark","<span style='color:red'><strong>03-07-2017<br/>Delayed</strong></span>","Delivery Request <span style='color:#F1C40F;font-weight: 700;'>Sent</span>", "Not Completed"],
-				["2","CTN122","789ABC","01-08-2017","01-08-2017","01-08-2017","43657","Driver Name:Bob <br>Driver No:0123456789<br>Contact Person:Ying<br>Contact No:0112345678<br>Venue:61250, Dongguan","Delivered <br/><div class='btn-group'><button class='btn green btn-xs btn-circle btn-outline dropdown-toggle' data-toggle='dropdown'>Actions<i class='fa fa-angle-down'></i></button><ul class='dropdown-menu'><li><a  data-toggle='modal' href='#boxes'> View </a></li><li><a href='javascript:;'> Delete</a></li><li><a  data-toggle='modal' href='#profile'> Customs Examination</a></li></ul></div>","Any Remark","<span style='color:red'><strong>03-07-2017<br/>Delayed</strong></span>","Delivery Request <span style='color:#F1C40F;font-weight: 700;'>Sent</span>", "Not Completed"],
-				["3","CTN123","789ABC","01-08-2017","01-08-2017","01-08-2017","23532","Driver Name:Bob <br>Driver No:0123456789<br>Contact Person:Ying<br>Contact No:0112345678<br>Venue:86000, Hong Kong","Delivered<br/><div class='btn-group'><button class='btn green btn-xs btn-circle btn-outline dropdown-toggle' data-toggle='dropdown'>Actions<i class='fa fa-angle-down'></i></button><ul class='dropdown-menu'><li><a  data-toggle='modal' href='#boxes'>View </a></li><li><a href='javascript:;'> Delete</a></li><li><a  data-toggle='modal' href='#profile'> Customs Examination</a></li></ul></div>","Any Remark","<span style='color:red'><strong>03-07-2017<br/>Delayed</strong></span>","Delivery Request <span style='color:#F1C40F;font-weight: 700;'>Sent</span>", "Not Completed"],
-				["4","CTN124","789ABC","01-08-2017","<span style='color:red'>02-08-2017 </span>","<span style='color:red'>04-08-2017 </span>","68679","Driver Name:Bob <br>Driver No:0123456789<br>Contact Person:Ying<br>Contact No:0112345678<br>Venue:61500, Guangzhou","<span style='color:red'>Customs Examination </span><br/><div class='btn-group'><button class='btn green btn-xs btn-circle btn-outline dropdown-toggle' data-toggle='dropdown'>Actions<i class='fa fa-angle-down'></i></button><ul class='dropdown-menu'><li><a  data-toggle='modal' href='#boxes'>View </a></li><li><a href='javascript:;'> Delete</a></li><li><a  data-toggle='modal' href='#profile'> Customs Examination</a></li></ul></div>","Any Remark","<span style='color:red'><strong>03-07-2017<br/>Delayed</strong></span>","Delivery Request <span style='color:#F1C40F;font-weight: 700;'>Sent</span>", "Not Completed"],
-				["5","CTN125","789ABC","01-08-2017","01-08-2017","01-08-2017","43665","Driver Name:Bob <br>Driver No:0123456789<br>Contact Person:Ying<br>Contact No:0112345678<br>Venue:61500, Guangzhou","Delivered<br/><div class='btn-group'><button class='btn green btn-xs btn-circle btn-outline dropdown-toggle' data-toggle='dropdown'>Actions<i class='fa fa-angle-down'></i></button><ul class='dropdown-menu'><li><a  data-toggle='modal' href='#boxes'> View </a></li><li><a href='javascript:;'> Delete</a></li><li><a  data-toggle='modal' href='#profile'> Customs Examination</a></li></ul></div>","Any Remark","<span style='color:red'><strong>03-07-2017<br/>Delayed</strong></span>","Delivery Request <span style='color:#F1C40F;font-weight: 700;'>Sent</span>", "Not Completed"],				
-				["6","CTN130","789ABC","01-08-2017","01-08-2017","01-08-2017","89706","Driver Name:Bob <br>Driver No:0123456789<br>Contact Person:Ying<br>Contact No:0112345678<br>Venue:86000, Hong Kong","Delivered<br/><div class='btn-group'><button class='btn green btn-xs btn-circle btn-outline dropdown-toggle' data-toggle='dropdown'>Actions<i class='fa fa-angle-down'></i></button><ul class='dropdown-menu'><li><a  data-toggle='modal' href='#boxes'> View </a></li><li><a href='javascript:;'> Delete</a></li><li><a  data-toggle='modal' href='#profile'> Customs Examination</a></li></ul></div>","Any Remark","<span style='color:red'><strong>03-07-2017<br/>Delayed</strong></span>","Delivery Request <span style='color:#F1C40F;font-weight: 700;'>Sent</span>", "Not Completed"],
+				["1","CTN121","789ABC","Tunnel Container","01-08-2017","<span style='color:red'>01-08-2017 </span>","<span style='color:red'>05-08-2017 </span>","12345","Driver Name:Bob <br>Driver No:0123456789<br>Contact Person:Ying<br>Contact No:0112345678<br>Venue:61250, Dongguan","<span style='color:red'>Customs Examination </span><br/><div class='btn-group'><button class='btn green btn-xs btn-circle btn-outline dropdown-toggle' data-toggle='dropdown'>Actions<i class='fa fa-angle-down'></i></button><ul class='dropdown-menu'><li><a  data-toggle='modal' href='#boxes'>View </a></li><li><a href='javascript:;'> Delete</a></li><li><a  data-toggle='modal' href='#profile'> Customs Examination</a></li></ul></div>","Any Remark","<span style='color:red'><strong>03-07-2017<br/>Delayed</strong></span>","Delivery Request <span style='color:#F1C40F;font-weight: 700;'>Sent</span>", "Not Completed"],
+				["2","CTN122","789ABC","Flat Rack<br>Container","01-08-2017","01-08-2017","01-08-2017","43657","Driver Name:Bob <br>Driver No:0123456789<br>Contact Person:Ying<br>Contact No:0112345678<br>Venue:61250, Dongguan","Delivered <br/><div class='btn-group'><button class='btn green btn-xs btn-circle btn-outline dropdown-toggle' data-toggle='dropdown'>Actions<i class='fa fa-angle-down'></i></button><ul class='dropdown-menu'><li><a  data-toggle='modal' href='#boxes'> View </a></li><li><a href='javascript:;'> Delete</a></li><li><a  data-toggle='modal' href='#profile'> Customs Examination</a></li></ul></div>","Any Remark","<span style='color:red'><strong>03-07-2017<br/>Delayed</strong></span>","Delivery Request <span style='color:#F1C40F;font-weight: 700;'>Sent</span>", "Not Completed"],
+				["3","CTN123","789ABC","Dry Storage<br> Container 10ft","01-08-2017","01-08-2017","01-08-2017","23532","Driver Name:Bob <br>Driver No:0123456789<br>Contact Person:Ying<br>Contact No:0112345678<br>Venue:86000, Hong Kong","Delivered<br/><div class='btn-group'><button class='btn green btn-xs btn-circle btn-outline dropdown-toggle' data-toggle='dropdown'>Actions<i class='fa fa-angle-down'></i></button><ul class='dropdown-menu'><li><a  data-toggle='modal' href='#boxes'>View </a></li><li><a href='javascript:;'> Delete</a></li><li><a  data-toggle='modal' href='#profile'> Customs Examination</a></li></ul></div>","Any Remark","<span style='color:red'><strong>03-07-2017<br/>Delayed</strong></span>","Delivery Request <span style='color:#F1C40F;font-weight: 700;'>Sent</span>", "Not Completed"],
+				["4","CTN124","789ABC","Double Doors<br> Container 20ft","01-08-2017","<span style='color:red'>02-08-2017 </span>","<span style='color:red'>04-08-2017 </span>","68679","Driver Name:Bob <br>Driver No:0123456789<br>Contact Person:Ying<br>Contact No:0112345678<br>Venue:61500, Guangzhou","<span style='color:red'>Customs Examination </span><br/><div class='btn-group'><button class='btn green btn-xs btn-circle btn-outline dropdown-toggle' data-toggle='dropdown'>Actions<i class='fa fa-angle-down'></i></button><ul class='dropdown-menu'><li><a  data-toggle='modal' href='#boxes'>View </a></li><li><a href='javascript:;'> Delete</a></li><li><a  data-toggle='modal' href='#profile'> Customs Examination</a></li></ul></div>","Any Remark","<span style='color:red'><strong>03-07-2017<br/>Delayed</strong></span>","Delivery Request <span style='color:#F1C40F;font-weight: 700;'>Sent</span>", "Not Completed"],
+				["5","CTN125","789ABC","Flat Rack<br>Container","01-08-2017","01-08-2017","01-08-2017","43665","Driver Name:Bob <br>Driver No:0123456789<br>Contact Person:Ying<br>Contact No:0112345678<br>Venue:61500, Guangzhou","Delivered<br/><div class='btn-group'><button class='btn green btn-xs btn-circle btn-outline dropdown-toggle' data-toggle='dropdown'>Actions<i class='fa fa-angle-down'></i></button><ul class='dropdown-menu'><li><a  data-toggle='modal' href='#boxes'> View </a></li><li><a href='javascript:;'> Delete</a></li><li><a  data-toggle='modal' href='#profile'> Customs Examination</a></li></ul></div>","Any Remark","<span style='color:red'><strong>03-07-2017<br/>Delayed</strong></span>","Delivery Request <span style='color:#F1C40F;font-weight: 700;'>Sent</span>", "Not Completed"],				
+				["6","CTN130","789ABC","Swap Bodies","01-08-2017","01-08-2017","01-08-2017","89706","Driver Name:Bob <br>Driver No:0123456789<br>Contact Person:Ying<br>Contact No:0112345678<br>Venue:86000, Hong Kong","Delivered<br/><div class='btn-group'><button class='btn green btn-xs btn-circle btn-outline dropdown-toggle' data-toggle='dropdown'>Actions<i class='fa fa-angle-down'></i></button><ul class='dropdown-menu'><li><a  data-toggle='modal' href='#boxes'> View </a></li><li><a href='javascript:;'> Delete</a></li><li><a  data-toggle='modal' href='#profile'> Customs Examination</a></li></ul></div>","Any Remark","<span style='color:red'><strong>03-07-2017<br/>Delayed</strong></span>","Delivery Request <span style='color:#F1C40F;font-weight: 700;'>Sent</span>", "Not Completed"],
             ];
 			
             var dataSet2 = 
@@ -1158,8 +1360,9 @@ Vehicle No: WAA 123 C
 				fixedHeader:false,
                 columns: [
 					{ title: "No" },
-					{ title: 'Container<br>No <br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_1\')"></span>' },
-					{ title: 'Shipment <br>Reference<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_2\')"></span>' },
+					{ title: 'Shipment<br>No <br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_1\')"></span>' },
+					{ title: 'Container<br>No<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_2\')"></span>' },
+                    { title: 'Type of<br>Container<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_2\')"></span>' },
 					{ title: 'Loading<br> Date<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_3\')"></span>' },
 					{ title: 'ETD<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_9\')"></span>' },
                     { title: 'ETA<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_10\')"></span>' },
@@ -1170,7 +1373,7 @@ Vehicle No: WAA 123 C
 				],
 
                 initComplete: function () {
-                    configFilter(this, [1, 2,3, 4,5,6,7,8,9,10,11]);
+                    configFilter(this, [1, 2,3, 4,5,6,7,8,9,10,11,12]);
                 }
             });