diff --git a/public/Forwarder/custom.html b/public/Forwarder/custom.html
index 5a08a01..87a2ed6 100644
--- a/public/Forwarder/custom.html
+++ b/public/Forwarder/custom.html
@@ -1,300 +1,259 @@
 <!DOCTYPE html>
-<!-- 
-   Template Name: Metronic - Responsive Admin Dashboard Template build with Twitter Bootstrap 3.3.7
-   Version: 4.7.5
-   Author: KeenThemes
-   Website: http://www.keenthemes.com/
-   Contact: support@keenthemes.com
-   Follow: www.twitter.com/keenthemes
-   Dribbble: www.dribbble.com/keenthemes
-   Like: www.facebook.com/keenthemes
-   Purchase: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
-   Renew Support: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
-   License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
-   -->
-<!--[if IE 8]> 
-<html lang="en" class="ie8 no-js">
-   <![endif]-->
-<!--[if IE 9]> 
-   <html lang="en" class="ie9 no-js">
-      <![endif]-->
-<!--[if !IE]><!-->
 <html lang="en">
-<!--<![endif]-->
-<!-- BEGIN HEAD -->
+    <!--<![endif]-->
+    <!-- BEGIN HEAD -->
 
-<head>
-    <meta charset="utf-8" />
-    <title>IZYIM | Custom Declaration Document</title>
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta content="width=device-width, initial-scale=1" name="viewport" />
-    <meta content="Preview page of Metronic Admin Theme #1 for statistics, charts, recent events and reports" name="description" />
-    <meta content="" name="author" />
-    <!-- BEGIN GLOBAL MANDATORY STYLES -->
-    <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css" />
-    <link href="../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
-    <link href="../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
-    <link href="../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
-    <link href="../assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />
-    <!-- END GLOBAL MANDATORY STYLES -->
-    <!-- BEGIN PAGE LEVEL PLUGINS -->
-    <link href="../assets/global/plugins/datatables/datatables.min.css" rel="stylesheet" type="text/css" />
-    <link href="../assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.css" rel="stylesheet" type="text/css" />
-    <link href="../assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet" type="text/css" />
-    <!-- END PAGE LEVEL PLUGINS -->
-    <link href="../assets/global/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.css" rel="stylesheet" type="text/css" />
-    <link href="../assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet" type="text/css" />
-    <link href="../assets/global/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css" />
-    <link href="../assets/global/plugins/bootstrap-editable/bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet" type="text/css" />
-    <link href="../assets/global/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.css" rel="stylesheet" type="text/css" />
-    <link href="../assets/global/plugins/bootstrap-editable/inputs-ext/address/address.css" rel="stylesheet" type="text/css" />
-    <link href="../assets/global/plugins/select2/css/select2.min.css" rel="stylesheet" type="text/css" />
-    <link href="../assets/global/plugins/select2/css/select2-bootstrap.min.css" rel="stylesheet" type="text/css" />
-    <!-- BEGIN THEME GLOBAL STYLES -->
-    <link href="../assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
-    <link href="../assets/global/css/plugins.min.css" rel="stylesheet" type="text/css" />
-    <!-- END THEME GLOBAL STYLES -->
-    <!-- BEGIN THEME LAYOUT STYLES -->
-    <link href="../assets/layouts/layout/css/layout.min.css" rel="stylesheet" type="text/css" />
-    <link href="../assets/layouts/layout/css/themes/darkblue.min.css" rel="stylesheet" type="text/css" id="style_color" />
-    <link href="../assets/layouts/layout/css/custom.min.css" rel="stylesheet" type="text/css" />
-    <!-- END THEME LAYOUT STYLES -->
-    <style>
-        div.dt-button-collection {
-            margin-top: 70px;
-        }
-        .filterIcon {
-            height: 10px;
-            width: 10px;
-        }
-        .table td,
-        .table th {
-            font-size: 14px;
-            text-align: center;
-            vertical-align: middle;
-        }
-        .dataTables_wrapper .dataTables_filter {
-            float: left;
-            text-align: right;
-        }
-        .table thead tr th {
-            font-size: 14px;
-            text-align: center;
-            vertical-align: middle;
-        }
-        .modalFilter {
-            display: none;
-            height: auto;
-            position: absolute;
-            z-index: 10000001;
-        }
-        .modal-footer {
-            padding: 15px;
-            text-align: left;
-            border-top: 1px solid #e5e5e5;
-        }
-        .dt-buttons {
-            margin-top: 0px !important;
-        }
-        #mask {
-            display: none;
-            background: transparent;
-            position: fixed;
-            left: 0;
-            top: 0;
-            z-index: 1;
-            width: 100%;
-            height: 100%;
-            opacity: 1000;
-        }
-        @media (min-width: 992px) {
-            .page-content-wrapper .page-content {
-                margin-left: 200px;
+    <head>
+        <meta charset="utf-8" />
+        <title>IZYIM | Custom Declaration Document</title> 
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta content="width=device-width, initial-scale=1" name="viewport" />
+        <meta content="Preview page of Metronic Admin Theme #1 for statistics, charts, recent events and reports" name="description" />
+        <meta content="" name="author" />
+        <!-- BEGIN GLOBAL MANDATORY STYLES -->
+        <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css" />
+        <link href="../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
+        <link href="../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
+        <link href="../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
+        <link href="../assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />
+        <!-- END GLOBAL MANDATORY STYLES -->
+        <!-- BEGIN PAGE LEVEL PLUGINS -->
+        <link href="../assets/global/plugins/datatables/datatables.min.css" rel="stylesheet" type="text/css" />
+        <link href="../assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.css" rel="stylesheet" type="text/css" />
+        <link href="../assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet" type="text/css" />
+        <!-- END PAGE LEVEL PLUGINS -->
+        <!-- BEGIN THEME GLOBAL STYLES -->
+        <link href="../assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
+        <link href="../assets/global/css/plugins.min.css" rel="stylesheet" type="text/css" />
+        <!-- END THEME GLOBAL STYLES -->
+        <!-- BEGIN THEME LAYOUT STYLES -->
+        <link href="../assets/layouts/layout/css/layout.min.css" rel="stylesheet" type="text/css" />
+        <link href="../assets/layouts/layout/css/themes/darkblue.min.css" rel="stylesheet" type="text/css" id="style_color" />
+        <link href="../assets/layouts/layout/css/custom.min.css" rel="stylesheet" type="text/css" />
+        <!-- END THEME LAYOUT STYLES -->
+        <style>
+            div.dt-button-collection {
+                margin-top: 70px;
             }
-        }
-        @media (min-width: 992px) {
-            .page-sidebar {
-                width: 200px;
+            .table td, .table th {
+                font-size: 10px;
+                text-align:center;
+                vertical-align: middle;
+            }
+            .dataTables_wrapper .dataTables_filter {
                 float: left;
-                position: relative;
-                margin-right: -100%;
+                text-align: right;
+            }
+            .table thead tr th{
+                font-size: 10px;
+                text-align:center;
+                vertical-align: middle;
+            }
+            .filterIcon {
+                height: 10px;
+                width: 10px;
+            }
+            .modalFilter {
+                display: none;
+                height: auto;
+                position: absolute;
+                z-index: 10000001;
+                }
+            .modal-footer {
+                padding: 15px;
+                text-align: left;
+                border-top: 1px solid #e5e5e5;
+            }
+            .dt-buttons{
+                margin-top: 0px !important;
+                }
+            #mask {
+                display: none;
+                background: transparent;
+                position: fixed;
+                left: 0;
+                top: 0;
+                z-index: 1;
+                width: 100%;
+                height: 100%;
+                opacity: 1000;
             }
-        }
-        #example2_filter {
-            float: right;
-        }
-        .col_0 {
-            width: 50px !important;
-            padding-right: 0px !important;
-            padding-left: 0px !important;
-        }
-        .col_1 {
-            width: 50px !important;
-            padding-right: 0px !important;
-            padding-left: 0px !important;
-        }
-        .col_2 {
-            width: 50px !important;
-        }
-        .col_3 {
-            width: 60px !important;
-        }
-        .col_4 {
-            width: 60px !important;
-        }
-        .col_5 {
-            width: 60px !important;
-        }
-        .blue {
-            color: #337ab7;
-            line-height: 14px;
-            -webkit-font-smoothing: antialiased;
-            font: normal normal normal 14px/1 FontAwesome;
-            font-size: 14px;
-            text-rendering: auto;
-        }
-        .media-object-4 {
-            width: 35px;
-            position: right;
-            margin-left: 63%;
-            margin-top: 0.7%;
-        }
-        .modal-content {
-            width: 1000px;
-            position: center;
-            font: 14px;
-        }
-        .modal-dialog {
-            width: 1000px;
-        }
-        .q {
-            margin-right : 50px;
-        }
-    </style>
-    }
-</head>
-<!-- END HEAD -->
 
-<body class="page-header-fixed page-sidebar-closed-hide-logo page-content-white">
-    <div class="page-wrapper">
-        <!-- BEGIN HEADER -->
-        <div class="page-header navbar navbar-fixed-top">
-            <!-- BEGIN HEADER INNER -->
-            <div class="page-header-inner ">
-                <!-- BEGIN LOGO -->
-                <div class="page-logo">
-                    <div class="menu-toggler sidebar-toggler">
-                        <span></span>
+            @media (min-width: 992px) {
+                .page-content-wrapper .page-content {
+                margin-left: 200px;
+                }
+            }
+            
+            @media (min-width: 992px){
+                .page-sidebar {
+                    width: 200px;
+                    float: left;
+                    position: relative;
+                    margin-right: -100%;
+                }
+            }
+            #example2_filter{
+                float:right;
+            }
+            .col_0{
+                width: 50px !important;
+                padding-right: 0px !important;
+                padding-left: 0px !important;
+            }
+            .col_1{
+                width: 50px !important;
+                padding-right: 0px !important;
+                padding-left: 0px !important;
+            }
+            .col_2{
+                width: 50px !important;
+            }
+            .col_3{
+                width: 60px !important;
+            }
+            .col_4{
+                width: 60px !important;
+            }
+            .col_5{
+                width: 60px !important;
+            }
+            .blue{
+                color: #337ab7;
+                line-height: 14px;
+                -webkit-font-smoothing: antialiased;
+                font: normal normal normal 14px/1 FontAwesome;
+                font-size: 14px;
+                text-rendering: auto;
+                }               
+            .media-object-4 {
+                width: 35px;
+                position: right ;
+                margin-left: 63%;
+                margin-top:0.7%;
+            }
+            
+        </style>
+    </head>
+    <!-- END HEAD -->
+
+
+    <body class="page-header-fixed page-sidebar-closed-hide-logo page-content-white">
+        <div class="page-wrapper">
+            <!-- BEGIN HEADER -->
+            <div class="page-header navbar navbar-fixed-top">
+                <!-- BEGIN HEADER INNER -->
+                <div class="page-header-inner ">
+                    <!-- BEGIN LOGO -->
+                    <div class="page-logo">
+                        <div class="menu-toggler sidebar-toggler">
+                            <span></span>
+                        </div>
                     </div>
+                    <!-- END LOGO -->
+                    <!-- BEGIN RESPONSIVE MENU TOGGLER -->
+                    <a href="javascript:;" class="menu-toggler responsive-toggler" data-toggle="collapse" data-target=".navbar-collapse">
+                        <span></span>
+                    </a>
+                    <!-- END RESPONSIVE MENU TOGGLER -->
+                    <!-- BEGIN TOP NAVIGATION MENU -->
+                    <img style="border-radius:100%" class="media-object-4" src="../assets/layouts/layout/img/1.png" alt="...">
+                    <div class="top-menu">
+                        <ul class="nav navbar-nav pull-right">
+                            <!-- BEGIN USER LOGIN DROPDOWN -->
+                            <!-- DOC: Apply "dropdown-dark" class after below "dropdown-extended" to change the dropdown styte -->
+                            <li class="dropdown dropdown-user">
+                                <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
+                                    <img alt="" class="img-circle" src="../assets/layouts/layout/img/avatar3_small.jpg" />
+                                    <span class="username username-hide-on-mobile"> Syed Amir </span>
+                                    <i class="fa fa-angle-down"></i>
+                                </a>
+                                <ul class="dropdown-menu dropdown-menu-default">
+                                    <li>
+                                        <a href="profile.html">
+                                            <i class="icon-user"></i> My Profile </a>
+                                    </li>
+                                    <li>
+                                        <a href="login.html">
+                                            <i class="icon-key"></i> Log Out </a>
+                                    </li>
+                                </ul>
+                            </li>
+                            <!-- END USER LOGIN DROPDOWN -->
+                            
+                        </ul>
+                    </div>
+                    <!-- END TOP NAVIGATION MENU -->
                 </div>
