diff --git a/public/Forwarder/warehousenote.html b/public/Forwarder/warehousenote.html
index a69ef8c..347eb93 100644
--- a/public/Forwarder/warehousenote.html
+++ b/public/Forwarder/warehousenote.html
@@ -428,7 +428,7 @@
                         <div id="modal_demo_1" class="modal fade modal-scroll bs-modal-lg in" role="dialog" aria-hidden="true">
                             <div class="modal-dialog modal-lg">
                                 <div class="modal-content">
-                                    <div class="modal-header" style="background-color: #3598dc">
+                                    <div class="modal-header" style="background-color: #3598dc; font-size: 100px">
                                         <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>Departure Warehouse Received Note
@@ -493,7 +493,7 @@
                                                                     <!--/span-->
                                                                 </div>
                                                                 <div class="tab-pane active" id="tab1">
-                                                                    <h4 class="block"><b>Departure Warehouse Received Note</b></h4>
+                                                                    <h4 class="block"><b></b></h4>
                                                                     <div class="row">
                                                                         <div class="col-md-6">
                                                                             <div class="form-group">
@@ -575,7 +575,7 @@
                                                                             <br>
                                                                             <br>
                                                                             <div class="form-actions">
-                                                                                <div class="col-md-6">
+                                                                                <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>
@@ -621,7 +621,7 @@
                                                                                 <div class="portlet-body">
                                                                                     
 																							
-																							<div class="table-scrollable" style="max-width:900px">
+																							<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>
@@ -646,7 +646,7 @@
 																											</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"> 9.8kg </a>
+																											<td><a href="javascript:;" id="weight" data-type="text" data-pk="1" data-original-title="Weight"> 10kg </a>
 																											</td>
 																											<td>
 																												<div>
@@ -676,14 +676,14 @@
 																										</tr>
 																										<tr>
 																											<td>2</td>
-																											<td>4</td>
-																											<td>40x40x40</td>
-																											<td>10kg</td>
-																											<td><a href="javascript:;" id="totalctn2" data-type="text" data-pk="1" data-original-title="Total Ctn"> 4 </a>
+																											<td style="color: red">4</td>
+																											<td style="color: red">40x40x40</td>
+																											<td style="color: red">10kg</td>
+																											<td><a href="javascript:;" id="totalctn2" 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"> 40 x 40 x 40</a>
+																											<td><a href="javascript:;" id="address2" data-type="address" data-pk="1" data-original-title="Measurement" style="color: red"> 40 x 40 x 40</a>
 																											</td>
-																											<td><a href="javascript:;" id="weight2" data-type="text" data-pk="1" data-original-title="Weight"> 9.8kg </a>
+																											<td><a href="javascript:;" id="weight2" data-type="text" data-pk="1" data-original-title="Weight" style="color: red"> 10kg </a>
 																											</td>
 																											<td>
 																												<div>
@@ -713,14 +713,14 @@
 																										</tr>
 																										<tr>
 																											<td>3</td>
-																											<td>4</td>
-																											<td>40x40x40</td>
-																											<td>10kg</td>
-																											<td><a href="javascript:;" id="totalctn3" data-type="text" data-pk="1" data-original-title="Total Ctn"> 4 </a>
+																											<td style="color: red">4</td>
+																											<td style="color: red">40x40x40</td>
+																											<td style="color: red">10kg</td>
+																											<td><a href="javascript:;" id="totalctn3" data-type="text" data-pk="1" data-original-title="Total Ctn" style="color: red"> 4 </a>
 																											</td>
-																											<td><a href="javascript:;" id="address3" data-type="address" data-pk="1" data-original-title="Measurement"> 40 x 40 x 40</a>
+																											<td><a href="javascript:;" id="address3" data-type="address" data-pk="1" data-original-title="Measurement" style="color: red"> 40 x 40 x 40</a>
 																											</td>
-																											<td><a href="javascript:;" id="weight3" data-type="text" data-pk="1" data-original-title="Weight"> 9.8kg </a>
+																											<td><a href="javascript:;" id="weight3" data-type="text" data-pk="1" data-original-title="Weight" style="color: red"> 9.8kg </a>
 																											</td>
 																											<td>
 																												<div>
@@ -751,7 +751,7 @@
 																									</tbody>
 																								</table>
 																							</div>
-                                                                                            <h5>Total of the goods : </h5><h5 id="total">12</h5>
+                                                                                            <h5>Total of the goods : </h5><h5 id="total">10</h5>
                                                                                             
                                                                                         </div>
                                                                                         <div class="form-actions">
