<?php
session_start();
require_once('database.php');
?>
<!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>
<link href="//db.onlinewebfonts.com/c/2e27d72b2e0dca4d9a59992fb6fdcc11?family=OronteusFinaeusW01-SmCaps" rel="stylesheet" type="text/css"/>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script type="text/javascript" src="script/cart.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" />
<!-- revolution slider -->
<link rel="stylesheet" type="text/css" href="revolution/css/settings.css">
<link rel="stylesheet" type="text/css" href="revolution/css/navigation.css">

<!-- main style -->
<link rel="stylesheet" type="text/css" href="css/style.css" />

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

<!-- Style customizer -->
<link rel="stylesheet" type="text/css" href="#" data-style="styles" />
<link rel="stylesheet" type="text/css" href="css/style-customizer.css" />
<!-- api libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key=AIzaSyCczanG9mcvAJVWNMyg1ajBc3IkecGkeuk"></script>
<!--fixed header--> 
<style>
   
    .badge-notify{
    background:red;
    position:relative;
    top: -20px;
    right: 10px;
  }
  .my-cart-icon-affix {
    position: fixed;
    z-index: 999;
  }
        .card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
  margin: 5px;
  text-align: center;
 border-radius: 5px;
}
.card:hover{
 box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
        }
.price {
  color: grey;
  font-size: 22px;
}
@media screen and (max-width: 768px) {

#abcd {
    position: fixed;
    z-index: 99999;
    bottom: 10px;
    padding: 5px;
    color: #E93E21;
    
}
#back-to-top .top{
   bottom: 10px;  
}



}





.loader {
  height: 20px;
  width: 250px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.loader--dot {
  animation-name: loader;
  animation-timing-function: ease-in-out;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  height: 20px;
  width: 20px;
  border-radius: 100%;
  background-color: black;
  position: absolute;
  border: 2px solid white;
}
.loader--dot:first-child {
  background-color: #8cc759;
  animation-delay: 0.5s;
}
.loader--dot:nth-child(2) {
  background-color: #8c6daf;
  animation-delay: 0.4s;
}
.loader--dot:nth-child(3) {
  background-color: #ef5d74;
  animation-delay: 0.3s;
}
.loader--dot:nth-child(4) {
  background-color: #f9a74b;
  animation-delay: 0.2s;
}
.loader--dot:nth-child(5) {
  background-color: #60beeb;
  animation-delay: 0.1s;
}
.loader--dot:nth-child(6) {
  background-color: #fbef5a;
  animation-delay: 0s;
}
.loader--text {
  position: absolute;
  top: 200%;
  left: 0;
  right: 0;
  width: 4rem;
  margin: auto;
}
.loader--text:after {
  content: "Loading";
  font-weight: bold;
  animation-name: loading-text;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes loader {
  15% {
    transform: translateX(0);
  }
  45% {
    transform: translateX(230px);
  }
  65% {
    transform: translateX(230px);
  }
  95% {
    transform: translateX(0);
  }
}
@keyframes loading-text {
  0% {
    content: "Loading";
  }
  25% {
    content: "Loading.";
  }
  50% {
    content: "Loading..";
  }
  75% {
    content: "Loading...";
  }
}





</style>
<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover();   
});
</script>
</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>-->


<div id="loading">
  <div id="loading-center">
      

<div class='container'>
  <div class='loader'>
    <div class='loader--dot'></div>
    <div class='loader--dot'></div>
    <div class='loader--dot'></div>
    <div class='loader--dot'></div>
    <div class='loader--dot'></div>
    <div class='loader--dot'></div>
    <div class='loader--text'></div>
  </div>
</div>

  </div>
</div>
<!--header -->
<header id="header" class="header-4 white-bg">
  <!-- menu start -->
      <nav id="menu-1" class="mega-menu ">
        <!-- menu list items container -->
        <section class="menu-list-items">
          
            <div class="row">
              <div class="col-lg-2 col-md-2 col-sm-2">
                     <!-- menu logo -->
                <ul class="menu-logo">
                  <li class="head-info">
                    <a href="index.php"><img src="images/shezan.png"  alt="logo" style="height: 100px;width: 200px;padding-top: 10%;"> </a>
                  </li>
                 </ul>
                   </div>
                  <div class="col-lg-3 col-md-3 col-sm-3">
                      <div class="row contact-form" style="margin-top:20px">
        <div class="col-lg-12 col-sm-12 col-md-12">
            <div class="form-field  contact-form" style="background: white;">
                <i class="fa fa-map-marker"></i>
            <input id="search_input1" class="web placeholder" type="text" placeholder="Enter Delivery Address"  value="" onchange="myFunction(this.value)">
          </div>
            </div>
        </div>
        </div>
                <!--<div class="col-lg-2 col-md-2">-->
        
                <!--  </div> -->
                  <div class="col-lg-5 col-md-5 col-sm-5">
                       <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  class="col-lg-1 col-md-1">
           <i id="abcd" class="fa fa-shopping-bag my-cart-icon" style="margin-left:05px;font-size:34px;margin-top:20px;color:white">
          <span class="badge badge-notify my-cart-badge"></span></i>
                  </div>
            </div>
    
    </section>
   </nav>
  <!-- menu end -->
</header> 
<!--=================================
header -->
  <script>
 $(document).ready(function () {
    var search_input1 = 'search_input1';
    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(search_input1)), {
        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: "Delivery Not in This Area Only Pick Up",
  icon: "warning",
  buttons: [false,  "ok!"],
  dangerMode: true,
})
.then((willDelete) => {
  if (willDelete) {
     var address=$("#search_input1").val();
     window.localStorage.setItem('address', JSON.stringify(address));
     window.localStorage.setItem('distanceresultcheck', JSON.stringify(distanceresultcheck));
     window.location.assign("product_order.php");
    
  } 
});
  }
  else{
   var address=$("#search_input1").val();
   window.localStorage.setItem('address', JSON.stringify(address));
   window.localStorage.setItem('distanceresultcheck', JSON.stringify(distanceresultcheck));
   window.location.assign("product_order.php");
  }
    });
});
         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;
	}
}
var a = JSON.parse(window.localStorage.getItem('address'));
document.getElementById("search_input1").value = a;
var d = distanceresultcheck;
document.getElementById("km").innerHTML = (d.toFixed(2));
</script>