-                <!-- END LOGO -->
-                <!-- BEGIN RESPONSIVE MENU TOGGLER -->
-                <a href="javascript:;" class="menu-toggler responsive-toggler" data-toggle="collapse" data-target=".navbar-collapse">
-                    <span></span>
-                </a>
-                <!-- END RESPONSIVE MENU TOGGLER -->
-                <!-- BEGIN TOP NAVIGATION MENU -->
-                <img style="border-radius:100%" class="media-object-4" src="../assets/layouts/layout/img/1.png" alt="...">
-                <div class="top-menu">
-                    <ul class="nav navbar-nav pull-right">
-                        <!-- BEGIN USER LOGIN DROPDOWN -->
-                        <!-- DOC: Apply "dropdown-dark" class after below "dropdown-extended" to change the dropdown styte -->
-                        <li class="dropdown dropdown-user">
-                            <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
-                                <img alt="" class="img-circle" src="../assets/layouts/layout/img/avatar3_small.jpg" />
-                                <span class="username username-hide-on-mobile"> Syed Amir </span>
-                                <i class="fa fa-angle-down"></i>
-                            </a>
-                            <ul class="dropdown-menu dropdown-menu-default">
-                                <li>
-                                    <a href="profile.html">
-                                        <i class="icon-user"></i> My Profile </a>
-                                </li>
-                                <li>
-                                    <a href="login.html">
-                                        <i class="icon-key"></i> Log Out </a>
-                                </li>
-                            </ul>
-                        </li>
-                        <!-- END USER LOGIN DROPDOWN -->
-                        <li class="dropdown dropdown-quick-sidebar-toggler">
-                            <a href="javascript:;" class="dropdown-toggle">
-                                <i class="icon-logout"></i>
-                            </a>
-                        </li>
-                    </ul>
-                </div>
-                <!-- END TOP NAVIGATION MENU -->
+                <!-- END HEADER INNER -->
             </div>
-            <!-- END HEADER INNER -->
-        </div>
-        <!-- END HEADER -->
-        <!-- BEGIN HEADER & CONTENT DIVIDER -->
-        <div class="clearfix"> </div>
-        <!-- END HEADER & CONTENT DIVIDER -->
-        <!-- BEGIN CONTAINER -->
-        <div class="page-container">
-            <!-- BEGIN SIDEBAR -->
-            <div class="page-sidebar-wrapper">
+            <!-- END HEADER -->
+            <!-- BEGIN HEADER & CONTENT DIVIDER -->
+            <div class="clearfix"> </div>
+            <!-- END HEADER & CONTENT DIVIDER -->
+            <!-- BEGIN CONTAINER -->
+            <div class="page-container">
                 <!-- BEGIN SIDEBAR -->
-                <!-- DOC: Set data-auto-scroll="false" to disable the sidebar from auto scrolling/focusing -->
-                <!-- DOC: Change data-auto-speed="200" to adjust the sub menu slide up/down speed -->
-                <div class="page-sidebar navbar-collapse collapse">
-                    <ul class="page-sidebar-menu  page-header-fixed " data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200" style="padding-top: 20px">
-                        <!-- DOC: To remove the sidebar toggler from the sidebar you just need to completely remove the below "sidebar-toggler-wrapper" LI element -->
-                        <!-- BEGIN SIDEBAR TOGGLER BUTTON -->
-                        <li class="sidebar-toggler-wrapper hide">
-                            <div class="sidebar-toggler">
-                                <span></span>
-                            </div>
-                        </li>
-                        <li>
-                            <center><img src="../assets/global/img/logo.png" style="height:auto ; width:60%" />
-                            </center>
-                        </li>
-                        <hr>
-                        <li class="nav-item start ">
-                            <a href="index.html" class="nav-link nav-toggle">
-                                <i class="icon-home"></i>
-                                <span class="title">Order Status</span>
-                                <span class="selected"></span>
-                            </a>
-                        </li>
-                        <li class="nav-item">
-                            <a href="notice.html" class="nav-link nav-toggle">
-                                <i class="fa fa-newspaper-o"></i>
-                                <span class="title">Notice</span>
-                                <span class="selected"></span>
-                            </a>
-                        </li>
-                        <li class="nav-item">
-                            <a href="javascript:;" class="nav-link nav-toggle">
-                                <i class="icon-briefcase"></i>
-                                <span class="title">Arrangements</span>
-                                <span class="arrow"></span>
-                            </a>
-                            <ul class="sub-menu">
-                                <li class="nav-item  ">
-                                    <a href="deliveryarrange.html" class="nav-link ">
-                                        <i class="icon-clock"></i>
-                                        <span class="title">Delivery Arrangement</span>
-                                    </a>
-                                </li>
-                                <li class="nav-item">
-                                    <a href="shipmentarrange.html" class="nav-link ">
-                                        <i class="icon-check"></i>
-                                        <span class="title">Shipment Arrangement</span>
-                                    </a>
-                                </li>
-                                <li class="nav-item">
-                                    <a href="warehousenote.html" class="nav-link ">
-                                        <i class="icon-check"></i>
-                                        <span class="title">Warehouse Receive Note</span>
-                                    </a>
-                                </li>
-                            </ul>
-                        </li>
-                        <li class="nav-item ">
+                <div class="page-sidebar-wrapper">
+                    <!-- BEGIN SIDEBAR -->
+                    <!-- DOC: Set data-auto-scroll="false" to disable the sidebar from auto scrolling/focusing -->
+                    <!-- DOC: Change data-auto-speed="200" to adjust the sub menu slide up/down speed -->
+                    <div class="page-sidebar navbar-collapse collapse">
+                       
+                        <ul class="page-sidebar-menu  page-header-fixed " data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200" style="padding-top: 20px">
+                            <!-- DOC: To remove the sidebar toggler from the sidebar you just need to completely remove the below "sidebar-toggler-wrapper" LI element -->
+                            <!-- BEGIN SIDEBAR TOGGLER BUTTON -->
+                            <li class="sidebar-toggler-wrapper hide">
+                                <div class="sidebar-toggler">
+                                    <span></span>
+                                </div>
+                            </li>
+                            <li>
+                                <center><img src="../assets/global/img/logo.png" style="height:auto ; width:60%"/></center>
+                            </li>
+                            <hr>
+                            <li class="nav-item  ">
+                                <a href="index.html" class="nav-link nav-toggle">
+                                    <i class="icon-home"></i>
+                                    <span class="title">Order Status</span>
+                                    <span class="selected"></span>
+                                </a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="notice.html" class="nav-link nav-toggle">
+                                    <i class="fa fa-newspaper-o"></i>
+                                    <span class="title">Notice</span>
+                                    <span class="selected"></span>
+                                </a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="javascript:;" class="nav-link nav-toggle">
+                                    <i class="icon-briefcase"></i>
+                                    <span class="title">Arrangements</span>
+                                    <span class="arrow"></span>
+                                </a>
+                                <ul class="sub-menu">
+                                    <li class="nav-item  ">
+                                        <a href="deliveryarrange.html" class="nav-link ">
+                                            <i class="icon-clock"></i>
+                                            <span class="title">Delivery Arrangement</span>
+                                        </a>
+                                    </li>
+                                    <li class="nav-item">
+                                        <a href="shipmentarrange.html" class="nav-link ">
+                                            <i class="icon-check"></i>
+                                            <span class="title">Shipment Arrangement</span>
+                                        </a>
+                                    </li>
+                                    <li class="nav-item">
+                                        <a href="warehousenote.html" class="nav-link ">
+                                            <i class="icon-check"></i>
+                                            <span class="title">Warehouse Receive Note</span>
+                                        </a>
+                                    </li>
+                                </ul>
+                            </li> 
+                            <li class="nav-item ">
                                 <a href="javascript:;" class="nav-link nav-toggle">
                                     <i class="icon-briefcase"></i>
                                     <span class="title">Orders</span>
@@ -308,20 +267,20 @@
                                         </a>
                                     </li>
                                     <li class="nav-item  ">
-                                        <a href="#" class="nav-link ">
+                                        <a href="shippingorderstatus.html" class="nav-link ">
                                             <i class="icon-check"></i>
                                             <span class="title">Shipping Order</span>
                                         </a>
                                     </li>
                                 </ul>
-                            </li>  
-                            <li class="nav-item">
-                            <a href="chat.html?menu=true" class="nav-link nav-toggle">
+                            </li>                  
+                                                      <li class="nav-item start">
+                            <a href="custom.html?menu=true" class="nav-link nav-toggle">
                                 <i class="fa fa-comments-o"></i>
                                 <span class="title">Custom Declaration</span>
                                 <span class="selected"></span>
                             </a>
-                        </li>
+                        </li>         
                         <li class="nav-item">
                             <a href="chat.html?menu=true" class="nav-link nav-toggle">
                                 <i class="fa fa-comments-o"></i>
@@ -336,45 +295,46 @@
                                 <span class="selected"></span>
                             </a>
                         </li>
-                        <li class="nav-item ">
-                            <a href="profile.html" class="nav-link nav-toggle">
-                                <i class="icon-user"></i>
-                                <span class="title">Profile</span>
-                            </a>
-                        </li>
-                        <li class="nav-item">
-                            <a href="contactlist.html" class="nav-link nav-toggle">
-                                <i class="icon-notebook"></i>
-                                <span class="title">Contact List</span>
-                            </a>
-                        </li>
-                        <li class="nav-item">
-                            <a href="javascript:;" class="nav-link nav-toggle">
-                                <i class="icon-settings"></i>
-                                <span class="title">Settings</span>
-                                <span class="arrow"></span>
-                            </a>
-                            <ul class="sub-menu">
-                                <li class="nav-item  ">
-                                    <a href="formcustomize.html" class="nav-link ">
-                                        <i class="icon-clock"></i>
-                                        <span class="title">Form Customization</span>
-                                    </a>
-                                </li>
-                                <li class="nav-item">
-                                    <a href="updatecurrency.html" class="nav-link ">
-                                        <i class="icon-check"></i>
-                                        <span class="title">Update Currency</span>
-                                    </a>
-                                </li>
-                            </ul>
-                        </li>
-                    </ul>
-                    <!-- END SIDEBAR MENU -->
-                    <!-- END SIDEBAR MENU -->
-                </div>
-                <!-- END SIDEBAR -->
-                <!-- BEGIN CONTENT -->
+                            <li class="nav-item ">
+                                <a href="profile.html" class="nav-link nav-toggle">
+                                    <i class="icon-user"></i>
+                                    <span class="title">Profile</span>
+                                </a>
+                            </li>                       
+                            <li class="nav-item">
+                                <a href="contactlist.html" class="nav-link nav-toggle">
+                                    <i class="icon-notebook"></i>
+                                    <span class="title">Contact List</span>
+                                </a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="javascript:;" class="nav-link nav-toggle">
+                                    <i class="icon-settings"></i>
+                                    <span class="title">Settings</span>
+                                    <span class="arrow"></span>
+                                </a>
+                                <ul class="sub-menu">
+                                    <li class="nav-item  ">
+                                        <a href="formcustomize.html" class="nav-link ">
+                                            <i class="icon-clock"></i>
+                                            <span class="title">Form Customization</span>
+                                        </a>
+                                    </li>
+                                    <li class="nav-item">
+                                        <a href="updatecurrency.html" class="nav-link ">
+                                            <i class="icon-check"></i>
+                                            <span class="title">Update Currency</span>
+                                        </a>
+                                    </li>
+                                </ul>
+                            </li>                        
+                            
+                        </ul>
+                        <!-- END SIDEBAR MENU -->
+                        <!-- END SIDEBAR MENU -->
+                    </div>
+                    <!-- END SIDEBAR -->
+<!-- BEGIN CONTENT -->
                 <div class="page-content-wrapper">
                     <!-- BEGIN CONTENT BODY -->
                     <div class="page-content">
@@ -386,32 +346,28 @@
                                     <i class="fa fa-circle"></i>
                                 </li>
                                 <li>
-                                    <a href="deliveryarrange.html">Custom Declaration Document</a>
+                                    <a  href="deliveryarrange.html">Custom Declaration Document</a>
                                 </li>
                             </ul>
                         </div>
                         <!-- END PAGE BAR -->
                         <!-- BEGIN PAGE TITLE-->
                         <h1 class="page-title"> 
-            </h1>
+                        </h1>
+                        
                         <!-- CONTENT -->
+                        
                         <div class="row">
                             <div class="col-md-12">
                                 <!-- Begin: life time stats -->
                                 <div class="portlet box green">
                                     <div class="portlet-title">
                                         <div class="caption">
-                                        <div class="form-group">
-                                            <label class="control-label col-md-6" style="margin-top: 10px;font-size: 90%">References:</label>
-                                                <div class="col-md-6">
-                                                    <input style="width:160px; margin-left:-40px" placeholder="CNTR 50 CHINA" type="text" class="form-control">
-                                                </div>
-                                        </div>
-                                        </div>
+                                            <i class="fa fa-cogs"></i><strong>Custom Declaration Document</strong> </div>
                                         <div class="actions">
                                             <div class="btn-group" style="display:none">
-                                                <a id="qweqwe" class="btn white btn-outline btn-circle" href="#modal_demo_1" data-toggle="modal"> Custom Declaration Document
-                              </a>
+                                                <a id="qweqwe" class="btn white btn-outline btn-circle" href="#form_delivery" data-toggle="modal" > Custom Declaration Document<
+                                                </a>
                                             </div>
                                             <div class="btn-group">
                                                 <a class="btn white btn-outline btn-circle" href="javascript:;" data-toggle="dropdown">
@@ -419,6 +375,7 @@
                                                     <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">
@@ -450,184 +407,80 @@
                                         </div>
                                     </div>
                                     <div class="portlet-body">
