<?php
	include('views/_header_shop.tpl.php');
	
	if (isset($_GET['msg'])) {
		$msg = htmlentities(strip_tags($_GET['msg']));
	}	
?>

<style>
	body {
		background: #f9f9f9;
	}
	.spacer {
		padding-top: 20px;
	}
	#mmen {
		display: none;
	}
	#header .wrap-top-menu {
    	background: rgba(0,0,0,.7);
    	padding: 9px 0 9px 0;
	}
	.form-profile {
		padding: 20px;
	}
	table {
		background: #fff;
	}
	p, td {
		font-weight: 200;
	}
	table td {
		padding: 5px;
	}
	.admintable th.eye {
		max-width: 40px;
		width:40px;
	}

	.admintable td,
	.admintable th {
		color:#000;
		padding: 10px;
		border: solid #eee 1px;
		text-align: center;
		font-size: 17px;
	}
	.admintable td {
		background: none;
		font-size: 19px;
		font-weight: 700;
		line-height: 27px;
	}
	.admintable td span.item_id {
		font-size:15px;
	}		

	.btn,
	.btn a,
	.btn a:active,
	.btn a:visited {
		background: #fff;
		color: #000;
		border-radius: 50px;
		-moz-border-radius: 50px;
		-webkit-border-radius: 50px;
		font-size: 14px !important;
		font-weight: 300 !important;
		height: 30px !important;
		line-height: 30px !important;
		min-width: 60px;
		width: auto;
		padding: 5px 20px !important;
	}

	a.btn:hover {
		background: #006ab7;
	}

	input.btn-small {
		background: #fff;
		color: #fff;
		border-radius: 50px;
		-moz-border-radius: 50px;
		-webkit-border-radius: 50px;
		font-size: 12px !important;
		font-weight: 300 !important;
		height: 30px !important;
		min-width: 60px;
		width: auto;
		padding: 0 15px;
	}
	input.btn-small:hover {
		background: #bbb;
	}

	input[type="submit"], .submit {
		background:#fff;
		color:#000;
		border: 0px;
		font-size: 14px !important;
		font-weight: 600 !important;
		height: 40px !important;
		line-height: 30px !important;
		padding: 5px 15px 15px !important;
		min-width: 60px;
		width: auto;
		border-radius: 50px;
		-moz-border-radius: 50px;
		-webkit-border-radius: 50px;		
	}
	input[type="submit"]:hover {
		background: #006ab7;
		color:#fff;
	}

	/* label, select, button, input[type="button"], input[type="reset"], input[type="submit"], input[type="radio"], input[type="checkbox"]	*/

	.btn-red {
		font-size: 14px;
		border-radius: 50px;
		-moz-border-radius: 50px;
		-webkit-border-radius: 50px;
	}

	.btn-blue {
		/* old blue background: #005493; */
		background:#fff;
		color:#000;
		border-radius: 50px;
		-moz-border-radius: 50px;
		-webkit-border-radius: 50px;
	}
	
	.btn-blue:hover { 
		color:#fff;
	}	

	.delete-admin {
		background: #cd1000;
	}

	.adminred {
		background: #cd1000;
		color: #fff;
	}

	.nonadmin {
		background: #ddd;
		color: #aaa;
	}

	.pagination {
		list-style-type: none;
		padding: 10px 0;
		display: inline-flex;
		justify-content: space-between;
		box-sizing: border-box;
	}

	.pagination li {
		box-sizing: border-box;
		padding-right: 10px;
	}

	.pagination li a {
		box-sizing: border-box;
		background-color: #e2e6e6;
		padding: 8px;
		text-decoration: none;
		font-size: 12px;
		font-weight: bold;
		color: #616872;
		border-radius: 4px;
	}

	.pagination li a:hover {
		background-color: #d4dada;
	}

	.pagination .next a,
	.pagination .prev a {
		text-transform: uppercase;
		font-size: 12px;
	}

	.pagination .currentpage a {
		background-color: #518acb;
		color: #fff;
	}

	.pagination .currentpage a:hover {
		background-color: #518acb;
	}

	.searching {
		display: flex;
		flex-direction: row;
		margin: 10px 0px;
		justify-content: start;
		gap: 10px;
		align-items: center;
	}

	.search {
		padding: 10px;
	}

	.submit {
		background-color: #005493;
	}
	.ut-header{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.blockit, .blockithalf, .blockitlabel {
		float: left;
	display: inline-block;
	width: 200px;
	padding-right: 10px;
	}
	.viewall {
		margin-left: 15px;
	}
	
	.admintable td,
	.admintable th {
		padding: 3px;
		border: solid #eee 1px;
	}
	
	.thumb {
		object-fit: cover;
		border-radius: 4px;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;

	}
	input[type='checkbox'] {
		transform: scale(1.5);
	}
	.btn {
		border-radius: 50px;
		-moz-border-radius: 50px;
		-webkit-border-radius: 50px;
		font-size: 15px;
		padding: 10px 20px;
	}
	
	.updatebutton {
		padding: 15px 10px 70px;
		background:rgba(0,0,0,.8);
	}
	
	#footer {
		display: none; 
	}
	.scrollup {
		border: 1px solid #444; 
	}
	
	a.logout {
		color: #ff0000;
		text-shadow:0px 0px 0px #fff;
	}
	
	#myInput {
		background-image: url('/static/client/searchicon.png'); /* Add a search icon to input */
		background-position: 10px 12px; /* Position the search icon */
		background-repeat: no-repeat; /* Do not repeat the icon image */
		background-color:#fff;
		width: 100%; /* Full-width */
		font-size: 17px; /* Increase font-size */
		padding: 12px 20px 12px 40px; /* Add some padding */
		border: 0px solid #ddd; /* Add a grey border */
		margin:0px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	#myTable {
		border-collapse: collapse; /* Collapse borders */
		width: 100%; /* Full-width */
		border: 0px solid #ddd; /* Add a grey border */
		font-size: 18px; /* Increase font-size */
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	#myTable th, #myTable td {
		text-align: left; /* Left-align text */
		/*padding: 12px;*/ /* Add padding */
	}

	#myTable tr {
		/* Add a bottom border to all table rows */
		border-bottom: 1px solid #ddd;
	}

	#myTable tr.header, #myTable tr:hover {
		/* Add a grey background color to the table header and on hover */
		background-color: #f1f1f1;
	}
	
	.fixedElement {
		border-top:1px solid #eee;
		background:#fff;
		width: 100%;
		padding:0px 10px 0;
		z-index: 100000000000;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;		
	}
	
	#errordiv a {
		background: #fff;
		height:18px;
		padding: 2px 15px 3px;
		-webkit-border-radius: 50px;
		-moz-border-radius: 50px;
		border-radius: 50px;
		font-weight: 500;
	}	
	

