cief/IZYIM-Prototype
1
0
Fork 0
mirror of https://gitlab.com/CIEFWorldwideSdnBhd/IZYIM-Prototype.git synced 2026-08-19 04:33:55 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
master
IZYIM-Prototype/Forwarder/shipmentarrange.html
T
Jackk Goh d1a0997c19 preparing to push to heroku
2018-03-23 09:55:42 +08:00

1928 lines
114 KiB
HTML
Raw Permalink Blame History

<!DOCTYPE html>
<html lang="en">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
<meta charset="utf-8" />
<title>IZYIM | Shipment Arrangement</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta content="Preview page of Metronic Admin Theme #1 for statistics, charts, recent events and reports" name="description" />
<meta content="" name="author" />
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css" />
<link href="../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
<link href="../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="../assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN PAGE LEVEL PLUGINS -->
<link href="../assets/global/plugins/datatables/datatables.min.css" rel="stylesheet" type="text/css" />
<link href="../assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.css" rel="stylesheet" type="text/css" />
<link href="../assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet" type="text/css" />
<!-- END PAGE LEVEL PLUGINS -->
<!-- BEGIN THEME GLOBAL STYLES -->
<link href="../assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
<link href="../assets/global/css/plugins.min.css" rel="stylesheet" type="text/css" />
<!-- END THEME GLOBAL STYLES -->
<!-- BEGIN THEME LAYOUT STYLES -->
<link href="../assets/layouts/layout/css/layout.min.css" rel="stylesheet" type="text/css" />
<link href="../assets/layouts/layout/css/themes/darkblue.min.css" rel="stylesheet" type="text/css" id="style_color" />
<link href="../assets/layouts/layout/css/custom.min.css" rel="stylesheet" type="text/css" />
<!-- END THEME LAYOUT STYLES -->
<style>
div.dt-button-collection {
margin-top: 70px;
}
.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;
}
.tooltip {
z-index: 20000 !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%;
}
</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 -->
<div class="top-menu">
<img style="margin-left:100px; margin-top:9px; border-radius:100%" class="media-object-4" src="../assets/layouts/layout/img/1.png" alt="...">
<ul class="nav navbar-nav pull-right">
<!-- BEGIN USER LOGIN DROPDOWN -->
<!-- DOC: Apply "dropdown-dark" class after below "dropdown-extended" to change the dropdown styte -->
<li class="dropdown dropdown-user">
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
<img alt="" class="img-circle" src="../assets/layouts/layout/img/avatar3_small.jpg" />
<span class="username username-hide-on-mobile"> Syed Amir </span>
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu dropdown-menu-default">
<li>
<a href="profile.html">
<i class="icon-user"></i> My Profile </a>
</li>
<li>
<a href="login.html">
<i class="icon-key"></i> Log Out </a>
</li>
</ul>
</li>
<!-- END USER LOGIN DROPDOWN -->
</ul>
</div>
<!-- END TOP NAVIGATION MENU -->
</div>
<!-- END 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 active open ">
<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="warehousenote.html" class="nav-link ">
<i class="fa fa-industry"></i>
<span class="title">Warehouse Receive Note</span>
</a>
</li>
<li class="nav-item active open">
<a href="shipmentarrange.html" class="nav-link ">
<i class="fa fa-ship"></i>
<span class="title">Shipment Arrangement</span>
</a>
</li>
<li class="nav-item ">
<a href="deliveryarrange.html" class="nav-link ">
<i class="fa fa-truck"></i>
<span class="title">Delivery Arrangement</span>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="javascript:;" class="nav-link nav-toggle">
<i class="icon-briefcase"></i>
<span class="title">Orders</span>
<span class="arrow"></span>
</a>
<ul class="sub-menu">
<li class="nav-item ">
<a href="purchaseorder.html" class="nav-link ">
<i class="icon-clock"></i>
<span class="title">Purchase Order</span>
</a>
</li>
<li class="nav-item ">
<a href="shippingorderstatus.html" class="nav-link ">
<i class="icon-check"></i>
<span class="title">Shipping Order</span>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="custom.html?menu=true" class="nav-link nav-toggle">
<i class="fa fa-comments-o"></i>
<span class="title">Custom Declaration</span>
<span class="selected"></span>
</a>
</li>
<li 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="updatecurrency.html" class="nav-link ">
<i class="fa fa-money"></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">Shipment Arrangement</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>Shipment Arrangement Status</strong> </div>
<div class="actions">
<div class="btn-group" style="display:none">
<a id="qweqwe" class="btn white btn-outline btn-circle" href="#form_delivery" data-toggle="modal"> Arrange Delivery
</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 class="modal fade modal-scroll bs-modal-lg in" id="form_delivery" tabindex="-1" role="basic" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header" style="background-color: #3598dc">
<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>Shipment Arrangement
</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> Shipment Details</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> Consolidation<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">
<h3 class="block"><b>Shipment arrangement details</b></h3>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-3">Loading Date</label>
<div class="col-md-9">
<input type="date" class="form-control"> </div>
</div>
</div>
<!--/span-->
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-3">Container No</label>
<div class="col-md-9">
<input type="text" class="form-control"> </div>
</div>
</div>
<!--/span-->
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-3">Shipment No <a class=" tooltips" data-placement="right" data-original-title="Just key in your shipment ref if needed"><i class="fa fa-question-circle"></i></a>
</label>
<div class="col-md-9">
<input type="text" class="form-control"> </div>
</div>
</div>
<!--/span-->
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-3">Type of Container</label>
<div class="col-md-9">
<select class="form-control">
<option>Select</option>
<option>Dry Storage Container 10ft</option>
<option>Dry Storage Container 20ft</option>
<option>Dry Storage Container 40ft</option>
<option>Flat Rack Container</option>
<option>Open Top Container</option>
<option>Tunnel Container</option>
<option>Open Side Storage Container</option>
<option>Double Doors Container 20ft</option>
<option>Double Doors Container 40ft</option>
<option>Refrigerared ISO Container</option>
<option>Insulated or Thermal Container</option>
<option>Tanks</option>
<option>Cargo Storage Roll Container</option>
<option>Half Height Container</option>
<option>Car Container</option>
<option>Intermediate Bulk Shift Container</option>
<option>Drums</option>
<option>Special Purpose Container</option>
<option>Swap Bodies</option>
</select>
</div>
</div>
</div>
<!--/span-->
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-3">Departure Port</label>
<div class="col-md-9">
<input type="text" class="form-control"> </div>
</div>
</div>
<!--/span-->
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-3">ETD</label>
<div class="col-md-9">
<input type="date" class="form-control"> </div>
</div>
</div>
<!--/span-->
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-3">Arrival Port</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">ETA</label>
<div class="col-md-9">
<input type="date" class="form-control"> </div>
</div>
</div>
</div>
<!--/span-->
<div class="row">
<div class="col-md-6">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<h4><b>Vehicle & Driver</b></h4>
</div>
<!--/span-->
<div class="col-md-6">
</div>
<!--/span-->
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-3">Trailer No</label>
<div class="col-md-9">
<input type="text" class="form-control"> </div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-3">Driver Name</label>
<div class="col-md-9">
<input type="text" class="form-control"> </div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-3">Driver Contact No</label>
<div class="col-md-9">
<input type="text" class="form-control"> </div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-3">Driver I/C No</label>
<div class="col-md-9">
<input type="text" class="form-control"> </div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<h4><b>Loading Venue</b></h4>
</div>
<!--/span-->
<div class="col-md-6">
</div>
<!--/span-->
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-3">Loading Address</label>
<div class="col-md-9">
<input type="text" class="form-control"> </div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-3">Country</label>
<div class="col-md-9">
<input type="text" class="form-control"> </div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-3">Area</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">Postcode</label>
<div class="col-md-9">
<input type="text" class="form-control"> </div>
</div>
</div>
<!--/span-->
</div>
<!--/row-->
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-3">Contact Person</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">Contact No</label>
<div class="col-md-9">
<input type="text" class="form-control"> </div>
</div>
</div>
<!--/span-->
</div>
<!--/row-->
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label col-md-3">Remark</label>
<div class="col-md-7">
<textarea class="form-control"> </textarea>
</div>
</div>
<!--/span-->
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-offset-5 col-md-9">
<a href="javascript:;" class="btn default button-previous"> Edit </a>
<a href="javascript:;" class="btn btn-outline green button-next"> Next</a>
</div>
</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">Select Order</span>
</div>
</div>
<div class="portlet-body">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th width="5">No</th>
<th width="10">Date</th>
<th width="10">Order No</th>
<th width="10">Total CBM</th>
<th width="10">Total Weight</th>
<th width="10">Remark</th>
<th width="10">Select</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>03-08-2017</td>
<td><a data-toggle="modal" href='#preview'>014567</a>
</td>
<td>10 CBM</td>
<td>5 kg</td>
<th contenteditable="true">Any remark</th>
<th>
<input type="checkbox" class="checkboxes">
</th>
</tr>
<tr>
<td>2</td>
<td>04-08-2017</td>
<td><a data-toggle="modal" href='#preview'>014567</a>
</td>
<td>11 CBM</td>
<td>6 kg</td>
<th contenteditable="true">Any remark</th>
<th>
<input type="checkbox" class="checkboxes">
</th>
</tr>
<tr>
<td>3</td>
<td>05-08-2017</td>
<td><a data-toggle="modal" href='#preview'>014567</a>
</td>
<td>12 CBM</td>
<td>7 kg</td>
<th contenteditable="true">Any remark</th>
<th>
<input type="checkbox" class="checkboxes">
</th>
</tr>
</tbody>
</table>
<div class="form-group">
<label class="control-label col-md-3">Notification</label>
<div class="col-md-7">
<textarea id="message" class="form-control" rows="10">
Shipment Notification
Order No: #012345
From Supplier: Bob Supplier
Total Quantity: 10 Pallet
Total CBM: 7 CBM
ETD: 10-10-2017
ETA: 15-10-2017
EDD: 17-10-2017
*ETD = Estimated Time Departure
ETA = Estimated Time Arrived
EDD = Estimated Delivery Date
[Forwarder Company Name]
</textarea>
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-offset-3 col-md-9">
<a href="javascript:;" class="btn default button-previous">
<i class="fa fa-angle-left"></i> Back </a>
<a href="javascript:;" class="btn btn-outline green button-next"> Continue
<i class="fa fa-angle-right"></i>
</a>
<a href="javascript:;" class="btn green button-submit"> Submit
</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-offset-5 col-md-9">
<a href="javascript:;" class="btn btn-outline green button-next"> Submit</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<div class="modal fade" id="preview" tabindex="-1" role="preview" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<div class="row">
<div class="portlet box green">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-cogs"></i><strong>Packing List</strong> </div>
<div class="actions">
<div class="btn-group">
<a class="btn white btn-outline btn-circle" href="javascript:;" data-toggle="dropdown">
<i class="fa fa-share"></i>
<span class="hidden-xs"> Actions </span>
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu pull-right" id="sample_3_tools">
<li>
<a href="javascript:;" data-action="0" class="tool-action">
<i class="icon-printer"></i> Print</a>
</li>
<li>
<a href="javascript:;" data-action="1" class="tool-action">
<i class="icon-check"></i> Copy</a>
</li>
<li>
<a href="javascript:;" data-action="2" class="tool-action">
<i class="icon-doc"></i> PDF</a>
</li>
<li>
<a href="javascript:;" data-action="3" class="tool-action">
<i class="icon-paper-clip"></i> Excel</a>
</li>
<li>
<a href="javascript:;" data-action="4" class="tool-action">
<i class="icon-cloud-upload"></i> CSV</a>
</li>
<li class="divider"> </li>
<li>
<a href="javascript:;" data-action="5" class="tool-action">
<i class="icon-refresh"></i> Reload</a>
</li>
</ul>
</div>
</div>
</div>
<div class="portlet-body">
<div class="table-container">
<table id="table1" class="table table-bordered table-striped">
<thead>
<tr>
<th rowspan="2">No </th>
<th rowspan="2">Product Name</th>
<th rowspan="2">Model</th>
<th rowspan="2">UOM</th>
<th rowspan="2">Qty</th>
<th colspan="3">CMB</th>
<th colspan="2">Weight</th>
<th rowspan="2">Photo</th>
<th rowspan="2">Remark</th>
</tr>
<tr>
<td>Height</td>
<td>Weight</td>
<td>Depth</td>
<td>Cross</td>
<td>Nett</td>
</tr>
</thead>
<tbody>
<tr>
<td>1 </td>
<td>Television </td>
<td>CS110 </td>
<td>Unit </td>
<td>10 </td>
<td>12 </td>
<td>15</td>
<td>12</td>
<td>12</td>
<td>15</td>
<td><img src="../assets/global/img/tv.jpg" alt="" style="width:100px;height:75px;" />
</td>
<td> </td>
</tr>
<tr>
<td>2 </td>
<td>Tire </td>
<td>CS251 </td>
<td>Unit </td>
<td>20 </td>
<td>12 </td>
<td>15</td>
<td>12</td>
<td>12</td>
<td>15</td>
<td><img src="../assets/global/img/tire.jpg" alt="" style="width:100px;height:100px;" /> </td>
<td> </td>
</tr>
<tr>
<td>3 </td>
<td>Chair </td>
<td>CS486 </td>
<td>Unit </td>
<td>5 </td>
<td>12 </td>
<td>15</td>
<td>12</td>
<td>12</td>
<td>15</td>
<td><img src="../assets/global/img/chair.jpg" alt="" style="width:100px;height:100px;" /> </td>
<td> </td>
</tr>
<tr>
<td>4 </td>
<td>Table </td>
<td>CS125 </td>
<td>Unit </td>
<td>5 </td>
<td>12 </td>
<td>15</td>
<td>12</td>
<td>12</td>
<td>15</td>
<td><img src="../assets/global/img/table.jpg" alt="" style="width:100px;height:100px;" /> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade in" id="reason" tabindex="-1" role="basic" aria-hidden="true">
<div class="modal-dialog">
<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>Failed Delivery
</div>
</div>
<div class="modal-body">
<div class="form">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Title</label>
<input class="form-control">
</div>
<div class="form-group">
<label>Reason</label>
<textarea class="form-control" rows="3"></textarea>
</div>
<div class="form-group">
<label>ETA</label>
<textarea class="form-control" rows="3"></textarea>
</div>
<div class="form-group">
<label>ETD</label>
<textarea class="form-control" rows="3"></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="boxes" tabindex="-1" role="boxes" aria-hidden="true">
<div class="portlet-body">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="form-body">
<div class="form-group">
<!-- PERSONAL INFO TAB -->
<div align="center">
</div>
<div class="tab-pane active" id="tab_1_1" class="col-md-17">
<div class="portlet light bordered">
<div class="portlet-title">
<div class="caption">
<i class="icon-social-dribbble font-green hide"></i>
<span class="caption-subject font-dark bold uppercase">Shipment arrangement details</span>
</div>
</div>
<div class="tab-pane active" id="tab1">
<div class="row static-info">
<div class="col-md-5 name"> Loading Date : 02-02-2017 </div>
<div class="col-md-7 value"> Container No : CTN121 </div>
</div>
<div class="row static-info">
<div class="col-md-5 name"> Shipping No : 12345 </div>
<div class="col-md-7 value"> Type of Container : Tank </div>
</div>
<div class="row static-info">
<div class="col-md-5 name"> Departure Port : Guangzhou </div>
<div class="col-md-7 value"> ETD : 03-02-2017 </div>
</div>
<div class="row static-info">
<div class="col-md-5 name"> Arrival Port: Port Klang </div>
<div class="col-md-7 value"> ETA : 04-02-2017 </div>
</div>
<!--/span-->
<div class="row">
<div class="col-md-6">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<h5><b>Vehicle & Driver</b></h5>
</div>
<!--/span-->
<div class="col-md-6">
</div>
<!--/span-->
</div>
<div class="row static-info">
<div class="col-md-5 name"> Trailer No : WA 234 K</div>
<div class="col-md-7 value"> Driver Name : Yew </div>
</div>
<div class="row static-info">
<div class="col-md-5 name"> Driver Contact No :012-3456789 </div>
<div class="col-md-7 value"> Driver I/C No : 880101-08-5433 </div>
</div>
<div class="row">
<div class="col-md-6">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<h5><b>LOADING VENUE</b></h5>
</div>
<!--/span-->
<div class="col-md-6">
</div>
<!--/span-->
</div>
<div class="row static-info">
<div class="col-md-5 name"> Loading Address : 3, Bandar Utama </div>
<div class="col-md-7 value"> Country : Malaysia </div>
</div>
<div class="row static-info">
<div class="col-md-5 name"> Area : Klang </div>
<div class="col-md-7 value"> Postcode : 62150 </div>
</div>
<div class="row static-info">
<div class="col-md-5 name"> Contact Person : Lisa </div>
<div class="col-md-7 value"> Contact No : 011-2345678 </div>
</div>
<div class="row static-info">
<div class="col-md-7 name"> Remark : On the Way to delivered </div>
</div>
<br>
<br>
<!--/row-->
<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">Container Loading List</span>
</div>
</div>
<div class="portlet-body">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th width="5">No</th>
<th width="10">Date</th>
<th width="10">Order No</th>
<th width="10">Total CBM</th>
<th width="10">Total Weight</th>
<th width="10">Remark</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>03-08-2017</td>
<td>014567</td>
<td>10 CBM</td>
<td>5 kg</td>
<th contenteditable="true">Any remark</th>
</tr>
<tr>
<td>2</td>
<td>04-08-2017</td>
<td>014567</td>
<td>11 CBM</td>
<td>6 kg</td>
<th contenteditable="true">Any remark</th>
</tr>
<tr>
<td>3</td>
<td>05-08-2017</td>
<td>014567</td>
<td>12 CBM</td>
<td>7 kg</td>
<th contenteditable="true">Any remark</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-offset-4 col-md-9">
<a href="javascript:;" class="btn btn-outline green button-next"> Edit</a>
<button type="button" class="btn dark btn-outline" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END CONTENT -->
<div class="modal fade" id="profile" tabindex="-1" role="profile" aria-hidden="true">
<div class="portlet-body">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="form-body">
<div class="form-group">
<!-- PERSONAL INFO TAB -->
<div align="center">
</div>
<div class="tab-pane active" id="tab_1_1">
<div class="portlet light bordered">
<div class="portlet-title">
<div class="caption">
<i class="icon-social-dribbble font-green hide"></i>
<span class="caption-subject font-dark bold uppercase">Customs Examination</span>
</div>
</div>
<div class="portlet-body">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th width="5">No</th>
<th width="10">Date</th>
<th width="10">Order No</th>
<!-- <th width="10">Action</th> -->
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>03-08-2017</td>
<td>014567</td>
<!-- <th><input type="checkbox" class="checkboxes"></th> -->
</tr>
<tr>
<td>2</td>
<td>04-08-2017</td>
<td>014567</td>
<!-- <th><input type="checkbox" class="checkboxes"></th> -->
</tr>
<tr>
<td>3</td>
<td>05-08-2017</td>
<td>014567</td>
<!-- <th><input type="checkbox" class="checkboxes"></th> -->
</tr>
</tbody>
</table>
</div>
<div class="portlet-body">
<br>
<p>Customs Examination Departure Port</p>
<br>
<p class="caption-subject font-red">New ETD :
<input type="date" name="">
</p>
<p class="caption-subject font-red">New ETA :
<input type="date" name="">
</p>
<br>
<p>Customs Examination Arrival Port</p>
<br>
<p class="caption-subject font-red">Release Date :
<input type="date" name="">
</p>
<div class="row">
<div class="col-md-offset-4 col-md-9">
<button class="btn btn-outline green button-next" onclick="myFunction()"> Submit</button>
<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>
<!-- 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>
</div>
<!--[if lt IE 9]>
<script src="../assets/global/plugins/respond.min.js"></script>
<script src="../assets/global/plugins/excanvas.min.js"></script>
<script src="../assets/global/plugins/ie8.fix.min.js"></script>
<![endif]-->
<!-- BEGIN CORE PLUGINS -->
<script src="../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/js.cookie.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<script src="../assets/global/plugins/select2/js/select2.full.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/jquery-validation/js/jquery.validate.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/jquery-validation/js/additional-methods.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/bootstrap-wizard/jquery.bootstrap.wizard.min.js" type="text/javascript"></script>
<!-- BEGIN PAGE LEVEL PLUGINS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js" type="text/javascript"></script>
<script src="../assets/global/scripts/datatable.js" type="text/javascript"></script>
<script src="../assets/global/plugins/datatables/datatables.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js" type="text/javascript"></script>
<!-- END PAGE LEVEL PLUGINS -->
<!-- BEGIN THEME GLOBAL SCRIPTS -->
<script src="../assets/global/scripts/app.min.js" type="text/javascript"></script>
<!-- END THEME GLOBAL SCRIPTS -->
<!-- END PAGE LEVEL SCRIPTS -->
<!-- BEGIN THEME LAYOUT SCRIPTS -->
<script src="../assets/layouts/layout/scripts/layout.min.js" type="text/javascript"></script>
<script src="../assets/layouts/layout/scripts/demo.min.js" type="text/javascript"></script>
<script src="../assets/layouts/global/scripts/quick-sidebar.min.js" type="text/javascript"></script>
<script src="../assets/layouts/global/scripts/quick-nav.min.js" type="text/javascript"></script>
<!-- END THEME LAYOUT SCRIPTS -->
<script>
$(document).ready(function() {
var dataSet = [
["1", "CTN121", "789ABC", "Tunnel Container", "01-08-2017", "<span style='color:red'>01-08-2017 </span>", "<span style='color:red'>05-08-2017 </span>", "12345", "Driver Name:Bob <br>Driver No:0123456789<br>Contact Person:Ying<br>Contact No:0112345678<br>Venue:61250, Dongguan", "<span style='color:red'>Customs Examination </span><br/><div class='btn-group'><button class='btn green btn-xs btn-circle btn-outline dropdown-toggle' data-toggle='dropdown'>Actions<i class='fa fa-angle-down'></i></button><ul class='dropdown-menu'><li><a data-toggle='modal' href='#boxes'>View </a></li><li><a href='javascript:;'> Delete</a></li><li><a data-toggle='modal' href='#profile'> Customs Examination</a></li></ul></div>", "Any Remark", "<span style='color:red'><strong>03-07-2017<br/>Delayed</strong></span>", "Delivery Request <span style='color:#F1C40F;font-weight: 700;'>Sent</span>", "Not Completed"],
["2", "CTN122", "789ABC", "Flat Rack<br>Container", "01-08-2017", "01-08-2017", "01-08-2017", "43657", "Driver Name:Bob <br>Driver No:0123456789<br>Contact Person:Ying<br>Contact No:0112345678<br>Venue:61250, Dongguan", "Delivered <br/><div class='btn-group'><button class='btn green btn-xs btn-circle btn-outline dropdown-toggle' data-toggle='dropdown'>Actions<i class='fa fa-angle-down'></i></button><ul class='dropdown-menu'><li><a data-toggle='modal' href='#boxes'> View </a></li><li><a href='javascript:;'> Delete</a></li><li><a data-toggle='modal' href='#profile'> Customs Examination</a></li></ul></div>", "Any Remark", "<span style='color:red'><strong>03-07-2017<br/>Delayed</strong></span>", "Delivery Request <span style='color:#F1C40F;font-weight: 700;'>Sent</span>", "Not Completed"],
["3", "CTN123", "789ABC", "Dry Storage<br> Container 10ft", "01-08-2017", "01-08-2017", "01-08-2017", "23532", "Driver Name:Bob <br>Driver No:0123456789<br>Contact Person:Ying<br>Contact No:0112345678<br>Venue:86000, Hong Kong", "Delivered<br/><div class='btn-group'><button class='btn green btn-xs btn-circle btn-outline dropdown-toggle' data-toggle='dropdown'>Actions<i class='fa fa-angle-down'></i></button><ul class='dropdown-menu'><li><a data-toggle='modal' href='#boxes'>View </a></li><li><a href='javascript:;'> Delete</a></li><li><a data-toggle='modal' href='#profile'> Customs Examination</a></li></ul></div>", "Any Remark", "<span style='color:red'><strong>03-07-2017<br/>Delayed</strong></span>", "Delivery Request <span style='color:#F1C40F;font-weight: 700;'>Sent</span>", "Not Completed"],
["4", "CTN124", "789ABC", "Double Doors<br> Container 20ft", "01-08-2017", "<span style='color:red'>02-08-2017 </span>", "<span style='color:red'>04-08-2017 </span>", "68679", "Driver Name:Bob <br>Driver No:0123456789<br>Contact Person:Ying<br>Contact No:0112345678<br>Venue:61500, Guangzhou", "<span style='color:red'>Customs Examination </span><br/><div class='btn-group'><button class='btn green btn-xs btn-circle btn-outline dropdown-toggle' data-toggle='dropdown'>Actions<i class='fa fa-angle-down'></i></button><ul class='dropdown-menu'><li><a data-toggle='modal' href='#boxes'>View </a></li><li><a href='javascript:;'> Delete</a></li><li><a data-toggle='modal' href='#profile'> Customs Examination</a></li></ul></div>", "Any Remark", "<span style='color:red'><strong>03-07-2017<br/>Delayed</strong></span>", "Delivery Request <span style='color:#F1C40F;font-weight: 700;'>Sent</span>", "Not Completed"],
["5", "CTN125", "789ABC", "Flat Rack<br>Container", "01-08-2017", "01-08-2017", "01-08-2017", "43665", "Driver Name:Bob <br>Driver No:0123456789<br>Contact Person:Ying<br>Contact No:0112345678<br>Venue:61500, Guangzhou", "Delivered<br/><div class='btn-group'><button class='btn green btn-xs btn-circle btn-outline dropdown-toggle' data-toggle='dropdown'>Actions<i class='fa fa-angle-down'></i></button><ul class='dropdown-menu'><li><a data-toggle='modal' href='#boxes'> View </a></li><li><a href='javascript:;'> Delete</a></li><li><a data-toggle='modal' href='#profile'> Customs Examination</a></li></ul></div>", "Any Remark", "<span style='color:red'><strong>03-07-2017<br/>Delayed</strong></span>", "Delivery Request <span style='color:#F1C40F;font-weight: 700;'>Sent</span>", "Not Completed"],
["6", "CTN130", "789ABC", "Swap Bodies", "01-08-2017", "01-08-2017", "01-08-2017", "89706", "Driver Name:Bob <br>Driver No:0123456789<br>Contact Person:Ying<br>Contact No:0112345678<br>Venue:86000, Hong Kong", "Delivered<br/><div class='btn-group'><button class='btn green btn-xs btn-circle btn-outline dropdown-toggle' data-toggle='dropdown'>Actions<i class='fa fa-angle-down'></i></button><ul class='dropdown-menu'><li><a data-toggle='modal' href='#boxes'> View </a></li><li><a href='javascript:;'> Delete</a></li><li><a data-toggle='modal' href='#profile'> Customs Examination</a></li></ul></div>", "Any Remark", "<span style='color:red'><strong>03-07-2017<br/>Delayed</strong></span>", "Delivery Request <span style='color:#F1C40F;font-weight: 700;'>Sent</span>", "Not Completed"],
];
var dataSet2 = [];
var table1 = $('#example').DataTable({
data: dataSet,
//"bFilter" : false,
"bInfo": false,
"bLengthChange": false,
colReorder: {
reorderCallback: function() {
console.log('callback');
}
},
"columnDefs": [{ // set default column settings
'orderable': false,
'targets': [0]
}, {
"targets": [10],
"visible": false
}],
// scroller extension: http://datatables.net/extensions/scroller/
<!-- scrollY: 300, -->
buttons: [{
extend: 'print',
className: 'btn dark btn-outline'
}, {
extend: 'copy',
className: 'btn red btn-outline'
}, {
extend: 'pdf',
className: 'btn green btn-outline'
}, {
extend: 'excel',
className: 'btn yellow btn-outline '
}, {
extend: 'csv',
className: 'btn purple btn-outline '
}, {
extend: 'colvis',
className: 'btn dark btn-outline',
text: 'Columns'
}],
"language": {
"aria": {
"sortAscending": ": activate to sort column ascending",
"sortDescending": ": activate to sort column descending"
},
"emptyTable": "No data available in table",
"info": "Showing _START_ to _END_ of _TOTAL_ entries",
"infoEmpty": "No entries found",
"infoFiltered": "(filtered1 from _MAX_ total entries)",
"lengthMenu": "_MENU_ entries",
"search": "Search:",
"zeroRecords": "No matching records found"
},
"order": [
[1, "asc"]
],
"pageLength": 20,
"dom": "<'row' <'col-md-12'T>><'row'<'col-md-6'f><'col-md-6'<'toolbar2'B>>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
buttons: [{
text: 'Add New Shipment',
className: 'btn red btn-circle btn-outline qweqwe',
action: function(e, dt, node, config) {
$("#qweqwe").trigger('click');
}
}
],
fixedHeader: false,
columns: [{
title: "No"
}, {
title: 'Shipment<br>No <br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_1\')"></span>'
}, {
title: 'Container<br>No<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_2\')"></span>'
}, {
title: 'Type of<br>Container<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_2\')"></span>'
}, {
title: 'Loading<br> Date<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_3\')"></span>'
}, {
title: 'ETD<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_9\')"></span>'
}, {
title: 'ETA<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_10\')"></span>'
}, {
title: 'Order<br>No<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_6\')"></span>'
}, {
title: 'Loading<br>Venue<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_7\')"></span>'
}, {
title: 'Status<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_11\')"></span>'
}, ],
initComplete: function() {
configFilter(this, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]);
}
});
$('#example2').DataTable({
data: dataSet2,
"bInfo": false,
"bLengthChange": false,
colReorder: {
reorderCallback: function() {
console.log('callback');
}
},
"columnDefs": [{ // set default column settings
'orderable': false,
'targets': [0],
}],
"autoWidth": false,
buttons: [{
extend: 'print',
className: 'btn dark btn-outline'
}, {
extend: 'copy',
className: 'btn red btn-outline'
}, {
extend: 'pdf',
className: 'btn green btn-outline'
}, {
extend: 'excel',
className: 'btn yellow btn-outline '
}, {
extend: 'csv',
className: 'btn purple btn-outline '
}, {
extend: 'colvis',
className: 'btn dark btn-outline',
text: 'Columns'
}],
"language": {
"aria": {
"sortAscending": ": activate to sort column ascending",
"sortDescending": ": activate to sort column descending"
},
"emptyTable": "No data available in table",
"info": "Showing _START_ to _END_ of _TOTAL_ entries",
"infoEmpty": "No entries found",
"infoFiltered": "(filtered1 from _MAX_ total entries)",
"lengthMenu": "_MENU_ entries",
"search": "Search:",
"zeroRecords": "No matching records found"
},
"pageLength": 20,
"order": [
[1, "asc"]
],
columns: [
// { title: "<label class='mt-checkbox mt-checkbox-single mt-checkbox-outline'><input type='checkbox' class='group-checkable' data-set='#example2 .checkboxes' /><span></span></label>", className: "col_0"},
// { title: "No", className: "col_1"},
// { title: "ETA", className: "col_2"},
// { title: "Shipment <br/> No", className: "col_3"},
// { title: "Order <br/>No", className: "col_4"},
// { title: "Cust <br/> Code", className: "col_5"},
// { title: "Area<br/>State", className: "col_6"},
// { title: "Details", className: "col_7"},
],
"dom": "<'row' <'col-md-12'T>><'row'<'col-md-6'><'col-md-6'f>r>t<'row'<'col-md-5 col-sm-12'<'toolbar'>><'col-md-7 col-sm-12'p>>",
initComplete: function() {
configFilter(this, [2, 3, 4, 5, 6, 7, 8]);
}
});
table1.columns(12).search('Not Completed').draw();
$('.asdasd').on('switchChange.bootstrapSwitch', function(event, state) {
if (state == true) {
table1.columns(12).search('Not Completed').draw();
} else {
table1.columns(12).search('Completed').draw();
}
});
existingdiv1 = document.getElementById("switch");
$("div.toolbar2").append(existingdiv1);
$("div.toolbar").html('Total Delivery : <p id="total" class="form-control-static">0</p>');
$('#sample_3_tools > li > a.tool-action').on('click', function() {
var action = $(this).attr('data-action');
$('#example').DataTable().button(action).trigger();
});
var table = $('#example2');
var tableWrapper = jQuery('#example2_wrapper');
table.find('.group-checkable').change(function() {
var set = jQuery(this).attr("data-set");
var checked = jQuery(this).is(":checked");
jQuery(set).each(function() {
if (checked) {
$(this).prop("checked", true);
$(this).parents('tr').addClass("active");
} else {
$(this).prop("checked", false);
$(this).parents('tr').removeClass("active");
}
});
var count = $('#example2 .active').length;
//document.getElementById('total').value = count;
document.getElementById("total").innerHTML = count;
});
table.on('change', 'tbody tr .checkboxes', function() {
$(this).parents('tr').toggleClass("active");
});
});
var table = $('#example2');
var tableWrapper = jQuery('#example2_wrapper');
table.on('change', 'tbody tr .checkboxes', function() {
var checked = jQuery(this).is(":checked");
if (checked) {
var count = $('#example2 .active').length + 1;
document.getElementById("total").innerHTML = count;
} else {
var count = $('#example2 .active').length - 1;
document.getElementById("total").innerHTML = count;
}
});
//This function initializes the content inside the filter modal
function configFilter($this, colArray) {
setTimeout(function() {
var tableName = $this[0].id;
var columns = $this.api().columns();
// $.each(colArray, function (i, arg) {
// $('#' + tableName + ' th:eq(' + arg + ')').append('<br><img src="http://www.icone-png.com/png/39/38556.png" class="filterIcon" onclick="showFilter(event,\'' + tableName + '_' + arg + '\')" />');
//});
var template = '<div class="modal modalFilter modal-scroll in">' +
'<div class="modal-dialog modal-full" style="margin-top: 0px;margin-bottom: 0px;">' +
'<div class="modal-content">' +
'<div class="modal-body">' + '{0}</div>' +
'<div class="modal-footer">' +
'<a onclick="clearFilter(this, {1}, \'{2}\');" class=" btn left waves-effect waves-light" data-dismiss="modal" >Clear</a>' +
'<a onclick="performFilter(this, {1}, \'{2}\');" class=" btn right waves-effect waves-light">Ok</a>' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
$.each(colArray, function(index, value) {
columns.every(function(i) {
if (value === i) {
var column = this,
content = '<input type="text" class="filterSearchText form-control" onkeyup="filterValues(this)" /> <br/>';
var columnName = $(this.header()).text().replace(/\s+/g, "_");
var distinctArray = [];
column.data().each(function(d, j) {
if (distinctArray.indexOf(d) == -1) {
//alert(jQuery.type( d ));
d = d.replace("<a class='chat_link' href='chat.html'>", '');
d = d.replace("<span style='margin-bottom: 20px;' class='bb badge badge-danger'>5</span></a>", '');
var id = tableName + "_" + columnName + "_" + j; // onchange="formatValues(this,' + value + ');
content += '<div><input type="checkbox" value="' + d + '" id="' + id + '"/>&nbsp;<label style="font-size:10px" for="' + id + '"> ' + d + '</label></div>';
distinctArray.push(d);
}
});
var newTemplate = $(template.replace('{0}', content).replace('{1}', value).replace('{1}', value).replace('{2}', tableName).replace('{2}', tableName));
$('body').append(newTemplate);
modalFilterArray[tableName + "_" + value] = newTemplate;
content = '';
}
});
});
}, 50);
}
var modalFilterArray = {};
//User to show the filter modal
function showFilter(e, index) {
$('.modalFilter').hide();
$(modalFilterArray[index]).css({
left: 0,
top: 0
});
var th = $(e.target).parent();
var pos = th.offset();
console.log(th);
$(modalFilterArray[index]).width(th.width() * 3.0);
$(modalFilterArray[index]).css({
'left': pos.left,
'top': pos.top
});
$(modalFilterArray[index]).show();
$('#mask').show();
e.stopPropagation();
}
//This function is to use the searchbox to filter the checkbox
function filterValues(node) {
var searchString = $(node).val();
var rootNode = $(node).parent();
if (searchString == '') {
rootNode.find('div').show();
} else {
rootNode.find("div").hide();
rootNode.find("div:contains('" + searchString + "')").show();
}
}
//Execute the filter on the table for a given column
function performFilter(node, i, tableId) {
var rootNode = $(node).parent().parent();
var searchString = '',
counter = 0;
rootNode.find('input:checkbox').each(function(index, checkbox) {
if (checkbox.checked) {
searchString += (counter == 0) ? checkbox.value : '|' + checkbox.value;
counter++;
}
});
$('#' + tableId).DataTable().column(i).search(
searchString,
true, false
).draw();
rootNode.hide();
$('#mask').hide();
$('.modalFilter').hide();
}
//Removes the filter from the table for a given column
function clearFilter(node, i, tableId) {
var rootNode = $(node).parent().parent();
rootNode.find(".filterSearchText").val('');
rootNode.find('input:checkbox').each(function(index, checkbox) {
checkbox.checked = false;
$(checkbox).parent().show();
});
$('#' + tableId).DataTable().column(i).search(
'',
true, false
).draw();
rootNode.hide();
$('#mask').hide();
$('.modalFilter').hide();
}
var FormWizard = function() {
return {
//main function to initiate the module
init: function() {
if (!jQuery().bootstrapWizard) {
return;
}
function format(state) {
if (!state.id) return state.text; // optgroup
return "<img class='flag' src='../../assets/global/img/flags/" + state.id.toLowerCase() + ".png'/>&nbsp;&nbsp;" + state.text;
}
$("#country_list").select2({
placeholder: "Select",
allowClear: true,
formatResult: format,
width: 'auto',
formatSelection: format,
escapeMarkup: function(m) {
return m;
}
});
var form = $('#submit_form');
var error = $('.alert-danger', form);
var success = $('.alert-success', form);
form.validate({
doNotHideMessage: true, //this option enables to show the error/success messages on tab switch.
errorElement: 'span', //default input error message container
errorClass: 'help-block help-block-error', // default input error message class
focusInvalid: false, // do not focus the last invalid input
rules: {
//account
username: {
minlength: 5,
required: true
},
password: {
minlength: 5,
required: true
},
rpassword: {
minlength: 5,
required: true,
equalTo: "#submit_form_password"
},
//profile
fullname: {
required: true
},
email: {
required: true,
email: true
},
phone: {
required: true
},
gender: {
required: true
},
address: {
required: true
},
city: {
required: true
},
country: {
required: true
},
//payment
card_name: {
required: true
},
card_number: {
minlength: 16,
maxlength: 16,
required: true
},
card_cvc: {
digits: true,
required: true,
minlength: 3,
maxlength: 4
},
card_expiry_date: {
required: true
},
'payment[]': {
required: true,
minlength: 1
}
},
messages: { // custom messages for radio buttons and checkboxes
'payment[]': {
required: "Please select at least one option",
minlength: jQuery.validator.format("Please select at least one option")
}
},
errorPlacement: function(error, element) { // render error placement for each input type
if (element.attr("name") == "gender") { // for uniform radio buttons, insert the after the given container
error.insertAfter("#form_gender_error");
} else if (element.attr("name") == "payment[]") { // for uniform checkboxes, insert the after the given container
error.insertAfter("#form_payment_error");
} else {
error.insertAfter(element); // for other inputs, just perform default behavior
}
},
invalidHandler: function(event, validator) { //display error alert on form submit
success.hide();
error.show();
App.scrollTo(error, -200);
},
highlight: function(element) { // hightlight error inputs
$(element)
.closest('.form-group').removeClass('has-success').addClass('has-error'); // set error class to the control group
},
unhighlight: function(element) { // revert the change done by hightlight
$(element)
.closest('.form-group').removeClass('has-error'); // set error class to the control group
},
success: function(label) {
if (label.attr("for") == "gender" || label.attr("for") == "payment[]") { // for checkboxes and radio buttons, no need to show OK icon
label
.closest('.form-group').removeClass('has-error').addClass('has-success');
label.remove(); // remove error label here
} else { // display success icon for other inputs
label
.addClass('valid') // mark the current input as valid and display OK icon
.closest('.form-group').removeClass('has-error').addClass('has-success'); // set success class to the control group
}
},
submitHandler: function(form) {
success.show();
error.hide();
form[0].submit();
//add here some ajax code to submit your form or just call form.submit() if you want to submit the form without ajax
}
});
var displayConfirm = function() {
$('#tab4 .form-control-static', form).each(function() {
var input = $('[name="' + $(this).attr("data-display") + '"]', form);
if (input.is(":radio")) {
input = $('[name="' + $(this).attr("data-display") + '"]:checked', form);
}
if (input.is(":text") || input.is("textarea")) {
$(this).html(input.val());
} else if (input.is("select")) {
$(this).html(input.find('option:selected').text());
} else if (input.is(":radio") && input.is(":checked")) {
$(this).html(input.attr("data-title"));
} else if ($(this).attr("data-display") == 'payment[]') {
var payment = [];
$('[name="payment[]"]:checked', form).each(function() {
payment.push($(this).attr('data-title'));
});
$(this).html(payment.join("<br>"));
}
});
}
var handleTitle = function(tab, navigation, index) {
var total = navigation.find('li').length;
var current = index + 1;
// set wizard title
$('.step-title', $('#form_wizard_1')).text('Step ' + (index + 1) + ' of ' + total);
// set done steps
jQuery('li', $('#form_wizard_1')).removeClass("done");
var li_list = navigation.find('li');
for (var i = 0; i < index; i++) {
jQuery(li_list[i]).addClass("done");
}
if (current == 1) {
$('#form_wizard_1').find('.button-previous').hide();
} else {
$('#form_wizard_1').find('.button-previous').show();
}
if (current >= total) {
$('#form_wizard_1').find('.button-next').hide();
$('#form_wizard_1').find('.button-submit').show();
displayConfirm();
} else {
$('#form_wizard_1').find('.button-next').show();
$('#form_wizard_1').find('.button-submit').hide();
}
App.scrollTo($('.page-title'));
}
// default form wizard
$('#form_wizard_1').bootstrapWizard({
'nextSelector': '.button-next',
'previousSelector': '.button-previous',
onTabClick: function(tab, navigation, index, clickedIndex) {
return false;
success.hide();
error.hide();
if (form.valid() == false) {
return false;
}
handleTitle(tab, navigation, clickedIndex);
},
onNext: function(tab, navigation, index) {
success.hide();
error.hide();
if (form.valid() == false) {
return false;
}
handleTitle(tab, navigation, index);
},
onPrevious: function(tab, navigation, index) {
success.hide();
error.hide();
handleTitle(tab, navigation, index);
},
onTabShow: function(tab, navigation, index) {
var total = navigation.find('li').length;
var current = index + 1;
var $percent = (current / total) * 100;
$('#form_wizard_1').find('.progress-bar').css({
width: $percent + '%'
});
}
});
$('#form_wizard_1').find('.button-previous').hide();
$('#form_wizard_1 .button-submit').click(function() {
location.reload();
}).hide();
//apply validation on select2 dropdown value change, this only needed for chosen dropdown integration.
$('#country_list', form).change(function() {
form.validate().element($(this)); //revalidate the chosen dropdown value and show error or success message for the input
});
}
};
}();
jQuery(document).ready(function() {
FormWizard.init();
});
function myFunction() {
alert("All the details will send to this number 0123456789");
}
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink