<?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/2.0.3/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>
				 <!-- Include the plugin's CSS and JS: -->
				<script type="text/javascript" src="../js/bootstrap-multiselect.js"></script>
				<link rel="stylesheet" href="../css/bootstrap-multiselect.css" type="text/css"/>
           <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="DeliveryZones<?= "(" . date("m.d.Y") . ")" ?>.xls" href="#" onclick="return ExcellentExport.excel(this, 'DeliveryZonesTable', 'DeliveryZonesTable');" 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="addDeliveryZone()" >Add New Delivery Zone</button>
				</div>
				<h3 class="panel-title">Delivery Zone</h3>
				<small>Click on a row to edit the Item</small>
			</div>
			<div class="panel-body">
				<table class="table table-hover" id="DeliveryZonesTable">
					<thead>
						<tr>
							<th>Zone ID</th>
							<th style="width: 45%;">Cities</th>
							<th style="width: 45%;">Delivery Options (Routes)</th>
							<!--<th>Fee Rule</th>-->
						</tr>
					</thead>
					<tbody>
						<?php
						
						 $query = "SELECT Zone, GROUP_CONCAT(DISTINCT `Name` ORDER BY Cutoff SEPARATOR '<br>') Routes, GROUP_CONCAT(DISTINCT City ORDER BY City SEPARATOR ', ') Cities FROM `DELIVERY_ZONE` LEFT JOIN `DELIVERY_ZONE_CITY` USING(Zone) LEFT JOIN DELIVERY_OPTION ON(DELIVERY_OPTION.id = DeliveryID)  GROUP BY Zone ORDER BY Zone";
						 $result = mysqli_query($con, $query);
						 while ($row = mysqli_fetch_array($result)) {
							
						?>
							 <tr onclick="editDeliveryZone('<?= $row['Zone'] ?>')">
								 <td><?= $row['Zone'] ?></td>
								 <td><?= $row['Cities'] ?></td>
								 <td><?= $row['Routes'] ?></td>
							 </tr>
						<?php		
						 }
						 ?>
					</tbody>
				</table>
			</div>
		</div>
	</div>
	
	
	 <div class="modal fade" id="AddEditDeliveryZone">
		 <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 Zone</h4>
			 </div>
			 <div class="modal-body">
			   <form class="">
				   <input type="hidden" id="isNew" name="isNew" value="" />
				   <div class="form-group">
					   <label for="DeliveryZoneID">Zone ID</label>
						 <input class="form-control" id="DeliveryZoneID" readonly name="DeliveryZoneID" />
				   </div>
					 <div class="form-group">
					   <label for="DeliveryZoneCities">Zone Cities</label>
						 <select id="DeliveryZoneCities" name="DeliveryZoneCities" multiple="multiple">
								<?php
									$query = "SELECT DISTINCT(City) as City FROM CUSTOMER WHERE City NOT LIKE '' ORDER BY City";
									$result = mysqli_query($con, $query);
									while($row = mysqli_fetch_array($result)){
										echo "<option value=\"" . $row['City'] . "\">" . $row['City'] . "</option>";
									}
								?>
						</select>
				   </div>
					 <div class="form-group">
					   <label for="DeliveryZoneOptions">Delivery Routes</label>
						 <select id="DeliveryZoneOptions" name="DeliveryZoneOptions" multiple="multiple">
								<?php
									$query = "SELECT * FROM DELIVERY_OPTION ORDER BY Cutoff ASC";
									$result = mysqli_query($con, $query);
									while($row = mysqli_fetch_array($result)){
										echo "<option value=\"" . $row['id'] . "\">" . $row['Name'] . " - " . $row['Comment'] . "</option>";
									}
								?>
						</select>
				   </div>
					 
			   </form>
			 </div>
			 
			 <div class="modal-footer">
			   <button type="button" class="btn btn-danger" id="deleteButton" onclick="deleteDeliveryZone()" >Delete</button>
			   <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
			   <button type="button" class="btn btn-primary" id="saveButton" onclick="saveDeliveryZone()">Save</button>
			 </div>
		   </div><!-- /.modal-content -->
		 </div><!-- /.modal-dialog -->
	   </div><!-- /.modal -->
		 
	   <script type="text/javascript">
				$(document).ready(function() {
						$('#DeliveryZoneOptions').multiselect({
							enableFiltering: true,
							filterBehavior: 'value',
							includeSelectAllOption: true
							});
						$('#DeliveryZoneCities').multiselect({
							enableFiltering: true,
							filterBehavior: 'value',
							includeSelectAllOption: true
							});
						
				});
				
		   $('[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");
			   $('#DeliveryZoneID').val("");
			   $('#DeliveryZoneOptions').val("");
				 $('#DeliveryZoneCities').val("");
			   $('#DeliveryZoneCities').multiselect('refresh');
				 $('#DeliveryZoneOptions').multiselect('refresh');
			 }
		   function addDeliveryZone() {
			   clearModal();
			   $('#isNew').val("1");
			   $('#AddEditTitle').text("Add New Delivery Zone");
			   $('#deleteButton').css('display', 'none');
			   $('#AddEditDeliveryZone').modal('toggle');
				
		   }
		   function editDeliveryZone(ID) {
			   clearModal();
			   $.get("./mod.php?p=deliveryroutes&a=functions&f=getDeliveryZoneData&zone=" + ID, function(data){
				   var deliveryZoneData = JSON.parse(data);
					 console.log(deliveryZoneData);
				   $('#isNew').val("0");
				   $('#AddEditTitle').text("Edit Delivery Zone Item");
				   $('#DeliveryZoneID').val(ID);
					 for(var i = 0; i <= deliveryZoneData.Cities.length; i++){
						$('#DeliveryZoneCities option[value="' + deliveryZoneData.Cities[i] + '"]').prop('selected', true);
					 }
					 $('#DeliveryZoneCities').multiselect('refresh');
					 for(var i = 0; i <= deliveryZoneData.Routes.length; i++){
						$('#DeliveryZoneOptions option[value="' + deliveryZoneData.Routes[i] + '"]').prop('selected', true);
					 }
					 $('#DeliveryZoneOptions').multiselect('refresh');
					$('#saveButton').css('display', '');
				   $('#AddEditDeliveryZone').modal('toggle');
			   });
		   }
			 
			 function deleteDeliveryZone(){
					if(confirm('Are you sure you want to delete this Delivery Zone')){
						var ID = $('#DeliveryZoneID').val();
						$.get('mod.php?p=deliveryroutes&a=functions&f=deleteDeliveryZone&zone=' + ID, function(data){
								if(data.trim() == "true"){
									location.reload();
								}
							});	
					}
			 }
		   function saveDeliveryZone() {
				var deliveryRoutes = $('#DeliveryZoneOptions').val();
				var zoneCities = $('#DeliveryZoneCities').val();
				var deliveryZone = { "ZoneID" : $('#DeliveryZoneID').val(), "Cities" : zoneCities, "Routes" : deliveryRoutes };
				
				console.log(deliveryZone);
			   
			  
			   $.post( "mod.php?p=deliveryroutes&a=functions&f=saveDeliveryZoneData", deliveryZone)
						 .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>