/* ################################### */
/*            MOBILE STYLES            */
/* ################################### */


	/* Portrait tablet to landscape and desktop */
	@media (min-width: 1025px) and (max-width: 3700px) {
		#header .wrap-top-menu {
			padding: 9px 0 8px 0;
		}	
		.form-profile {
			padding: 20px 0px;
			width: 85%;
		}
		.updatebutton {
			padding: 10px 10px 70px;
		}
		.admintable td {
			background: none;
			font-size: 19px;
			font-weight: 700;
			line-height: 27px;
		}	
		.admintable td span.item_id {
			font-size:15px;
		}		
	}

	/* Portrait tablet to landscape and desktop */
	@media (min-width: 769px) and (max-width: 979px) {
		.form-profile {
			padding: 20px 0px;
			width: 85%;
		}
		.updatebutton {
			padding: 10px 10px 70px;
		}
		.admintable td {
			background: none;
			font-size: 19px;
			font-weight: 700;
			line-height: 27px;
		}	
		.admintable td span.item_id {
			font-size:15px;
		}		
	}
	
	/* Portrait tablet to landscape and desktop - iPads in Portait */
	@media (min-width: 767px) and (max-width: 768px) {
		@media (min-width: 768px) and (max-width: 979px) {
			.form-profile {
				padding: 20px 0px;
				width: 85%;
			}
			.updatebutton {
				padding: 10px 10px 70px;
			}
			.admintable td {
				background: none;
				font-size: 19px;
				font-weight: 700;
				line-height: 27px;
			}
			.admintable td span.item_id {
				font-size: 15px;
			}
		}		

	}

	/* Landscape phones and down */
	@media (max-width: 586px) {
		.spacer {
			padding-top: 55px;
		}
		.form-profile {
			padding-top: 0px;
		}
		.tablescroll {
			height: 500px;
			overflow-x: scroll;
		}
		.blockit {
			width: 100%;
			display: block;
			background: none;
			text-align: center;
			margin-bottom: 10px;
		}
		.blockithalf {
			float: left;
			width: 50%;
			display: inline-block;
			background: none;
			text-align: center;
			margin-bottom: 10px;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}
		.right {
			padding-right: 0px;
		}
		.viewall {
			margin-left: 0px;
		}
		.admintable, .admintable table {
			overflow: hidden;
		}
		.admintable td {
			word-wrap:break-word;
			overlow: hidden; 
		}
		.admintable th {
			font-size: 19px; 
		}		
		.admintable td.item_name {
			background:none;
			font-size: 19px; 
			font-weight:700;
			line-height:27px;
		}
		span.item_id {
			font-size:12px;
			display:none;
		}
		.updatebutton {
			padding: 10px 10px 70px;
		}
	}

	/* Landscape phones and down */
	@media (max-width: 480px) {
		.spacer {
			padding-top: 15px;
		}
		.form-profile {
			padding-top: 0px;
		}
		.tablescroll {
			height: 500px;
			overflow-x: scroll;
		}
		.blockit {
			width: 100%;
			display: block;
			background: none;
			text-align: center;
			margin-bottom: 10px;
		}
		.blockithalf {
			float: left;
			width: 50%;
			display: inline-block;
			background: none;
			text-align: center;
			margin-bottom: 10px;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}
		.right {
			padding-right: 0px;
		}
		.viewall {
			margin-left: 0px;
		}
		.updatebutton {
			padding: 10px 10px 70px;
		}		
	}

	@media (max-width: 320px) {
		.tablescroll {
			height: 300px;
			overflow-x: scroll;
		}
		.updatebutton {
			padding: 10px 10px 70px;
		}
	}
