<?php
session_start();
require_once("database.php");
if(isset($_SESSION['user_email'])){
     $user_email=$_SESSION['user_email'];
     $query= "SELECT address,floor,business_name FROM customers WHERE email='$user_email'";
     $user_data=db::getRecord($query);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="keywords" content="HTML5 Template" />
<meta name="description" content="Shezan Restaurant, Food & Cafe" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>Shezan</title>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Favicon -->
<link rel="shortcut icon" href="https://cdn1.centralapp.com/api/v1/media/logo-medium/place-4486-ac829f63-6c73-4c87-aa47-9405fc05eafb.jpeg" />

<!-- bootstrap -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />

<!-- google font -->
<link href="https://fonts.googleapis.com/css2?family=Baloo+Paaji+2&family=Gotu&family=Source+Code+Pro&display=swap" rel="stylesheet">
<!-- flaticon -->
<link rel="stylesheet" type="text/css" href="css/flaticon.css" />
<!-- font awesome -->
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
<!-- mega menu -->
<link rel="stylesheet" type="text/css" href="css/mega-menu/mega_menu.css" />
<!-- carousel -->
<link rel="stylesheet" type="text/css" href="css/owl.carousel.css" />
<!-- datepicker -->
<link rel="stylesheet" type="text/css" href="css/bootstrap-datetimepicker.min.css" />
<!-- main style -->
<link rel="stylesheet" type="text/css" href="css/style.css" />

<!-- responsive -->
<link rel="stylesheet" type="text/css" href="css/responsive.css">
<link rel="stylesheet" type="text/css" href="css/style-customizer.css" />
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key=AIzaSyCczanG9mcvAJVWNMyg1ajBc3IkecGkeuk"></script>
<!-- End Google Tag Manager -->
<!--fixed header--> 
    <style>
.dot {
  height: 20px;
  width: 20px;
  background-color: black;
  border-radius: 50%;
  display: inline-block;
}
.dot1 {
  height: 20px;
  width: 20px;
  background-color: #80808073;
  border-radius: 50%;
  display: inline-block;
}
#myPopoverContent {display: none; float: right;}
.popover{
    width:1000px;   
}
table {
  width: 100%;
}
td, th {
    padding: 02px;
}

</style>
    
</head>
<body>

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-557RCPW"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

<!--=================================
loading -->

<div id="loading">
  <div id="loading-center">
    <img src="images/" alt="">
  </div>
</div>

<!--=================================
 loading -->

<!--=================================
header -->

<header id="header" class="header-4">
  <!-- menu start -->
      <nav id="menu-1" class="mega-menu ">
        <!-- menu list items container -->
        <section class="menu-list-items">
          <div class="container">
            <div class="row">
              <div class="col-lg-12 col-md-12">
                <!-- menu logo -->
                <ul class="menu-logo">
                  <li class="head-info">
                    <a href="index.php"><img style="paddeng-left:10px"  src="images/shezan.png"  alt="logo"> </a>
                  </li>
                </ul>
                <!-- menu links -->
                  <ul>
                  </ul>
                <ul class="menu-links">
                  <!-- active class -->
                  <li>
                    <a class="active" href="index.php"> Home</a>
                    </li>
                      <li>
                    <a href="reservation.php">Reservation</a>
                  </li>
                 <li>
                    <a href="contact_us.php">Contact us</a>
                  </li>
                  <li>
                 <a href="product_order.php"><span>Menu</span></a>
                    </li>
                      <li>
                 <a href="product_order.php"><span>Order now</span></a>
                    </li>
                       
                     <?php
                    if(isset($_SESSION['user_email']))
                       {  
                       $email=$_SESSION['user_email'];
                       $query= "SELECT name FROM customers WHERE email='$email'";
                       $name=db::getCell($query);
                       ?>
                       
                    <li>
                  <a href="javascript:void(0)"> <?php echo $name;?> <i class="fa fa-angle-down fa-indicator"></i> </a>
                  <!-- drop down multilevel  -->
                  <ul class="drop-down-multilevel">
                    <li><a href="user_panel/index.php" target="blank">My Orders</a></li>
                    <li><a href="user_panel/logout.php"> Logout </a></li>
                  </ul>
                </li>
                     <?php
                                    }
                                    
                                         ?>
              </ul>
        </div>
       </div>
      </div>
    </section>
   </nav>
  <!-- menu end -->
</header>   
<!--=================================
header -->

<div class="container">
<div class="row">
    <div class="col-lg-12 col-sm-12 col-md-12">
    <div class="row">
       <div class="col-lg-4 col-sm-4 col-md-4"> 
        <button id="deliverybtn" style="width:100%" class="button black large mb-20">Delivery</button>
        </div>
        <div class="col-lg-4 col-sm-4 col-md-4"> 
         <button  id="pickupbtn" style="width:100%" class="button gray large mb-20">PickUp</button>
        </div>
        <div class="col-lg-4 col-sm-4 col-md-4"> </div>
    </div>
        <div  id="deliveryid">
        <h3>Edit Delivery Details</h3>
        <hr>
        
        <div class="row">
            <div class="col-lg-7 col-sm-7 col-md-7">
                <div class="col-lg-12 col-sm-12 col-md-12">
              <div class="row contact-form" style="margin-bottom:10px">
        <div class="col-lg-8 col-sm-8 col-md-8 col-xs-12"> 
        <div class="btn-group">
             <button id="meetatdoor"  style="font-size:10px;" class="button orange small mb-20">Meet at door</button>
              <button id="meetoutside" style="font-size:10px;" class="button orange small mb-20">Meet outside</button>
        </div>
       
            </div>
           
            </div>
                   <div class="row contact-form">
        <div class="col-lg-12 col-sm-12 col-md-12">
            <div class="form-field">
                <i class="fa fa-map-marker"></i>
            <input id="search_input" class="web placeholder" type="text" placeholder="Enter Address" name="name" 
            value="" required>
          </div>
            </div>
        </div>
        <div id="leaveatdoorinput1" class="row contact-form">
        <div class="col-lg-6 col-sm-6 col-md-6">
            <div class="form-field">
                <i class="fa fa-building"></i>
            <input class="web placeholder" type="text" placeholder="Flat, Suite or Floor" id="floor"  required>
          </div>
          </div>
          <div class="col-lg-6 col-sm-6 col-md-6">
            <div class="form-field">
          <i class="fa fa-building"></i>
            <input class="web placeholder" type="text" placeholder="Business Name" id="busines_name">
          </div>
          </div>
        </div>
        <div class="row contact-form">
              <div class="col-lg-12">
              <div class="form-field">
               <i class="fa fa-pencil"></i>
                <textarea class="input-message placeholder" placeholder="Any Other Instructions" rows="3" id="message" required></textarea>  
              </div>
              </div>
            </div>
            <h5> Payment Options</h5>
        <div class="row">
        <div class="col-lg-1 col-xs-1"><span class="dot"></span></div>
            <div class="col-lg-4 col-xs-6"><h6>Cash</h6></div></div>
             <div class="row">
        <div class="col-lg-1 col-xs-1"><span class="dot1"></span></div>
            <div class="col-lg-7 col-xs-6"><h6> Card (Not currently available)</h6></div></div>
       
            </div>
            </div>
            <div class="col-lg-1 col-sm-1 col-md-1"></div>
            <div class="col-lg-4 col-sm-4 col-md-4">
                <div style="display: flex;"><svg  width="24px" height="24px" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="presentation" aria-hidden="true" focusable="false"><path d="M17.8333 7.83325V2.83325H6.16665V7.83325H2.83331V16.1666C2.83331 18.9166 5.08331 21.1666 7.83331 21.1666H16.1666C18.9166 21.1666 21.1666 18.9166 21.1666 16.1666V7.83325H17.8333ZM8.66665 5.33325H15.3333V7.83325H8.66665V5.33325Z" fill="#000000"></path></svg><h6 style="line-height: 27px;">&nbsp;&nbsp;From:Shezan</h6></div>
                <div style="display: flex;">
            <svg  width="24px" height="24px" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="presentation" aria-hidden="true" focusable="false"><path d="M12 2.83398C6.91671 2.83398 2.83337 6.91732 2.83337 12.0007C2.83337 17.084 6.91671 21.1673 12 21.1673C17.0834 21.1673 21.1667 17.084 21.1667 12.0007C21.1667 6.91732 17.0834 2.83398 12 2.83398ZM17 13.6673H10.3334V5.33398H12.8334V11.1673H17V13.6673Z" fill="#000000"></path></svg>
            <h6 style="line-height: 27px;">&nbsp;&nbsp;Ready in 35-45 min</h6></div>
        <hr>
          <div class="row">
           <div class="col-lg-9 col-sm-9 col-md-9 col-xs-6"><p style="text-align:left">Subtotal
           <a style="cursor:pointer" data-toggle="popover" data-placement="auto" id="test">.Items</a>
<div id="myPopoverContent">
    <button  type="button" class="close" data-dismiss="popover"> ×  </button>
                    <h5>Your Order</h5>
                    <p>From:<span style="font-size:15px;font-weight: bold;">Shezan</span></p>
                    <div id="staticdata"> </div>
        <a href="product_order.php" >See menu</a>            
</div>
       

           </p></div> 
             <div class="col-lg-3 col-sm-3 col-md-3 col-xs-6"><p style="text-align:right" class="tp"></p></div>
          </div>
          <div class="row">
           <div class="col-lg-9 col-sm-9 col-md-9 col-xs-6"><p style="text-align:left">Discount</p></div> 
             <div class="col-lg-3 col-sm-3 col-md-3 col-xs-6"><p style="text-align:right" class="d"></p></div>
          </div>
          <div class="row">
           <div class="col-lg-9 col-sm-9 col-md-9 col-xs-6"><p style="text-align:left">Delivery fee</p></div> 
             <div class="col-lg-3 col-sm-3 col-md-3 col-xs-6"><p style="text-align:right">€2.50</p></div>
          </div>
          <div class="row">
           <div class="col-lg-9 col-sm-9 col-md-9 col-xs-6"><h6 style="text-align:left">Total</h6></div> 
             <div class="col-lg-3 col-sm-3 col-md-3 col-xs-6"><h6 style="text-align:right" class="gt"></h6></div>
          </div>
          <hr>
       <div class="dh"><div class="f4"><span class="bw bx c9 ao f5">Terms:</span><span class="as bx c9 ao f5"> By clicking the button to place your order, you agree to </span><a href="#" class="an ao ap as bx c9 f5">Shezan.be Delivery Services Agreement</a></div></div>
       <div class="form-submit mb-30 text-center">
                 <button id="place_order" name="place_order" type="submit" class="button uppercase ">Place Order</button>
              </div>
            </div>
        </div>
       </div>
       <div  id="pickupid">
        <h3>Pick Up Details</h3>
        <hr>
         <div class="row">
            <div class="col-lg-7 col-sm-7 col-md-7">
                <hr>
        <h4>Address</h4>
        <p>Shezan, Chaussée de Wavre 120, 1050 Ixelles, Belgium</p>
        <div class="row contact-form">
              <div class="col-lg-12">
              <div class="form-field">
               <i class="fa fa-pencil"></i>
                <textarea class="input-message placeholder" placeholder="Any Other Instructions" rows="3" id="messagee" required></textarea>  
              </div>
              </div>
            </div>
        <h5> Payment Options</h5>
        <div class="row">
        <div class="col-lg-1 col-xs-1"><span class="dot"></span></div>
            <div class="col-lg-4 col-xs-6"><h6>Cash</h6></div></div>
             <div class="row">
        <div class="col-lg-1 col-xs-1"><span class="dot1"></span></div>
            <div class="col-lg-7 col-xs-6"><h6> Card (Not currently available)</h6></div></div>
            </div>
            <div class="col-lg-1 col-sm-1 col-md-1"></div>
            <div class="col-lg-4 col-sm-4 col-md-4">
                        <div style="display: flex;"><svg  width="24px" height="24px" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="presentation" aria-hidden="true" focusable="false"><path d="M17.8333 7.83325V2.83325H6.16665V7.83325H2.83331V16.1666C2.83331 18.9166 5.08331 21.1666 7.83331 21.1666H16.1666C18.9166 21.1666 21.1666 18.9166 21.1666 16.1666V7.83325H17.8333ZM8.66665 5.33325H15.3333V7.83325H8.66665V5.33325Z" fill="#000000"></path></svg><h6 style="line-height: 27px;">&nbsp;&nbsp;From:Shezan</h6></div>
                <div style="display: flex;">
            <svg  width="24px" height="24px" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="presentation" aria-hidden="true" focusable="false"><path d="M12 2.83398C6.91671 2.83398 2.83337 6.91732 2.83337 12.0007C2.83337 17.084 6.91671 21.1673 12 21.1673C17.0834 21.1673 21.1667 17.084 21.1667 12.0007C21.1667 6.91732 17.0834 2.83398 12 2.83398ZM17 13.6673H10.3334V5.33398H12.8334V11.1673H17V13.6673Z" fill="#000000"></path></svg>
            <h6 style="line-height: 27px;">&nbsp;&nbsp;Ready in 35-45 min</h6></div>
        
                <hr>
           <div class="row">
            <div class="col-lg-9 col-sm-9 col-md-9 col-xs-6"><p style="text-align:left">Subtotal
           <a style="cursor:pointer" data-toggle="popover" data-placement="auto" id="test">.Items</a>
<div id="myPopoverContent">
    <button  type="button" class="close" data-dismiss="popover"> ×  </button>
                    <h5>Your Order</h5>
                    <p>From:<span style="font-size:15px;font-weight: bold;">Shezan</span></p>
                    <div id="staticdata"> </div>
        <a href="product_order.php" >See menu</a>            
</div>
       

           </p></div> 
             <div class="col-lg-3 col-sm-3 col-md-3 col-xs-6"><p style="text-align:right" class="tp"></p></div>
          </div>
          <div class="row">
           <div class="col-lg-9 col-sm-9 col-md-9 col-xs-6"><p style="text-align:left">Discount</p></div> 
             <div class="col-lg-3 col-sm-3 col-md-3 col-xs-6"><p style="text-align:right" class="d"></p></div>
          </div>
          <div class="row">
           <div class="col-lg-9 col-sm-9 col-md-9 col-xs-6"><p style="text-align:left">Delivery fee</p></div> 
             <div class="col-lg-3 col-sm-3 col-md-3 col-xs-6"><p style="text-align:right">€2.50</p></div>
          </div>
          <div class="row">
           <div class="col-lg-9 col-sm-9 col-md-9 col-xs-6"><h6 style="text-align:left">Total</h6></div> 
             <div class="col-lg-3 col-sm-3 col-md-3 col-xs-6"><h6 style="text-align:right" class="gt"></h6></div>
          </div>
             <hr>
       <div class="dh"><div class="f4"><span class="bw bx c9 ao f5">Terms:</span><span class="as bx c9 ao f5"> By clicking the button to place your order, you agree to </span><a href="#" class="an ao ap as bx c9 f5">Shezan.be Delivery Services Agreement</a></div></div>
      
       <div class="form-submit mb-30 text-center">
                 <button id="pickup_order" name="pickup_order" type="submit" class="button uppercase ">Place Order</button>
              </div>
            </div>
        </div>
       </div>
       </div>
       

</div>
</div>

 
<?php require_once('footer.php'); ?>

<script type="text/javascript">
 var checkout = JSON.parse(window.localStorage.getItem('checkoutString'));
    var html = "<table>";
          for (var i = 0; i < checkout.length; i++) {
         html+="<tr>";
        html+="<td>"+checkout[i].quantity+"</td>";
        html+="<td>"+checkout[i].name+"</td>";
        html+="<td>€"+checkout[i].price+"</td>";
        
        html+="</tr>";

    }
    html+="</table>";
    $("#staticdata").html(html);
    
  $("#meetatdoor").click(function(){
    $("#leaveatdoorinput1").show();

  });

  $("#meetoutside").click(function(){
      $("#leaveatdoorinput1").hide();
  });

    
</script>
<script>
var tpricee = JSON.parse(window.localStorage.getItem('totalPrice'));
var dii=tpricee * 0.1;
var gtt=tpricee - dii + 2.5;
var tprice = tpricee.toFixed(2);
var di = dii.toFixed(2);
var gt = gtt.toFixed(2);
$(".tp").html("€"+tprice);
$(".d").html("€"+di);
$(".gt").html("€"+gt);
var a = JSON.parse(window.localStorage.getItem('address'));
document.getElementById("search_input").value = a;
$(document).ready(function(){
$("#pickupid").hide();
  $("#deliverybtn").click(function(){
    $("#pickupid").hide();
    $("#deliveryid").show();

  });

 $("body").load(function(){
    $("#pickupid").hide();
    $("#deliveryid").show();

  });

  $("#pickupbtn").click(function(){
      $("#deliveryid").hide();
    $("#pickupid").show();
  });
});
//place api
 $(document).ready(function () {
    var searchInput = 'search_input';
    var autocomplete;
    var lat1;
    var lon1;
    var  distanceresult
    var lat2=50.836498;
    var lon2=4.367400;
    var unit='K';
    var autocomplete;
    var lat1;
    var lon1;
    var lat2=50.836498;
    var lon2=4.367400;
    var unit='K'
    autocomplete = new google.maps.places.Autocomplete((document.getElementById(searchInput)), {
        types: ['geocode'],
    });
	
    google.maps.event.addListener(autocomplete, 'place_changed', function () {
        var near_place = autocomplete.getPlace();
		lat1= near_place.geometry.location.lat();
        lon1= near_place.geometry.location.lng();
        distanceresult =distance(lat1, lon1, lat2, lon2, unit);
        var distanceresultcheck=distanceresult;
  if(distanceresultcheck>5.000){
     swal({
  title: "Ohh Sorry",
  text: "Delievery Not in This Area Only Pick Up",
  icon: "warning",
  dangerMode: true,
})
   place_order.disabled = true;
  }
  else{
        place_order.disabled = false;
  }
    });
});
function distance(lat1, lon1, lat2, lon2, unit) {
	 if ((lat1 == lat2) && (lon1 == lon2)) {
		return 0;
	    }
	else {
		var radlat1 = Math.PI * lat1/180;
		var radlat2 = Math.PI * lat2/180;
		var theta = lon1-lon2;
		var radtheta = Math.PI * theta/180;
		var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
		if (dist > 1) {
			dist = 1;
		}
		dist = Math.acos(dist);
		dist = dist * 180/Math.PI;
		dist = dist * 60 * 1.1515;
		if (unit=="K") { dist = dist * 1.609344 }
		if (unit=="N") { dist = dist * 0.8684 }
		return dist;
	}
}
//insert data
$(document).ready(function(){
            $("#place_order").click(function(){
                 var address=$("#search_input").val();
                 var floor=$("#floor").val();
                 var busines_name=$("#busines_name").val();
                 var message=$("#message").val();
                //localstorage data
                var ids=[];
                var names=[];
                var quantities=[];
                var delay = 3000; 
                 var url = 'user_panel/active_order.php'
                
          var checkout = JSON.parse(window.localStorage.getItem('checkoutString'));
          for (var i = 0; i < checkout.length; i++) {
          var id=checkout[i].id;
          var name=checkout[i].name;
          var quantity=checkout[i].quantity;
            ids.push(id);
//            names.push(name);
            quantities.push(quantity);
          }
          
           if(address!=""){
                $.ajax({
                    url:'action.php',
                    method:'POST',
                    data:{
                        address:address,
                        floor:floor,
                        busines_name:busines_name,
                        message:message,
                        ids:ids,
//                        names:names,
                        quantities:quantities,
                        
                    },
                   success:function(data){
                       if(data){
                       swal({
                       title: "Thank you for your order.",
                       text: "You can now see all your active and past orders in your My Orders section.",
                       icon: "success",
                       button: false,
                           });
                       localStorage.removeItem("checkoutString");
                        localStorage.removeItem("products");
                        localStorage.removeItem("address");
                        localStorage.removeItem("distanceresultcheck");
                       setTimeout(function(){ window.location = url; }, delay);
                          }
  
                   }
                });
            }
             else{
                  swal("Please fill all the field !!");
                }
            });
        });
 //insert data pickup
 $(document).ready(function(){
            $("#pickup_order").click(function(){
                 var address=" Chaussée de Wavre 120, 1050 Ixelles, Belgium";
                 var floor="1";
                 var busines_name="Shezan";
                 var message=$("#messagee").val();
                //localstorage data
                 var ids=[];
                 var names=[];
                 var quantities=[];
                 var delay = 3000; 
                 var url = 'user_panel/active_order.php'
                
          var checkout = JSON.parse(window.localStorage.getItem('checkoutString'));
          for (var i = 0; i < checkout.length; i++) {
          var id=checkout[i].id;
          var name=checkout[i].name;
          var quantity=checkout[i].quantity;
            ids.push(id);
//            names.push(name);
            quantities.push(quantity);
          }
           if(address!="" && floor!="" && busines_name!=""){
                $.ajax({
                    url:'action.php',
                    method:'POST',
                    data:{
                        address:address,
                        floor:floor,
                        busines_name:busines_name,
                        message:message,
                        ids:ids,
//                        names:names,
                        quantities:quantities,
                        
                    },
                   success:function(data){
                       if(data){
                       swal({
                       title: "Thank you for your order.",
                       text: "You can now see all your active and past orders in your My Orders section.",
                       icon: "success",
                       button: false,
                       timer: 3000
                           });
                        localStorage.removeItem("checkoutString");
                        localStorage.removeItem("products");
                        localStorage.removeItem("address");
                        localStorage.removeItem("distanceresultcheck");
                        setTimeout(function(){ window.location = url; }, delay);
                          }
  
                   }
                });
            }
             else{
                  swal("Please fill all the field !!");
                }
            });
        });
       
</script>
<script>
$('[data-toggle=popover]').popover({
    content: $('#myPopoverContent').html(),
    html: true
}).click(function() {
    $(this).popover('show');
});
$(document).on("click", ".close" , function(){
        $(this).parents(".popover").popover('hide');
    });
 
</script>
<?php
}
else{
   echo "<script>location='sign_up.php'</script>";   
}
?>