<?php
	include('views/_header.tpl.php');
?>

<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();
	});  	
	
	// Have to finish these 3 actions below
// 	$('.editorder').click(function () {  	
// 		alert('Edit Order clicked...');
//	});  	
	
//	$('.clear-row').click(function() {
//		var offers = $(this).parent().attr('data-offerid');
//		console.log(offers);
//	});
	
 	$('.markasready').click(function () {  	
 	
		//var order_id   = $(this).parent(".order-row").attr("data-id");
		//var order_id = $(this).parents('table').attr('id');
		
		//var order_id = $(this).parent().attr("data-id");
		   
 		var order_id = $(".orderidvalue").val();
		//alert('Order ID: ' + order_id);
 		
		var spinner = $('.spinner2');
		
		var url = window.location.href;
		//alert(url);
		 
		$(".spinner2").show();
			setTimeout(function() {
			 spinner.hide();
		}, 1000);
		
		$.ajax({
			//url: "/admin/getOrderDetails",
			url: "/admin/markasReady",
			type: "POST",
			data: {oid: order_id },
			success: function(d) {
				if (d) {
					//alert('d= ' + d);
					
					if (d = 'ok') {
						$("#order_status").html('Ready');
						$("#main_status").html('Ready');
					}
					//$("#orderdetails").html(d);
					//window.location.reload(true);
					//location.reload();
					//var result = $.parseJSON(d);
					//var referrer = result.referrer;
					//alert('d= ' + d + ' and Result: ' + result);
					//alert(referrer);
				} else {
					alert('Sorry, the Ajax function did not work...');
				}
				return false;
			},
			error: console.log("it did not work"),
		});				
		// This would reload the whole page, which automatically closes this div
		//window.location.href = "https://preorder.sqdash.co/admin/orders";
		 //return true;
		//return false;
				
 		//alert('This order has been marked as Ready.');
 		//alert('This order has been marked as Ready. ID: ' + order_id);
	});  	
	
 	$('.markascomplete').click(function () {  	
 		var order_id = $(".orderidvalue").val();
 		//alert('This order has been marked as Complete.');
 
		var spinner = $('.spinner3');
		
		var url = window.location.href;
		//alert(url);
		 
		$(".spinner3").show();
			setTimeout(function() {
			 spinner.hide();
		}, 1000);
		
		$.ajax({
			url: "/admin/setasFulfilled",
			type: "POST",
			data: {oid: order_id },
			success: function(d) {
				if (d) {
					//alert('d= ' + d);
					
					if (d = 'ok') {
						$("#fulfilled").html('Yes');
						$("#main_status").html('Complete');
					}
					//$("#orderdetails").html(d);
					//window.location.reload(true);
					//location.reload();
					//var result = $.parseJSON(d);
					//var referrer = result.referrer;
					//alert('d= ' + d + ' and Result: ' + result);
					//alert(referrer);
				} else {
					alert('Sorry, the Ajax function did not work...');
				}
				return false;
			},
			error: console.log("it did not work"),
		});	 
 		
		 //setasFulfilled
 		//alert('This order has been marked as Complete. ID: ' + order_id);
	});  			
	 
	$('#openOrder,#closeOrder').click(function () {
	    //$("#dark_overlay").toggle("darkoverlay");
		$("#dark_overlay").toggleClass('darkoverlay');
		$('#order_details_modal').toggle('slide', { direction: 'right' }, 300);
		$(this).toggleClass('closeOrder');
	}); // end click   	 
	  
//	var spinner = $('.spinner');
//	$(".submit-loader").click(function(e){
//			$(".spinner").show();
//			  setTimeout(function(){
//				spinner.hide();
//			  }, 1000);
//			  window.location.href = "https://preorder.sqdash.co/admin/orders";
//			//return true;
//			return false;
//	});
	
	// This chooses the href of a particular link
	//var href = $(this).attr("action");	  
	
}); // end doc ready

	function getOrder($orderid){	
		var orderid = $orderid;
		//alert('Got it!: ' + orderid);
	    $.ajax({        
	      //url: "/admin/getOrderDetails",
	      url: "/admin/getOrderDetails",
	      type: "POST",
	      data: {orderid: orderid, getorder: 1 },
	      success: function(d) {    
	        if (d) {    
	        	//alert('d= ' + d); 
	        	$("#orderdetails").html(d);
				$(".editorder").attr("href", "/admin/?oid&edit=" + orderid);
	       	 	//window.location.reload(true);
	        	//location.reload();	
	          	//var result = $.parseJSON(d);
	          	//var referrer = result.referrer;
	          	//alert('d= ' + d + ' and Result: ' + result); 
	          	//alert(referrer);      
	        } else {    
	         	alert('Sorry, the Ajax function did not work...');      
	        }              
	        return false;
	      },
	      error: console.log("it did not work"),
	    });
	} // Check Customer Ends
