<?php
if(stripos($_SERVER['SCRIPT_NAME'],"/admin/")===false?false:true){
	include_once("../connect.php");
	include_once("../session.php");
}else{
	include_once("connect.php");
	include_once("session.php");
}

 ?>

 <!DOCTYPE html>
 <html lang="en">
   <head>
	 <meta charset="utf-8">
	 <meta http-equiv="X-UA-Compatible" content="IE=edge">
	 <meta name="viewport" content="width=device-width, initial-scale=1">
	 <title><?= $config['CompanyName'] ?></title>

	 <!-- Bootstrap -->
	 <link href="../css/bootstrap.min.css" rel="stylesheet">
	 <link rel="stylesheet" href="../css/bootstrap-combobox.css" />

	 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	 <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	 <!--[if lt IE 9]>
	   <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	   <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	   <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
		   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
		   <!-- Include all compiled plugins (below), or include individual files as needed -->
		   <script src="../js/bootstrap.min.js"></script>
		 <script src="../js/bootstrap-combobox.js"></script>
		 <script src="../js/excellentexport.js"></script>
		   <script type="text/javascript">
			 $(document).ready(function(){
	   //        $('.grpline').css("width", "100px");
			 });
		   </script>

	 <![endif]-->
	<link rel="stylesheet" href="../css/styles.css"/>
   </head>
   <body>

	   <?php include_once("navbar.php"); ?>


   <!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="container " style="padding-top: 10px;">
	<div class="panel panel-default">
	  <div class="panel-heading form-inline">
	  <a class="btn btn-success hidden-print" role="button" style="float: right;" href="#" download="OrderQueue.xls" href="#" onclick="return ExcellentExport.excel(this, 'orderhistory', 'Order History');" data-toggle="tooltip" data-placement="left" title="Does not work with Internet Explorer">Export To Excel</a>

	<h3 class="panel-title">Order Queue</h3><br />
	  </div>
	  <div class="panel-body">
		<table class="table table-hover table-condensed" id="orderqueue">
			<thead>
				<tr>
					<th>Order ID</th>
					<th style="text-align: center;">Row Count</th>
					<th style="text-align: center;">Due Days</th>
					<th style="max-width: 250px;">Customer</th>
					<th>Order Date/Time</th>
					<th>PO Number</th>
					<th>Delivery</th>
					<th>In Process</th>
					<th>Done</th>
				</tr>
			</thead>
			<tbody id="orderQueueTbody" >
			
			</tbody>
		<?php

		 ?>
		 </table>
	  </div>
	</div>

	</div>
	<script type="text/javascript">
		function Interval(fn, desc, ms){
			this.desc = desc;
			this.status = 0;
		  
			var that = this;
			this.start = function(){
				this.id = window.setInterval(function () {
		  
				// save some progess to the Interval object
				// that is used, because in interval callback this === window
				that.status++;
			
				// now call your function fn, using this === Interval object
				fn.call(that);
			  }, ms);
			}
			this.start();
		  
			this.stop = function () {
			  if (this.id) {
				window.clearInterval(this.id);
				this.id = 0;
				this.status = -1;
			  }
			};
		  }

		
		
		
		/*jshint multistr: true */
		function fillPendingOrders(){
			if(!enableRefresh){
				return;
			}
			$.get('mod.php?p=orderqueue&a=functions&f=getPendingOrders', function(data){
					
					$('#orderQueueTbody').html('');
					data = JSON.parse(data);
					
					//console.log(data);
					var isProcessing = false;
					for(var i=0;i < data.length;i++){
						var disabledInProcessTag = "";
						var disabledProcessTag = " disabled ";
						if(isProcessing){
							disabledInProcessTag = " disabled ";
						}
						var inProcessBtnText = "In Process";
						var onHoldBadge = "";
						var inProcessBtnClass = "btn-primary";
						var specialOrder = data[i].SpecialOrder;
						var KYBOrder = data[i].KYBOrder;
						var DHIOrder = data[i].DHIOrder;
						var NIPOrder = data[i].NIPOrder;
						var Remarks = "";
						if(specialOrder){
							specialOrder = "danger";
						}else{
							specialOrder = "";
						}
						if(KYBOrder){
							Remarks = Remarks + "<b>KYB</b> - ";
						}
						if(DHIOrder){
							Remarks = Remarks + "<b>DHI</b> - ";
						}
						if(NIPOrder){
							Remarks = Remarks + "<b>NIP</b> - ";
						}
						if(Remarks.substring(Remarks.length-3) == " - "){
							Remarks = "<br />" + Remarks.substring(0,Remarks.length-3)
						}
						if(data[i].InProcess == "1"){
							inProcessBtnText = data[i].InProcessDate;
							isProcessing = true;
							disabledInProcessTag = " disabled ";
							inProcessBtnClass = "btn-success";
							disabledProcessTag = ""; 
						} else if (data[i].OnHold == "1"){
							inProcessBtnText = "On Hold";
							inProcessBtnClass = "btn-danger";
							onHoldBadge = "<span class=\"badge\" onclick=\"alert('User: " + data[i].OnHoldDeleteUser + " \\nDate: " + data[i].OnHoldDate + " \\nReason: " + data[i].HoldDeleteReason + "')\">i</span>";
						}
						var orderNotes = "";
						if(data[i].OrderNotes !== ""){
							orderNotes = "<br /><small><b>Note: </b>" + data[i].OrderNotes + "</small>";
						}
						$('#orderQueueTbody').append("<tr class=\"" + specialOrder + "\">\
						<td ><button class=\"btn btn-default\" onclick=\"window.open('vieworder.php?order=" + data[i].OrderID + "')\">" + data[i].OrderID + "</button></td>\
						<td style=\"text-align: center;\">" + data[i].ItemCount + "</td>\
						<td style=\"text-align: center;\">" + data[i].DueDays + "</td>\
						<td style=\"max-width: 350px;\"><b>" + data[i].AccountNumber + "</b> - " + data[i].Name + orderNotes + Remarks + "</td>\
						<td>" + data[i].OrderDate + "</td>\
						<td>" + data[i].PONumber + "</td>\
						<td>" + data[i].DeliveryMethod + "</td>\
						<td><button " + disabledInProcessTag + " class=\"btn " + inProcessBtnClass + "\" id=\"InProcess" + data[i].OrderID + "\" onclick=\"setInProcess('" + data[i].OrderID + "')\">" + inProcessBtnText + "</button> " + onHoldBadge + "</td>\
						<td><div class=\"btn-group\">\
								<button  " + disabledProcessTag + " class=\"btn  btn-default\" id=\"Processed" + data[i].OrderID + "\" onclick=\"setProcessed('" + data[i].OrderID + "')\">Done</button>\
								<button " + disabledProcessTag + " type=\"button\" class=\"btn btn-default dropdown-toggle\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\
								  <span class=\"caret\"></span>\
								  <span class=\"sr-only\">Toggle Dropdown</span>\
								</button>\
								<ul class=\"dropdown-menu\">\
								  <li><a href=\"#\" onclick=\"setOnHold(" + data[i].OrderID + ")\">On Hold</a></li>\
								  <li><a href=\"#\" onclick=\"setDelete(" + data[i].OrderID + ")\">Delete</a></li>\
								</ul>\</div>\
						</td>\
						<!--<td><button " + disabledProcessTag + " class=\"btn  btn-default\" id=\"Processed" + data[i].OrderID + "\" onclick=\"setProcessed('" + data[i].OrderID + "')\">Done</button></td>-->\
						</tr>");
					}
					$('.dropdown-toggle').click(function(event){
						enableRefresh = false;
						setInterval(ClassChangeDetector,100);
					});
			});
			
		}
		
		var enableRefresh = true;
		var refresher = null;
		$(document).ready(function(){
			
			refresher = new Interval(function () {
				
					fillPendingOrders();
				
				// this === Interval object instance
				
			  }, "description", 1500);
			//setInterval(ClassChangeDetector,1005);
		});
		function ClassChangeDetector(){
			var classText = "btn-group";
			var buttons = $('.' + classText);
			stop = false;
			for(var i=0;i < buttons.length; i++){
				var currClass = $(buttons[i]).attr('class');
				if(currClass != classText){
					stop = true;
					break;
				}
			}
			if(stop){
				enableRefresh = false;
			}else{
				enableRefresh =true;
				
			}
		}
		function setInProcess(OrderID){
			$.get('mod.php?p=orderqueue&a=functions&f=setInProcess&id=' + OrderID, function(data){
				data = JSON.parse(data);
				if(data.Result === true){
					$('#InProcess' + OrderID).text(data.InProcessDate);
					$('#InProcess' + OrderID).removeClass("btn-primary");
					$('#InProcess' + OrderID).addClass("btn-success");
					$('button[id^=InProcess]').attr('disabled', true);
					$('button[id^=Processed]').attr('disabled', true);
				}else{
					alert('Sorry ' + data.User + ' started processing this order, please choose the next Order available.');
				}
			});
		}
		function setProcessed(OrderID){
			$.get('mod.php?p=orderqueue&a=functions&f=setProcessed&id=' + OrderID, function(data){
				data = JSON.parse(data);
				if(data.Result === true){
					$('#Processed' + OrderID).parent().parent().parent().remove();
				}else{
					alert('Sorry there was an error:\n\r' + data.Error);
				}
			});
		}
		function setOnHold(OrderID){
				$('#OnHoldReasonModal').modal('show');
				$('#OrderNumber').val(OrderID);
				
		}
		function submitSetOnHold(){
			var OrderID = $('#OrderNumber').val();
			var reason = $('#SetOnHoldReason').val();
			$.get('mod.php?p=orderqueue&a=functions&f=setOnHold&id=' + OrderID + '&reason=' + reason, function(data){
				data = JSON.parse(data);
				if(data.Result === true){
					$('#OnHoldReasonModal').modal('hide');
					
				}else{
					alert('Sorry there was an error:\n\r' + data.Error);
				}
			});
		}
		
		function setDelete(OrderID){
				$('#DeleteReasonModal').modal('show');
				$('#DeleteOrderNumber').val(OrderID);
				
		}
		function submitSetDelete(){
			var OrderID = $('#DeleteOrderNumber').val();
			var reason = $('#SetDeleteReason').val();
			$.get('mod.php?p=orderqueue&a=functions&f=setDelete&id=' + OrderID + '&reason=' + reason, function(data){
				data = JSON.parse(data);
				if(data.Result === true){
					$('#DeleteReasonModal').modal('hide');
					
				}else{
					alert('Sorry there was an error:\n\r' + data.Error);
				}
			});
		}
	</script>
	
	
	<!-- OnHold Reason Modal -->
	<div class="modal fade" id="OnHoldReasonModal">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="SetOnHoldTitle">Set On Hold</h4>
	      </div>
	      <div class="modal-body">
			<div class="form">
				<div class="form-group">
					<label for="OrderNumber">Order Number</label>
					<input type="text" class="form-control"  name="OrderNumber" id="OrderNumber" value="" readonly />
				</div>
				<!--<div class="form-group">
					<label for="InvoiceCustomer">Customer</label>
					<input type="text" class="form-control" readonly name="InvoiceCustomer" id="InvoiceCustomer" readonly />
				</div>-->
				<div class="form-group">
					<label for="SetOnHoldReason">Reason</label>
					<textarea class="form-control" rows="5" id="SetOnHoldReason"></textarea>
				</div>
			</div>
			
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
	        <button type="button" id="submitSetOnHold" class="btn btn-success" onclick="submitSetOnHold();">Set On Hold</button>
	      </div>
	    </div><!-- /.modal-content -->
	  </div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
	
	<!-- Delete Reason Modal -->
	<div class="modal fade" id="DeleteReasonModal">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="SetDeleteTitle">Delete Order From Queue</h4>
	      </div>
	      <div class="modal-body">
			<div class="form">
				<div class="form-group">
					<label for="DeleteOrderNumber">Order Number</label>
					<input type="text" class="form-control"  name="DeleteOrderNumber" id="DeleteOrderNumber" value="" readonly />
				</div>
				<!--<div class="form-group">
					<label for="InvoiceCustomer">Customer</label>
					<input type="text" class="form-control" readonly name="InvoiceCustomer" id="InvoiceCustomer" readonly />
				</div>-->
				<div class="form-group">
					<label for="SetDeleteReason">Reason</label>
					<textarea class="form-control" rows="5" id="SetDeleteReason"></textarea>
				</div>
			</div>
			
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
	        <button type="button" id="submitSetDelete" class="btn btn-success" onclick="submitSetDelete();">Delete</button>
	      </div>
	    </div><!-- /.modal-content -->
	  </div><!-- /.modal-dialog -->
	</div><!-- /.modal -->

   </body>

 </html>