-                                   
+                                    
                                         <div class="table-container">
-                                        <table style="margin-bottom: 10px;" class="table table-striped table-bordered table-hover" id="sample_3">
-                                                <thead>
-                                                    <tr>
-                                                        <th width="1%"> HS Code </th>
-                                                        <th width="1%"> Product Description </th>
-                                                        <th width="1%"> Product Details </th>
-                                                        <th width="1%"> Quantity </th>
-                                                        <th width="1%"> UOM </th>
-                                                        <th width="1%"> Price </th>
-
-                                                        
-                                                    </tr>
-                                                </thead>
-                                                <tbody>
-                                                    
-                                                    <tr>
-                                                        <td> <center>12345</center> </td>
-                                                        <td> <center>Handphone</center> </td>
-                                                        <td> <center>Voltage: 100 volt</center> </td>
-                                                        <td> 10 </td>
-                                                        <td> Carton</td>
-                                                        <td> (MYR)12,000</td>
-                                                    </tr>
-                                                    <tr>
-                                                        <td> <center>67890</center> </td>
-                                                        <td> <center>Television</center> </td>
-                                                        <td> <center>Voltage: 300 volt</center> </td>
-                                                        <td> 1</td>
-                                                        <td> Pallet</td>
-                                                        <td> (MYR)8,200</td>
-                                                    </tr>
-                                                    <tr>
-                                                        <td> <center>64574</center> </td>
-                                                        <td> <center>Radio</center> </td>
-                                                        <td> <center>Voltage: 60 volt</center> </td>
-                                                        <td> 1 </td>
-                                                        <td> Package</td>
-                                                        <td> (MYR)1,200</td>
-                                                    </tr>
-                                                    <tr>
-                                                        <td> <center>34739</center> </td>
-                                                        <td> <center>Mini Refrigerator</center> </td>
-                                                        <td> <center>Voltage: 100 volt</center> </td>
-                                                        <td> 1 </td>
-                                                        <td> Pallet</td>
-                                                        <td> (MYR)4,200</td>
-                                                    </tr>                                         
-                                                </tbody>
-                                            </table>
+                                        
                                             <div id="mask"></div>
                                             <!-- <span id="switch" class="pull-right" style="margin-left:5px; margin-right:5px;">Status : &nbsp;&nbsp;<input type='checkbox' class='make-switch pull-right asdasd' checked data-size='small' data-on-color='success' data-on-text='ON' data-off-color='default' data-off-text='OFF'></span> -->
                                             <table id="example" class="table table-striped table-bordered table-hover order-column"></table>
+                                            
                                         </div>
                                     </div>
                                 </div>
                                 <!-- End: life time stats -->
-                            </div>
+                            </div>                          
                         </div>
-
-                        <div id="modal_demo_1" class="modal fade modal-scroll bs-modal-lg in" role="dialog" aria-hidden="true">
+                        <!-- END CONTENT -->
+                        <div class="modal fade modal-scroll bs-modal-lg in" id="form_delivery" tabindex="-1" role="basic" aria-hidden="true">
                             <div class="modal-dialog modal-lg">
                                 <div class="modal-content">
-                                    <div class="modal-header" style="background-color: #3598dc; font-size: 100px">
+                                    <div class="modal-header" style="background-color: #3598dc">
                                         <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
+                                        
                                         <div class="caption" style="color: #FFF;padding: 11px 0 9px;float: left;display: inline-block;font-size: 18px;line-height: 18px;font-family:'Open Sans',sans-serif;">
-                                            <i class="fa fa-gift" style="    float: left;margin-top: 4px;display: inline-block;font-size: 13px;margin-right: 5px;"></i>Custom Declaration Document
+                                            <i class="fa fa-gift" style="    float: left;margin-top: 4px;display: inline-block;font-size: 13px;margin-right: 5px;"></i>Custom Declaration 
                                         </div>
                                     </div>
-                                </div>
-                                <div class="row">
+
+                                    <div class="row">
                                     <div class="col-md-12">
-                                        <div class="portlet light bordered" id="form_wizard_1">
-                                            <div class="portlet-body form">
-                                                <form class="form-horizontal" action="#" id="submit_form" method="POST">
-                                                    <div class="form-wizard">
-                                                        <div class="form-body">
-                                                            <ul class="nav nav-pills nav-justified steps">
-                                                                <li>
-                                                                    <a href="#tab1" data-toggle="tab" class="step">
-                                                                        <span class="number"> 1 </span>
-                                                                        <span class="desc">
-                              <i class="fa fa-check"></i> WRN Form</span>
-                                                                    </a>
-                                                                </li>
-                                                                <li>
-                                                                    <a href="#tab2" data-toggle="tab" class="step">
-                                                                        <span class="number"> 2 </span>
-                                                                        <span class="desc">
-                              <i class="fa fa-check"></i> WRN Details<br>  </span>
-                                                                    </a>
-                                                                </li>
-                                                            </ul>
-                                                            <div id="bar" class="progress progress-striped" role="progressbar">
-                                                                <div class="progress-bar progress-bar-success"> </div>
-                                                            </div>
-                                                            <div class="progress-bar progress-bar-success"> </div>
-                                                        </div>
-                                                        <div class="tab-content">
-                                                            <div class="alert alert-danger display-none">
-                                                                <button class="close" data-dismiss="alert"></button> You have some form errors. Please check below.
-                                                            </div>
-                                                            <div class="alert alert-success display-none">
-                                                                <button class="close" data-dismiss="alert"></button> Your form validation is successful!
-                                                            </div>
-                                                            <div class="tab-pane active" id="tab1">
-                                                                <h4 class="block"><b>Departure Warehouse Received Note</b></h4>
-                                                                <div class="row">
-                                                                    <div class="col-md-6">
-                                                                        <div class="form-group">
-                                                                            <label class="control-label col-md-3" style="font-size: 100%">Transport Company 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" style="font-size: 100%">Consignment Note No</label>
-                                                                            <div class="col-md-9">
-                                                                                <input type="text" class="form-control">
-                                                                            </div>
-                                                                        </div>
-                                                                    </div>
-                                                                    <!--/span-->
-                                                                </div>
-                                                                <div class="tab-pane active" id="tab1">
-                                                                    <h4 class="block"><b></b></h4>
-                                                                    <div class="row">
-                                                                        <div class="col-md-6">
-                                                                            <div class="form-group">
-                                                                                <label class="control-label col-md-3" style="font-size: 100%">Receive Date </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" style="font-size: 100%">Warehouse Receive Note No</label>
-                                                                                <div class="col-md-9">
-                                                                                    <input type="text" class="form-control">
-                                                                                </div>
-                                                                            </div>
-                                                                        </div>
-                                                                    </div>
-                                                                    <!--/span-->
-                                                                </div>
-                                                                <div class="row">
-                                                                    <div class="col-md-6">
-                                                                        <div class="form-group">
-                                                                            <label class="control-label col-md-3" style="font-size: 100%">Marking</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" style="font-size: 100%">Receiving Person</label>
-                                                                            <div class="col-md-9">
-                                                                                <input placeholder="Syed Amir" type="text" class="form-control">
-                                                                            </div>
-                                                                        </div>
-                                                                    </div>
-                                                                    <!--/span-->
-                                                                    <!--/span-->
-                                                                    <div class="col-md-6">
-                                                                        <div class="form-group">
-                                                                            <label class="control-label col-md-3" style="font-size: 100%">Order No</label>
-                                                                            <div class="col-md-9">
+                                    <div class="portlet light bordered" id="form_wizard_1">
+                                    
+                                    <div class="portlet-body form">
+                                        <form class="form-horizontal" action="#" id="submit_form" method="POST">
+                                            <div class="form-wizard">
+                                                <div class="form-body">
+                                                    <ul class="nav nav-pills nav-justified steps">
+                                                        <li>
+                                                            <a href="#tab1" data-toggle="tab" class="step">
+                                                                <span class="number"> 1 </span>
+                                                                <span class="desc">
+                                                                    <i class="fa fa-check"></i> Shipping Order</span>
+                                                            </a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#tab2" data-toggle="tab" class="step">
+                                                                <span class="number"> 2 </span>
+                                                                <span class="desc">
+                                                                    <i class="fa fa-check"></i> Custom Details<br>  </span>
+                                                            </a>
+                                                        </li>
+                                                    </ul><div id="bar" class="progress progress-striped" role="progressbar">
+                                                        <div class="progress-bar progress-bar-success"> </div>
+                                                    </div>
+                                                    <div class="progress-bar progress-bar-success"> </div>
+                                                    </div>
+                                                    <div class="tab-content">
+                                                        <div class="alert alert-danger display-none">
+                                                            <button class="close" data-dismiss="alert"></button> You have some form errors. Please check below. </div>
+                                                        <div class="alert alert-success display-none">
+                                                            <button class="close" data-dismiss="alert"></button> Your form validation is successful! </div>
+                                                        <div class="tab-pane active" id="tab1">
+                                                           <div class="col-md-13">
+                                    
+                                        
+                                            <div class="caption">
+                                                <i class="icon-social-dribbble font-green hide"></i>
+                                                <span class="caption-subject font-dark bold uppercase">Select Shipping Order</span>
+                                            </div>
+                                      
+                                        <div class="portlet-body">
+                                            <div style="margin-top:60px" class="form-group">
+                                                                                            <label for="so" class="col-md-2 control-label">Shipping Order</label>
+                                                                                               <div class="col-md-9">
                                                                                 <select class="form-control select2">
                                                                                     <optgroup label="Order No">
-                                                                                        <option>Please choose your order</option>
+                                                                                        <option>Please select</option>
                                                                                         <option value="000">00012</option>
                                                                                         <option value="001">00114</option>
                                                                                         <option value="002">00216</option>
@@ -649,478 +502,147 @@
                                                                                     </optgroup>
                                                                                 </select>
                                                                             </div>
-                                                                        </div>
-                                                                    </div>
-                                                                    <div class="col-md-6">
-                                                                        <div class="form-group">
-                                                                            <div id="dynamicInput" style="margin-left: 140px">Remark
-                                                                                <br>
-                                                                                <input type="text" name="myInputs[]" style="width: 340px; height: 100px">
-                                                                            </div>
-                                                                            <br>
-                                                                            <br>
-                                                                            <br>
-                                                                            <div class="form-actions">
-                                                                                <div class="col-md-20">
-                                                                                    <a href="javascript:;" class="btn btn-outline green button-next" style="margin-left: 5px"> Next</a>
-                                                                                    <input class="btn btn-success mt-repeater-add" value="+ Add New Form" onClick="addInput('dynamicInput');" style="width: 150px">
-                                                                                </div>
-                                                                            </div>
-                                                                        </div>
-                                                                        <!--<form method="POST">
-                                    <div id="dynamicInput">
-                                                        Entry 1<br><input type="text" name="myInputs[]">
-                                    </div>
-                                    <input type="button" value="Add another text input" onClick="addInput('dynamicInput');">
-                                    </form>-->
-                                                                    </div>
-                                                                </div>
+                                                                                       </div>
+                                                                                       </div>
+                                                                                        
+                                                            <div class="form-actions">
+                                                           
+                                                                <div  class="col-md-offset-5 col-md-9"> 
+                                                                    <a href="javascript:;" class="btn btn-outline green button-next"> Next</a>
+                                                                
                                                             </div>
-                                                            <div class="tab-pane" id="tab2">
-                                                                <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">DEPARTURE WAREHOUSE RECEIVE NOTE - 00012</span>
-                                                                                <br>
-                                                                                <br>
-                                                                                <br>
-                                                                                <div class="table-toolbar">
-                                                                                        <div class="row">
-                                                                                            <div class="col-md-6">
-                                                                                                <div class="btn-group">
-                                                                                                    <a onclick="addNewColumn();" class="btn green"> New Column
-                                                                                                        <i class="fa fa-plus"></i>
-                                                                                                    </a>
-                                                                                                </div>
-                                                                                                <div class="btn-group">
-                                                                                                    <a onclick="addNewRow();" class="btn green"> New Row
-                                                                                                        <i class="fa fa-plus"></i>
-                                                                                                    </a>
-                                                                                                </div>
-                                                                                                <br>
-                                                                                                <br>
-                                                                                            </div>
-                                                                                        </div>
-                                                                                    </div>
-                                                                                <div class="portlet-body">
-                                                                                    
-                                                                                            
-                                                                                            <div class="table-scrollable" style="max-width:900px; font-size:100px;">
-                                                                                                <table class="table table-striped table-bordered table-hover" id="sample_editable_1">
-                                                                                                    <thead>
-                                                                                                        <tr>
-                                                                                                            <th scope="col">No</th>
-                                                                                                            <th scope="col">Total Ctn<br>(nominal)</th>
-                                                                                                            <th scope="col">Measurement-m<br>(nominal)</th>
-                                                                                                            <th scope="col">Weight<br>(nominal)</th>
-                                                                                                            <th scope="col">Total Ctn<br>(actual)</th>
-                                                                                                            <th scope="col">Measurement-m<br>(actual)</th>
-                                                                                                            <th scope="col">Weight<br>(actual)</th>
-                                                                                                            <th scope="col">Status</th>
-                                                                                                            <th scope="col">Damage</th>
-                                                                                                            <th scope="col">Upload your Photo Here</th>
-                                                                                                            
-                                                                                                        </tr>
-                                                                                                    </thead>
-                                                                                                    <tfoot>
-                                                                                                        <tr>
-                                                                                                            <td style="color: black">Total</td>
-                                                                                                            <td style="color: black">12 ctn</td>
-                                                                                                            <td style="color: black">3.6 CBM</td>
-                                                                                                            <td style="color: black">10 kg</td>
-                                                                                                            <td style="color: black">11 ctn</td>
-                                                                                                            <td style="color: black" >3.6 CBM</td>
-                                                                                                            <td style="color: black">29.8 kg</td>
-                                                                                                            <td><a style="color: black"></a></td>
-                                                                                                            <td>
-                                                                                                                
-                                                                                                            </td>
-                                                                                                            <td>
-                                                                                                                
-                                                                                                            </td>
-                                                                                                           
-                                                                                                    </tfoot>
+                                                        </div>
+                                                    </div>
+                                                    </div>
+
+                            <div class="tab-pane" id="tab2">
+                                <div class="portlet-body">
+                                                             <table style="font-size: 50%" class="table table-striped table-bordered table-hover" id="sample_editable_1">
+                                                              <thead>
+                                                               <tr>
+                                                                <th scope="col">No</th>
+                                                                <th scope="col">HS Code</th>
+                                                                <th scope="col">Product<br>Discription</th>
+                                                                <th scope="col">Product<br>Details</th>
+                                                                <th scope="col">Quantity</th>
+                                                                <th scope="col">UOM</th>
+                                                                <th scope="col">Price</th>
+                                                                <th scope="col">Actions</th>
+                                                               </tr>
+                                                               </thead>
+                                                                                                       
                                                                                                     <tbody>
                                                                                                         <tr>
                                                                                                             <td>1</td>
-                                                                                                            <td>4</td>
-                                                                                                            <td>40x40x40</td>
-                                                                                                            <td>10kg</td>
-                                                                                                            <td><a href="javascript:;" id="totalctn" name="totalctn1" data-type="text" data-pk="1" data-original-title="Total Ctn"> 4 </a>
-                                                                                                            </td>
-                                                                                                            <td><a href="javascript:;" id="address" data-type="address" data-pk="1" data-original-title="Measurement"> 40 x 40 x 40</a>
-                                                                                                            </td>
-                                                                                                            <td><a href="javascript:;" id="weight" data-type="text" data-pk="1" data-original-title="Weight"> 10kg </a>
-                                                                                                            </td>
-                                                                                                            <td>Matched</td>
-                                                                                                            <td><label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
-                                                     <input type="checkbox" class="checkboxes" value="1">
-                                                     <span></span>
-                                                    </label></td>
-                                                                                                            <td>
-                                                                                                                <div>
-                                                                                                                    <span class="fileinput-new"></span>
-                                                                                                                    <span class="fileinput-exists"></span>
-                                                                                                                    <input type="file" name="...">
-                                                                                                                </div>
-                                                                                                            </td>
-                                                                                                            
-                                                                                                            
-                                                        
-                                                    
+                                                                                                            <td contenteditable="true"></td>
+                                                                                                            <td contenteditable="true">Television</td>
+                                                                                                            <td contenteditable="true">100 Volt</td>
+                                                                                                            <td contenteditable="true">2</td>
+                                                                                                            <td contenteditable="true">Pallets</td>
+                                                                                                            <td contenteditable="true">RM 20000</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>
+                                                            </div><br/></center>
+                                                        </td>
                                                                                                         </tr>
                                                                                                         <tr>
                                                                                                             <td>2</td>
-                                                                                                            <td style="color: red">4</td>
-                                                                                                            <td >0.4x0.4x0.4</td>
-                                                                                                            <td >10kg</td>
-                                                                                                            <td><a href="javascript:;" id="totalctn2" name="totalctn1" data-type="text" data-pk="1" data-original-title="Total Ctn" style="color: red"> 3 </a>
-                                                                                                            </td>
-                                                                                                            <td><a href="javascript:;" id="address2" data-type="address" data-pk="1" data-original-title="Measurement" > 0.4 x 0.4 x 0.4</a>
-                                                                                                            </td>
-                                                                                                            <td><a href="javascript:;" id="weight2" data-type="text" data-pk="1" data-original-title="Weight" > 10kg </a>
-                                                                                                            </td>
-                                                                                                            <td><a style="color: red">Unmatched</a></td>
-                                                                                                            <td>
-                                                                                                                <label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
-                                                     <input type="checkbox" class="checkboxes" value="1">
-                                                     <span></span>
-                                                    </label>
-                                                                                                            </td>
-                                                                                                            <td>
-                                                                                                                <div>
-                                                                                                                    <span class="fileinput-new"></span>
-                                                                                                                    <span class="fileinput-exists"></span>
-                                                                                                                    <input type="file" name="..."> </span>
-                                                                                                                </div>
-                                                                                                            </td>
-                                                                                                            
+                                                                                                            <td contenteditable="true"></td>
+                                                                                                            <td contenteditable="true">Radio</td>
+                                                                                                            <td contenteditable="true">50 Volt</td>
+                                                                                                            <td contenteditable="true">5</td>
+                                                                                                            <td contenteditable="true">Packages</td>
+                                                                                                            <td contenteditable="true">RM 2000</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>
+                                                            </div><br/></center>
+                                                        </td>
                                                                                                         </tr>
                                                                                                         <tr>
                                                                                                             <td>3</td>
-                                                                                                            <td >4</td>
-                                                                                                            <td >0.4x0.4x0.4</td>
-                                                                                                            <td style="color: red">10kg</td>
-                                                                                                            <td><a href="javascript:;" id="totalctn3" name="totalctn1" data-type="text" data-pk="1" data-original-title="Total Ctn" > 4 </a>
-                                                                                                            </td>
-                                                                                                            <td><a href="javascript:;" id="address3" data-type="address" data-pk="1" data-original-title="Measurement" > 0.4 x 0.4 x 0.4</a>
-                                                                                                            </td>
-                                                                                                            <td><a href="javascript:;" id="weight3" data-type="text" data-pk="1" data-original-title="Weight" style="color: red"> 9.8kg </a>
-                                                                                                            </td>
-                                                                                                            <td><a style="color: red">Unmatched <br><a href="javascript:;" id="firstname" data-type="text" data-pk="1" data-placement="right" data-placeholder="Required" data-original-title="Enter your firstname"> </a>Damage</a></td>
-                                                                                                            <td>
-                                                                                                                <label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
-                                                     <input type="checkbox" class="checkboxes" value="1">
-                                                     <span></span>
-                                                    </label>
-                                                                                                            </td>
-                                                                                                            <td>
-                                                                                                                <div>
-                                                                                                                    <span class="fileinput-new"></span>
-                                                                                                                    <span class="fileinput-exists"></span>
-                                                                                                                    <input type="file" name="...">
-                                                                                                                </div>
-                                                                                                            </td>
-                                                                                                             
+                                                                                                            <td contenteditable="true"></td>
+                                                                                                            <td contenteditable="true">Handphone</td>
+                                                                                                            <td contenteditable="true">50 Volt</td>
+                                                                                                            <td contenteditable="true">2</td>
+                                                                                                            <td contenteditable="true">Carton</td>
+                                                                                                            <td contenteditable="true">RM 9000</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>
+                                                            </div><br/></center>
+                                                        </td>
+                                                                                                        </tr>
+                                                                                                        <tr>
+                                                                                                            <td>4</td>
+                                                                                                            <td contenteditable="true"></td>
+                                                                                                            <td contenteditable="true">Laptop</td>
+                                                                                                            <td contenteditable="true">80 Volt</td>
+                                                                                                            <td contenteditable="true">2</td>
+                                                                                                            <td contenteditable="true">Pallets</td>
+                                                                                                            <td contenteditable="true">RM 10000</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>
+                                                            </div><br/></center>
+                                                        </td>
+                                                                                                        </tr>
+                                                                                                        <tr>
+                                                                                                            <td>5</td>
+                                                                                                            <td contenteditable="true"></td>
+                                                                                                            <td contenteditable="true">Refrigerator</td>
+                                                                                                            <td contenteditable="true">120 Volt</td>
+                                                                                                            <td contenteditable="true">2</td>
+                                                                                                            <td contenteditable="true">Pallets</td>
+                                                                                                            <td contenteditable="true">RM 20000</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>
+                                                            </div><br/></center>
+                                                        </td>
                                                                                                         </tr>
                                                                                                         
                                                                                                     </tbody>
                                                                                                 </table>
                                                                                             </div>
-                                                                                            
-                                                                                            
-                                                                                        </div>
-                                                                                        <div class="form-actions">
-                                                                                            <div class="row">
-                                                                                                <div class="col-md-offset-5 col-md-9">
-                                                                                                    <a href="javascript:;" class="btn default button-previous">
-                                                                                                        <i class="fa fa-angle-left"></i> Back </a>
-                                                                                                    <a href="javascript:window.open('decisionmaking.html', 'Track Order', 'width=1000,height=600');" class="btn green button-submit"> Submit
-                                                      </a>
-                                                                                                </div>
-                                                                                            </div>
-                                                                                        </div>
-                                                                                    </div>
-                                                                                    <br>
-                                                                                    <br>
-                                                                                    <br>
-                                                                                    <p style="color:red; font-size:90%" align="center">Notification: Please keep key in the information if there have any problem with the goods</p>
-                                                                                </div>
-                                                                                <div class="row">
-                                                                                    <div class="col-md-offset-5 col-md-9">
-                                                                                        <a href="javascript:;" class="btn btn-outline green button-next"> Submit</a>
-                                                                                        <button type="button" class="btn btn-outline green button-next" data-container="body" data-toggle="popover" data-placement="top" data-html="true" data-content="<button type='button' class='btn btn-outline green button-next'></button>
-                                                         <script>
-                                                            $('#testing').click(function(){$('#decision').modal('show');})
-                                                         </script>
-                                                         "><i class="fa fa-plus-square" aria-hidden="true"></i></button>
-                                                                                    </div>
-                                                                                </div>
-                                                                            </div>
-                                                                        </div>
-                                                                        
-                                                                    </div>
-                                                                </div>
-                                                            </div>
+                                            
+                                                        
+                                                        <div style="margin-bottom:50px; margin-top: 80px; margin-left:350px" 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 green button-submit"> Submit
+                                                            </a>
                                                         </div>
                                                     </div>