diff --git a/public/Forwarder/wrn2.html b/public/Forwarder/wrn2.html
new file mode 100644
index 0000000..1804fcf
--- /dev/null
+++ b/public/Forwarder/wrn2.html
@@ -0,0 +1,2463 @@
+<!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 -->
+
+    <head>
+        <meta charset="utf-8" />
+        <title>IZYIM | Departure Warehouse Receive Note</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/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" />
+        <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;
+            }
+            .table td, .table th {
+                font-size: 10px;
+                text-align:center;
+                vertical-align: middle;
+            }
+            .dataTables_wrapper .dataTables_filter {
+                float: left;
+                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;
+            }
+
+            @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%;
+            }
+             .modal-content {
+            width: 1000px;
+            position:  center;
+            font: 14px;
+        }
+        .modal-dialog {
+            width: 1000px;
+
+        }
+
+
+            
+        </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 -->
+                            
+                            <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 -->
+                </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">
+                    <!-- 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">
+                            <a href="chat.html?menu=true" class="nav-link nav-toggle">
+                                <i class="fa fa-comments-o"></i>
+                                <span class="title">Messenger</span>
+                                <span class="selected"></span>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="trackorder.html?menu=true" class="nav-link nav-toggle">
+                                <i class="icon-basket"></i>
+                                <span class="title">Track Order</span>
+                                <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 -->
+                <div class="page-content-wrapper">
+                    <!-- BEGIN CONTENT BODY -->
+                    <div class="page-content">
+                        <!-- BEGIN PAGE BAR -->
+                        <div class="page-bar">
+                            <ul class="page-breadcrumb">
+                                <li>
+                                    <a href="index.html">Home</a>
+                                    <i class="fa fa-circle"></i>
+                                </li>
+                                <li>
+                                    <a  href="deliveryarrange.html">Departure Warehouse Receive Note</a>
+                                </li>
+                            </ul>
+                        </div>
+                        <!-- END PAGE BAR -->
+                        <!-- BEGIN PAGE TITLE-->
+                        <h1 class="page-title"> 
+                        </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">
+                                            <i class="fa fa-cogs"></i><strong>Departure Warehouse Receive Note</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" > Departure Warehouse Receive Note
+                                                </a>
+                                            </div>
+                                            <div class="btn-group">
+                                                <a class="btn white btn-outline btn-circle" href="javascript:;" data-toggle="dropdown">
+                                                    <i class="fa fa-share"></i>
+                                                    <span class="hidden-xs"> Actions </span>
+                                                    <i class="fa fa-angle-down"></i>
+                                                </a>
+                                                
+                                                <ul class="dropdown-menu pull-right" id="sample_3_tools">
+                                                    <li>
+                                                        <a href="javascript:;" data-action="0" class="tool-action">
+                                                            <i class="icon-printer"></i> Print</a>
+                                                    </li>
+                                                    <li>
+                                                        <a href="javascript:;" data-action="1" class="tool-action">
+                                                            <i class="icon-check"></i> Copy</a>
+                                                    </li>
+                                                    <li>
+                                                        <a href="javascript:;" data-action="2" class="tool-action">
+                                                            <i class="icon-doc"></i> PDF</a>
+                                                    </li>
+                                                    <li>
+                                                        <a href="javascript:;" data-action="3" class="tool-action">
+                                                            <i class="icon-paper-clip"></i> Excel</a>
+                                                    </li>
+                                                    <li>
+                                                        <a href="javascript:;" data-action="4" class="tool-action">
+                                                            <i class="icon-cloud-upload"></i> CSV</a>
+                                                    </li>
+                                                    <li class="divider"> </li>
+                                                    <li>
+                                                        <a href="javascript:;" data-action="5" class="tool-action">
+                                                            <i class="icon-refresh"></i> Reload</a>
+                                                    </li>
+                                                </ul>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="portlet-body">
+                                    
+                                        <div class="table-container">
+                                        
+                                            <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>
+                        <!-- END CONTENT -->
+                                <div id="modal_demo_1" class="modal fade modal-scroll bs-modal-lg in" role="dialog" aria-hidden="true">
+                            <div class="modal-dialog modal-lg">
+                                <div class="modal-content">
+                                    <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>Departure Warehouse Received Note
+                                        </div>
+                                    </div>
+                                    </div>
+
+                                    <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">
+                                                                             <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>                         </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">
+                                                                        <center>
+                                                                        <div class="col-md-6">
+                                                                         <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>
+                                                                           </center>
+                                                                    </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 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="portlet-body">
+                                        <div class="table-toolbar">
+                                            <div class="row">
+                                                <div class="col-md-6">
+                                                    <div class="btn-group">
+                                                        <button id="sample_editable_1_new" class="btn green"> Add New
+                                                            <i class="fa fa-plus"></i>
+                                                        </button>
+                                                    </div>
+                                                </div>
+                                                
+                                            </div>
+                                        </div>
+                                        <table class="table table-striped table-hover table-bordered" id="sample_editable_1">
+                                            <thead>
+                                                <tr>
+                                                    <th width="5">No</th>
+                                                    <th width="10">Total Ctn<br>(nominal)</th>
+                                                    <th width="10">Measurement<br>(nominal)</th>
+                                                    <th width="10">Weight<br>(nominal)</th>
+                                                    <th width="5">Total Ctn<br>(actual)</th>
+                                                    <th width="10">Measurement<br>(actual)</th>
+                                                    <th width="10">Weight<br>(actual)</th>
+                                                    <th width="10">Upload your<br>Photo Here</th>
+                                                    <th width="10">Action</th>
+                                                    
+                                                </tr>
+                                            </thead>
+                                            <tbody>
+                                                <tr>
+                                                    <td>1</td>
+                                                        <td>4</td>
+                                                        <td>40x40x40</td>
+                                                        <td>10kg</td>
+                                                        <td><a href="javascript:;" id="totalctn" data-type="text" data-pk="1" data-original-title="Total Ctn"> 4 </a></td>
+                                                        <td><a href="javascript:;" id="measurement" data-type="text" data-pk="1" data-original-title="Measurement"> 40 x 40 x 40 </a>
+                                                        <!--<div class="popover-content">
+                                                        <div>
+                                                        <div class="editableform-loading" style="display:none;"></div>
+                                                        <form class="form-inline editableform" style>
+                                                        <div class="form-group">
+                                                            <div>
+                                                                <div class="editable-input">
+                                                                    <div class="editable-measurement">
+                                                                        <label>
+                                                                            <span>Height:</span>
+                                                                            <input type="text" name="height" class="form-control input-small">
+                                                                        </label>
+                                                                    </div>
+                                                                    <div class="editable-measurement">
+                                                                        <label>
+                                                                            <span>Width:</span>
+                                                                            <input type="text" name="width" class="form-control input-small">
+                                                                        </label>
+                                                                    </div>
+                                                                    <div class="editable-measurement">
+                                                                        <label>
+                                                                            <span>Length:</span>
+                                                                            <input type="text" name="length" class="form-control input-small">
+                                                                        </label>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+
+                                                        </form>
+                                                        </div>
+                                                        </div>-->
+                                                        </td>
+                                                        <td><a href="javascript:;" id="weight" data-type="text" data-pk="1" data-original-title="Weight" > 10kg </a></td>
+                                                        <td>
+                                                            <div>
+                                                                <span class="fileinput-new"></span>
+                                                                <span class="fileinput-exists"></span>
+                                                                <input type="file" name="...">   
+                                                            </div>    
+                                                        </td>
+                                                        <td>
+                                                        <center>
+                                                        <div class="btn-group">
+                                                        <a class="btn blue btn-outline btn-circle" href="javascript:;" data-toggle="dropdown" style="width:35px; height:25px"> 
+                                                         <i class="fa fa-angle-down" style="margin-top: :80px"></i>
+                                                        </a>   
+                                                        <ul class="dropdown-menu pull-right" id="sample_3_tools">
+                                                    <li>
+                                                        <a href="javascript:;" data-action="0" class="tool-action"> Measurement</a>
+                                                    </li>
+                                                    <li>
+                                                        <a href="javascript:;" data-action="1" class="tool-action">Unmatched</a>
+                                                    </li>
+                                                    <li>
+                                                        <a href="javascript:;" data-action="2" class="tool-action">Damage</a>
+                                                    </li>
+                                                </ul>
+                                                    </div>
+                                                    </center>
+                                                    </td>
+                                                    </tr>
+                                                
+                                                    <tr>
+                                                    <td>2</td>
+                                                        <td>4</td>
+                                                        <td>40x40x40</td>
+                                                        <td>10kg</td>
+                                                        <td><a href="javascript:;" id="totalctn2" data-type="text" data-pk="1" data-original-title="Total Ctn" style="color: red"> 3 </a></td>
+                                                        <td><a href="javascript:;" id="measurement2" data-type="text" data-pk="1" data-original-title="Measurement" style="color: red"> 40 x 40 x 40 </a></td>
+                                                        <td><a href="javascript:;" id="weight2" data-type="text" data-pk="1" data-original-title="Weight" style="color: red"> 10kg </a></td>
+                                                        <td>
+                                                            <div>
+                                                                <span class="fileinput-new"></span>
+                                                                <span class="fileinput-exists"></span>
+                                                                <input type="file" name="..."> </span>    
+                                                            </div>
+                                                        </td>
+                                                        <td>
+                                                        <center>
+                                                        <div class="btn-group">
+                                                        <a class="btn blue btn-outline btn-circle" href="javascript:;" data-toggle="dropdown" style="width:35px; height:25px"> 
+                                                         <i class="fa fa-angle-down" style="margin-top: :80px"></i>
+                                                        </a>   
+                                                        <ul class="dropdown-menu pull-right" id="sample_3_tools">
+                                                    <li>
+                                                        <a href="javascript:;" data-action="0" class="tool-action"> Measurement</a>
+                                                    </li>
+                                                    <li>
+                                                        <a href="javascript:;" data-action="1" class="tool-action">Unmatched</a>
+                                                    </li>
+                                                    <li>
+                                                        <a href="javascript:;" data-action="2" class="tool-action">Damage</a>
+                                                    </li>
+                                                </ul>
+                                                    </div>
+                                                    </center>
+                                                    </td>
+                                                </tr>
+                                                <tr>
+                                                    <td>3</td>
+                                                        <td>4</td>
+                                                        <td>40x40x40</td>
+                                                        <td>10kg</td>
+                                                        <td><a href="javascript:;" id="totalctn3" data-type="text" data-pk="1" data-original-title="Total Ctn" style="color: red"> 4 </a></td>
+                                                        <td><a href="javascript:;" id="measurement3" data-type="text" data-pk="1" data-original-title="Measurement" style="color: red"> 39 x 40 x 39 </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>
+                                                            <div>
+                                                                <span class="fileinput-new"></span>
+                                                                <span class="fileinput-exists"></span>
+                                                                <input type="file" name="...">   
+                                                            </div> 
+                                                        </td>
+                                                        <td>
+                                                        <center>
+                                                        <div class="btn-group">
+                                                        <a class="btn blue btn-outline btn-circle" href="javascript:;" data-toggle="dropdown" style="width:35px; height:25px"> 
+                                                         <i class="fa fa-angle-down" style="margin-top: :80px"></i>
+                                                        </a>   
+                                                        <ul class="dropdown-menu pull-right" id="sample_3_tools">
+                                                    <li>
+                                                        <a href="javascript:;" data-action="0" class="tool-action"> Measurement</a>
+                                                    </li>
+                                                    <li>
+                                                        <a href="javascript:;" data-action="1" class="tool-action">Unmatched</a>
+                                                    </li>
+                                                    <li>
+                                                        <a href="javascript:;" data-action="2" class="tool-action">Damage</a>
+                                                    </li>
+                                                </ul>
+                                                    </div>
+                                                    </center>
+                                                    </td>
+                                                </tr>
+                                                
+                                            </tbody>
+                                        </table>
+                                         <h5>Total of the goods : 12</h5>
+                                        <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="chat.html" class="btn green button-submit"> Submit
+                                                            </a>
+                                                            
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                </div>
+                                                <br>
+                                            <br>
+                                            <br>
+                                            <p style="color:red; font-size:90%" align="center">Notification: If the goods is unmatched or damage, please keep key in the information</p>
+                                        </div>
+                                    </div>
+                                <!-- /.modal-content -->
+                            </div>
+                            <!-- /.modal-dialog -->
+                        </div>
+
+                        <!--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>
+                                    </div>
+                                    
+                                </div>
+                            </div>
+                        </div> 
+                
+                    <!-- END CONTENT BODY -->
+                </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">Consolidation</span>
+                                            </div>
+                                        </div>
+                                        
+                                    <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">
+                                            <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 -->
+                <a href="javascript:;" class="page-quick-sidebar-toggler">
+                    <i class="icon-login"></i>
+                </a>
+                <div class="page-quick-sidebar-wrapper" data-close-on-body-click="false">
+                    <div class="page-quick-sidebar">
+                        <ul class="nav nav-tabs">
+                            <li class="active">
+                                <a href="javascript:;" data-target="#quick_sidebar_tab_1" data-toggle="tab"> Users
+                                    <span class="badge badge-danger">2</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="javascript:;" data-target="#quick_sidebar_tab_2" data-toggle="tab"> Alerts
+                                    <span class="badge badge-success">7</span>
+                                </a>
+                            </li>
+                            <li class="dropdown">
+                                <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown"> More
+                                    <i class="fa fa-angle-down"></i>
+                                </a>
+                                <ul class="dropdown-menu pull-right">
+                                    <li>
+                                        <a href="javascript:;" data-target="#quick_sidebar_tab_3" data-toggle="tab">
+                                            <i class="icon-bell"></i> Alerts </a>
+                                    </li>
+                                    <li>
+                                        <a href="javascript:;" data-target="#quick_sidebar_tab_3" data-toggle="tab">
+                                            <i class="icon-info"></i> Notifications </a>
+                                    </li>
+                                    <li>
+                                        <a href="javascript:;" data-target="#quick_sidebar_tab_3" data-toggle="tab">
+                                            <i class="icon-speech"></i> Activities </a>
+                                    </li>
+                                    <li class="divider"></li>
+                                    <li>
+                                        <a href="javascript:;" data-target="#quick_sidebar_tab_3" data-toggle="tab">
+                                            <i class="icon-settings"></i> Settings </a>
+                                    </li>
+                                </ul>
+                            </li>
+                        </ul>
+                        <div class="tab-content">
+                            <div class="tab-pane active page-quick-sidebar-chat" id="quick_sidebar_tab_1">
+                                <div class="page-quick-sidebar-chat-users" data-rail-color="#ddd" data-wrapper-class="page-quick-sidebar-list">
+                                    <h3 class="list-heading">Staff</h3>
+                                    <ul class="media-list list-items">
+                                        <li class="media">
+                                            <div class="media-status">
+                                                <span class="badge badge-success">8</span>
+                                            </div>
+                                            <img class="media-object" src="../assets/layouts/layout/img/avatar3.jpg" alt="...">
+                                            <div class="media-body">
+                                                <h4 class="media-heading">Bob Nilson</h4>
+                                                <div class="media-heading-sub"> Project Manager </div>
+                                            </div>
+                                        </li>
+                                        <li class="media">
+                                            <img class="media-object" src="../assets/layouts/layout/img/avatar1.jpg" alt="...">
+                                            <div class="media-body">
+                                                <h4 class="media-heading">Nick Larson</h4>
+                                                <div class="media-heading-sub"> Art Director </div>
+                                            </div>
+                                        </li>
+                                        <li class="media">
+                                            <div class="media-status">
+                                                <span class="badge badge-danger">3</span>
+                                            </div>
+                                            <img class="media-object" src="../assets/layouts/layout/img/avatar4.jpg" alt="...">
+                                            <div class="media-body">
+                                                <h4 class="media-heading">Deon Hubert</h4>
+                                                <div class="media-heading-sub"> CTO </div>
+                                            </div>
+                                        </li>
+                                        <li class="media">
+                                            <img class="media-object" src="../assets/layouts/layout/img/avatar2.jpg" alt="...">
+                                            <div class="media-body">
+                                                <h4 class="media-heading">Ella Wong</h4>
+                                                <div class="media-heading-sub"> CEO </div>
+                                            </div>
+                                        </li>
+                                    </ul>
+                                    <h3 class="list-heading">Customers</h3>
+                                    <ul class="media-list list-items">
+                                        <li class="media">
+                                            <div class="media-status">
+                                                <span class="badge badge-warning">2</span>
+                                            </div>
+                                            <img class="media-object" src="../assets/layouts/layout/img/avatar6.jpg" alt="...">
+                                            <div class="media-body">
+                                                <h4 class="media-heading">Lara Kunis</h4>
+                                                <div class="media-heading-sub"> CEO, Loop Inc </div>
+                                                <div class="media-heading-small"> Last seen 03:10 AM </div>
+                                            </div>
+                                        </li>
+                                        <li class="media">
+                                            <div class="media-status">
+                                                <span class="label label-sm label-success">new</span>
+                                            </div>
+                                            <img class="media-object" src="../assets/layouts/layout/img/avatar7.jpg" alt="...">
+                                            <div class="media-body">
+                                                <h4 class="media-heading">Ernie Kyllonen</h4>
+                                                <div class="media-heading-sub"> Project Manager,
+                                                    <br> SmartBizz PTL </div>
+                                            </div>
+                                        </li>
+                                        <li class="media">
+                                            <img class="media-object" src="../assets/layouts/layout/img/avatar8.jpg" alt="...">
+                                            <div class="media-body">
+                                                <h4 class="media-heading">Lisa Stone</h4>
+                                                <div class="media-heading-sub"> CTO, Keort Inc </div>
+                                                <div class="media-heading-small"> Last seen 13:10 PM </div>
+                                            </div>
+                                        </li>
+                                        <li class="media">
+                                            <div class="media-status">
+                                                <span class="badge badge-success">7</span>
+                                            </div>
+                                            <img class="media-object" src="../assets/layouts/layout/img/avatar9.jpg" alt="...">
+                                            <div class="media-body">
+                                                <h4 class="media-heading">Deon Portalatin</h4>
+                                                <div class="media-heading-sub"> CFO, H&D LTD </div>
+                                            </div>
+                                        </li>
+                                        <li class="media">
+                                            <img class="media-object" src="../assets/layouts/layout/img/avatar10.jpg" alt="...">
+                                            <div class="media-body">
+                                                <h4 class="media-heading">Irina Savikova</h4>
+                                                <div class="media-heading-sub"> CEO, Tizda Motors Inc </div>
+                                            </div>
+                                        </li>
+                                        <li class="media">
+                                            <div class="media-status">
+                                                <span class="badge badge-danger">4</span>
+                                            </div>
+                                            <img class="media-object" src="../assets/layouts/layout/img/avatar11.jpg" alt="...">
+                                            <div class="media-body">
+                                                <h4 class="media-heading">Maria Gomez</h4>
+                                                <div class="media-heading-sub"> Manager, Infomatic Inc </div>
+                                                <div class="media-heading-small"> Last seen 03:10 AM </div>
+                                            </div>
+                                        </li>
+                                    </ul>
+                                </div>
+                                <div class="page-quick-sidebar-item">
+                                    <div class="page-quick-sidebar-chat-user">
+                                        <div class="page-quick-sidebar-nav">
+                                            <a href="javascript:;" class="page-quick-sidebar-back-to-list">
+                                                <i class="icon-arrow-left"></i>Back</a>
+                                        </div>
+                                        <div class="page-quick-sidebar-chat-user-messages">
+                                            <div class="post out">
+                                                <img class="avatar" alt="" src="../assets/layouts/layout/img/avatar3.jpg" />
+                                                <div class="message">
+                                                    <span class="arrow"></span>
+                                                    <a href="javascript:;" class="name">Bob Nilson</a>
+                                                    <span class="datetime">20:15</span>
+                                                    <span class="body"> When could you send me the report ? </span>
+                                                </div>
+                                            </div>
+                                            <div class="post in">
+                                                <img class="avatar" alt="" src="../assets/layouts/layout/img/avatar2.jpg" />
+                                                <div class="message">
+                                                    <span class="arrow"></span>
+                                                    <a href="javascript:;" class="name">Ella Wong</a>
+                                                    <span class="datetime">20:15</span>
+                                                    <span class="body"> Its almost done. I will be sending it shortly </span>
+                                                </div>
+                                            </div>
+                                            <div class="post out">
+                                                <img class="avatar" alt="" src="../assets/layouts/layout/img/avatar3.jpg" />
+                                                <div class="message">
+                                                    <span class="arrow"></span>
+                                                    <a href="javascript:;" class="name">Bob Nilson</a>
+                                                    <span class="datetime">20:15</span>
+                                                    <span class="body"> Alright. Thanks! :) </span>
+                                                </div>
+                                            </div>
+                                            <div class="post in">
+                                                <img class="avatar" alt="" src="../assets/layouts/layout/img/avatar2.jpg" />
+                                                <div class="message">
+                                                    <span class="arrow"></span>
+                                                    <a href="javascript:;" class="name">Ella Wong</a>
+                                                    <span class="datetime">20:16</span>
+                                                    <span class="body"> You are most welcome. Sorry for the delay. </span>
+                                                </div>
+                                            </div>
+                                            <div class="post out">
+                                                <img class="avatar" alt="" src="../assets/layouts/layout/img/avatar3.jpg" />
+                                                <div class="message">
+                                                    <span class="arrow"></span>
+                                                    <a href="javascript:;" class="name">Bob Nilson</a>
+                                                    <span class="datetime">20:17</span>
+                                                    <span class="body"> No probs. Just take your time :) </span>
+                                                </div>
+                                            </div>
+                                            <div class="post in">
+                                                <img class="avatar" alt="" src="../assets/layouts/layout/img/avatar2.jpg" />
+                                                <div class="message">
+                                                    <span class="arrow"></span>
+                                                    <a href="javascript:;" class="name">Ella Wong</a>
+                                                    <span class="datetime">20:40</span>
+                                                    <span class="body"> Alright. I just emailed it to you. </span>
+                                                </div>
+                                            </div>
+                                            <div class="post out">
+                                                <img class="avatar" alt="" src="../assets/layouts/layout/img/avatar3.jpg" />
+                                                <div class="message">
+                                                    <span class="arrow"></span>
+                                                    <a href="javascript:;" class="name">Bob Nilson</a>
+                                                    <span class="datetime">20:17</span>
+                                                    <span class="body"> Great! Thanks. Will check it right away. </span>
+                                                </div>
+                                            </div>
+                                            <div class="post in">
+                                                <img class="avatar" alt="" src="../assets/layouts/layout/img/avatar2.jpg" />
+                                                <div class="message">
+                                                    <span class="arrow"></span>
+                                                    <a href="javascript:;" class="name">Ella Wong</a>
+                                                    <span class="datetime">20:40</span>
+                                                    <span class="body"> Please let me know if you have any comment. </span>
+                                                </div>
+                                            </div>
+                                            <div class="post out">
+                                                <img class="avatar" alt="" src="../assets/layouts/layout/img/avatar3.jpg" />
+                                                <div class="message">
+                                                    <span class="arrow"></span>
+                                                    <a href="javascript:;" class="name">Bob Nilson</a>
+                                                    <span class="datetime">20:17</span>
+                                                    <span class="body"> Sure. I will check and buzz you if anything needs to be corrected. </span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="page-quick-sidebar-chat-user-form">
+                                            <div class="input-group">
+                                                <input type="text" class="form-control" placeholder="Type a message here...">
+                                                <div class="input-group-btn">
+                                                    <button type="button" class="btn green">
+                                                        <i class="icon-paper-clip"></i>
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="tab-pane page-quick-sidebar-alerts" id="quick_sidebar_tab_2">
+                                <div class="page-quick-sidebar-alerts-list">
+                                    <h3 class="list-heading">General</h3>
+                                    <ul class="feeds list-items">
+                                        <li>
+                                            <div class="col1">
+                                                <div class="cont">
+                                                    <div class="cont-col1">
+                                                        <div class="label label-sm label-info">
+                                                            <i class="fa fa-check"></i>
+                                                        </div>
+                                                    </div>
+                                                    <div class="cont-col2">
+                                                        <div class="desc"> You have 4 pending tasks.
+                                                            <span class="label label-sm label-warning "> Take action
+                                                                <i class="fa fa-share"></i>
+                                                            </span>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="col2">
+                                                <div class="date"> Just now </div>
+                                            </div>
+                                        </li>
+                                        <li>
+                                            <a href="javascript:;">
+                                                <div class="col1">
+                                                    <div class="cont">
+                                                        <div class="cont-col1">
+                                                            <div class="label label-sm label-success">
+                                                                <i class="fa fa-bar-chart-o"></i>
+                                                            </div>
+                                                        </div>
+                                                        <div class="cont-col2">
+                                                            <div class="desc"> Finance Report for year 2013 has been released. </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div class="col2">
+                                                    <div class="date"> 20 mins </div>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <div class="col1">
+                                                <div class="cont">
+                                                    <div class="cont-col1">
+                                                        <div class="label label-sm label-danger">
+                                                            <i class="fa fa-user"></i>
+                                                        </div>
+                                                    </div>
+                                                    <div class="cont-col2">
+                                                        <div class="desc"> You have 5 pending membership that requires a quick review. </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="col2">
+                                                <div class="date"> 24 mins </div>
+                                            </div>
+                                        </li>
+                                        <li>
+                                            <div class="col1">
+                                                <div class="cont">
+                                                    <div class="cont-col1">
+                                                        <div class="label label-sm label-info">
+                                                            <i class="fa fa-shopping-cart"></i>
+                                                        </div>
+                                                    </div>
+                                                    <div class="cont-col2">
+                                                        <div class="desc"> New order received with
+                                                            <span class="label label-sm label-success"> Reference Number: DR23923 </span>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="col2">
+                                                <div class="date"> 30 mins </div>
+                                            </div>
+                                        </li>
+                                        <li>
+                                            <div class="col1">
+                                                <div class="cont">
+                                                    <div class="cont-col1">
+                                                        <div class="label label-sm label-success">
+                                                            <i class="fa fa-user"></i>
+                                                        </div>
+                                                    </div>
+                                                    <div class="cont-col2">
+                                                        <div class="desc"> You have 5 pending membership that requires a quick review. </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="col2">
+                                                <div class="date"> 24 mins </div>
+                                            </div>
+                                        </li>
+                                        <li>
+                                            <div class="col1">
+                                                <div class="cont">
+                                                    <div class="cont-col1">
+                                                        <div class="label label-sm label-info">
+                                                            <i class="fa fa-bell-o"></i>
+                                                        </div>
+                                                    </div>
+                                                    <div class="cont-col2">
+                                                        <div class="desc"> Web server hardware needs to be upgraded.
+                                                            <span class="label label-sm label-warning"> Overdue </span>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="col2">
+                                                <div class="date"> 2 hours </div>
+                                            </div>
+                                        </li>
+                                        <li>
+                                            <a href="javascript:;">
+                                                <div class="col1">
+                                                    <div class="cont">
+                                                        <div class="cont-col1">
+                                                            <div class="label label-sm label-default">
+                                                                <i class="fa fa-briefcase"></i>
+                                                            </div>
+                                                        </div>
+                                                        <div class="cont-col2">
+                                                            <div class="desc"> IPO Report for year 2013 has been released. </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div class="col2">
+                                                    <div class="date"> 20 mins </div>
+                                                </div>
+                                            </a>
+                                        </li>
+                                    </ul>
+                                    <h3 class="list-heading">System</h3>
+                                    <ul class="feeds list-items">
+                                        <li>
+                                            <div class="col1">
+                                                <div class="cont">
+                                                    <div class="cont-col1">
+                                                        <div class="label label-sm label-info">
+                                                            <i class="fa fa-check"></i>
+                                                        </div>
+                                                    </div>
+                                                    <div class="cont-col2">
+                                                        <div class="desc"> You have 4 pending tasks.
+                                                            <span class="label label-sm label-warning "> Take action
+                                                                <i class="fa fa-share"></i>
+                                                            </span>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="col2">
+                                                <div class="date"> Just now </div>
+                                            </div>
+                                        </li>
+                                        <li>
+                                            <a href="javascript:;">
+                                                <div class="col1">
+                                                    <div class="cont">
+                                                        <div class="cont-col1">
+                                                            <div class="label label-sm label-danger">
+                                                                <i class="fa fa-bar-chart-o"></i>
+                                                            </div>
+                                                        </div>
+                                                        <div class="cont-col2">
+                                                            <div class="desc"> Finance Report for year 2013 has been released. </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div class="col2">
+                                                    <div class="date"> 20 mins </div>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <div class="col1">
+                                                <div class="cont">
+                                                    <div class="cont-col1">
+                                                        <div class="label label-sm label-default">
+                                                            <i class="fa fa-user"></i>
+                                                        </div>
+                                                    </div>
+                                                    <div class="cont-col2">
+                                                        <div class="desc"> You have 5 pending membership that requires a quick review. </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="col2">
+                                                <div class="date"> 24 mins </div>
+                                            </div>
+                                        </li>
+                                        <li>
+                                            <div class="col1">
+                                                <div class="cont">
+                                                    <div class="cont-col1">
+                                                        <div class="label label-sm label-info">
+                                                            <i class="fa fa-shopping-cart"></i>
+                                                        </div>
+                                                    </div>
+                                                    <div class="cont-col2">
+                                                        <div class="desc"> New order received with
+                                                            <span class="label label-sm label-success"> Reference Number: DR23923 </span>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="col2">
+                                                <div class="date"> 30 mins </div>
+                                            </div>
+                                        </li>
+                                        <li>
+                                            <div class="col1">
+                                                <div class="cont">
+                                                    <div class="cont-col1">
+                                                        <div class="label label-sm label-success">
+                                                            <i class="fa fa-user"></i>
+                                                        </div>
+                                                    </div>
+                                                    <div class="cont-col2">
+                                                        <div class="desc"> You have 5 pending membership that requires a quick review. </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="col2">
+                                                <div class="date"> 24 mins </div>
+                                            </div>
+                                        </li>
+                                        <li>
+                                            <div class="col1">
+                                                <div class="cont">
+                                                    <div class="cont-col1">
+                                                        <div class="label label-sm label-warning">
+                                                            <i class="fa fa-bell-o"></i>
+                                                        </div>
+                                                    </div>
+                                                    <div class="cont-col2">
+                                                        <div class="desc"> Web server hardware needs to be upgraded.
+                                                            <span class="label label-sm label-default "> Overdue </span>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="col2">
+                                                <div class="date"> 2 hours </div>
+                                            </div>
+                                        </li>
+                                        <li>
+                                            <a href="javascript:;">
+                                                <div class="col1">
+                                                    <div class="cont">
+                                                        <div class="cont-col1">
+                                                            <div class="label label-sm label-info">
+                                                                <i class="fa fa-briefcase"></i>
+                                                            </div>
+                                                        </div>
+                                                        <div class="cont-col2">
+                                                            <div class="desc"> IPO Report for year 2013 has been released. </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div class="col2">
+                                                    <div class="date"> 20 mins </div>
+                                                </div>
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                            <div class="tab-pane page-quick-sidebar-settings" id="quick_sidebar_tab_3">
+                                <div class="page-quick-sidebar-settings-list">
+                                    <h3 class="list-heading">General Settings</h3>
+                                    <ul class="list-items borderless">
+                                        <li> Enable Notifications
+                                            <input type="checkbox" class="make-switch" checked data-size="small" data-on-color="success" data-on-text="ON" data-off-color="default" data-off-text="OFF"> </li>
+                                        <li> Allow Tracking
+                                            <input type="checkbox" class="make-switch" data-size="small" data-on-color="info" data-on-text="ON" data-off-color="default" data-off-text="OFF"> </li>
+                                        <li> Log Errors
+                                            <input type="checkbox" class="make-switch" checked data-size="small" data-on-color="danger" data-on-text="ON" data-off-color="default" data-off-text="OFF"> </li>
+                                        <li> Auto Sumbit Issues
+                                            <input type="checkbox" class="make-switch" data-size="small" data-on-color="warning" data-on-text="ON" data-off-color="default" data-off-text="OFF"> </li>
+                                        <li> Enable SMS Alerts
+                                            <input type="checkbox" class="make-switch" checked data-size="small" data-on-color="success" data-on-text="ON" data-off-color="default" data-off-text="OFF"> </li>
+                                    </ul>
+                                    <h3 class="list-heading">System Settings</h3>
+                                    <ul class="list-items borderless">
+                                        <li> Security Level
+                                            <select class="form-control input-inline input-sm input-small">
+                                                <option value="1">Normal</option>
+                                                <option value="2" selected>Medium</option>
+                                                <option value="e">High</option>
+                                            </select>
+                                        </li>
+                                        <li> Failed Email Attempts
+                                            <input class="form-control input-inline input-sm input-small" value="5" /> </li>
+                                        <li> Secondary SMTP Port
+                                            <input class="form-control input-inline input-sm input-small" value="3560" /> </li>
+                                        <li> Notify On System Error
+                                            <input type="checkbox" class="make-switch" checked data-size="small" data-on-color="danger" data-on-text="ON" data-off-color="default" data-off-text="OFF"> </li>
+                                        <li> Notify On SMTP Error
+                                            <input type="checkbox" class="make-switch" checked data-size="small" data-on-color="warning" data-on-text="ON" data-off-color="default" data-off-text="OFF"> </li>
+                                    </ul>
+                                    <div class="inner-content">
+                                        <button class="btn btn-success">
+                                            <i class="icon-settings"></i> Save Changes</button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- 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>
+		<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/global/plugins/select2/js/select2.full.min.js" type="text/javascript"></script>
+		
+        <script src="../assets/pages/scripts/form-editable.js" type="text/javascript"></script>
+        <script src="../assets/pages/scripts/form-editable.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>
+   <script src="/wp-includes/js/addInput.js" language="Javascript" type="text/javascript"></script>
+   <script src="../assets/pages/scripts/table-datatables-editable.js" type="text/javascript"></script>
+    <script src="../assets/pages/scripts/table-datatables-colreorder.min.js" type="text/javascript"></script>
+    <script src="../assets/pages/scripts/table-datatables-editable.min.js" type="text/javascript"></script>
+     <script src="../assets/pages/scripts/form-wizard.min.js" type="text/javascript"></script>
+
+        <!-- END THEME LAYOUT SCRIPTS -->        
+        <script type="text/javascript">  
+                    
+               window.onload = function() {
+                   var elements = getElementsByClassName('editInPlace', '*', document);
+                   for (var i = 0; i < elements.length; i++) {
+                       elements[i].ondblclick = function() {
+                           this.setAttribute('oldText', this.innerHTML); // not actually required. I use this just in case you want to cancel and set the original text back.
+                           var textBox = document.createElement('INPUT');
+                           textBox.setAttribute('type', 'text');
+                           textBox.value = this.innerHTML;
+                           textBox.onblur = function() {
+                               var newValue = this.value;
+                               this.parentNode.innerHTML = newValue;
+                               //alert("Your new value: \n\n" + newValue);
+                           }
+               
+                           this.innerHTML = '';
+               
+                           this.appendChild(textBox);
+                       }
+                   }(i);
+               }
+               
+               function getElementsByClassName(className, tag, elm) {
+                   var testClass = new RegExp("(^|\\s)" + className + "(\\s|$)");
+                   var tag = tag || "*";
+                   var elm = elm || document;
+                   var elements = (tag == "*" && elm.all) ? elm.all : elm.getElementsByTagName(tag);
+                   var returnElements = [];
+                   var current;
+                   var length = elements.length;
+                   for (var i = 0; i < length; i++) {
+                       current = elements[i];
+                       if (testClass.test(current.className)) {
+                           returnElements.push(current);
+                       }
+                   }
+                   return returnElements;
+               }
+               $('[data-toggle="popover"]').popover({trigger: 'focus'})
+               
+            </script>
+        <script>
+        $(document).ready(function () {
+        
+            
+            var dataSet = [
+                ["01-08-2017","ABC Warehouse","101","CIEF/00012/00012","00012","CBD SDN BHD","00012-00012","4","1 Pallet","10cmx10cmx10cm","10kg", ""],
+                ["04-08-2017","ABC Warehouse","102","CIEF/00022/00022","00022","CBD SDN BHD","00022-00022","5","1 Package","14cmx10cmx12cm","17kg", ""],
+                ["11-08-2017","ABC Warehouse","103","CIEF/00034/00034","00034","CBD SDN BHD","00034-00034","8","2 Pallet","16cmx10cmx17cm","84kg", ""],
+                ["31-08-2017","ABC Warehouse","104","CIEF/00089/00089","00089","CBD SDN BHD","00089-00089","10","5 Package","11cmx12cmx12cm","100kg", ""],
+                ["01-09-2017","ABC Warehouse","105","CIEF/00100/00100","00100","CBD SDN BHD","00100-00100","3","7 Pallet","19cmx20cmx20cm","30kg", ""],             
+                ["17-09-2017","ABC Warehouse","106","CIEF/00156/00156","00156","CBD SDN BHD","00156-00156","4","9 Package","12cmx10cmx12cm","20kg", ""],
+                // ["7","<a  style='float:center' data-toggle='modal' href='#profile'> CTN133 </a>","789ABC","01-08-2017","<span style='color:red'>02-08-2017 </span>","<span style='color:red'>04-08-2017 </span>","68679","Guangzhou","Customs Examination","03-07-2017","<span style='color:red'><strong>03-07-2017<br/>Delayed</strong></span>","Delivery Request <span style='color:#F1C40F;font-weight: 700;'>Sent</span>", "Not Completed"],
+                // ["8","<a  style='float:center' data-toggle='modal' href='#profile'> CTN135 </a>","789ABC","01-08-2017","<span style='color:red'>01-08-2017 </span>","<span style='color:red'>05-08-2017 </span>","12345","Dongguan","Customs Examination","03-07-2017","<span style='color:red'><strong>03-07-2017<br/>Delayed</strong></span>","Delivery Request <span style='color:#F1C40F;font-weight: 700;'>Sent</span>", "Not Completed"],
+            ];
+            
+            var dataSet2 = 
+             [
+            ];
+
+            
+            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": [ 9 ],
+                    "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: 'Receive Goods',
+                        className: 'btn red  btn-circle btn-outline qweqwe',
+                        action: function ( e, dt, node, config ) {
+                            $("#qweqwe").trigger('click');
+                        }
+                        
+                    }
+                    
+                ],
+
+                fixedHeader:false,
+                columns: [
+                    { title: 'Receive<br>Date <br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_1\')"></span>' },
+                    { title: 'Warehouse <br>Name<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_2\')"></span>' },
+                    { title: 'Warehouse Receive<br>Note No<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_3\')"></span>' },
+                    { title: 'Marking<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_4\')"></span>' },
+                    { title: 'Order<br>No<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_5\')"></span>' },
+                    { title: 'Transporter<br>Company Name<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_6\')"></span>' },
+                    { title: 'Consignment<br>Note<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_7\')"></span>' },
+                    { title: 'Total<br>CTN<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_8\')"></span>' },
+                    { title: 'UOM<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_9\')"></span>' },
+                    { title: 'Total<br>CBM<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_10\')"></span>' },
+                    { title: 'Total Goods<br>Weight<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_11\')"></span>' },
+                    { title: 'Remark<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_12\')"></span>' },
+                    // { title: 'Stats' },
+                ],
+
+                initComplete: function () {
+                    configFilter(this, [1, 2,3, 4,5,6,7,8,9,10,11,12,13]);
+                }
+            });
+        
+        $('#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( 13 ).search( 'Not Completed' ).draw();
+        $('.asdasd').on('switchChange.bootstrapSwitch', function (event, state) {
+        if(state == true){
+            table1.columns( 13 ).search( 'Not Completed' ).draw();
+        }else{
+            table1.columns( 13 ).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++;
+    		 }
+	}
+    </script>
+    <script>
+    	function myFunction() {
+    		var table = document.getElementById("myTable");
+    		var row = table.insertRow(0);
+    		var cell1 = row.insertCell(0);
+    		var cell2 = row.insertCell(1);
+    		cell1.innetHTML = "NEW CELL1";
+    		cell2.innerHTML = "NEW CELL2";
+    	}
+    </script>
+    <script>
+    	// append row to the HTML table
+function appendRow() {
+    var tbl = document.getElementById('myTable'), // table reference
+        row = tbl.insertRow(tbl.rows.length),      // append table row
+        i;
+    // insert table cells to the new row
+    for (i = 0; i < tbl.rows[0].cells.length; i++) {
+        createCell(row.insertCell(i), i, 'row');
+    }
+}
+
+// create DIV element and append to the table cell
+function createCell(cell, text, style) {
+    var div = document.createElement('div'), // create DIV element
+        txt = document.createTextNode(text); // create text node
+    div.appendChild(txt);                    // append text node to the DIV
+    div.setAttribute('class', style);        // set DIV class attribute
+    div.setAttribute('className', style);    // set DIV class attribute for IE (?!)
+    cell.appendChild(div);                   // append DIV to the table cell
+}
+// append column to the HTML table
+function appendColumn() {
+    var tbl = document.getElementById('myTable'), // table reference
+        i;
+    // open loop for each row and append cell
+    for (i = 0; i < tbl.rows.length; i++) {
+        createCell(tbl.rows[i].insertCell(tbl.rows[i].cells.length), i, 'col');
+    }
+}
+// delete table rows with index greater then 0
+function deleteRows() {
+    var tbl = document.getElementById('myTable'), // table reference
+        lastRow = tbl.rows.length - 1,             // set the last row index
+        i;
+    // delete rows with index greater then 0
+    for (i = lastRow; i > 0; i--) {
+        tbl.deleteRow(i);
+    }
+}
+
+// delete table columns with index greater then 0
+function deleteColumns() {
+    var tbl = document.getElementById('myTable'), // table reference
+        lastCol = tbl.rows[0].cells.length - 1,    // set the last column index
+        i, j;
+    // delete cells with index greater then 0 (for each row)
+    for (i = 0; i < tbl.rows.length; i++) {
+        for (j = lastCol; j > 0; j--) {
+            tbl.rows[i].deleteCell(j);
+        }
+    }
+}
+    </script>
+     <script>
+        $('#testing').click(function(){$('#decision').modal('show');})
+    </script>
+     
+    </body>
+
+</html>