<style>
.upload-btn-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.upload-btn-wrapper input[type=file] {
  font-size: 15px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.chats li {
  margin-top: 0px;
  margin-bottom: 10px;
  padding-top: 0px;
  padding-bottom: 0px;
  font-size: 13px;
}

.chats li.out .mt-comment-body {
  border-left: 2px solid #F3565D !important;
}

.chats li.in .mt-comment-body {
  border-left: 2px solid #1BBC9B !important;
}

.mt-comments .mt-comment .mt-comment-img {
  margin-right: 20px !important;
}

li.date {
  margin-top: 15px !important;
}

li.unread {
  margin-top: 15px !important;
}

.packing-list>tbody>tr>td , .packing-list>thead>tr>th {
  text-align: center !important;
  vertical-align: middle !important;
}

.warehouse-arrangement>tbody>tr>td , .warehouse-arrangement>thead>tr>th {
  text-align: center !important;
  vertical-align: middle !important;
  width: 50% !important;
  padding-left: 3px !important;
  padding-right: 3px !important;
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}

tr.eror {
  border: 2px solid #e7505a !important;
}

.modal-body {
  overflow-x: auto !important;
}

@media print {
	@  page {
    max-height: 100%;
    max-width: 100%;
  }

  .marking>tbody>tr>td , .marking>thead>tr>th {
    padding: 15px;
  }

  body.modalprinter * {
    visibility: hidden;
  }

  body.modalprinter .modal-dialog.focused {
    position: absolute;
    padding: 0;
    margin: 10px 10px 10px 10px;
    left: 0;
    top: 0;
    page-break-before: avoid;
    width: 100%;
    height: 100%;
  }

  body.modalprinter .modal-dialog.focused .modal-content {
    border-width: 0;
  }

  body.modalprinter .modal-dialog.focused .modal-content .modal-header .modal-title,
	body.modalprinter .modal-dialog.focused .modal-content .modal-body,
	body.modalprinter .modal-dialog.focused .modal-content .modal-body * {
    visibility: visible;
  }

  body.modalprinter .modal-dialog.focused .modal-content .modal-header,
	body.modalprinter .modal-dialog.focused .modal-content .modal-body {
    padding: 0;
  }

  body.modalprinter .modal-dialog.focused .modal-content .modal-header .modal-title {
    margin-bottom: 20px;
  }
}
</style>
<div class="row">
	<div class="col-md-12">
		<div class="row">
			<div class="col-md-3 col-sm-12" style="margin-bottom:10px">
				<div class="row">
					<div class="col-md-12">
						<div class="portlet light portlet-fit full-height-content full-height-content-scrollable bordered">
							<div class="portlet-title">
								<div class="caption">
									<span class="caption-subject bold font-purple-plum uppercase"> Order List </span>
								</div>
								<div class="inputs">
									<div class="row">
										<div class="col-md-12">
											<div class="col-md-9">
												<div class="portlet-input input-inline input-small" style="margin-bottom:10px">
													<div class="input-icon right">
														<i class="icon-magnifier"></i>
														<input type="text" class="form-control input-circle" placeholder="search...">
													</div>
												</div>
											</div>
											<div class="col-md-3">
												<div class="btn-group" style="width:100%">
													<a href="" class="btn btn-circle btn-icon-only btn-default" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
													<span class="fa fa-filter"></span>
													</a>
													<ul class="dropdown-menu pull-right">
														<li>
															<a href="javascript:;">
															<span class="label label-sm label-success"> Active </span>
															</a>
														</li>
														<li>
															<a href="javascript:;">
															<span class="label label-sm label-success"> Closed </span>
															</a>
														</li>
														<li class="active">
															<a href="javascript:;">
															<span class="label label-sm label-success"> Pending </span>
															</a>
														</li>
														<li class="active">
															<a href="javascript:;">
															<span class="label label-sm label-success"> Cancel </span>
															</a>
														</li>
													</ul>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="portlet-body">
								<div class="full-height-content-body">
									<div id="tree_1" class="tree-demo">
										<ul>
											<li>
												<a href="/messenger/general">General <?php echo (getGeneralUnread()>0?'<span class="badge badge-danger unread">'.getGeneralUnread().'</span>':""); ?></a>
											</li>
											<li data-jstree='{ "opened" : true }'>
												Order List <span class='badge badge-danger'><?php echo getOrderUnread(); ?></span>
												<ul>
													<?php echo getRoomLists($room_id); ?>
												</ul>
											</li>
											<li>
												<a href="/messenger/help">Help <?php echo (getHelpUnread()>0?'<span class="badge badge-danger unread">'.getHelpUnread().'</span>':""); ?></a>
											</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-9 col-sm-12">
				<div class="portlet light portlet-fit full-height-content full-height-content-scrollable bordered">
					<div class="portlet-title">
						<div class="caption">
							<i class=" icon-layers font-dark"></i>
							<span class="caption-subject font-dark bold uppercase">Order <span class="tooltips" data-placement="top" data-original-title="Order Number" ><?php echo (getRoomData($room_id, "order_id") <> null ? getSOData(getRoomData($room_id, "order_id"), "order_no") : getPOData(getRoomData($room_id, "po_id"), "order_no")); ?></span> :  <a href="#" class="tooltips" data-placement="bottom" data-original-title="Group Name" id="chat_name" data-type="text" data-pk="<?php echo $room_id; ?>" data-url="/messenger/updateGroupName" data-title="Enter Group Name"><?php echo getRoomData($room_id, "chat_name")?></a></span>
						</div>
						<div class="actions">
							<a class="btn btn-circle btn-default tooltips addgroup" data-placement="top" data-original-title="Add Group"><i class="fa fa-plus" aria-hidden="true"></i> Add Group</a>
							<a href="javascript:window.open('/track-order?id=<?php echo getRoomData($room_id, "order_id"); ?>', 'Track Order', 'fullscreen=yes, scrollbars=auto');" class="btn btn-circle btn-default tooltips" data-placement="top" data-original-title="Track Order"><i class="fa fa-map-marker" aria-hidden="true"></i> Track Order</a>							
							<a class="btn btn-circle btn-icon-only btn-default fullscreen" href="javascript:;" data-original-title="" title=""> </a>
							<a class="btn btn-circle btn-icon-only  btn-default tooltips members" id="members" data-placement="top" data-original-title="Members" style="padding-right: 0px;padding-left: 0px;">
							<i class="fa fa-users" aria-hidden="true"></i>
							</a>
						</div>
					</div>
					<div class="portlet-body" id="chats" data-id="<?php echo $_SESSION['user_id']; ?>" data-first_name="<?php echo ($_SESSION['role'] == 0 ? $_SESSION['username'] : (getProfileData($_SESSION["user_id"], "first_name") <> "" ? getProfileData($_SESSION["user_id"], "first_name") : $_SESSION['username'])); ?>" data-group_id = "<?php echo $_SESSION['group_id']; ?>">
						<div class="full-height-content-body scroller" style="position: relative">
							<div class="mt-comments">
								<ul class="chats" id="general_content" data-room_id="<?php echo $room_id;?>" style="margin-bottom:50px"></ul>
							</div>
						</div>
						<div style="position: absolute; bottom: 0; width:calc(100% - 70px)" class="chat-form">
							<div class="mt-comments" id="reply_content">
							</div>
							<div class="input-group">
								<input id="text-custom-trigger" class="form-control" type="text" placeholder="Type a message here..." />
								<span class="input-group-btn icn-only">
								<a id="toggle" class="btn blue icn-only toggle">
								<i class="fa fa-smile-o icon-white"></i>
								</a>
								</span>
								<span class="input-group-btn icn-only">
								<button type="button" class="btn blue" data-container="body" data-toggle="popover" data-placement="top" data-html="true" data-content="
									<div style='margin-left:10px;margin-right:10px;'>
									<div class='row'>
									<div class='upload-btn-wrapper'>
									<button type='button' class='btn btn-default btn-circle btn-icon-only'><i class='fa fa-file' style='font-size:15px' aria-hidden='true'></i></button>
									<input type='file' name='file' id='file' onchange='submit_file()'/>
									</div>
									<div class='upload-btn-wrapper'>
									<button type='button' class='btn  btn-default btn-circle btn-icon-only'><i class='fa fa-picture-o' style='font-size:15px' aria-hidden='true' ></i></button>
									<input type='file' name='file2' id='file2' accept='image/*'  onchange='submit_file2()'/>
									</div>
									<div class='upload-btn-wrapper'>
									<button type='button'  class='btn  btn-default btn-circle btn-icon-only'><i class='fa fa-video-camera' style='font-size:15px' aria-hidden='true'></i></button>
									<input type='file' name='file3' id='file3' accept='audio/*,video/*' onchange='submit_file3()'/>
									</div>											
									</div>
									<div class='row'>
									<button type='button' class='btn  btn-default btn-circle btn-icon-only decision-making-create' ><i class='fa fa-question' style='font-size:15px' aria-hidden='true'></i></button>
									<button type='button' class='btn  btn-default btn-circle btn-icon-only'><i class='glyphicon glyphicon-qrcode' style='font-size:15px' aria-hidden='true'></i> </button>
									<button type='button'  class='btn  btn-default btn-circle btn-icon-only'><i class='fa fa-address-card-o' style='font-size:15px' aria-hidden='true'></i></button>
									</div>
									<form id='formbase64' style=display:none;'>
									<input name='filesbase64' id='filesbase64'>
									</form>
									</div>
									">
								<i class="fa fa-plus-square" aria-hidden="true"></i></button>
								</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="modal fade bs-modal-lg in printable1" id="previewPL" tabindex="-1" role="basic" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content form">
			<form id="marking-no-add"  class="form-horizontal form-bordered">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
					<h3 class="modal-title">Packing List</h3>
					<div class="btn-group pull-right">
						<button class="btn green btn-circle btn-outline dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false"> Actions
						<i class="fa fa-angle-down"></i>
						</button>
						<ul class="dropdown-menu pull-left" role="menu">
							<li>
								<a onclick="window.print();"><i class="icon-printer"></i> Print</a>
							</li>
							<li>
								<a id="pdf"><i class="icon-doc"></i>PDF</a>
							</li>
							<li>
								<a id="excel"><i class="icon-doc"></i>Excel</a>
							</li>
						</ul>
					</div>
				</div>
				<div class="modal-body">
					<div>
						<div class="form-body" id="getCode">
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>
<div class="modal fade bs-modal-lg in printable2" id="previewMarking" tabindex="-1" role="basic" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content form">
			<form id="marking-no-add"  class="form-horizontal form-bordered">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
					<h3 class="modal-title">Marking</h3>
					<div class="btn-group pull-right">
						<button class="btn green btn-circle btn-outline dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false"> Actions
						<i class="fa fa-angle-down"></i>
						</button>
						<ul class="dropdown-menu pull-left" role="menu">
							<li>
								<a onclick="window.print();"><i class="icon-printer"></i> Print</a>
							</li>
						</ul>
					</div>
				</div>
				<div class="modal-body">
					<div>
						<div class="form-body" id="getCode2">
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>
<div class="modal fade in" id="add-group" tabindex="-1" role="basic" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content form">
			<form id="form-add-group"  class="form-horizontal form-bordered">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
					<h3 class="modal-title">Members</h3>
				</div>
				<div class="modal-body">
					<div>
						<div class="form-body" id="getCode5">
						</div>
					</div>
				</div>
				<div class="modal-footer"> 
					<button type="button" class="btn dark btn-outline" data-dismiss="modal">Close</button>
					<a class="btn green add-group-save">Add Group</a>
				</div>
			</form>
		</div>
	</div>
</div>
<div class="modal fade in" id="add-member" tabindex="-1" role="basic" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content form">
			<form id="form-add-member"  class="form-horizontal form-bordered">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
					<h3 class="modal-title">Members</h3>
				</div>
				<div class="modal-body">
					<div>
						<div class="form-body" id="getCode3">
						</div>
					</div>
				</div>
				<div class="modal-footer"> 
					<button type="button" class="btn dark btn-outline" data-dismiss="modal">Close</button>
					<a class="btn green add-member-save">Add</a>
				</div>
			</form>
		</div>
	</div>
</div>
<div class="modal fade in" id="decision-making-create-modal" tabindex="-1" role="basic" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content form">
			<form id="form-decision-making"  class="form-horizontal form-bordered">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
					<h3 class="modal-title">Decision Making</h3>
				</div>
				<div class="modal-body">
					<div>
						<div class="form-body">
							<div class="portlet light bordered">
								<div class="portlet-body">
									<div class="row static-info">
										<div class="col-md-5 name">Title </div>
										<div class="col-md-7 value">
											<input type="text" name="title" id="title" class="form-control">
										</div>
									</div>
									<div class="row static-info">
										<div class="col-md-5 name"> Details </div>
										<div class="col-md-7 value">
											<textarea class="form-control" name="details"  id="details" rows="3"></textarea>
										</div>
									</div>
									<div class="row static-info">
										<div class="col-md-5 name">Photo
										</div>
										<div class="col-md-5 name">
											<div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
												<img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=no+image" alt="">
											</div>
											<span class="fileinput-new"></span>
											<span class="fileinput-exists"></span>
											<input type="file" name="...">
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer"> 
					<button type="button" class="btn dark btn-outline" data-dismiss="modal">Close</button>
					<a class="btn green decision-making-add">Send</a>
				</div>
			</form>
		</div>
	</div>
</div>
<div class="modal fade in bs-modal-lg " id="decision-request-details" tabindex="-1" role="basic" aria-hidden="true">
	<div class="modal-dialog modal-lg ">
		<div class="modal-content form">
			<form id="form-decision-request"  class="form-horizontal">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
					<h3 class="modal-title">Decision Request</h3>
				</div>
				<div class="modal-body">
					<div>
						<div class="form-body" id="getCode4">
						</div>
					</div>
				</div>
				<div class="modal-footer" id="decision-request-action"> 
				
				<?php if($_SESSION['group_id'] == 2){ ?>
					<a class="btn green decision-yes">Yes</a>
					<a class="btn dark btn-outline decision-no">No</a>					
				<?php }else{?>
					Your importer haven't made any decision. 
				<?php } ?>
				</div>
			</form>
		</div>
	</div>
</div>
<div class="modal fade modal-scroll in" id="form_decision_reject" 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">Decision Reject</h4>
			</div>
			<form class="form-horizontal" id="decision_reject">
				<div class="modal-body form">
					<div class="row">						
						<div class="form-body" style="padding-top: 10px;padding-bottom: 10px;">
							<div class="form-group">
								<label class="control-label col-md-3">Title</label>
								<div class="col-md-9">
									<p class="form-control-static">Delivery Request Reschedule</p>
								</div>
							</div>
							<div class="form-group">
								<label class="control-label col-md-3">New Schedule Date</label>
								<div class="col-md-9">
									<div class="input-group date form_datetime form_datetime bs-datetime">
										<input type="text" size="16" id="scheduled_date" name="scheduled_date" class="form-control">
										<span class="input-group-addon">
											<button class="btn default date-set" type="button">
												<i class="fa fa-calendar"></i>
											</button>
										</span>
									</div>
								</div>
							</div>
							<div class="form-group">
								<label class="control-label col-md-3">Reason</label>
								<div class="col-md-9">
									<textarea class="form-control" rows="4" id="reason" name="reason"></textarea>
								</div>
							</div>
						</div>						
					</div>
				</div>
				<div class="modal-footer">
					<div class="row pull-right">
						<div class="col-md-12">
							<a class="btn green submit"> Finish!</a>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>
<div class="modal fade in bs-modal-lg " id="delivery-request-details" tabindex="-1" role="basic" aria-hidden="true">
	<div class="modal-dialog modal-lg ">
		<div class="modal-content form">
			<form id="form-delivery-request"  class="form-horizontal">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
					<h3 class="modal-title">Decision Request</h3>
				</div>
				<div class="modal-body">
					<div>
						<div class="form-body" id="getCode6">
						</div>
					</div>
				</div>
				<div class="modal-footer" id="delivery-request-action"> 
				
				<?php if($_SESSION['group_id'] == 2){ ?>
					<a class="btn green decision-yes">Yes</a>
					<a class="btn dark btn-outline decision-no">No</a>					
				<?php }else{?>
					Your importer haven't confirm their schedule. 
				<?php } ?>
				</div>
			</form>
		</div>
	</div>
</div>
<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="true">
	<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"> Importer </a>
			</li>
			<li>
				<a href="javascript:;" data-target="#quick_sidebar_tab_2" data-toggle="tab"> Forwarder </a>
			</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">
					<h3 class="list-heading">Members</h3>
					<ul class="media-list list-items">
						<?php
							$importers = getImporterinRoom($room_id);
							foreach ($importers as $key => $value){
							?>
						<li class="media">
							<img class="media-object" src="<?php echo showImage($value['user_id']); ?>" alt="...">
							<div class="media-body">
								<h4 class="media-heading"><?php echo (getProfileData($value['user_id'] , "first_name") <> "" ? getProfileData($value['user_id'] , "first_name") :  get_data($value['user_id'] , "username")); ?></h4>
								<div class="media-heading-sub"> <?php echo ($value['roles'] == 0 ?  "ADMIN" : ""); ?></div>
							</div>
						</li>
						<?php } ?>
						<?php if (getinRoomRoles($room_id) == 0  && $_SESSION['group_id'] == 2){ ?>
						<li align="center">
							<div class="actions">
								<a class="btn btn-circle btn-default add-member" data-id="2" style="margin-left: 15px;">
								<i class="fa fa-plus"></i> Add </a>
							</div>
						</li>
						<?php } ?>
					</ul>
				</div>
			</div>
			<div class="tab-pane  page-quick-sidebar-chat" id="quick_sidebar_tab_2">
				<div class="page-quick-sidebar-chat-users" data-rail-color="#ddd">
					<h3 class="list-heading">Members</h3>
					<ul class="media-list list-items">
						<?php
							$forwarders = getForwarderinRoom($room_id);
							foreach ($forwarders as $key => $value){
							?>
						<li class="media">
							<img class="media-object" src="<?php echo showImage($value['user_id']); ?>" alt="...">
							<div class="media-body">
								<h4 class="media-heading"><?php echo (getProfileData($value['user_id'] , "first_name") <> "" ? getProfileData($value['user_id'] , "first_name") :  get_data($value['user_id'] , "username")); ?></h4>
								<div class="media-heading-sub"> <?php echo ($value['roles'] == 0 ?  "ADMIN" : ""); ?></div>
							</div>
						</li>
						<?php } ?>
						<?php if (getinRoomRoles($room_id) == 0 && $_SESSION['group_id'] == 1){ ?>
						<li align="center">
							<div class="actions">
								<a class="btn btn-circle btn-default add-member" data-id="1" style="margin-left: 15px;">
								<i class="fa fa-plus"></i> Add </a>
							</div>
						</li>
						<?php } ?>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>