</script>
	

<style>
	body, html { overflow:hidden; }
	#mmen { display:none }
	.spacer { padding-top: 52px; }
	.form-profile { padding:10px 10px 10px; }
    table { border: none !important; }
    .admintable td {
        padding: 10px;
        border: solid #eee 0px !important;
        text-align:left;
        height:30px;
        font-weight:300;
    }
    .admintable tr  { border-bottom:1px solid #eee; }
    .admintable th { background:#fff; height:1px !important; text-align:left; padding:0px !important; border: solid #eee 0px !important; }
    .littlelabel { color:#bbb; font-size:11px; font-weight:600; }
    .receipt { padding:0px; font-size: 15px; font-weight:600; color:#000; }
    .fmb { display: inline-block; float:left; padding:10px 10px 10px; font-weight:600; background:#fff; color:#000;
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
    
    .orderdetails { padding: 15px 0; border-bottom:1px solid #eee; display:block; font-size:14px; color:#000; font-weight:600; }
    
    .orderdetailslabel { float:left; width: 30%; text-align:left;  }
    .orderdetailsinfo { float:left; width: 70%; text-align:left; font-weight:300; font-size:17px; }
    
    #orderdetails img { width:90px; height:90px; object-fit:cover; }
    .prodrow { background:none; height:90px; margin-bottom:10px; width:100%; display:block; }
    .thumb { width:90px; height:90px; overflow:hidden; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; float:left; margin-right:10px; }
    .proddetails { vertical-align: middle; font-size:17px; color:#bbb; font-weight:400; background:red; margin-bottom:30px;}
    .proddetails span { font-size:17px; color:#000; font-weight:600; }
    .proddescrip { margin-top:10px; width:185px; float:left; display:inline-block; }
    .price { margin-top:30px; float:right; font-weight:400; color:#000; }
    
    .modalbutton a { position:relative; float:left; display:inline-block; height:50px; color:#fff; background:#325fac; text-align:center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width:33%; max-width:133px; border-right:1px solid #fff; }
    .modalbutton a:hover { background:#4a88db; }
    
    input[type='checkbox'] {
		transform: scale(1.5);
	}
    
    footer#footer { position:absolute; bottom:0; left:0; right:0; width:100%; }
    
    .modalheader { margin-top:60px; }
    
    .updatebutton { padding: 0 20px 70px; }
    
/* ################################### */
/*                        MOBILE STYLES                      */
/* ################################### */

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
    .modalheader { margin-top:60px; }
    .updatebutton { padding: 0 20px 90px; }
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
    .modalheader { margin-top:60px; }
    .updatebutton { padding: 0 20px 90px; }
}

/* Landscape phones and down */
@media (max-width: 586px) {
    .modalheader { margin-top:60px; }
    .form-profile { padding:0px 10px 10px; }
    .updatebutton { padding: 0 20px 20px; }
}

/* Landscape phones and down */
@media (max-width: 480px) {
    .modalheader { margin-top:140px; }
    .form-profile { padding:0px 10px 10px; }
    .updatebutton { padding: 0 20px 20px; }
}    

@media (max-width: 320px) {
    .modalheader { margin-top:140px; }
    .form-profile { padding:0px 10px 10px; }
    .updatebutton { padding: 0 20px 20px; }
}        
</style>

<!-- BULLETS &#9702;  &#x25E6; -->


<div class="form form-profile aif" style='width:auto; background:#fff;'>
		<!--<h1 style="text-align:center;">
			<a href="/admin/dash"><i class="fa fa-sliders" aria-hidden="true" style=""></i></a>&nbsp; Orders 				
		</h1>  -->        

   <div class="fixed_menu_bar" style="width:100%; background:#fff; padding:0px; border-bottom:2px solid #ddd; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; min-height:47px; max-height:47px; overflow:hidden">
   		<div style="display:inline-block; float:left; width:36px; text-align:center; line-height:47px;">
   			<a href="/admin/orders"><i class="fa fa-refresh" style="font-size:14px;"></i></a>
   		</div>
   		<div style="display:inline-block; float:left; width:auto; font-size:17px; padding-left:10px; line-height:47px; color:#000; font-weight:600;">
   		 	REAL-TIME ORDERS <a href="/admin/orders"><img src="/static/client/scroll_hands.png" style="height:25px;" alt="<>"></a>
   		</div>
   		
   		<div style="display:inline-block; float:left; width:auto; font-size:17px; padding-left:10px; color:#000; font-weight:600; background:none; width:350px;">
			<form method="post" action="/admin/orders" style="margin:0px; width:100%; margin-top:5px;">   
						<select name="promo_code" class="txt" style="padding:5px; font-size:14px; max-width:220px; 
						height:auto; float:left; display:inline-block; margin-right:10px; margin-bottom:2px;">
							<option value="" <?php if($_POST['promo_code'] == '') echo "selected"; ?>>Select Client (PromoCode)</option>
							<?php 
								foreach($promo_codes as $promo_code){
									if($promo_code['client'] == "Z"){
										$promo_code_select = "Code Only: " .  "" . $promo_code['code'] . "";
									} else {
										$promo_code_select = $promo_code['client'] . " (" . $promo_code['code'] . ")";
									}
		                            if ($_POST['promo_code'] == $promo_code['code']) {
		                                $selected = 'selected="selected"';
		                            } else {
		                                $selected = '';
		                            }									
									echo "<option $selected value='{$promo_code['code']}'>{$promo_code_select}</option>";
								}
							?>					
							<!--<option value="paniniz" <?php if($_POST['promo_code'] == 'paniniz') echo "selected"; ?>>ClientName (code: paniniz)</option>-->
						</select>	
						
						<input type="submit" class="submit" value="search" style="float:left; width:100%; display:inline-block; width:100px; padding:6px 10px 8px">									
   			</form>
   		</div>
   		
   		<div style="background:none; display:inline-block; float:right; width:30px; font-size:14px; padding-right:10px; line-height:47px; color:#000; font-weight:600; text-align:right;">
   		 	<a href="/admin/dash"><i class="fa fa-sliders" aria-hidden="true" style=""></i></a>
   		</div>   		
   		
   		<!--<div class="fmb fh1" style="width:auto; min-width:36px; text-align:center;">
   			<a href="/admin/orders"><i class="fa fa-refresh" style="font-size:14px;"></i></a>
   		</div>
        <div class="fmb fh2" style="width:auto; min-width:155px; text-align:left;"><a href="/admin/dash">&laquo; CUSTOMER</a></div>
        <div class="fmb fh3" style="width:auto; min-width:255px; text-align:left;">ORDER DETAILS</div>
        <div class="fmb fh4" style="width:auto; text-align:left;">STATUS</div>
        -->
    </div>

	<div id="tablewindow" style="position:relative; overflow: scroll !important; min-height:485px; height:75vh;">
    
    <form method='post' action=''>
    <table class="admintable" style="position:relative; width:100%; overflow:hidden; border:none !important; border-spacing:0; margin-top:0px; border: solid #eee 0px !important;">
		<!--
   		<tr style="display:none; color:#fff; padding:0px !important; height:1px !important; margin-top:-20px !important; font-size:1px">
	        <th width="170" style="color:#fff; padding:0px !important; height:1px !important">CUSTOMER</th>
	        <th width="250" style="color:#fff; padding:0px !important; height:1px !important">PICKUP @</th>
	        <th width="300" style="color:#fff; padding:0px !important; height:1px !important">P/U/DELIV TIME</th>
	        <th width="300" style="color:#fff; padding:0px !important; height:1px !important">CREATED AT</th>
	        <th width="150" style="color:#fff; padding:0px !important; height:1px !important">ORDER ID</th>
	        <th width="300" style="color:#fff; padding:0px !important; height:1px !important">EDIT</th>
	        <th width="50"   style="color:#fff; padding:0px !important; height:1px !important">&nbsp;</th>   
  		</tr>-->
    
        <?php
		foreach ($ordrs as $ordr) {
			$theorder_id = $ordr['theorderid'];
            if($ordr['delivery'] == 1){
                $type = '<img src="/static/client/delivery_icon.png" style="height:20px;" align="absmiddle" /> Delivery';
            } else {
                $type = '<i class="fa fa-shopping-bag"></i> Pickup';
            }
            $pickup_or_deliv_time = date("D g:i A", strtotime($ordr['pickup_at']));
            $created_at = date("m/d g:i A", strtotime($ordr['date']));
            if($ordr['is_fulfilled'] ==1){
            	$status = "Complete";
            } else {
	            if($ordr['status'] == 1){
	            	$status = "<span style='color:#3ab500'>New!</span>"; // Order Received
	            } elseif($ordr['status'] == 2){
	            	$status = "In Progress"; // Being Prepared
	            } elseif($ordr['status'] == 3){
	            	if($ordr['delivery'] ==1){
	            		$status = "Ready!"; // Ready for Delivery
	            	} else {
	            		$status = "Ready!";	 // Ready for Pickup
	            	}
	 			} elseif($ordr['status'] == 4){       
	 			     $status = "Cash Order";
	 			} elseif($ordr['status'] == 5){      			     	
					$status = "Cash Pmt"; 			     	
	            } else {
	            	$status = "N/A";
	            }            	
            }
            
			// All Orders based on Order Tracking Status Alerts follow this:
			// 1 - Received (We should send an Alert on this one... which also triggers from Status 6 - PROPOSED)
			// 2 - Being Prepared - RESERVED
			// 3 - Ready for Pickup or Out for Delivery (when someone marks as READY on the POS, we use CRON Jobs to send a text alert) - PREPARED
			// So, we should give Cash Orders some statuses of its own to help with tracking, that also correlate to these.
			// 4 - Order Created /  Completed / Picked Up / Etc.

			// 5 - Payment Created
			// 6 - Payment Paid to Order (triggers the POS Alert and truly received state, so this can set Order Status to 1)
			            
            $phone = format_phone($ordr['customer_phone']);
            if($ordr['paid'] == 0){
            	$paid_status = "<span style='color:#ff0000;'>Not Paid</span>";
            } else {
            	$paid_status = "<span style='color:#16c11d;'>Paid!</span>";
            }
            //$ewallet_balance = "$" . number_format(($_SESSION['user']['virtual_balance']/100),2,'.',','); 	
            $order_total = "$" .number_format(($ordr['amount']/100),2,'.',',');
            
            echo "
			<tr data-id='{$ordr['theorderid']}' class='order-row'> 
            		<td style='width:16px; max-width:16px; background:none; text-align:center;'>
            			<input type='checkbox' name='update[]' value='{$ordr['theorderid']}'>
            		</td>
                    <td class='vieworder' data-id='{$ordr['theorderid']}' style='width:auto; min-width:155px; background:none;'>
                        <div class='receipt' style='background:none; width:auto; display:inline-block; float:left; text-align:left'>                   
                            {$ordr['customer_name']}<br />
                             <a href='tel:{$phone}' style='font-size:12px; color:#777; font-weight:300'><i class='fa fa-mobile-alt'></i> {$phone}</a>
                        </div>
                    </td>
                    <td class='vieworder' data-id='{$ordr['theorderid']}' style='width:auto; min-width:255px; background:none;'>
                        <div class='receipt' style='background:none; width:auto; display:inline-block; float:left; text-align:left'>                   
                            {$type} at {$pickup_or_deliv_time} ({$paid_status})<br />
                            <span style='font-size:12px; color:#777; font-weight:300'>Placed at {$created_at} 
                            &nbsp;<a href='#' title='Order ID: {$ordr['theorderid']}' style='color:#bbb;'><i class='fa fa-info-circle'></i></a> Order ID: {$ordr['theorderid']}</span>
                        </div>
                    </td>  
                    <td class='vieworder' data-id='{$ordr['theorderid']}' style='width:auto; background:none;'>
                        <div class='receipt' style='background:none; width:auto; display:inline-block; float:left; text-align:left'>                   
                    		{$order_total}
                        </div>                    
                    </td>
                    <td style='background:none;'>
                        <div class='receipt' id='main_status' style='width:auto; display:inline-block; float:left; text-align:left'>                   
                            {$status}
                        </div>
                    </td>                                    
                    <td style='background:none;'>
                        <div class='receipt' style='background:none; width:auto; display:inline-block; float:left; text-align:left; color:#ccc;'>                   
						<a href='/admin/?oid&edit={$ordr['theorderid']}' style='font-weight:300'>Edit</a>
                        </div>
                    </td>                       
                </tr>"; 
		}  ?>
    </table>
	<!-- This will work for the Edit Order page - https://yb.orderitfrom.com/admin/?oid&edit=202212184328571 -->
    <br>
    <div class="updatebutton" style="position:fixed; bottom:0; left:0; right:0; width:auto; height:55px;">
    	<input type='submit' value='Update Selected Orders' name='but_update' class='btn btn-black' style='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%);'>	
    </div>
    
    <br><br>
    </form>
    </div>
    
    <!--
            ORDER DETAILS                                                                   
        	PICKUP/DELIVERY DETAILS
            ORDER ITEMS
            date
            order id
            app_id
            location_id
            customer_id
            customer_name
            date
            
            pickup_at
            is_fulfilled
            note
            amount
            device_id
            paid
            status
            receipt_id
            coupon_id
            discount_stars
            delivery
            customer_phone
            customer_email
        -->
    
    <div style="margin:10px; display:none;">
        <a href='?ordr&add' class='btn btn-blue'>Add New Order</a>
    </div>
</div>

<!-- ############################################ -->
<!-- #######         ORDER MODAL          ####### -->
<!-- ############################################ -->

<div id="order_details_modal" style="display:none; z-index: 51; position: absolute; bottom: 0px; right: 0px; max-width: 400px; width:100%; height: 100vh;
background:#fff; box-shadow: rgba(0, 0, 0, 0.25) 0px -3px 9px;">

	<!-- ################################### -->
	<!-- ####### TOP MODAL BAR AREA ####### -->
	<!-- ################################### -->
	<div class="modalheader" style="height:50px;">
		<div style="border-bottom:1px solid #f3f3f3; height:50px; width:100%; line-height:50px; font-size:19px; font-weight:700;
		letter-spacing:2px; color:#222; float:left; padding-left:15px; padding-right:40px;">
			ORDER DETAILS
		</div>

		<div style="position:absolute; right: 0; float:right; margin-right:5px; margin-top:7px; width:30px; height:30px; text-align:center; padding:5px;
		background:none;" id="closeOrder">
			<a href="#" class="closeOrder" style="color:#fff;"><img src="/static/images/icons/close_x_black.png" style="height:25px;"></a>
		</div>
	</div>

	<!-- ############################################ -->
	<!-- #######          ORDER INFO          ####### -->
	<!-- ############################################ -->
	<div style="padding:5px 5px 5px 20px; background:#fff; height:95vh; overflow:hidden;">

		<div id="orderdetails" style="background:#fff; height:85%; padding-right:15px; overflow-x:scroll">

		</div>

	</div><!-- ORDER INFO ENDS -->

	<!-- ?oid&edit= -->
	<div style="position:absolute; bottom:0; left:0; right:0; max-width:400px; width:100%; height:50px; text-align:center; line-height:50px;
	background:#325fac; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;">
		<div class="modalbutton submit-loader" style="-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;">
			<a href="###" class="editorder"><span class="spinner" style="display:none;"><i
				class='fa fa-circle-o-notch fa-spin'></i></span> Edit</a>
		</div>
		<div class="modalbutton submit-loader" style="-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;">
			<a href="#" class="markasready"><span class="spinner2" style="display:none;"><i
				class='fa fa-circle-o-notch fa-spin'></i></span> Mark as Ready</a>
		</div>
		<div class="modalbutton submit-loader" style="-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;">
			<a href="#" style="border-right:0px;" class="markascomplete"><span class="spinner3" style="display:none;"><i
				class='fa fa-circle-o-notch fa-spin'></i></span> Complete</a>
		</div>
		<div class="clear"></div>
	</div>
</div>


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