<?php
//die(print_r($_SESSION, true));
//error_reporting(E_ALL);
//echo "test";
?>


 <!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">-->
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <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>
       <script src="../js/functions.js"></script>
       <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
       <script src="../js/functions.js"></script>
           <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(){
             
             });
           </script>
					<link rel="stylesheet" href="../css/jquery.filthypillow.css" type="text/css" />
					<script src="../js/jquery.filthypillow.min.js" type="text/javascript"></script>
					<script src="../js/moment.js" type="text/javascript"></script>
     <![endif]-->
	<link rel="stylesheet" href="../css/styles.css"/>
   </head>
   <body>
<?php

	include("./navbar.php");
	
?>
        <br /><br />
   <!-- Stack the columns on mobile by making one full-width and the other half-width -->
    
	<div class="container" style="padding-top: 10px;">
		<link href="../css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
		<script src="../js/fileinput.js" type="text/javascript"></script>
		
		<div class="panel panel-default">
			<div class="panel-heading form-inline">
				<a class="btn btn-success" role="button" style="float: right;" href="#" download="DeliveryOptions<?= "(" . date("m.d.Y") . ")" ?>.xls" href="#" onclick="return ExcellentExport.excel(this, 'DeliveryOptionsTable', 'DeliveryOptionsTable');" data-toggle="tooltip" data-placement="left" title="Does not work with Internet Explorer">Export To Excel</a>
				<div style="margin-right: 10px; float: right;">
					<div class="input-group">
						<div id="clearButton" style="display: none;" class="input-group-addon" onclick="clearFilter()">
							<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
						</div>
						<input type="text"   class="form-control" name="filter" placeholder="Filter" value="" />
						<div class="input-group-addon" onclick="filter()">
							<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
						</div>
					</div>
					<button class="btn btn-primary" onclick="addDeliveryOption()" >Add New Delivery Option</button>
				</div>
				<h3 class="panel-title">Delivery Options</h3>
				<small>Click on a row to edit the Item</small>
			</div>
			<div class="panel-body">
				<table class="table table-hover" id="DeliveryOptionsTable">
					<thead>
						<tr>
							<th>Name</th>
							<th>StartTime</th>
							<th>Cutoff Time</th>
							<th>Comment</th>
							<th>Delivered By</th>
							<!--<th>Fee Rule</th>-->
						</tr>
					</thead>
					<tbody>
						<?php
						
						 $query = "SELECT * FROM `DELIVERY_OPTION` ORDER BY Name ASC";
						 $result = mysqli_query($con, $query);
						 while ($row = mysqli_fetch_array($result)) {
							
						?>
							 <tr onclick="editDeliveryOption('<?= $row['id'] ?>')">
								 <td><?= $row['Name'] ?></td>
								 <td><?= date("h:i a", strtotime($row['StartTime'])) ?></td>
								 <td><?= date("h:i a", strtotime($row['Cutoff'])) ?></td>
								 <td><?= $row['Comment'] ?></td>
								 <td><?= $row['DeliveredBy']?date("h:i a", strtotime($row['DeliveredBy'])):"" ?></td>
								 <!--  -->
							 </tr>
						<?php		
						 }
						 ?>
					</tbody>
				</table>
			</div>
		</div>
	</div>
	
	
	 <div class="modal fade" id="AddEditDeliveryOption">
		 <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="AddEditTitle">Edit Delivery Option</h4>
			 </div>
			 <div class="modal-body">
			   <form class="">
				   <input type="hidden" id="isNew" name="isNew" value="" />
				   <input type="hidden" id="DeliveryOptionID" name="DeliveryOptionID" value="" />
				   <div class="form-group">
					   <label for="DeliveryOptionName">Name</label>
						 <input class="form-control" id="DeliveryOptionName" name="DeliveryOptionName" />
				   </div>
					 <div class="form-group">
					   <label for="DeliveryOptionStartTime">Start Time</label> <i>Time of the Day this option will be available to use.</i>
						 <input class="form-control" type="time"  id="DeliveryOptionStartTime" name="DeliveryOptionStartTime" />
				   </div>
					 <div class="form-group">
					   <label for="DeliveryOptionCutoffTime">Cutoff Time</label> <i>Time of the Day where this option will be removed from the delivery option dropdown</i>
						 <input class="form-control" type="time" id="DeliveryOptionCutoffTime" name="DeliveryOptionCutoffTime" />
				   </div>
					 <div class="form-group">
					   <label for="DeliveryOptionDeliveredBy">Delivered By</label> <i>Expected delivery time.</i>
						 <input class="form-control" type="time" id="DeliveryOptionDeliveredBy" name="DeliveryOptionDeliveredBy" />
				   </div>
					 <div class="form-group">
					   <label for="DeliveryOptionComment">Comment</label> <i>This text will only be visible in the Admin area. Internal Use Only</i>
						 <input class="form-control" id="DeliveryOptionComment" name="DeliveryOptionComment" />
				   </div>
					 <div class="form-group">
					   <label for="DeliveryOptionFeeRule">Fee Rule</label> <i>PHP Code to calculate fees. <br>Usable variables: <b>$fee</b>, <b>$orderTotal</b>. <br>
						 Code Examples:
						 <br>
						 "if($orderTotal < 20){ $fee = 1.5; } else { $fee = 0; }" - <b>Order Total based fee</b>.
						 <br>OR<br>
						 "$fee = 5;" - <b>Flat Fee</b>
						 </i>
						 
						 <textarea class="form-control" id="DeliveryOptionFeeRule" name="DeliveryOptionFeeRule"></textarea>
				   </div>
			   </form>
			 </div>
			 <div class="modal-footer">
			   <button type="button" class="btn btn-danger" id="deleteButton" onclick="deleteDeliveryOption()" >Delete</button>
			   <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
			   <button type="button" class="btn btn-primary" id="saveButton" onclick="saveDeliveryOption()">Save</button>
			 </div>
		   </div><!-- /.modal-content -->
		 </div><!-- /.modal-dialog -->
	   </div><!-- /.modal -->
		 
	   <script type="text/javascript">
		   $('[name=filter]').on('keypress', function(e) {
			   if (e.which == 13) {
				   filter();
			   }
		   
		   });
		   
		   function clearFilter() {
			   $('[name=filter]').val("");
			   $('#clearButton').css('display', 'none');
			   $('tr').css('display', '');
			   
		   }
		   function filter() {
			   var	name = $('[name=filter]').val();
			   filterByName(name);
		   }
		   function filterByName(name) {
			   $('#clearButton').css('display', '');
			   for (var i = 0; i < $('tr').length; i++) {
				   if (i != 0) {
					   var result = $('tr')[i].innerText.toUpperCase().indexOf(name.toUpperCase());
					   if (result < 0) {
						   $($('tr')[i]).css('display', 'none');
					   }else {
						   $($('tr')[i]).css('display', '');
					   }
				   }
			   }
		   }
			 
		   function clearModal() {
			   $('#isNew').val("0");
			   $('#DeliveryOptionID').val("-1");
			   $('#DeliveryOptionName').val("");
			   $('#DeliveryOptionStartTime').val("");
				 $('#DeliveryOptionCutoffTime').val("");
			   $('#DeliveryOptionDeliveredBy').val("");
			   $('#DeliveryOptionComment').val("");
				 $('#DeliveryOptionFeeRule').val("");
			 }
		   function addDeliveryOption() {
			   clearModal();
			   $('#isNew').val("1");
			   $('#AddEditTitle').text("Add New Delivery Option");
			   $('#deleteButton').css('display', 'none');
			   $('#AddEditDeliveryOption').modal('toggle');
				
		   }
		   function editDeliveryOption(ID) {
			   clearModal();
			   $.get("./mod.php?p=deliveryroutes&a=functions&f=getDeliveryOptionData&id=" + ID, function(data){
				   var deliveryOptionData = JSON.parse(data);
					 console.log(deliveryOptionData);
				   $('#isNew').val("0");
				   $('#AddEditTitle').text("Edit Delivery Option Item");
				   $('#DeliveryOptionID').val(ID);
					 $('#DeliveryOptionName').val(deliveryOptionData.Name);
					 $('#DeliveryOptionStartTime').val(deliveryOptionData.StartTime);
					 $('#DeliveryOptionCutoffTime').val(deliveryOptionData.Cutoff);
					 $('#DeliveryOptionComment').val(deliveryOptionData.Comment);
					 $('#DeliveryOptionDeliveredBy').val(deliveryOptionData.DeliveredBy);
					 $('#DeliveryOptionFeeRule').val(deliveryOptionData.FeeRule);
					$('#saveButton').css('display', '');
					
					
					
					 
				   $('#AddEditDeliveryOption').modal('toggle');
			   });
		   }
			 
			 function deleteDeliveryOption(){
					if(confirm('Are you sure you want to delete this delivery option (Route)')){
						var ID = $('#DeliveryOptionID').val();
						$.get('mod.php?p=deliveryroutes&a=functions&f=deleteDeliveryOption&id=' + ID, function(data){
								if(data.trim() == "true"){
									location.reload();
								}
							});	
					}
			 }
		   function saveDeliveryOption() {
				var deliveryOption = "";
				deliveryOption = '{"id" : "' + $('#DeliveryOptionID').val() + '", "Name" : "' + $('#DeliveryOptionName').val() + '", "IsNew" : "' + $('#isNew').val() + '", "StartTime" : "'+ $('#DeliveryOptionStartTime').val() + '", "Cutoff" : "' + $('#DeliveryOptionCutoffTime').val() + '", "DeliveredBy" : "' + $('#DeliveryOptionDeliveredBy').val() + '", "Comment" : "' + $('#DeliveryOptionComment').val() + '", "FeeRule" : "' + $('#DeliveryOptionFeeRule').val() + '"}';
				
			   
			   deliveryOption = JSON.parse(deliveryOption);
			   $.post( "mod.php?p=deliveryroutes&a=functions&f=saveDeliveryOptionData", deliveryOption)
						 .done(function( data ) {
						   data = JSON.parse(data);
						   if (data.result === true) {
							   clearModal();
							   $('#AddEditDeliveryOption').modal('toggle');
							   location.reload();
							 }else {
							   alert("There has been an error saving the delivery option data.\r\n\r\nMySQL Error: " + data.error);
							 }
						   });
			   
			   
			   
			   
		   }
		   
			 
				var fp1 = $( "#BillboardStartDate" ),
				now = moment().subtract(1,"seconds"),
				oneweek = moment().add(1, "weeks");
				fp1.filthypillow( { 
					initialDateTime: function( ) {
						return moment();
					}
				} );
				fp1.on( "focus", function( ) {
					fp1.filthypillow( "show" );
				} );
				fp1.on( "fp:save", function( e, dateObj ) {
					fp1.val( dateObj.format( "MM/DD/YYYY hh:mm A" ) );
					fp1.filthypillow( "hide" );
				} );
				
				
				var fp2 = $( "#BillboardEndDate" );
				fp2.filthypillow( { 
					initialDateTime: function( ) {
						return oneweek;
					}
				} );
				fp2.on( "focus", function( ) {
					fp2.filthypillow( "show" );
				} );
				fp2.on( "fp:save", function( e, dateObj ) {
					fp2.val( dateObj.format( "MM/DD/YYYY hh:mm A" ) );
					fp2.filthypillow( "hide" );
				} );
				$('#AddEditBillboard').on('hide.bs.modal', function(){
						$('#videoPreview').attr('src', "");	
				});
				
		   </script>
	
	 </div>    
     
   </body>
 </html>