</style>


<!-- /* ################################### */ -->
<!-- /* ####### PAGE CONTENT STARTS ####### */ -->
<!-- /* ################################### */ -->


<div id="invform" class="form form-profile aif" style='width:auto; position:relative;
	padding:0px 0 0; font-family:Montserrat-Light, Open-sans, sans-serif; -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;	'>
	
	<h1 style="text-align:center; margin-bottom: 12px; font-size:22px; font-weight:600; color:#000; text-shadow:0px 1px 0px #fff;">
		<?php
		if ($_SESSION['user']['is_admin']) {
		?>
		<a href="/admin/dash" style="color:#ccc;">
			<i class="fa fa-sliders" aria-hidden="true" style=""></i></a>&nbsp;<?php } ?>
			Real-time Stock Updates <a href="/admin/items" class="refresh" style="color:#ccc;">
				<i class="fa fa-refresh" style="font-size:17px;"></i></a>
	</h1>
	  
	  <!-- 
	  HANDS
	  <!--<a href="/admin/items"><img src="/static/client/scroll_hands.png" style="height:30px;"
	  alt="<>" /></a>-->
	  <!--
	  <center>
		  <a href="#" title="Quick Overview">Quick Overview &raquo;</a> &nbsp;|&nbsp;
	  </center>
	  -->
	  <?php
	  if (isset($msg)) {
		  echo "<div id='errordiv' style='background:#cd1000; color:#fff; text-align:center; 
		  font-size:15px; padding:7px 5px 10px; height:20px; line-height:20px;'><span style='float:left; display:inline-block;'><span style='font-weight:800;'>ALERT:</span> $msg</span> &nbsp;<a href='/admin/items' style='float:right'>Ok!</a></div>";
	  }
	  ?>
	  		
	
	<div class="fixedElement" style="-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box; box-sizing: border-box; text-align:center;">
		<input type="text" id="myInput" onkeyup="myFunction()"
		placeholder="Quick search for products or items...">			
	</div>  

	<form method='post' action=''>
	<table id="myTable" class="admintable" style="margin:0px 5px 0; width:99%; 
		font-size:17px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; 
		box-sizing: border-box;">
		<tr>

			<th width="40" class="eye" style="text-align:center; max-width:40px"><img 
				src="/static/client/closed_eye_icon.png" alt="Hide" 
				style="width:30px; margin:0 auto;" /></th>
			<th width="50" style="text-align:left !important; padding-left:7px;">&nbsp;&nbsp;IMG</th>
			<th width="200" style="text-align:left !important; padding-left:7px;">&nbsp;&nbsp;NAME</th>
			<!--<th width="70">EDIT</th>-->
			<!--<th width="300">@ MULTIPLE LOCATIONS</th>-->
			<!--<th width="60">ID</th>-->

		</tr>
		<?php
		foreach ($squarexproducts as $xproduct) {
			
			$imgfix = "onerror=\"this.src='/static/system/placeholder.jpg'\"";
			if ($xproduct['is_excluded']==0) {
				$inv = "-";
			} else {
				$inv = "<strong style='color:#ff0000; font-size:11px'>OUT</strong>";
			}
			
			echo "<tr data-id='{$xproduct['square_id']}'>
			<td class='eye' style='min-width:26px; width:26px; max-width:26px; text-align:center;'>
				<input type='checkbox' name='update[]' value='{$xproduct['square_id']}'><br/>
				{$inv}
			</td>
			<td style='padding:5px; max-width:50px; min-width:50px; text-align:center'>
			<div class='thumb' style='margin:0 auto; min-height:50px; min-width:50px; overflow:hidden;'>
				<a href='/admin/?square_xp&edit={$xproduct['id']}' target='_blank'><img src='{$xproduct['images']}' {$imgfix} style='min-height:50px' /></a></div>
			</td>
			<td id='item_name' class='item_name' style='padding:10px; text-align:left;'>{$xproduct['name']} <span 
			style='color:#bbb;'>(ID: {$xproduct['id']})</span><br />
                <span class='item_id' style='color:#bbb;'>{$xproduct['square_id']}</span>
            </td>
			<td style='padding:10px; text-align:center; display:none;'>
                    <a href='?square_xp&edit={$xproduct['id']}' target='_blank'>edit</a>
			<td style='padding:10px; display:none;'>{$xproduct['at_locations']}</td>
			<td style='padding:10px; text-align:center; display:none;'>{$xproduct['id']}</td>

            </tr>";
		}
		?>
	</table>
	<div class="clear"></div>
	
	<br />
	<div style="text-align:center; letter-spacing: 2px; font-size:15px; color:000;">
		- - - - - END OF ALL ITEMS - - - - -
	</div>
	<div class="clear"></div>	
	<br />
	<center><a href="javascript:top.frames.location.reload();" class="refresh">
	<i class="fa fa-refresh"></i></a></center>
	<br />
	
	<div style="text-align:center; font-size:17px">
		For Customer Support<br />

		<?php echo $_SESSION['user']['usertype'] ?> & <?php echo $_SESSION['user_id'] ?>

		<br /><br />
		<a href="/admin/items?msg=Getting low on Pastries" style="color:#ff0000;">
			<i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Low Stock Alert Example</a>		
	</div>

	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

	
	<div class="updatebutton" style="position:fixed; bottom:0; left:0; right:0; width:auto; 
		height:45px; font-size:15px; text-align:center; color:#ddd; 
		text-shadow:1px -1px 1px rgba(0,0,0,.5);">

		<div style="width:100%; float:left; text-align:left; padding-top:10px;">
		
		<input id='instock_update' type='submit' value='In Stock' name='instock_update' 
		style='margin-top:0px; display:inline-block; float:left; margin-right:10px;
		box-shadow: 0 3px 10px rgb(0 0 0 / 80%);
		-moz-box-shadow: 0 3px 10px rgb(0 0 0 / 80%);
		-webkit-box-shadow: 0 3px 10px rgb(0 0 0 / 80%)'>	

		<input id='outofstock_update' type='submit' value='Out of Stock' name='outofstock_update' 
		style='margin-top:0px; display:inline-block; float:left;
		box-shadow: 0 3px 10px rgb(0 0 0 / 80%);
		-moz-box-shadow: 0 3px 10px rgb(0 0 0 / 80%);
		-webkit-box-shadow: 0 3px 10px rgb(0 0 0 / 80%)'>		
			
			
			<a href="/auth/logout_pincode" title="Logout" class="logout btn btn-blue" 
				style="padding:10px 0px; width:15px; min-width:15px; margin-left:10px; box-shadow: 0 3px 10px rgb(0 0 0 / 80%);
				-moz-box-shadow: 0 3px 10px rgb(0 0 0 / 80%);
				-webkit-box-shadow: 0 3px 10px rgb(0 0 0 / 80%)"> 
				<i class="fa fa-power-off"></i></a>
			
			<div class="invtxt" style="position:fixed; left:0; bottom:0; width:auto; 
				float:left; text-align:right; padding:0px 5px 10px 5px;">
				<br />
				<span style="float:left;">&nbsp; Check item(s) above.</span>
				&nbsp; <a href="/admin/items?msg=Getting low on Pastries" style="color:#ff0c00;">
					<i class="fa fa-exclamation-triangle" aria-hidden="true"></i></a>
							
			</div>
			<div class="invtxt" style="position:fixed; right:0; bottom:0; 
			padding:0px 10px 10px 5px;
				display:nonexx; width:auto; float:right; text-align:right;">
				<div style="color:#ccc; text-shadow:1px -1px 1px rgba(0,0,0,.5);
				font-size:10px; padding-bottom:1px;">powered by</div>
				<div class="clear"></div>
				<a href="https://getpreorder.com"><img src="/static/system/preorder_logo_mini.png" alt="Pre-Order" 
				style="height:20px; margin-top:0px" /></a>
			</div>			
								
		</div>
		
	</div>	
	
