Files
2018-03-23 09:55:42 +08:00

1783 lines
114 KiB
HTML

<!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 | Team</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/bootstrap-daterangepicker/daterangepicker.min.css" rel="stylesheet" type="text/css" />
<link href="../assets/global/plugins/morris/morris.css" rel="stylesheet" type="text/css" />
<link href="../assets/global/plugins/fullcalendar/fullcalendar.min.css" rel="stylesheet" type="text/css" />
<link href="../assets/global/plugins/jqvmap/jqvmap/jqvmap.css" rel="stylesheet" type="text/css" />
<!-- END PAGE LEVEL PLUGINS -->
<!-- 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/dropzone/dropzone.min.css" rel="stylesheet" type="text/css" />
<link href="../assets/global/plugins/dropzone/basic.min.css" rel="stylesheet" type="text/css" />
<!-- END PAGE LEVEL PLUGINS -->
<link href="../assets/global/plugins/select2/css/select2.min.css" rel="stylesheet" type="text/css" />
<link href="../assets/global/plugins/select2/css/select2-bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- BEGIN THEME GLOBAL STYLES -->
<link href="../assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
<link href="../assets/global/css/plugins.min.css" rel="stylesheet" type="text/css" />
<!-- END THEME GLOBAL STYLES -->
<!-- BEGIN THEME LAYOUT STYLES -->
<link href="../assets/layouts/layout/css/layout.min.css" rel="stylesheet" type="text/css" />
<link href="../assets/layouts/layout/css/themes/darkblue.min.css" rel="stylesheet" type="text/css" id="style_color" />
<link href="../assets/layouts/layout/css/custom.min.css" rel="stylesheet" type="text/css" />
<link href="../assets/pages/css/profile.min.css" rel="stylesheet" type="text/css" />
<!-- END THEME LAYOUT STYLES -->
<style>
@media (min-width: 992px) {
.page-content-wrapper .page-content {
margin-left: 200px;
}
}
.dropzone {
min-height: 90px;
}
@media (min-width: 992px) {
.page-sidebar {
width: 200px;
float: left;
position: relative;
margin-right: -100%;
}
}
.table td,
.table th {
font-size: 14px;
text-align: center;
vertical-align: middle;
padding-left: 5px !important;
padding-right: 8px !important;
}
.table thead tr th {
font-size: 14px;
text-align: center;
vertical-align: middle;
padding-left: 5px !important;
padding-right: 8px !important;
}
.media-object-4 {
width: 35px;
position: right;
margin-left: 67%;
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">
<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">
<!-- BEGIN SIDEBAR MENU -->
<!-- DOC: Apply "page-sidebar-menu-light" class right after "page-sidebar-menu" to enable light sidebar menu style(without borders) -->
<!-- DOC: Apply "page-sidebar-menu-hover-submenu" class right after "page-sidebar-menu" to enable hoverable(hover vs accordion) sub menu mode -->
<!-- DOC: Apply "page-sidebar-menu-closed" class right after "page-sidebar-menu" to collapse("page-sidebar-closed" class must be applied to the body element) the sidebar sub menu mode -->
<!-- DOC: Set data-auto-scroll="false" to disable the sidebar from auto scrolling/focusing -->
<!-- DOC: Set data-keep-expand="true" to keep the submenues expanded -->
<!-- DOC: Set data-auto-speed="200" to adjust the sub menu slide up/down speed -->
<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="chat.html" 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" 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="javascript:;" class="nav-link nav-toggle">
<i class="icon-basket"></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 active open">
<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>
</ul>
<!-- END SIDEBAR MENU -->
<!-- END SIDEBAR MENU -->
</div>
<!-- END SIDEBAR -->
</div>
<!-- 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>
<span>Profile</span>
</li>
</ul>
</div>
<!-- END PAGE BAR -->
<!-- BEGIN PAGE TITLE-->
<h1 class="page-title"> Company Settings
</h1>
<!-- CONTENT -->
<div class="row">
<div class="col-md-12">
<!-- BEGIN PROFILE SIDEBAR -->
<div class="profile-sidebar">
<!-- PORTLET MAIN -->
<div class="portlet light profile-sidebar-portlet ">
<!-- SIDEBAR USERPIC -->
<div class="profile-userpic">
<img src="../assets/global/img/company_logo.png" class="img-responsive" alt=""> </div>
<!-- END SIDEBAR USERPIC -->
<!-- SIDEBAR USER TITLE -->
<div class="profile-usertitle">
<div class="profile-usertitle-name"> CIEF Worldwide </div>
</div>
<!-- END SIDEBAR USER TITLE -->
<!-- SIDEBAR MENU -->
<div class="profile-usermenu">
<ul class="nav">
<li>
<a href="profile.html">
<i class="icon-settings"></i> Personal Settings </a>
</li>
<li class="active">
<a href="team.html">
<i class="icon-info"></i> Company Settings </a>
</li>
</ul>
</div>
<div><center><img alt="" src="../assets/pages/img/QR_code.png" /><br><a href="#form_delivery" data-toggle="modal" class="btn blue"> Share QR Code </a></center></div>
<!-- END MENU -->
</div>
<!-- END PORTLET MAIN -->
</div>
<!-- END BEGIN PROFILE SIDEBAR -->
<!-- BEGIN PROFILE CONTENT -->
<div class="profile-content">
<div class="row">
<div class="col-md-12">
<div class="portlet light ">
<div class="portlet-title tabbable-line">
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab_1_1" data-toggle="tab">Company Information</a>
</li>
<li>
<a href="#tab_1_2" data-toggle="tab">Delivery Information</a>
</li>
<li>
<a href="#tab_1_3" data-toggle="tab">Staff Information</a>
</li>
</ul>
</div>
<div class="portlet-body">
<div class="tab-content">
<!-- PERSONAL INFO TAB -->
<div class="tab-pane form active" id="tab_1_1">
<!-- BEGIN FORM-->
<div class="form-horizontal form-row-seperated">
<div class="form-body">
<div class="form-group">
<label class="control-label col-md-3">Company Name</label>
<div class="col-md-9">
<input type="text" placeholder="Company Name" class="form-control" value="CIEF Worldwide">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Company Logo</label>
<div class="col-md-9">
<form action="#" class="dropzone dropzone-file-area" id="my-dropzone" style="width: 300px;margin-top: 0px;margin-left: 0px;margin-right: 0px;">
<h4 class="sbold">Drop files here or click to upload</h4>
</form>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Business Registration Certificate</label>
<div class="col-md-9">
<form action="#" class="dropzone dropzone-file-area" id="my-dropzone" style="width: 300px;margin-top: 0px;margin-left: 0px;margin-right: 0px;">
<h4 class="sbold">Drop files here or click to upload</h4>
</form>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Registration No.</label>
<div class="col-md-9">
<input type="text" placeholder="Registration No." class="form-control" value="ABC1234567">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Tax ID</label>
<div class="col-md-9">
<input type="text" placeholder="Tax ID" class="form-control" value="1234562ABC">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Office No.</label>
<div class="col-md-9">
<input type="text" placeholder="Office No." class="form-control" value="+6 012 456789">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Company Address</label>
<div class="col-md-9">
<input type="text" placeholder="Company Address" class="form-control" value="Block 3730, Persiaran Apec, 63000 Cyberjaya, Selangor, Malaysia">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Company City</label>
<div class="col-md-9">
<input type="text" placeholder="Company City" class="form-control" value="Cyberjaya">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Company State</label>
<div class="col-md-9">
<input type="text" placeholder="Company State" class="form-control" value="Selangor">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Contact Person</label>
<div class="col-md-9">
<input type="text" placeholder="Contact Person" class="form-control" value="PM Wong">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Contact Person No.</label>
<div class="col-md-9">
<input type="text" placeholder="Contact Person No." class="form-control" value="+6 012 456789">
</div>
</div>
<div class="col-md-12" style="margin-top:10px;">
<div class="col-md-6">
</div>
<div class="col-md-6">
<a href="javascript:;" class="btn green"> Save Changes </a>
<a href="javascript:;" class="btn default"> Cancel </a>
</div>
</div>
</div>
</div>
<!-- END FORM-->
</div>
<!-- END COMPANY INFO TAB -->
<!-- BEGIN WAREHOUSE INFO TAB -->
<div class="tab-pane" id="tab_1_2">
<div class="table-toolbar">
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
<div class="btn-group pull-right">
<a class="btn green btn-circle" href="#form_add_warehouse" data-toggle="modal"> Add New <i class="fa fa-plus"></i>
</a>
</div>
</div>
</div>
</div>
<table class="table table-striped table-hover table-bordered" id="sample_editable_1">
<thead>
<tr>
<th> Warehouse <br> Name </th>
<th> Company <br> Name </th>
<th> Address </th>
<th> State </th>
<th> Country </th>
<th> Contact <br> Details </th>
<th> Notice </th>
<th> Status </th>
</tr>
</thead>
<tbody>
<tr>
<td class="center editInPlace"> WH A</td>
<td class="center editInPlace"> Company A</td>
<td class="center editInPlace" class="center editInPlace"> 70 McCullough Dr, New Castle, 19720 Delaware, United State of America </td>
<td class="center editInPlace" class="center editInPlace"> Delaware </td>
<td class="center editInPlace" class="center editInPlace"> USA </td>
<td class="center editInPlace" class="center editInPlace"> Name : Ahmad Albab
<br/> Mobile No : 0123456789 </td>
<td class="center editInPlace"> Our warehouse will be close from 29th July 2017 to 30th July 2017 for the Thanks Giving holiday.</td>
<td style="vertical-align:middle;">
<input type="checkbox" checked class="make-switch switch-mini" data-size="small">
<br>
<center>
<div class="btn-group">
<a class="delete" href="javascript:;"> <i class="fa fa-times-circle fa-3" style="color:#c50b0b;"></i> </a>
</div>
</center>
</td>
</tr>
<tr>
<td class="center editInPlace"> WH B</td>
<td class="center editInPlace"> Company B</td>
<td class="center editInPlace"> 96-100 Beaconsfield St., Silverwater, Sydney, 2128 New South Wales, Australia </td>
<td class="center editInPlace"> New South Wales </td>
<td class="center editInPlace"> Australia </td>
<td class="center editInPlace" class="center editInPlace"> Name : Ahmad Albab
<br/> Mobile No : 0123456789 </td>
<td class="center editInPlace"> </td>
<td style="vertical-align:middle;">
<input type="checkbox" checked class="make-switch" data-size="small">
<br>
<center>
<div class="btn-group">
<a class="delete" href="javascript:;"> <i class="fa fa-times-circle fa-3" style="color:#c50b0b;"></i> </a>
</div>
</center>
</td>
</tr>
<tr>
<td class="center editInPlace"> WH C</td>
<td class="center editInPlace"> Company C</td>
<td class="center editInPlace"> FACTORY UNIT A ON 9/F, YOUNG YA INDUSTRIAL BUILDING, NOS. 381-389, SHA TSUI ROAD, TSUEN WAN, NEW TERRITORIES, HONG KONG </td>
<td class="center editInPlace"> TSUEN WAN </td>
<td class="center editInPlace"> HONG KONG </td>
<td class="center editInPlace" class="center editInPlace"> Name : Ahmad Albab
<br/> Mobile No : 0123456789 </td>
<td class="center editInPlace"></td>
<td style="vertical-align:middle;">
<input type="checkbox" checked class="make-switch" data-size="small">
<br>
<center>
<div class="btn-group">
<a class="delete" href="javascript:;"> <i class="fa fa-times-circle fa-3" style="color:#c50b0b;"></i> </a>
</div>
</center>
</td>
</tr>
<tr>
<td class="center editInPlace"> WH D</td>
<td class="center editInPlace"> Company D</td>
<td class="center editInPlace"> Room I, 9F No.288 South ZhongShan Rd, 210005 Nanjing, JiangSu, China </td>
<td class="center editInPlace"> JiangSu </td>
<td class="center editInPlace"> China </td>
<td class="center editInPlace" class="center editInPlace"> Name : Ahmad Albab
<br/> Contact No : 0123456789 </td>
<td class="center editInPlace"> Chinese New Year </td>
<td style="vertical-align:middle;">
<input type="checkbox" class="make-switch" data-size="small">
<br>
<center>
<div class="btn-group">
<a class="delete" href="javascript:;"> <i class="fa fa-times-circle fa-3" style="color:#c50b0b;"></i> </a>
</div>
</center>
</td>
</tr>
<tr>
<td class="center editInPlace"> WH E</td>
<td class="center editInPlace"> </td>
<td class="center editInPlace"> 70 McCullough Dr, New Castle, 19720 Delaware, United State of America </td>
<td class="center editInPlace"> Delaware </td>
<td class="center editInPlace"> USA </td>
<td class="center editInPlace" class="center editInPlace"> Name : Ahmad Albab
<br/> Mobile No : 0123456789 </td>
<td class="center editInPlace"> Our warehouse will be close from 29th July 2017 to 30th July 2017 for the Thanks Giving holiday.</td>
<td style="vertical-align:middle;">
<input type="checkbox" checked class="make-switch" data-size="small">
<br>
<center>
<div class="btn-group">
<a class="delete" href="javascript:;"> <i class="fa fa-times-circle fa-3" style="color:#c50b0b;"></i> </a>
</div>
</center>
</td>
</tr>
</tbody>
</table>
</div>
<!-- END WAREHOUSE INFO TAB -->
<!-- BEGIN STAFF INFO TAB -->
<div class="tab-pane" id="tab_1_3">
<div class="table-toolbar">
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
<div class="btn-group pull-right">
<a class="btn green btn-circle" href="#form_add_staff" data-toggle="modal"> Add New <i class="fa fa-plus"></i>
</a>
</div>
</div>
</div>
</div>
<table class="table table-striped table-hover table-bordered" id="sample_editable_2">
<thead>
<tr>
<th> Name </th>
<th> Position </th>
<th> Action </th>
</tr>
</thead>
<tbody>
<tr>
<td> Bob Nilson </td>
<td class="center"> Admin </td>
<td>
<a class="edit" href="#form_edit_staff" data-toggle="modal"> <i class="fa fa-pencil"></i> </a>
<a class="delete" href="javascript:;"> <i class="fa fa-trash"></i> </a>
</td>
</tr>
<tr>
<td> Nick Larson </td>
<td class="center"> Staff </td>
<td>
<a class="edit" href="#form_edit_staff" data-toggle="modal"> <i class="fa fa-pencil"></i> </a>
<a class="delete" href="javascript:;"> <i class="fa fa-trash"></i> </a>
</td>
</tr>
<tr>
<td> Deon Hubert </td>
<td class="center"> Staff </td>
<td>
<a class="edit" href="#form_edit_staff" data-toggle="modal"> <i class="fa fa-pencil"></i> </a>
<a class="delete" href="javascript:;"> <i class="fa fa-trash"></i> </a>
</td>
</tr>
<tr>
<td> Ella Wong </td>
<td class="center"> Staff </td>
<td>
<a class="edit" href="#form_edit_staff" data-toggle="modal"> <i class="fa fa-pencil"></i> </a>
<a class="delete" href="javascript:;"> <i class="fa fa-trash"></i> </a>
</td>
</tr>
<tr>
<td> Lara Kunis </td>
<td class="center"> Staff </td>
<td>
<a class="edit" href="#form_edit_staff" data-toggle="modal"> <i class="fa fa-pencil"></i> </a>
<a class="delete" href="javascript:;"> <i class="fa fa-trash"></i> </a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- END WAREHOUSE INFO TAB -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END PROFILE CONTENT -->
</div>
</div>
<!-- END CONTENT -->
</div>
<!-- END CONTENT BODY -->
</div>
<!-- END CONTENT -->
<div id="form_delivery" class="modal" role="dialog" aria-labelledby="myModalLabel10" aria-hidden="true">
<div class="portlet-body">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="portlet box blue">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i>Select Contact</div>
<div class="tools">
<a href="javascript:;" class="collapse" data-original-title="" title=""> </a>
</div>
</div>
<div class="portlet-body">
<div class="table-toolbar">
<div class="row">
<div class="col-md-6">
</div>
</div>
</div>
<div id="sample_1_wrapper" class="dataTables_wrapper no-footer">
<div class="row">
<div class="col-md-6 col-md-6">
<div id="sample_1_filter" class="dataTables_filter">
<label>Search:
<input type="search" class="form-control input-sm input-small input-inline" placeholder aria-controls="sample_1">
</label>
</div>
</div>
</div>
<div class="table-scrollable">
<table style="" class="table table-striped table-bordered table-hover" id="sample_3">
<thead>
<tr role="row">
<th class="sorting_disabled" rowspan="1" colspan="1" aria-label="" style="width: 62px;">
<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
<input type="checkbox" class="group-checkable" data-set="#sample_1 .checkboxes">
<span></span>
</label>
</th>
<th class="sorting_asc" tabindex="0" aria-controls="sample_1" rowspan="1" colspan="1" aria-sort="ascending" aria-label="No : activate to sort column descending" style="width: 136px;"> Contact </th>
</tr>
</thead>
<tbody>
<tr class="gradeX odd" role="row">
<td>
<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
<input type="checkbox" class="checkboxes" value="1">
<span></span>
</label>
</td>
<td class="sorting_1"> Linda Wong </td>
</tr>
<tr class="gradeX even" role="row">
<td>
<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
<input type="checkbox" class="checkboxes" value="1">
<span></span>
</label>
</td>
<td class="sorting_1"> Edris Karim </td>
</tr>
<tr class="gradeX odd" role="row">
<td>
<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
<input type="checkbox" class="checkboxes" value="1">
<span></span>
</label>
</td>
<td class="sorting_1"> Azrin Hamidi </td>
</tr>
<tr class="gradeX even" role="row">
<td>
<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
<input type="checkbox" class="checkboxes" value="1">
<span></span>
</label>
</td>
<td class="sorting_1"> Kuhanraj Balan </td>
</tr>
<tr class="gradeX odd" role="row">
<td>
<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
<input type="checkbox" class="checkboxes" value="1">
<span></span>
</label>
</td>
<td class="sorting_1"> Dia Audia </td>
</tr>
<tr class="gradeX even" role="row">
<td>
<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
<input type="checkbox" class="checkboxes" value="1">
<span></span>
</label>
</td>
<td class="sorting_1"> Belly Goh </td>
</tr>
<tr class="gradeX odd" role="row">
<td>
<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
<input type="checkbox" class="checkboxes" value="1">
<span></span>
</label>
</td>
<td class="sorting_1"> Zamani Hashim </td>
</tr>
</tbody>
</table>
</div>
<div class="row">
<br></br>
<br></br>
<div class="form-actions">
<div class="row">
<div class="col-md-offset-5 col-md-5">
<button type="submit" class="btn green">
Send</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>
<!-- END POP UP -->
<!-- END CONTENT -->
</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 -->
<div class="modal fade" id="form_add_warehouse" tabindex="-1" role="basic" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Add Warehouse</h4>
</div>
<form class="cmxform form-horizontal adminex-form" id="addwarehouse" method="get" action="">
<div class="modal-body">
<div class="form-group ">
<label for="name" class="control-label col-md-3">Warehouse Name</label>
<div class="col-md-9">
<input class="form-control " name="name" id="name" type="text" required/>
</div>
</div>
<div class="form-group ">
<label for="address" class="control-label col-md-3">Warehouse Address</label>
<div class="col-md-9">
<input class="form-control " name="address" id="address" type="text" required/>
</div>
</div>
<div class="form-group ">
<label for="city" class="control-label col-md-3">Warehouse City</label>
<div class="col-md-9">
<input class="form-control " name="city" id="city" type="text" required/>
</div>
</div>
<div class="form-group ">
<label for="zip" class="control-label col-md-3">Warehouse Postcode</label>
<div class="col-md-9">
<input class="form-control " name="zip" id="zip" type="text" required/>
</div>
</div>
<div class="form-group ">
<label for="state" class="control-label col-md-3">Warehouse State</label>
<div class="col-md-9">
<input class="form-control " name="state" id="state" type="text" required/>
</div>
</div>
<div class="form-group ">
<label for="country" class="control-label col-md-3">Warehouse Country</label>
<div class="col-md-9">
<input class="form-control " name="country" id="country" type="text" required/>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="submit" id='submitpin'>Add Warehouse</button>
<button class="btn btn-default" type="button" id='waitingpin' disabled style="display:none;">Please Wait...</button>
</div>
</form>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<div class="modal fade" id="form_add_staff" role="basic" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Add Staff</h4>
</div>
<form class="cmxform form-horizontal adminex-form" id="addstaff" method="get" action="">
<div class="modal-body">
<div class="form-group">
<label class="control-label col-md-4">Staff Name</label>
<div class="col-md-8">
<div class="input-group select2-bootstrap-prepend">
<select id="user_id" name="user_id" class="form-control select2-allow-clear">
<option></option>
<option>Belly Goh</option>
<option>Zamani Hashim</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-4">Access Right</label>
<div class="col-md-8">
<div class="input-group select2-bootstrap-prepend">
<select id="accessright" name="accessright" class="form-control select2-allow-clear">
<option></option>
<option value="1">Admin</option>
<option value="2">User</option>
</select>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="submit" id='submitpin'>Add Staff</button>
<button class="btn btn-default" type="button" id='waitingpin' disabled style="display:none;">Please Wait...</button>
</div>
</form>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<div class="modal fade" id="form_edit_staff" tabindex="-1" role="basic" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Edit Staff</h4>
</div>
<form class="cmxform form-horizontal adminex-form" id="editstaff" method="get" action="">
<div class="modal-body">
<div class="form-group">
<label class="control-label col-md-4">Staff Name</label>
<div class="col-md-8">
<p class="form-control-static">Belly Goh</p>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-4">Position</label>
<div class="col-md-8">
<div class="input-group select2-bootstrap-prepend">
<select id="position_edit" name="position_edit" class="form-control select2-allow-clear">
<option></option>
<option value="1">Admin</option>
<option value="2">Staff</option>
</select>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="submit" id='submitpin'>Edit Staff</button>
<button class="btn btn-default" type="button" id='waitingpin' disabled style="display:none;">Please Wait...</button>
</div>
</form>
</div>
</div>
</div>
<div id="form_delivery" class="modal" role="dialog" aria-labelledby="myModalLabel10" aria-hidden="true">
<div class="portlet-body">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="portlet box blue">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i>Select Contact</div>
<div class="tools">
<a href="javascript:;" class="collapse" data-original-title="" title=""> </a>
</div>
</div>
<div class="portlet-body">
<div class="table-toolbar">
<div class="row">
<div class="col-md-6">
</div>
</div>
</div>
<div id="sample_1_wrapper" class="dataTables_wrapper no-footer">
<div class="row">
<div class="col-md-6 col-md-6">
<div id="sample_1_filter" class="dataTables_filter">
<label>Search:
<input type="search" class="form-control input-sm input-small input-inline" placeholder aria-controls="sample_1">
</label>
</div>
</div>
</div>
<div class="table-scrollable">
<table style="" class="table table-striped table-bordered table-hover" id="sample_3">
<thead>
<tr role="row">
<th class="sorting_disabled" rowspan="1" colspan="1" aria-label="" style="width: 62px;">
<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
<input type="checkbox" class="group-checkable" data-set="#sample_1 .checkboxes">
<span></span>
</label>
</th>
<th class="sorting_asc" tabindex="0" aria-controls="sample_1" rowspan="1" colspan="1" aria-sort="ascending" aria-label="No : activate to sort column descending" style="width: 136px;"> Contact </th>
</tr>
</thead>
<tbody>
<tr class="gradeX odd" role="row">
<td>
<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
<input type="checkbox" class="checkboxes" value="1">
<span></span>
</label>
</td>
<td class="sorting_1"> Linda Wong </td>
</tr>
<tr class="gradeX even" role="row">
<td>
<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
<input type="checkbox" class="checkboxes" value="1">
<span></span>
</label>
</td>
<td class="sorting_1"> Edris Karim </td>
</tr>
<tr class="gradeX odd" role="row">
<td>
<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
<input type="checkbox" class="checkboxes" value="1">
<span></span>
</label>
</td>
<td class="sorting_1"> Azrin Hamidi </td>
</tr>
<tr class="gradeX even" role="row">
<td>
<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
<input type="checkbox" class="checkboxes" value="1">
<span></span>
</label>
</td>
<td class="sorting_1"> Kuhanraj Balan </td>
</tr>
<tr class="gradeX odd" role="row">
<td>
<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
<input type="checkbox" class="checkboxes" value="1">
<span></span>
</label>
</td>
<td class="sorting_1"> Dia Audia </td>
</tr>
<tr class="gradeX even" role="row">
<td>
<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
<input type="checkbox" class="checkboxes" value="1">
<span></span>
</label>
</td>
<td class="sorting_1"> Belly Goh </td>
</tr>
<tr class="gradeX odd" role="row">
<td>
<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
<input type="checkbox" class="checkboxes" value="1">
<span></span>
</label>
</td>
<td class="sorting_1"> Zamani Hashim </td>
</tr>
</tbody>
</table>
</div>
<div class="row">
<br></br>
<br></br>
<div class="form-actions">
<div class="row">
<div class="col-md-offset-5 col-md-5">
<button type="submit" class="btn green">
Send</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>
<!-- 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/dropzone/dropzone.min.js" type="text/javascript"></script>
<script src="../assets/pages/scripts/form-dropzone.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>
<!-- END PAGE LEVEL PLUGINS -->
<!-- BEGIN THEME GLOBAL SCRIPTS -->
<script src="../assets/global/scripts/app.min.js" type="text/javascript"></script>
<!-- END THEME GLOBAL SCRIPTS -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="../assets/pages/scripts/table-datatables-editable.js" type="text/javascript"></script>
<!-- END PAGE LEVEL SCRIPTS -->
<script src="../assets/global/plugins/select2/js/select2.full.min.js" type="text/javascript"></script>
<!-- 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() {
$('#clickmewow').click(function() {
$('#radio1003').attr('checked', 'checked');
});
})
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;
}
var Script = function () {
$().ready(function() {
$.fn.select2.defaults.set("theme", "bootstrap");
$("#user_id").select2({
allowClear: true,
placeholder: "Select your staff",
width: null
});
$("#position").select2({
allowClear: true,
placeholder: "Select your staff position",
width: null
});
$("#position_edit").select2({
allowClear: true,
placeholder: "Select your staff position",
width: null
});
// @see https://select2.github.io/examples.html#data-ajax
function formatRepo(repo) {
if (repo.loading) return repo.text;
var markup = "<div class='select2-result-repository clearfix'>" +
"<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
"<div class='select2-result-repository__meta'>" +
"<div class='select2-result-repository__title'>" + repo.full_name + "</div>";
if (repo.description) {
markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>";
}
markup += "<div class='select2-result-repository__statistics'>" +
"<div class='select2-result-repository__forks'><span class='glyphicon glyphicon-flash'></span> " + repo.forks_count + " Forks</div>" +
"<div class='select2-result-repository__stargazers'><span class='glyphicon glyphicon-star'></span> " + repo.stargazers_count + " Stars</div>" +
"<div class='select2-result-repository__watchers'><span class='glyphicon glyphicon-eye-open'></span> " + repo.watchers_count + " Watchers</div>" +
"</div>" +
"</div></div>";
return markup;
}
function formatRepoSelection(repo) {
return repo.full_name || repo.text;
}
$("button[data-select2-open]").click(function() {
$("#" + $(this).data("select2-open")).select2("open");
});
$(":checkbox").on("click", function() {
$(this).parent().nextAll("select").prop("disabled", !this.checked);
});
// copy Bootstrap validation states to Select2 dropdown
//
// add .has-waring, .has-error, .has-succes to the Select2 dropdown
// (was #select2-drop in Select2 v3.x, in Select2 v4 can be selected via
// body > .select2-container) if _any_ of the opened Select2's parents
// has one of these forementioned classes (YUCK! ;-))
$(".select2, .select2-multiple, .select2-allow-clear, .js-data-example-ajax").on("select2:open", function() {
if ($(this).parents("[class*='has-']").length) {
var classNames = $(this).parents("[class*='has-']")[0].className.split(/\s+/);
for (var i = 0; i < classNames.length; ++i) {
if (classNames[i].match("has-")) {
$("body > .select2-container").addClass(classNames[i]);
}
}
}
});
$(".js-btn-set-scaling-classes").on("click", function() {
$("#select2-multiple-input-sm, #select2-single-input-sm").next(".select2-container--bootstrap").addClass("input-sm");
$("#select2-multiple-input-lg, #select2-single-input-lg").next(".select2-container--bootstrap").addClass("input-lg");
$(this).removeClass("btn-primary btn-outline").prop("disabled", true);
});
});
}();
</script>
</body>
</html>