-                                            </div>
-                                        </div>
-                                        <!-- /.modal-content -->
-                                    </div>
-                                </div>
-                                <!-- /.modal-dialog -->
-                            </div>
-                            <!-- END CONTENT BODY -->
-                        </div>
-                        <!-- END CONTENT -->
-                        <!-- Modal -->
-                 <div class="modal fade in " id="decision" tabindex="-1" role="basic" aria-hidden="true" style="z-index:999999;">
-                            <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>
-                                        
-                                        <div class="caption">
-                                            <h3><i class='fa fa-question'></i> Decision Making</h3>
-                                        </div>
-                                    </div>
-                                    <div class="modal-body"> 
-                                        <div class="form">
-                                            <div class="row">
-                                                <div class="col-md-12">
-                                                    <div class="form-group">
-                                                        <label>Issue</label>
-                                                        <select id="folder" class="form-control"  onchange="show_hide(this);">
-                                                            <option>Please Select</option>
-                                                            <option value="damage">Damage</option>
-                                                            <option value="unmatch">Unmatch </option>
-                                                            <option value="others">Others</option>
-                                                        </select>
-                                                        <div class="tab-pane active" id="issue1" style="display: none;">
-                                                            <form role="form" action="#">
-                                                                <br/>
-                                                                <div class="form-group">
-                                                                    <label class="control-label">Order No.</label>
-                                                                    <select class="form-control select2">
-                                                                        <optgroup label="Order No">
-                                                                            <option>Please choose your order</option>
-                                                                            <option value="000">00012</option>
-                                                                            <option value="001">00114</option>
-                                                                            <option value="002">00216</option>
-                                                                            <option value="004">00418</option>
-                                                                            <option value="006">00624</option>
-                                                                            <option value="183">18332</option>
-                                                                            <option value="187">18742</option>
-                                                                            <option value="197">19745</option>
-                                                                            <option value="256">25654</option>
-                                                                            <option value="287">28782</option>
-                                                                            <option value="348">34829</option>
-                                                                            <option value="368">36894</option>
-                                                                            <option value="380">38090</option>
-                                                                            <option value="426">42679</option>
-                                                                            <option value="448">44895</option>
-                                                                            <option value="468">46894</option>
-                                                                            <option value="489">48939</option>
-                                                                            <option value="578">57839</option>
-                                                                        </optgroup>
-                                                                    </select>
-                                                                    <br/>
-                                                                    <div>
-                                                                        <div class="form-group">
-                                                                    <div class="fileinput fileinput-new" data-provides="fileinput">
-                                                                        <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
-                                                                            <img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=no+image" alt="" /> 
-                                                                        </div>
-                                                                         
-                                                                        <div>
-                                                                                <span class="fileinput-new"></span>
-                                                                                <span class="fileinput-exists"></span>
-                                                                                <input type="file" name="...">
-                                                                        </div>
-                                                                        <br/>
-                                                                            <div class="form-group">
-                                                                                <label>Problem</label>
-                                                                                <textarea class="form-control" rows="3"></textarea>
-                                                                            </div>
-                                                                    </div>
-                                                                </div>   
-                                                                    </div>
-                                                                    <div class="modal-footer">
-                                                                        <button type="button" class="btn dark btn-outline" data-dismiss="modal">Cancel</button>
-                                                                        <button type="button" class="btn green" data-dismiss="modal">Send</button>
-                                                                    </div>
-                                                                </div>
-                                                            </form>
-                                                        </div> 
-                                                        <div class="tab-pane active" id="issue2" style="display: none;">
-                                                            <form role="form" action="#">
-                                                                <br/>
-                                                                <div class="form-group">
-                                                                    <label class="control-label">Order No.</label>
-                                                                    <select class="form-control select2">
-                                                                        <optgroup label="Order No">
-                                                                            <option>Please choose your order</option>
-                                                                            <option value="000">00012</option>
-                                                                            <option value="001">00114</option>
-                                                                            <option value="002">00216</option>
-                                                                            <option value="004">00418</option>
-                                                                            <option value="006">00624</option>
-                                                                            <option value="183">18332</option>
-                                                                            <option value="187">18742</option>
-                                                                            <option value="197">19745</option>
-                                                                            <option value="256">25654</option>
-                                                                            <option value="287">28782</option>
-                                                                            <option value="348">34829</option>
-                                                                            <option value="368">36894</option>
-                                                                            <option value="380">38090</option>
-                                                                            <option value="426">42679</option>
-                                                                            <option value="448">44895</option>
-                                                                            <option value="468">46894</option>
-                                                                            <option value="489">48939</option>
-                                                                            <option value="578">57839</option>
-                                                                        </optgroup>
-                                                                    </select>
-                                                                    <br/>
-                                                                    <div class="portlet-body">
-                                                                        <table class="table table-bordered table-hover">
-                                                                        <thead>
-                                                                            <tr >
-                                                                                <th width="5">No</th>
-                                                                                <th width="10">Total Ctn (nominal)</th>
-                                                                                <th width="10">Measurement (nominal)</th>
-                                                                                <th width="10">Weight (nominal)</th>
-                                                                                <th width="5">Total Ctn (actual)</th>
-                                                                                <th width="10">Measurement (actual)</th>
-                                                                                <th width="10">Weight (actual)</th>
-                                                                                <th width="10">Photo Reference</th>
-                                                                            </tr>
-                                                                        </thead>
-                                                                        <tbody>
-                                                                            <tr bgcolor="#FF0000">
-                                                                                    <td>1</td>
-                                                                                    <td>4</td>
-                                                                                    <td>40x40x40</td>
-                                                                                    <td>10kg</td>
-                                                                                    <td><a href="javascript:void(0)" id="totalctn" data-type="text" data-pk="1" data-original-title="Total Ctn"> 4 </a></td>
-                                                                                    <td><a href="javascript:void(0)" id="measurement" data-type="text" data-pk="1" data-original-title="Measurement"> 40 x 40 x 40 </a></td>
-                                                                                    <td><a href="javascript:void(0)" id="weight" data-type="text" data-pk="1" data-original-title="Weight"> 9.8kg </a></td>
-                                                                                    <td>
-                                                                                        <div>
-                                                                                            <span><img class="img-responsive" src="../assets/pages/media/works/img7.jpg" alt="" style="width: 50%; height: 50%"></span>
-                                                                                              
-                                                                                        </div>    
-                                                                                    </td>
-                                                                                </tr>
-                                                                            <tr>
-                                                                                    <td>2</td>
-                                                                                    <td>4</td>
-                                                                                    <td>40x40x40</td>
-                                                                                    <td>10kg</td>
-                                                                                    <td><a href="javascript:void(0)" id="totalctn2" data-type="text" data-pk="1" data-original-title="Total Ctn"> 4 </a></td>
-                                                                                    <td><a href="javascript:void(0)" id="measurement2" data-type="text" data-pk="1" data-original-title="Measurement"> 40 x 40 x 40 </a></td>
-                                                                                    <td><a href="javascript:void(0)" id="weight2" data-type="text" data-pk="1" data-original-title="Weight"> 9.8kg </a></td>
-                                                                                    <td>
-                                                                                        <div>
-                                                                                          <span><img class="img-responsive" src="../assets/pages/media/works/img8.jpg" alt="" style="width: 50%; height: 50%"></span>  
-                                                                                                
-                                                                                        </div>
-                                                                                    </td>
-                                                                                </tr>
-                                                                                <tr>
-                                                                                    <td>3</td>
-                                                                                    <td>4</td>
-                                                                                    <td>40x40x40</td>
-                                                                                    <td>10kg</td>
-                                                                                    <td><a href="javascript:void(0)" id="totalctn3" data-type="text" data-pk="1" data-original-title="Total Ctn"> 4 </a></td>
-                                                                                    <td><a href="javascript:void(0)" id="measurement3" data-type="text" data-pk="1" data-original-title="Measurement"> 40 x 40 x 40 </a></td>
-                                                                                    <td><a href="javascript:void(0)" id="weight3" data-type="text" data-pk="1" data-original-title="Weight"> 9.8kg </a></td>
-                                                                                    <td>
-                                                                                        <div>
-                                                                                            <span><img class="img-responsive" src="../assets/pages/media/works/img9.jpg" alt="" style="width: 50%; height: 50%"></span>   
-                                                                                        </div> 
-                                                                                    </td>
-                                                                                </tr>
-                                                                        </tbody>
-                                                                        
-                                                                        </table>
-                                                                        <div class="modal-footer">
-                                                                            <button type="button" class="btn dark btn-outline" data-dismiss="modal">Cancel</button>
-                                                                            <button type="button" class="btn green" data-dismiss="modal">Send</button>
-                                                                        </div>
-                                            
-                                            </div>
-                                                                </div>
-                                                            </form>
-                                                        </div> 
-                                                        <div class="tab-pane active" id="issue3" style="display: none;">
-                                                            <form role="form" action="#">
-                                                                <br/>
-                                                                <div class="form-group">
-                                                                    <label class="control-label">Order No.</label>
-                                                                    <select class="form-control select2">
-                                                                        <optgroup label="Order No">
-                                                                            <option>Please choose your order</option>
-                                                                            <option value="000">00012</option>
-                                                                            <option value="001">00114</option>
-                                                                            <option value="002">00216</option>
-                                                                            <option value="004">00418</option>
-                                                                            <option value="006">00624</option>
-                                                                            <option value="183">18332</option>
-                                                                            <option value="187">18742</option>
-                                                                            <option value="197">19745</option>
-                                                                            <option value="256">25654</option>
-                                                                            <option value="287">28782</option>
-                                                                            <option value="348">34829</option>
-                                                                            <option value="368">36894</option>
-                                                                            <option value="380">38090</option>
-                                                                            <option value="426">42679</option>
-                                                                            <option value="448">44895</option>
-                                                                            <option value="468">46894</option>
-                                                                            <option value="489">48939</option>
-                                                                            <option value="578">57839</option>
-                                                                        </optgroup>
-                                                                    </select>
-                                                                    <br/>
-                                                                    <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
-                                                                            <img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=no+image" alt="" /> 
-                                                                        </div>
-                                                                    <div>
-                                                                        <span class="fileinput-new"></span>
-                                                                        <span class="fileinput-exists"></span>
-                                                                        <input type="file" name="...">   
-                                                                    </div>
-                                                                    <br/>
-                                                                    <div class="form-group">
-                                                                        <label>Problem</label>
-                                                                        <textarea class="form-control" rows="3"></textarea>
-                                                                    </div>
-                                                                    <div class="modal-footer">
-                                                                        <button type="button" class="btn dark btn-outline" data-dismiss="modal">Cancel</button>
-                                                                        <button type="button" class="btn green" data-dismiss="modal">Send</button>
-                                                                    </div>
-                                                                </div>
-                                                            </form>
-                                                        </div> 
+                                       
+                                           
+                                                        
                                                     </div>
                                                 </div>
                                             </div>
-                                        </div>
+                                        </form>
                                     </div>
-                                    
                                 </div>
                             </div>
-                        </div>  
-                <div class="modal fade in" id="move" tabindex="-1" role="basic" aria-hidden="true" style="z-index:999999;">
+                        </div>
+                    </div>
+                                    </div>
+                                </div>
+                                <!-- /.modal-content -->
+                            </div>
+                            <!-- /.modal-dialog -->
+                        </div>
+
+                        
+                        <div class="modal fade in" id="reason" tabindex="-1" role="basic" aria-hidden="true">
                             <div class="modal-dialog">
                                 <div class="modal-content">
-                                    <div class="modal-header">
+                                    <div class="modal-header" style="background-color: #3598dc">
                                         <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                                         
-                                        <div class="caption">
-                                            <i class="fa fa-gift"></i>Move File
+                                        <div class="caption" style="color: #FFF;padding: 11px 0 9px;float: left;display: inline-block;font-size: 18px;line-height: 18px;font-family:'Open Sans',sans-serif;">
+                                            <i class="fa fa-gift" style="    float: left;margin-top: 4px;display: inline-block;font-size: 13px;margin-right: 5px;"></i>Failed Delivery
                                         </div>
                                     </div>
                                     <div class="modal-body"> 
@@ -1128,249 +650,993 @@
                                             <div class="row">
                                                 <div class="col-md-12">
                                                     <div class="form-group">
-                                                        <label>Folder</label>
-                                                        <select id="folder" class="form-control"  onchange="show_hide(this);">
-                                                            <option>Select / Create New Folder</option>
-                                                            <option value="issue1">Documents</option>
-                                                            <option value="issue2">Images</option>
-                                                            <option value="sound">Sounds</option>
-                                                            <option value="oth">Others</option>
-                                                            <option value="create">Create New</option>
-                                                        </select>
+                                                        <label>Title</label>
+                                                        <input class="form-control">
                                                     </div>
-                                                    <div class="form-group" id="folder_name" style="display: none">
-                                                        <label>Folder Name</label>
-                                                        <input type="text" class="form-control">
+                                                    <div class="form-group">
+                                                        <label>Reason</label>
+                                                        <textarea class="form-control" rows="3"></textarea>
+                                                    </div>
+                                                    <div class="form-group">
+                                                        <label>ETA</label>
+                                                        <textarea class="form-control" rows="3"></textarea>
+                                                    </div>
+                                                    <div class="form-group">
+                                                        <label>ETD</label>
+                                                        <textarea class="form-control" rows="3"></textarea>
                                                     </div>
                                                 </div>
                                             </div>
                                         </div>
                                     </div>
-                                    <div class="modal-footer">
-                                        <button type="button" class="btn dark btn-outline" data-dismiss="modal">Cancel</button>
-                                        <button type="button" class="btn green" data-dismiss="modal">Move</button>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-    <div class="modal fade" id="doc" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">✕</button>
-                    <h4 class="modal-title" id="myModalLabel">File Manager</h4>    
-                </div>
                     