</div>
</form>

<!-- /* ################################### */ -->
<!-- /* #######  PAGE CONTENT ENDS  ####### */ -->
<!-- /* ################################### */ -->

<script type="text/javascript">
	$(document).ready(function() {			
		
		$('.vieworder').click(function () {
			//alert('BAM!');
			//var order_id = $("#entercode").val();
			var orderid = $(this).data('id');
			//alert(orderid);
			//var card_id = $(this).data('cardid');
			getOrder(orderid);
			$("#dark_overlay").toggleClass('darkoverlay');
			$('#order_details_modal').toggle('slide', { direction: 'right' }, 300);
			//         $("#chevron_cs").toggleClass('fa-chevron-down fa-chevron-down open');
			//         $("#curbside_inputs").toggle();
		});

		$('#instock_update').click(function () {
			alert('The checked item(s) have been set to IN STOCK in your Square Account and also on your Square Online Website. NOTE: It takes a couple of minutes to go live.');
			location.reload();
		});

		$('#outofstock_update').click(function () {
			//var order_id = $(".orderidvalue").val();
			alert('The checked item(s) have been set to OUT OF STOCK in your Square Account and also on your Square Online Website. NOTE: It takes a couple of minutes to go live.');
			location.reload();
			//alert('This order has been marked as Ready. ID: ' + order_id);
		});
	}); // end doc ready	
	
	// FILTER SEARCH
	function myFunction()
	{
		// Declare variables
		var input, filter, table, tr, td, i, txtValue;
		input = document.getElementById("myInput");
		filter = input.value.toUpperCase();
		table = document.getElementById("myTable");
		tr = table.getElementsByTagName("tr");

		// Loop through all table rows, and hide those who don't match the search query
		for (i = 0; i < tr.length; i++) {
			td = tr[i].getElementsByTagName("td")[2];
			//td = tr[i].getElementsByID("item_name");
			if (td) {
				//alert('TD! ' + txtValue);
				txtValue = td.textContent || td.innerText;
				if (txtValue.toUpperCase().indexOf(filter) > -1) {
					tr[i].style.display = "";
				} else {
					tr[i].style.display = "none";
				}
			}
		}
	}		
	
	$(window).scroll(function(e) {
		var $el = $('.fixedElement');
		var isPositionFixed = ($el.css('position') == 'fixed');
		
		var standalone = window.navigator.standalone,
		userAgent = window.navigator.userAgent.toLowerCase(),
		safari = /safari/.test( userAgent ),
		ios = /iphone|ipod|ipad/.test( userAgent ); 		
		
		// DESKTOPS - THIS WAS top: 25px
		if ($(this).scrollTop() > 20 && !isPositionFixed) {
			$el.css({'position': 'fixed', 'top': '59px', 'background': 'rgba(0,0,0,.7)', 'padding': '10px', 'border-top': '0px'});
		}	
		/* TOP: 59px for safari */
		if ($(window).width() < 586 ) {
			if ($(this).scrollTop() > 20 && !isPositionFixed) {
				$el.css({'position': 'fixed', 'top': '92px', 'background': 'rgba(0,0,0,.7)', 'padding': '10px', 'border-top': '0px'});
			}				
		}	
		
		// iPad Instant App
		if ($(window).width() == 1024 ) {
			if (standalone == true && safari) {
				if ($(this).scrollTop() > 20 && !isPositionFixed) {
					$el.css({'position': 'fixed', 'top': '77px', 'background': 'rgba(0,0,0,.7)', 'padding': '10px', 'border-top': '0px'});
				}
			} 			
		}
		
		if ($(window).width() == 768 ) {
			// iPad Upright Safari
			if (standalone == false && safari) {
				if ($(this).scrollTop() > 20 && !isPositionFixed) {
					$el.css({'position': 'fixed', 'top': '59px', 'background': 'rgba(0,0,0,.7)', 'padding': '10px', 'border-top': '0px'});
				}
			} else {
			// iPad Upright Instant App
				if ($(this).scrollTop() > 20 && !isPositionFixed) {
					$el.css({'position': 'fixed', 'top': '93px', 'background': 'rgba(0,0,0,.7)', 'padding': '10px', 'border-top': '0px'});
				}				
			}
		}
							
		// MOBILE SAFARI BROWSER
		if (standalone == false && ios && safari) {
			if ($(window).width() < 586 ) {
				if ($(this).scrollTop() > 20 && !isPositionFixed) {
					$el.css({'position': 'fixed', 'top': '59px', 'background': 'rgba(0,0,0,.7)', 'padding': '10px', 'border-top': '0px'});
				}
			}					
			//alert('Safari');
		}
		
		if ($(window).width() > 1367 ) {
			if ($(this).scrollTop() > 20 && !isPositionFixed) {
				$el.css({'position': 'fixed', 'top': '0px', 'background': 'rgba(0,0,0,.7)', 'padding': '10px', 'border-top': '0px'});
			}
		}			
		
		if ($(this).scrollTop() < 20 && isPositionFixed) {
			$el.css({'position': 'relative', 'top': '0px', 'background': '#fff', 'padding': '0 10px', 'border-top': '1px solid #eee'});
		}
	});
</script>		
		  

<?php
	include 'views/_footer.tpl.php';
?>