-                <div class="modal-body">
-                    <div class="row">
-                    <div class="col-md-12">
-                        <div class="col-md-4">
-                                <div class="btn-group ">
-                                <a class="btn dropdown-toggle btn-default" data-toggle="dropdown" href="#">
-                                <span class="glyphicon glyphicon-plus-sign"></span>File Type
-                                <span class="caret"></span>
-                                </a>
-                                <ul class="dropdown-menu">
-                                <li><a href="#">Documents</a></li>
-                                <li><a href="#">Images</a></li>
-                                <li><a href="#">Sounds</a></li>
-                                <li><a href="#">Others</a></li>
-                                </ul>
-                                </div>
-                        </div>
-                        <br/>
-                         
-                        
-                        <div class="col-md-4">
-                        <div class="pull-right"> 
-                            <button class="btn btn-default">
-                                <span class="glyphicon glyphicon-refresh"></span>
-                            </button>
-                            <a class="btn btn-default" href='#move' data-toggle='modal'>
-                                <span class="glyphicon glyphicon-move"></span>
-                            </a>
-                                <div class="btn-group">
-                                <button id="list"  type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span>
-                                </button>
-                                <button id="thumbnail" type="button" class="btn btn-default">  <span class="glyphicon glyphicon-th"></span>
-                                </button>
-                                </div>
-                                 <div class="btn-group ">
-                                <a class="btn dropdown-toggle btn-default" data-toggle="dropdown" href="#">
-                                Sort
-                                <span class="caret"></span>
-                                </a>
-                                <ul class="dropdown-menu">
-                                <li><a href="#">ID</a></li>
-                                <li><a href="#">Title</a></li>
-                                <li><a href="#">Date</a></li>
-                                </ul>
-                                </div>
-                        </div>
-                        </div>
-                    </div>
-                    <div class="col-md-12">
-                         <div class="col-md-3">
-                            <div class="row">
-                                <div class="col-md-9">
-                                    <form action="#" class="dropzone dropzone-file-area" id="my-dropzone" style="width: 180px;margin-top: 0px;margin-left: 0px;margin-right: 0px;">
-                                        <h4 class="sbold">Drop files here or click to upload</h4>
-                                    </form>
-                                </div>
-                             </div>
-                        </div>
-                         <div id="thumbnails" class="col-md-9">
-                            <div data-code="example-2">
-                                <div class="row">
-                                    <div class="col-md-10" style="float: none;  margin: 0 auto;">
-                                        <div class="row" style="margin-left:5px;margin-right:5px;margin-top:15px;margin-bottom:15px;">
-                                            <h5>Please click image to download <i class="fa fa-download" aria-hidden="true"></i></h5>
-                                            <a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
-                                                <img src="https://unsplash.it/600.jpg?image=251" class="img-fluid">
-                                            </a>
-                                            <a href="https://unsplash.it/1200/768.jpg?image=252" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
-                                                <img src="https://unsplash.it/600.jpg?image=252" class="img-fluid">
-                                            </a>
-                                            <a href="https://unsplash.it/1200/768.jpg?image=253"  data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
-                                                <img src="https://unsplash.it/600.jpg?image=253" class="img-fluid">
-                                            </a>
-                                        </div>
-                                        <div class="row" style="margin-left:5px;margin-right:5px;margin-top:10px;margin-bottom:10px;">
-                                            <a href="https://unsplash.it/1200/768.jpg?image=254" download data-gallery="example-gallery" class="col-sm-4">
-                                                <img src="https://unsplash.it/600.jpg?image=254" class="img-fluid">
-                                            </a>
-                                            <a href="https://unsplash.it/1200/768.jpg?image=255"  data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
-                                                <img src="https://unsplash.it/600.jpg?image=255" class="img-fluid">
-                                            </a>
-                                            <a href="https://unsplash.it/1200/768.jpg?image=256"  data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
-                                                <img src="https://unsplash.it/600.jpg?image=256" class="img-fluid">
-                                            </a>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="col-md-9" id="lists" style="display:none;">
-                            <table class="table table-hover" id="example2" style="height:300px"> 
-                            
-                                    <thead> 
-                                    <tr>
-                                    <th><label class='mt-checkbox mt-checkbox-single mt-checkbox-outline'><input type='checkbox' class='group-checkable' data-set='#example2 .checkboxes' /><span></span></label></th>
-                                    <th>ID</th>
-                                    <th>Date</th>
-                                    <th>Title</th>
-                                    <th class="text-center">Action</th>
-                                    </tr>
-                                    </thead>
-                                    <tbody>
-                                    <tr>
-                                    <td><label class='mt-checkbox mt-checkbox-single mt-checkbox-outline'><input type='checkbox' class='checkboxes' value='1' /><span></span></label></td>
-                                    <td>1</td>
-                                    <td>2017-08-02 13:45:22</td>
-                                    <td><a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">Container</a></td>
-                                    <td class="text-center"><a href="#" onclick="confirm('Are you confirm to delete this file?')" class="btn btn-xs"><span class="glyphicon glyphicon-trash"></span></a><a href="#" class="btn btn-xs"><span class="glyphicon glyphicon-download-alt"></span></a></td>
-                                    </tr>
-                                    <tr>
-                                    <td><label class='mt-checkbox mt-checkbox-single mt-checkbox-outline'><input type='checkbox' class='checkboxes' value='1' /><span></span></label></td>
-                                    <td>2</td>
-                                    <td>2017-08-02 13:45:22</td>
-                                    <td><a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">Container</a></td>
-                                    <td class="text-center"><a href="#" onclick="confirm('Are you confirm to delete this file?')" class="btn btn-xs"><span class="glyphicon glyphicon-trash"></span></a><a href="#" class="btn btn-xs"><span class="glyphicon glyphicon-download-alt"></span></a></td>
-                                    </tr>
-                                    <tr>
-                                    <td><label class='mt-checkbox mt-checkbox-single mt-checkbox-outline'><input type='checkbox' class='checkboxes' value='1' /><span></span></label></td>
-                                    <td>3</td>
-                                    <td>2017-08-02 13:45:22</td>
-                                    <td><a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">Container</a></td>
-                                    <td class="text-center"><a href="#" onclick="confirm('Are you confirm to delete this file?')" class="btn btn-xs"><span class="glyphicon glyphicon-trash"></span></a><a href="#" class="btn btn-xs"><span class="glyphicon glyphicon-download-alt"></span></a></td>
-                                    </tr>
-                                    <tr>
-                                    <td><label class='mt-checkbox mt-checkbox-single mt-checkbox-outline'><input type='checkbox' class='checkboxes' value='1' /><span></span></label</td>
-                                    <td>4</td>
-                                    <td>2017-08-02 13:45:22</td>
-                                    <td><a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">Container</a></td>
-                                    <td class="text-center"><a href="#" onclick="confirm('Are you confirm to delete this file?')" class="btn btn-xs"><span class="glyphicon glyphicon-trash"></span></a><a href="#" class="btn btn-xs"><span class="glyphicon glyphicon-download-alt"></span></a></td>
-                                    </tr>
-                                    
-                                   
-                                    </tbody>
-                            </table>
-                        </div>
-                    </div>
-                    </div>
-                </div>
             </div>
         </div>
     </div>
-    
-               </div>
-                    <!-- END CONTENT -->
-                    <!-- END CONTAINER -->
-                    <!-- BEGIN FOOTER -->
-                    <div class="page-footer">
-                        <div class="page-footer-inner">
-                            Copyright &copy; 2017 IZYIM.COM
-                            <div class="scroll-to-top">
-                                <i class="icon-arrow-up"></i>
+                                </div>
                             </div>
                         </div>
-                        <!-- END FOOTER -->
                     </div>
-                    <!--[if lt IE 9]>
-            <script src="../assets/global/plugins/respond.min.js"></script>
-            <script src="../assets/global/plugins/excanvas.min.js"></script> 
-            <script src="../assets/global/plugins/ie8.fix.min.js"></script> 
-            <![endif]-->
-                    <!-- BEGIN CORE PLUGINS -->
-                    <script src="../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
-                    <script src="../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
-                    <script src="../assets/global/plugins/js.cookie.min.js" type="text/javascript"></script>
-                    <script src="../assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
-                    <script src="../assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
-                    <script src="../assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
-                    <!-- END CORE PLUGINS -->
-                    <script src="../assets/global/plugins/jquery-validation/js/jquery.validate.min.js" type="text/javascript"></script>
-                    <script src="../assets/global/plugins/jquery-validation/js/additional-methods.min.js" type="text/javascript"></script>
-                    <script src="../assets/global/plugins/bootstrap-wizard/jquery.bootstrap.wizard.min.js" type="text/javascript"></script>
-                    <!-- BEGIN PAGE LEVEL PLUGINS -->
-                    <script src="../assets/global/scripts/datatable.js" type="text/javascript"></script>
-                    <script src="../assets/global/plugins/datatables/datatables.min.js" type="text/javascript"></script>
-                    <script src="../assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js" type="text/javascript"></script>
-                    <!-- END PAGE LEVEL PLUGINS -->
-                    <!-- BEGIN THEME GLOBAL SCRIPTS -->
-                    <script src="../assets/global/scripts/app.min.js" type="text/javascript"></script>
-                    <script src="../assets/global/plugins/select2/js/select2.full.min.js" type="text/javascript"></script>
-                    <script src="../assets/pages/scripts/components-select2.min.js" type="text/javascript"></script>
-                    <script src="../assets/global/plugins/bootstrap-wysihtml5/wysihtml5-0.3.0.js" type="text/javascript"></script>
-                    <script src="../assets/global/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.js" type="text/javascript"></script>
-                    <script src="../assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js" type="text/javascript"></script>
-                    <script src="../assets/global/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
-                    <script src="../assets/global/plugins/moment.min.js" type="text/javascript"></script>
-                    <script src="../assets/global/plugins/jquery.mockjax.js" type="text/javascript"></script>
-                    <script src="../assets/global/plugins/bootstrap-editable/bootstrap-editable/js/bootstrap-editable.js" type="text/javascript"></script>
-                    <script src="../assets/global/plugins/bootstrap-editable/inputs-ext/address/address.js" type="text/javascript"></script>
-                    <script src="../assets/global/plugins/bootstrap-editable/inputs-ext/wysihtml5/wysihtml5.js" type="text/javascript"></script>
-                    <script src="../assets/global/plugins/bootstrap-typeahead/bootstrap3-typeahead.min.js" type="text/javascript"></script>
-                    <script src="../assets/pages/scripts/form-editable.js" type="text/javascript"></script>
-                    <script src="../assets/pages/scripts/form-repeater.js" type="text/javascript"></script>
-                    <script src="../assets/pages/scripts/form-repeater.min.js" type="text/javascript"></script>
-                    <script src="../assets/pages/scripts/table-datatables-managed.min.js" type="text/javascript"></script>
-                    
-                    
-                    
-                    <!-- END THEME GLOBAL SCRIPTS -->
-                    <!-- END PAGE LEVEL SCRIPTS -->
-                    <!-- BEGIN THEME LAYOUT SCRIPTS -->
-                    <script src="../assets/layouts/layout/scripts/layout.min.js" type="text/javascript"></script>
-                    <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 -->
-                    
-                    
-                    
-</body>
+                    <!-- END CONTENT BODY -->
+                </div>
+                 <div class="modal fade" id="boxes" tabindex="-1" role="boxes" aria-hidden="true">
+                    <div class="portlet-body" >
+                       <div class="modal-dialog">
+                        <div class="modal-content">
+                            <div class="modal-body">
+                                <div class="form-body">
+                                    <div class="form-group"> 
 
-</html>  
\ No newline at end of file
+                                        <!-- PERSONAL INFO TAB -->
+                                        <div align="center">
+                                        
+                                        </div>
+
+                                        <div class="tab-pane active" id="tab_1_1" class="col-md-12">
+                                    <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">Shipment arrangement details</span>
+                                            </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>
+                                                                </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>
+                                                                <!--/span-->
+                                                                <div class="col-md-6">
+                                                                    <div class="form-group">
+                                                                        <p>ETD : 03-02-2017</p>
+                                                                    </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>
+                                                                </div>
+                                                                <!--/span-->
+                                                                <div class="col-md-6">
+                                                                </div>
+                                                                <!--/span-->
+                                                        </div>
+                                                            <div class="row">
+                                                                <div class="col-md-6">
+                                                                    <div class="form-group">
+                                                                        <p>Trailer No : JLM 1234</p>
+                                                                    </div>
+                                                                </div>
+                                                                <div class="col-md-6">
+                                                                    <div class="form-group">
+                                                                        <p>Area : Semenyih</p>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col-md-6">
+                                                                    <div class="form-group">
+                                                                        <p>Driver Name : Bob</p>
+                                                                    </div>
+                                                                </div>
+                                                                <!--/span-->
+                                                                <div class="col-md-6">
+                                                                    <div class="form-group">
+                                                                        <p>Country : Malaysia</p>
+                                                                    </div>
+                                                                </div>
+                                                                <!--/span-->
+                                                            </div>
+                                                            <!--/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>
+                                                            </div>
+                                                    </div>
+                                            
+                                        <div class="row">
+                                            <div  class="col-md-offset-4 col-md-9">
+                                                <a href="javascript:;" class="btn btn-outline green button-next"> Edit</a>
+                                                <button type="button" class="btn dark btn-outline" data-dismiss="modal">Close</button>
+                                                </div>
+                                                </div>
+                                        </div>
+                                    </div>
+                                    </div>
+                                        </div>
+
+                                    </div>
+                                </div>
+                            </div>
+                           </div>
+                        </div>
+                        </div>
+                    </div>
+                <!-- END CONTENT -->
+                <div class="modal fade" id="profile" tabindex="-1" role="profile" aria-hidden="true">
+                    <div class="portlet-body" >
+                       <div class="modal-dialog">
+                        <div class="modal-content">
+                            <div class="modal-body">
+                                <div class="form-body">
+                                    <div class="form-group"> 
+
+                                        <!-- PERSONAL INFO TAB -->
+                                        <div align="center">
+                                        
+                                        </div>
+
+                                        <div class="tab-pane active" id="tab_1_1">
+                                    <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">Customs Examination</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">Action</th> -->
+                                                </tr>
+                                            </thead>
+                                            <tbody>
+                                                <tr>
+                                                   <td>1</td>
+                                                   <td>03-08-2017</td>
+                                                   <td>014567</td> 
+                                                   <!-- <th><input type="checkbox" class="checkboxes"></th> -->
+                                                </tr>
+                                                <tr>
+                                                   <td>2</td>
+                                                   <td>04-08-2017</td>
+                                                   <td>014567</td> 
+                                                   <!-- <th><input type="checkbox" class="checkboxes"></th> -->
+                                                </tr>
+                                                <tr>
+                                                   <td>3</td>
+                                                   <td>05-08-2017</td>
+                                                   <td>014567</td> 
+                                                  <!--  <th><input type="checkbox" class="checkboxes"></th> -->
+                                                </tr>
+                                            </tbody>
+                                            </table>
+                                        </div>
+                                    
+                                        <div class="portlet-body">
+                                            <br>
+                                            <p>Customs Examination Departure Port</p> 
+                                            <br>
+                                            <p class="caption-subject font-red">New ETD : <input type="date" name="" ></p>
+                                            <p class="caption-subject font-red">New ETA : <input type="date" name="" ></p>
+                                            <br>
+                                            <p>Customs Examination Arrival Port</p>
+                                            <br>
+                                            <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>
+                                                <button type="button" class="btn dark btn-outline" data-dismiss="modal">Close</button>
+                                                </div>
+                                                </div>
+                                        </div>
+                                    </div>
+                                    </div>
+                                        </div>
+
+                                    </div>
+                                </div>
+                            </div>
+                           </div>
+                        </div>
+                        </div>
+                    </div>
+                <!-- BEGIN QUICK SIDEBAR -->
+                
+                <!-- END QUICK SIDEBAR -->
+            </div>
+            <!-- END CONTAINER -->
+            <!-- BEGIN FOOTER -->
+            <div class="page-footer">
+                <div class="page-footer-inner"> Copyright &copy; 2017 IZYIM.COM
+                <div class="scroll-to-top">
+                    <i class="icon-arrow-up"></i>
+                </div>
+            </div>
+            <!-- END FOOTER -->
+        </div>
+        <!--[if lt IE 9]>
+<script src="../assets/global/plugins/respond.min.js"></script>
+<script src="../assets/global/plugins/excanvas.min.js"></script> 
+<script src="../assets/global/plugins/ie8.fix.min.js"></script> 
+<![endif]-->
+        <!-- BEGIN CORE PLUGINS -->
+        <script src="../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
+        <script src="../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
+        <script src="../assets/global/plugins/js.cookie.min.js" type="text/javascript"></script>
+        <script src="../assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
+        <script src="../assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
+        <script src="../assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
+        <!-- END CORE PLUGINS -->
+        <script src="../assets/global/plugins/select2/js/select2.full.min.js" type="text/javascript"></script>
+        <script src="../assets/global/plugins/jquery-validation/js/jquery.validate.min.js" type="text/javascript"></script>
+        <script src="../assets/global/plugins/jquery-validation/js/additional-methods.min.js" type="text/javascript"></script>
+        <script src="../assets/global/plugins/bootstrap-wizard/jquery.bootstrap.wizard.min.js" type="text/javascript"></script>
+        <!-- BEGIN PAGE LEVEL PLUGINS -->
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js" type="text/javascript"></script>
+        <script src="../assets/global/scripts/datatable.js" type="text/javascript"></script>
+
+        <script src="../assets/global/plugins/datatables/datatables.min.js" type="text/javascript"></script>
+        <script src="../assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js" type="text/javascript"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js" type="text/javascript"></script>
+        <!-- END PAGE LEVEL PLUGINS --> 
+        <!-- BEGIN THEME GLOBAL SCRIPTS -->
+        <script src="../assets/global/scripts/app.min.js" type="text/javascript"></script>
+
+        <!-- END THEME GLOBAL SCRIPTS -->
+        <!-- END PAGE LEVEL SCRIPTS -->
+        <!-- BEGIN THEME LAYOUT SCRIPTS -->
+        <script src="../assets/layouts/layout/scripts/layout.min.js" type="text/javascript"></script>
+        <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>
+        $(document).ready(function () {
+        
+            
+            var dataSet = [
+                ["A1245","01-08-2017","","","","","","","","","","", ""],
+                ["A1345","21-08-2017","","","","","","","","","","", ""],
+                ["A9745","06-09-2017","","","","","","","","","","", ""],
+                ["A9075","22-10-2017","","","","","","","","","","", ""],
+                ["A6805","18-11-2017","","","","","","","","","","", ""],               
+                ["A0523","31-12-2017","","","","","","","","","","", ""],
+            ];
+            
+            var dataSet2 = 
+             [
+            ];
+
+            
+            var table1 = $('#example').DataTable({
+                data: dataSet,
+                
+                
+                //"bFilter" : false, 
+                "bInfo" : false,                
+                "bLengthChange": false,
+                colReorder: {
+                    reorderCallback: function () {
+                        console.log( 'callback' );
+                    }
+                },
+                "columnDefs": [{ // set default column settings
+                    'orderable': false,
+                    'targets': [0]
+                },
+                {
+                    "targets": [ 10 ],
+                    "visible": false
+                }],
+                // scroller extension: http://datatables.net/extensions/scroller/
+                <!-- scrollY:        300, -->
+                
+                buttons: [
+                    { extend: 'print', className: 'btn dark btn-outline' },
+                    { extend: 'copy', className: 'btn red btn-outline' },
+                    { extend: 'pdf', className: 'btn green btn-outline' },
+                    { extend: 'excel', className: 'btn yellow btn-outline ' },
+                    { extend: 'csv', className: 'btn purple btn-outline ' },
+                    { extend: 'colvis', className: 'btn dark btn-outline', text: 'Columns'}
+                ],
+                "language": {
+                    "aria": {
+                        "sortAscending": ": activate to sort column ascending",
+                        "sortDescending": ": activate to sort column descending"
+                    },
+                    "emptyTable": "No data available in table",
+                    "info": "Showing _START_ to _END_ of _TOTAL_ entries",
+                    "infoEmpty": "No entries found",
+                    "infoFiltered": "(filtered1 from _MAX_ total entries)",
+                    "lengthMenu": "_MENU_ entries",
+                    "search": "Search:",
+                    "zeroRecords": "No matching records found"
+                },
+                "order": [[ 1, "asc" ]],
+                "pageLength": 20,
+                "dom": "<'row' <'col-md-12'T>><'row'<'col-md-6'f><'col-md-6'<'toolbar2'B>>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
+                buttons: [
+                    {
+                        text: 'Create New',
+                        className: 'btn red  btn-circle btn-outline qweqwe',
+                        action: function ( e, dt, node, config ) {
+                            $("#qweqwe").trigger('click');
+                        }
+                        
+                    }
+                    
+                ],
+                fixedHeader:false,
+                columns: [
+                    { title: 'Reference No' },
+                    { title: 'Date<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_1\')"></span>' },
+                    { title: '<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_2\')"></span>' },
+                    { title: '<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_3\')"></span>' },
+                    { title: '<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_9\')"></span>' },
+                    { title: '<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_10\')"></span>' },
+                    { title: '<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_6\')"></span>' },
+                    { title: '<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_7\')"></span>' },
+                    { title: '<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_11\')"></span>' },
+                    { title: '<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_11\')"></span>' },
+                ],
+
+                initComplete: function () {
+                    configFilter(this, [1, 2,3, 4,5,6,7,8,9,10,11]);
+                }
+            });
+        
+        $('#example2').DataTable({
+                data: dataSet2,
+                "bInfo" : false,                
+                "bLengthChange": false,
+                colReorder: {
+                    reorderCallback: function () {
+                        console.log( 'callback' );
+                    }
+                },
+                "columnDefs": [{ // set default column settings
+                    'orderable': false,'targets': [0],
+                }],
+                "autoWidth": false,
+                buttons: [
+                    { extend: 'print', className: 'btn dark btn-outline' },
+                    { extend: 'copy', className: 'btn red btn-outline' },
+                    { extend: 'pdf', className: 'btn green btn-outline' },
+                    { extend: 'excel', className: 'btn yellow btn-outline ' },
+                    { extend: 'csv', className: 'btn purple btn-outline ' },
+                    { extend: 'colvis', className: 'btn dark btn-outline', text: 'Columns'}
+                ],
+                "language": {
+                    "aria": {
+                        "sortAscending": ": activate to sort column ascending",
+                        "sortDescending": ": activate to sort column descending"
+                    },
+                    "emptyTable": "No data available in table",
+                    "info": "Showing _START_ to _END_ of _TOTAL_ entries",
+                    "infoEmpty": "No entries found",
+                    "infoFiltered": "(filtered1 from _MAX_ total entries)",
+                    "lengthMenu": "_MENU_ entries",
+                    "search": "Search:",
+                    "zeroRecords": "No matching records found"
+                },
+                "pageLength": 20,
+                "order": [[ 1, "asc" ]],
+                columns: [
+                    // { title:  "<label class='mt-checkbox mt-checkbox-single mt-checkbox-outline'><input type='checkbox' class='group-checkable' data-set='#example2 .checkboxes' /><span></span></label>", className: "col_0"},
+                    // { title:  "No", className: "col_1"}, 
+                    // { title:  "ETA", className: "col_2"},
+                    // { title:  "Shipment <br/> No", className: "col_3"},
+                    // { title:  "Order <br/>No", className: "col_4"},
+                    // { title:  "Cust <br/> Code", className: "col_5"},
+                    // { title:  "Area<br/>State", className: "col_6"},
+                    // { title:  "Details", className: "col_7"},
+                    
+                ],
+                "dom": "<'row' <'col-md-12'T>><'row'<'col-md-6'><'col-md-6'f>r>t<'row'<'col-md-5 col-sm-12'<'toolbar'>><'col-md-7 col-sm-12'p>>",
+                initComplete: function () {
+                    configFilter(this, [ 2,3, 4,5,6,7,8]);
+                }
+            });
+            table1.columns( 12 ).search( 'Not Completed' ).draw();
+        $('.asdasd').on('switchChange.bootstrapSwitch', function (event, state) {
+        if(state == true){
+            table1.columns( 12 ).search( 'Not Completed' ).draw();
+        }else{
+            table1.columns( 12 ).search( 'Completed' ).draw();
+            
+        }
+        
+        });
+        existingdiv1 = document.getElementById( "switch" );
+        $( "div.toolbar2" ).append( existingdiv1 );
+        $("div.toolbar").html('Total Delivery : <p id="total" class="form-control-static">0</p>');
+        $('#sample_3_tools > li > a.tool-action').on('click', function() {
+            var action = $(this).attr('data-action');
+            $('#example').DataTable().button(action).trigger();
+        });
+        
+        var table = $('#example2');
+        
+        var tableWrapper = jQuery('#example2_wrapper');
+
+        table.find('.group-checkable').change(function () {
+            var set = jQuery(this).attr("data-set");
+            var checked = jQuery(this).is(":checked");
+            jQuery(set).each(function () {
+                if (checked) {
+                    $(this).prop("checked", true);
+                    $(this).parents('tr').addClass("active");                   
+                } else {
+                    $(this).prop("checked", false);
+                    $(this).parents('tr').removeClass("active");
+                }               
+            });
+            var count = $('#example2 .active').length; 
+            //document.getElementById('total').value = count;
+            document.getElementById("total").innerHTML = count;
+        });
+
+        table.on('change', 'tbody tr .checkboxes', function () {
+            $(this).parents('tr').toggleClass("active");            
+        });
+        
+        });
+        
+        
+        var table = $('#example2');
+        
+        var tableWrapper = jQuery('#example2_wrapper');
+        
+        
+         table.on('change', 'tbody tr .checkboxes', function () {
+            var checked = jQuery(this).is(":checked");
+            if (checked) {
+                var count = $('#example2 .active').length + 1; 
+                 document.getElementById("total").innerHTML = count;
+            }else{
+                var count = $('#example2 .active').length - 1 ; 
+                document.getElementById("total").innerHTML = count;
+                
+            }
+        });
+        
+        //This function initializes the content inside the filter modal
+        function configFilter($this, colArray) {
+            setTimeout(function () {
+                var tableName = $this[0].id;
+                var columns = $this.api().columns();
+               // $.each(colArray, function (i, arg) {
+                   // $('#' + tableName + ' th:eq(' + arg + ')').append('<br><img src="http://www.icone-png.com/png/39/38556.png" class="filterIcon" onclick="showFilter(event,\'' + tableName + '_' + arg + '\')" />');
+                //});
+
+                var template = '<div class="modal modalFilter modal-scroll in">' +
+                                    '<div class="modal-dialog modal-full" style="margin-top: 0px;margin-bottom: 0px;">' +
+                                        '<div class="modal-content">' +
+                                            '<div class="modal-body">' + '{0}</div>' +
+                                            '<div class="modal-footer">' +
+                                                '<a onclick="clearFilter(this, {1}, \'{2}\');"  class=" btn left waves-effect waves-light" data-dismiss="modal" >Clear</a>' +
+                                                '<a onclick="performFilter(this, {1}, \'{2}\');"  class=" btn right waves-effect waves-light">Ok</a>' +
+                                            '</div>' +
+                                        '</div>' +
+                                    '</div>' +
+                             '</div>';
+                $.each(colArray, function (index, value) {
+                    columns.every(function (i) {
+                        if (value === i) {
+                            var column = this, content = '<input type="text" class="filterSearchText form-control" onkeyup="filterValues(this)" /> <br/>';
+                            var columnName = $(this.header()).text().replace(/\s+/g, "_");
+                            var distinctArray = [];
+                            column.data().each(function (d, j) {
+                                if (distinctArray.indexOf(d) == -1) {
+                                    //alert(jQuery.type( d ));
+                                    d = d.replace("<a class='chat_link' href='chat.html'>",'');
+                                    d = d.replace("<span style='margin-bottom: 20px;' class='bb badge badge-danger'>5</span></a>",'');
+                                                                        
+                                    var id = tableName + "_" + columnName + "_" + j; // onchange="formatValues(this,' + value + ');
+                                    content += '<div><input type="checkbox" value="' + d + '"  id="' + id + '"/>&nbsp;<label style="font-size:10px" for="' + id + '"> ' + d + '</label></div>';
+                                    distinctArray.push(d);
+                                }
+                            });
+                            var newTemplate = $(template.replace('{0}', content).replace('{1}', value).replace('{1}', value).replace('{2}', tableName).replace('{2}', tableName));
+                            $('body').append(newTemplate);
+                            modalFilterArray[tableName + "_" + value] = newTemplate;
+                            content = '';
+                        }
+                    });
+                });
+            }, 50);
+        }
+        var modalFilterArray = {};
+        //User to show the filter modal
+        function showFilter(e, index) {
+            $('.modalFilter').hide();
+            $(modalFilterArray[index]).css({ left: 0, top: 0 });
+            var th = $(e.target).parent();
+            var pos = th.offset();
+            console.log(th);
+            $(modalFilterArray[index]).width(th.width() * 3.0);
+            $(modalFilterArray[index]).css({ 'left': pos.left, 'top': pos.top });
+            $(modalFilterArray[index]).show();
+            $('#mask').show();
+            e.stopPropagation();
+        }
+
+        //This function is to use the searchbox to filter the checkbox
+        function filterValues(node) {
+            var searchString = $(node).val();
+            var rootNode = $(node).parent();
+            if (searchString == '') {
+                rootNode.find('div').show();
+            } else {
+                rootNode.find("div").hide();
+                rootNode.find("div:contains('" + searchString + "')").show();
+            }
+        }
+
+        //Execute the filter on the table for a given column
+        function performFilter(node, i, tableId) {
+            var rootNode = $(node).parent().parent();
+            var searchString = '', counter = 0;
+
+            rootNode.find('input:checkbox').each(function (index, checkbox) {
+                if (checkbox.checked) {
+                    searchString += (counter == 0) ? checkbox.value : '|' + checkbox.value;
+                    counter++;
+                }
+            });
+            $('#' + tableId).DataTable().column(i).search(
+                searchString,
+                true, false
+            ).draw();
+            rootNode.hide();
+            $('#mask').hide();
+            $('.modalFilter').hide();
+        }
+
+        //Removes the filter from the table for a given column
+        function clearFilter(node, i, tableId) {
+            var rootNode = $(node).parent().parent();
+            rootNode.find(".filterSearchText").val('');
+            rootNode.find('input:checkbox').each(function (index, checkbox) {
+                checkbox.checked = false;
+                $(checkbox).parent().show();
+            });
+            $('#' + tableId).DataTable().column(i).search(
+                '',
+                true, false
+            ).draw();
+            rootNode.hide();
+            $('#mask').hide();
+            $('.modalFilter').hide();
+        }   
+        
+
+var FormWizard = function () {
+
+
+    return {
+        //main function to initiate the module
+        init: function () {
+            if (!jQuery().bootstrapWizard) {
+                return;
+            }
+
+            function format(state) {
+                if (!state.id) return state.text; // optgroup
+                return "<img class='flag' src='../../assets/global/img/flags/" + state.id.toLowerCase() + ".png'/>&nbsp;&nbsp;" + state.text;
+            }
+
+            $("#country_list").select2({
+                placeholder: "Select",
+                allowClear: true,
+                formatResult: format,
+                width: 'auto', 
+                formatSelection: format,
+                escapeMarkup: function (m) {
+                    return m;
+                }
+            });
+
+            var form = $('#submit_form');
+            var error = $('.alert-danger', form);
+            var success = $('.alert-success', form);
+
+            form.validate({
+                doNotHideMessage: true, //this option enables to show the error/success messages on tab switch.
+                errorElement: 'span', //default input error message container
+                errorClass: 'help-block help-block-error', // default input error message class
+                focusInvalid: false, // do not focus the last invalid input
+                rules: {
+                    //account
+                    username: {
+                        minlength: 5,
+                        required: true
+                    },
+                    password: {
+                        minlength: 5,
+                        required: true
+                    },
+                    rpassword: {
+                        minlength: 5,
+                        required: true,
+                        equalTo: "#submit_form_password"
+                    },
+                    //profile
+                    fullname: {
+                        required: true
+                    },
+                    email: {
+                        required: true,
+                        email: true
+                    },
+                    phone: {
+                        required: true
+                    },
+                    gender: {
+                        required: true
+                    },
+                    address: {
+                        required: true
+                    },
+                    city: {
+                        required: true
+                    },
+                    country: {
+                        required: true
+                    },
+                    //payment
+                    card_name: {
+                        required: true
+                    },
+                    card_number: {
+                        minlength: 16,
+                        maxlength: 16,
+                        required: true
+                    },
+                    card_cvc: {
+                        digits: true,
+                        required: true,
+                        minlength: 3,
+                        maxlength: 4
+                    },
+                    card_expiry_date: {
+                        required: true
+                    },
+                    'payment[]': {
+                        required: true,
+                        minlength: 1
+                    }
+                },
+
+                messages: { // custom messages for radio buttons and checkboxes
+                    'payment[]': {
+                        required: "Please select at least one option",
+                        minlength: jQuery.validator.format("Please select at least one option")
+                    }
+                },
+
+                errorPlacement: function (error, element) { // render error placement for each input type
+                    if (element.attr("name") == "gender") { // for uniform radio buttons, insert the after the given container
+                        error.insertAfter("#form_gender_error");
+                    } else if (element.attr("name") == "payment[]") { // for uniform checkboxes, insert the after the given container
+                        error.insertAfter("#form_payment_error");
+                    } else {
+                        error.insertAfter(element); // for other inputs, just perform default behavior
+                    }
+                },
+
+                invalidHandler: function (event, validator) { //display error alert on form submit   
+                    success.hide();
+                    error.show();
+                    App.scrollTo(error, -200);
+                },
+
+                highlight: function (element) { // hightlight error inputs
+                    $(element)
+                        .closest('.form-group').removeClass('has-success').addClass('has-error'); // set error class to the control group
+                },
+
+                unhighlight: function (element) { // revert the change done by hightlight
+                    $(element)
+                        .closest('.form-group').removeClass('has-error'); // set error class to the control group
+                },
+
+                success: function (label) {
+                    if (label.attr("for") == "gender" || label.attr("for") == "payment[]") { // for checkboxes and radio buttons, no need to show OK icon
+                        label
+                            .closest('.form-group').removeClass('has-error').addClass('has-success');
+                        label.remove(); // remove error label here
+                    } else { // display success icon for other inputs
+                        label
+                            .addClass('valid') // mark the current input as valid and display OK icon
+                        .closest('.form-group').removeClass('has-error').addClass('has-success'); // set success class to the control group
+                    }
+                },
+
+                submitHandler: function (form) {
+                    success.show();
+                    error.hide();
+                    form[0].submit();
+                    //add here some ajax code to submit your form or just call form.submit() if you want to submit the form without ajax
+                }
+
+            });
+
+            var displayConfirm = function() {
+                $('#tab4 .form-control-static', form).each(function(){
+                    var input = $('[name="'+$(this).attr("data-display")+'"]', form);
+                    if (input.is(":radio")) {
+                        input = $('[name="'+$(this).attr("data-display")+'"]:checked', form);
+                    }
+                    if (input.is(":text") || input.is("textarea")) {
+                        $(this).html(input.val());
+                    } else if (input.is("select")) {
+                        $(this).html(input.find('option:selected').text());
+                    } else if (input.is(":radio") && input.is(":checked")) {
+                        $(this).html(input.attr("data-title"));
+                    } else if ($(this).attr("data-display") == 'payment[]') {
+                        var payment = [];
+                        $('[name="payment[]"]:checked', form).each(function(){ 
+                            payment.push($(this).attr('data-title'));
+                        });
+                        $(this).html(payment.join("<br>"));
+                    }
+                });
+            }
+
+            var handleTitle = function(tab, navigation, index) {
+                var total = navigation.find('li').length;
+                var current = index + 1;
+                // set wizard title
+                $('.step-title', $('#form_wizard_1')).text('Step ' + (index + 1) + ' of ' + total);
+                // set done steps
+                jQuery('li', $('#form_wizard_1')).removeClass("done");
+                var li_list = navigation.find('li');
+                for (var i = 0; i < index; i++) {
+                    jQuery(li_list[i]).addClass("done");
+                }
+
+                if (current == 1) {
+                    $('#form_wizard_1').find('.button-previous').hide();
+                } else {
+                    $('#form_wizard_1').find('.button-previous').show();
+                }
+
+                if (current >= total) {
+                    $('#form_wizard_1').find('.button-next').hide();
+                    $('#form_wizard_1').find('.button-submit').show();
+                    displayConfirm();
+                } else {
+                    $('#form_wizard_1').find('.button-next').show();
+                    $('#form_wizard_1').find('.button-submit').hide();
+                }
+                App.scrollTo($('.page-title'));
+            }
+
+            // default form wizard
+            $('#form_wizard_1').bootstrapWizard({
+                'nextSelector': '.button-next',
+                'previousSelector': '.button-previous',
+                onTabClick: function (tab, navigation, index, clickedIndex) {
+                    return false;
+                    
+                    success.hide();
+                    error.hide();
+                    if (form.valid() == false) {
+                        return false;
+                    }
+                    
+                    handleTitle(tab, navigation, clickedIndex);
+                },
+                onNext: function (tab, navigation, index) {
+                    success.hide();
+                    error.hide();
+
+                    if (form.valid() == false) {
+                        return false;
+                    }
+
+                    handleTitle(tab, navigation, index);
+                },
+                onPrevious: function (tab, navigation, index) {
+                    success.hide();
+                    error.hide();
+
+                    handleTitle(tab, navigation, index);
+                },
+                onTabShow: function (tab, navigation, index) {
+                    var total = navigation.find('li').length;
+                    var current = index + 1;
+                    var $percent = (current / total) * 100;
+                    $('#form_wizard_1').find('.progress-bar').css({
+                        width: $percent + '%'
+                    });
+                }
+            });
+
+            $('#form_wizard_1').find('.button-previous').hide();
+            $('#form_wizard_1 .button-submit').click(function () {
+                location.reload();
+            }).hide();
+
+            //apply validation on select2 dropdown value change, this only needed for chosen dropdown integration.
+            $('#country_list', form).change(function () {
+                form.validate().element($(this)); //revalidate the chosen dropdown value and show error or success message for the input
+            });
+        }
+
+    };
+
+}();
+
+jQuery(document).ready(function() {
+    FormWizard.init();
+});
+
+    </script>
+    <script>
+                        var counter = 1;
+                        var limit = 3;
+
+                        function addInput(divName) {
+                            if (counter == limit) {
+                                alert("You have reached the limit of adding " + counter + " inputs");
+                            } else {
+                                var newdiv = document.createElement('div');
+                                newdiv.innerHTML = "Remark " + (counter + 1) + " <br><input type='text' style='height: 100px; width: 340px' name='myInputs[]'>";
+                                document.getElementById(divName).appendChild(newdiv);
+                                counter++;
+                            }
+                        }
+                        function addNewRow(){
+                        
+                            var last_count = $('#sample_editable_1').find('tbody tr:last td:first').text();
+                            
+                            var next_count = parseInt(last_count) + 1;
+                            
+                            var lengths = $( "#sample_editable_1 tbody tr:nth-child(2) td" ).length;
+                            
+                            $('#sample_editable_1 > tbody:last-child').append('<tr><td>'+next_count+'</td><td><input style="width: 34px;" type="text"/></td><td><input style="width: 75px;" type="text"/></td><td><input style="width: 34px;" type="text"/></td><td><input style="width: 34px;" type="text"/></td><td><input style="width: 75px;" type="text"/></td><td><input style="width: 34px;" type="text"/></td><td></td><td><label class="mt-checkbox mt-checkbox-single mt-checkbox-outline"><input type="checkbox" class="checkboxes" value="1"><span></span></label></td><td><div><span class="fileinput-new"></span><span class="fileinput-exists"></span><input type="file" name="..."></div></td>');
+
+                            var rowCount = $('#sample_editable_1 tbody tr').length;
+                            $('#total').html(rowCount);
+                        }
+                        function addNewColumn(){
+                            $('#sample_editable_1 thead').find('tr').each(function(){
+                                $(this).find('th').eq(7).after('<th>Remark</th>');
+                           });
+                            $('#sample_editable_1 tbody').find('tr').each(function(){
+                                $(this).find('td').eq(7).after('<td><textarea style="width: 34px;"></textarea></td>');
+                           });
+                            $('#sample_editable_1 tfoot').find('tr').each(function(){
+                                $(this).find('td').eq(7).after('<td><textarea style="width: 34px;"></textarea></td>');
+                           });
+                            
+                        }
+                        
+                    </script>
+                    <script type="text/javascript"> 
+ var howmanytoadd = 2;
+ var rows;
+
+ function calc() {
+     var tot = 0;
+     for (var i = 0; i < rows.length; i++) {
+         var linetot = 0;
+         rows[i].getElementsByTagName('input')[howmanytoadd].value = linetot;
+         tot += linetot;
+     }
+     document.getElementById('total').value = tot
+ }
+</script>
+<script type="text/javascript">
+function findTotal(){
+    var arr = document.getElementsByName('qty');
+    var tot=0;
+    for(var i=0;i<arr.length;i++){
+        if(parseInt(arr[i].value))
+            tot += parseInt(arr[i].value);
+    }
+    document.getElementById('total1').value = tot;
+}
+
+    </script>
+
+     
+    </body>
+
+</html>
